# pazvanti/drakoflow architecture

> Architecture diagram of the GitHub repository pazvanti/drakoflow, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-26). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/pazvanti/drakoflow
- Repository: https://github.com/pazvanti/drakoflow

## Overview

DrakoFlow is an offline-first DSL-to-diagram editor and renderer, with browser and IDE preview integrations. The main workflow is editing or loading DSL, parsing it, constructing diagram components, selecting a layout/rendering engine, and interacting with the SVG result; users can also export diagrams and translate PlantUML. The README documents additional capabilities, including mindmaps, Git Flow, sharing, and Chrome markdown rendering. Some subsystem links are based on README descriptions because their implementation was not sampled.

Main entry points: [`src/main.ts`](https://github.com/pazvanti/drakoflow/blob/main/src/main.ts) (Web editor), [`src/engine/EngineRegistry.ts`](https://github.com/pazvanti/drakoflow/blob/main/src/engine/EngineRegistry.ts) (Engine registry), [`src/engine/StandardEngine.ts`](https://github.com/pazvanti/drakoflow/blob/main/src/engine/StandardEngine.ts) (Standard engine), [`src/engine/componentFactory.ts`](https://github.com/pazvanti/drakoflow/blob/main/src/engine/componentFactory.ts) (Component factory)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_editor["Editor workflow"]
  node_main["Web editor<br/>[main.ts]"]
  node_parser["DSL parser<br/>[parser.ts]"]
  node_catalog["Component catalog"]
end

subgraph group_render["Diagram rendering"]
  node_component_factory["Component factory"]
  node_components["Diagram components"]
  node_registry["Engine registry<br/>[EngineRegistry.ts]"]
  node_standard["Standard engine<br/>[StandardEngine.ts]"]
  node_layout["Flow layout<br/>[layout.ts]"]
  node_relationships["Relationship renderer"]
  node_gitflow["Git Flow engine<br/>[GitFlowEngine.ts]"]
  node_mindmap["Mindmap engine<br/>[MindmapEngine.ts]"]
end

subgraph group_extensions["Editor integrations"]
  node_vscode["VS Code preview<br/>[previewPanel.ts]"]
  node_intellij["IntelliJ preview"]
  node_chrome["Chrome renderer<br/>[content.ts]"]
end

subgraph group_utilities["Import and export"]
  node_plantuml["PlantUML translator"]
  node_markdown["Markdown parser<br/>[MarkdownParser.ts]"]
  node_file_handlers["File and PNG export<br/>[FileHandlers.ts]"]
  node_html_export["HTML player export"]
end

node_user(("Diagram author"))
node_webpage(("Web page"))

node_user -->|"edits DSL"| node_main
node_main -->|"parses DSL"| node_parser
node_main -->|"browses types"| node_catalog
node_main -->|"selects engine"| node_registry
node_registry -->|"dispatches"| node_gitflow
node_registry -->|"dispatches"| node_mindmap
node_registry -->|"fallback dispatch"| node_standard
node_standard -->|"creates components"| node_component_factory
node_standard -->|"lays out"| node_layout
node_standard -->|"renders links"| node_relationships
node_gitflow -->|"creates components"| node_component_factory
node_mindmap -->|"creates components"| node_component_factory
node_component_factory -->|"instantiates"| node_components
node_main -.->|"translates input"| node_plantuml
node_main -->|"exports PNG"| node_file_handlers
node_main -->|"exports player"| node_html_export
node_main -.->|"previews in"| node_vscode
node_main -.->|"previews in"| node_intellij
node_webpage -->|"contains markdown"| node_chrome
node_chrome -->|"extracts blocks"| node_markdown
node_chrome -.->|"renders player"| node_html_export

click node_main "https://github.com/pazvanti/drakoflow/blob/main/src/main.ts"
click node_parser "https://github.com/pazvanti/drakoflow/blob/main/src/dsl/parser.ts"
click node_catalog "https://github.com/pazvanti/drakoflow/blob/main/src/catalog/ComponentCatalog.ts"
click node_component_factory "https://github.com/pazvanti/drakoflow/blob/main/src/engine/componentFactory.ts"
click node_components "https://github.com/pazvanti/drakoflow/tree/main/src/components"
click node_registry "https://github.com/pazvanti/drakoflow/blob/main/src/engine/EngineRegistry.ts"
click node_standard "https://github.com/pazvanti/drakoflow/blob/main/src/engine/StandardEngine.ts"
click node_layout "https://github.com/pazvanti/drakoflow/blob/main/src/engine/layout.ts"
click node_relationships "https://github.com/pazvanti/drakoflow/blob/main/src/engine/relationshipRenderer.ts"
click node_gitflow "https://github.com/pazvanti/drakoflow/blob/main/src/engine/gitflow/GitFlowEngine.ts"
click node_mindmap "https://github.com/pazvanti/drakoflow/blob/main/src/engine/mindmap/MindmapEngine.ts"
click node_plantuml "https://github.com/pazvanti/drakoflow/blob/main/src/utils/PlantUmlTranslator.ts"
click node_markdown "https://github.com/pazvanti/drakoflow/blob/main/src/utils/MarkdownParser.ts"
click node_file_handlers "https://github.com/pazvanti/drakoflow/blob/main/src/utils/FileHandlers.ts"
click node_html_export "https://github.com/pazvanti/drakoflow/blob/main/src/utils/HTMLPlayerExporter.ts"
click node_vscode "https://github.com/pazvanti/drakoflow/blob/main/vscode-extension/src/previewPanel.ts"
click node_intellij "https://github.com/pazvanti/drakoflow/blob/main/intellij-extension/src/main/kotlin/com/drakoflow/intellij/editor/DrakoPreviewEditor.kt"
click node_chrome "https://github.com/pazvanti/drakoflow/blob/main/chrome-extension/src/content.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_main,node_parser,node_catalog toneBlue
class node_component_factory,node_components,node_registry,node_standard,node_layout,node_relationships,node_gitflow,node_mindmap toneAmber
class node_vscode,node_intellij,node_chrome toneMint
class node_plantuml,node_markdown,node_file_handlers,node_html_export toneRose
class node_user,node_webpage toneIndigo
```

## Components

### Editor workflow

- [Web editor](https://github.com/pazvanti/drakoflow/blob/main/src/main.ts): `src/main.ts`
- [DSL parser](https://github.com/pazvanti/drakoflow/blob/main/src/dsl/parser.ts): `src/dsl/parser.ts`
- [Component catalog](https://github.com/pazvanti/drakoflow/blob/main/src/catalog/ComponentCatalog.ts): `src/catalog/ComponentCatalog.ts`

### Diagram rendering

- [Component factory](https://github.com/pazvanti/drakoflow/blob/main/src/engine/componentFactory.ts): `src/engine/componentFactory.ts`
- [Diagram components](https://github.com/pazvanti/drakoflow/tree/main/src/components): `src/components`
- [Engine registry](https://github.com/pazvanti/drakoflow/blob/main/src/engine/EngineRegistry.ts): `src/engine/EngineRegistry.ts`
- [Standard engine](https://github.com/pazvanti/drakoflow/blob/main/src/engine/StandardEngine.ts): `src/engine/StandardEngine.ts`
- [Flow layout](https://github.com/pazvanti/drakoflow/blob/main/src/engine/layout.ts): `src/engine/layout.ts`
- [Relationship renderer](https://github.com/pazvanti/drakoflow/blob/main/src/engine/relationshipRenderer.ts): `src/engine/relationshipRenderer.ts`
- [Git Flow engine](https://github.com/pazvanti/drakoflow/blob/main/src/engine/gitflow/GitFlowEngine.ts): `src/engine/gitflow/GitFlowEngine.ts`
- [Mindmap engine](https://github.com/pazvanti/drakoflow/blob/main/src/engine/mindmap/MindmapEngine.ts): `src/engine/mindmap/MindmapEngine.ts`

### Editor integrations

- [VS Code preview](https://github.com/pazvanti/drakoflow/blob/main/vscode-extension/src/previewPanel.ts): `vscode-extension/src/previewPanel.ts`
- [IntelliJ preview](https://github.com/pazvanti/drakoflow/blob/main/intellij-extension/src/main/kotlin/com/drakoflow/intellij/editor/DrakoPreviewEditor.kt): `intellij-extension/src/main/kotlin/com/drakoflow/intellij/editor/DrakoPreviewEditor.kt`
- [Chrome renderer](https://github.com/pazvanti/drakoflow/blob/main/chrome-extension/src/content.ts): `chrome-extension/src/content.ts`

### Import and export

- [PlantUML translator](https://github.com/pazvanti/drakoflow/blob/main/src/utils/PlantUmlTranslator.ts): `src/utils/PlantUmlTranslator.ts`
- [Markdown parser](https://github.com/pazvanti/drakoflow/blob/main/src/utils/MarkdownParser.ts): `src/utils/MarkdownParser.ts`
- [File and PNG export](https://github.com/pazvanti/drakoflow/blob/main/src/utils/FileHandlers.ts): `src/utils/FileHandlers.ts`
- [HTML player export](https://github.com/pazvanti/drakoflow/blob/main/src/utils/HTMLPlayerExporter.ts): `src/utils/HTMLPlayerExporter.ts`

### Other components

- **Diagram author**
- **Web page**

## Connections

- Diagram author → Web editor: edits DSL
- Web editor → DSL parser: parses DSL
- Web editor → Component catalog: browses types
- Web editor → Engine registry: selects engine
- Engine registry → Git Flow engine: dispatches
- Engine registry → Mindmap engine: dispatches
- Engine registry → Standard engine: fallback dispatch
- Standard engine → Component factory: creates components
- Standard engine → Flow layout: lays out
- Standard engine → Relationship renderer: renders links
- Git Flow engine → Component factory: creates components
- Mindmap engine → Component factory: creates components
- Component factory → Diagram components: instantiates
- Web editor → PlantUML translator: translates input
- Web editor → File and PNG export: exports PNG
- Web editor → HTML player export: exports player
- Web editor → VS Code preview: previews in
- Web editor → IntelliJ preview: previews in
- Web page → Chrome renderer: contains markdown
- Chrome renderer → Markdown parser: extracts blocks
- Chrome renderer → HTML player export: renders player