How pazvanti/drakoflow works
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: main.ts Web editor · EngineRegistry.ts Engine registry · StandardEngine.ts Standard engine · componentFactory.ts Component factory
Components 20
Editor workflow
- Web editor
src/main.ts - DSL parser
src/dsl/parser.ts - Component catalog
src/catalog/ComponentCatalog.ts
Diagram rendering
- Component factory
src/engine/componentFactory.ts - Diagram components
src/components - Engine registry
src/engine/EngineRegistry.ts - Standard engine
src/engine/StandardEngine.ts - Flow layout
src/engine/layout.ts - Relationship renderer
src/engine/relationshipRenderer.ts - Git Flow engine
src/engine/gitflow/GitFlowEngine.ts - Mindmap engine
src/engine/mindmap/MindmapEngine.ts
Editor integrations
- VS Code preview
vscode-extension/src/previewPanel.ts - IntelliJ preview
intellij-extension/src/main/kotlin/com/drakoflow/intellij/editor/DrakoPreviewEditor.kt - Chrome renderer
chrome-extension/src/content.ts
Import and export
- PlantUML translator
src/utils/PlantUmlTranslator.ts - Markdown parser
src/utils/MarkdownParser.ts - File and PNG export
src/utils/FileHandlers.ts - HTML player export
src/utils/HTMLPlayerExporter.ts
Other components
- Diagram author
- Web page
Connections 21
- 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