Engineered for Visual Clarity

Clean design syntax, responsive UI components, and state-of-the-art layout engines packed into a browser-based workflow.

Text-to-Diagram Engine

Define components, structures, and relationships using a clean, readable DSL. Watch it compile instantly entirely client-side.

Bidirectional Drag & Drop

Arrange components freely by dragging them on the grid. Position coordinates automatically round and write back to your DSL code in real time.

PlantUML Translator (Beta)

Paste and translate standard PlantUML sequence, activity, or class diagrams into DrakoFlow DSL instantly with case-insensitive component matching.

Interactive HTML Exporter

Export your diagram as a standalone, single-file HTML player equipped with interactive zooming, a navigation minimap, tag-based filtering, and a DSL code viewer.

Bidirectional Highlights

Hovering over components on the canvas instantly highlights their corresponding declaration lines in the editor gutter for seamless navigation.

Serverless URL Sharing

Share diagrams instantly without databases or user accounts. The entire diagram state is compressed and embedded directly within the share link.

Nested Scopes & Subsystems

Group system microservices and structural boundaries visually using standard UML Package directories or VerticalContainers.

Interactive Minimap

Keep track of complex diagrams and coordinate spaces at a glance using a toggleable navigation minimap panel.

Snap to Grid Alignment

Enforce clean layout alignment and pixel-perfect rendering by locking element positions to grid cells with customizable sizing.

Interactive Charts & Data

Embed Bar, Line, Pie, and 3D Donut charts directly in diagrams with dynamic tooltips, animated slice detachment, percentage toggles, and theme synchronization.

Mindmaps & Idea Trees

Brainstorm, organize thoughts, and structure roadmaps using @layout: mindmap. Automatically calculates balanced hierarchical tree layouts linked by smooth cubic Bézier curves.

Git Flow & Modular Engines

Pluggable rendering architecture featuring specialized Git Flow branch lanes, smooth quadratic Bézier merge curves, slanted commit hash badges, and custom flow orientations.

Native IDE Extensions

Edit .drako DSL files seamlessly in your favorite editor with live split-view diagram previews.

VS Code Extension

v1.0.0 • VSIX

Live split-view preview, syntax highlighting, and auto-sync inside Visual Studio Code.

Side-by-side live diagram preview panel
Auto-opens preview when opening .drako files
Two-way code & visual position sync

Download VSIX Extension

code --install-extension drakoflow-vscode-1.0.0.vsix

IntelliJ IDEA Plugin

v1.0.0 • ZIP

Native split-view diagram engine for JetBrains IDEs (IntelliJ, WebStorm, PyCharm, CLion, PhpStorm).

Native split view (Editor | Split | Preview)
Embedded JBCef Chromium preview engine
Zero setup, instant two-way document sync

Download IntelliJ Plugin

Settings -> Plugins -> ⚙️ -> Install Plugin from Disk...

Chrome Extension

v1.0.0 • ZIP

Silent browser extension that transforms ```drako markdown blocks into live interactive HTML diagram players across web pages.

Auto-renders in GitHub, GitLab, ChatGPT, Notion, Jira
Real-time MutationObserver for streaming & dynamic pages
Full interactive controls (Pan, Zoom, Minimap, Code View)

Download Chrome Extension

chrome://extensions -> Developer Mode -> Load unpacked

Simple DSL Reference

Master the syntax in minutes. Learn the core component declarations and structure relationships.

Rectangle Component

The standard rectangular box, supporting corner rounding overrides and local inline theme customizations.

label: display title of the node
rx / ry: corner rounding values
themeOverride: fill, border, text colors

Database: Rectangle {
  label: "User Store"
  rx: 8
  ry: 8
  themeOverride: {
    backgroundColor: "#1e1e2e"
    borderColor: "#cdd6f4"
    textColor: "#f5e0dc"
  }
}

Package (UML)

Renders a UML folder-style boundary tab containing other components. Extremely useful for microservices domain scoping and module boundaries.

Nest any shapes or relationships inside the braces
Fully supports nested layout alignment automatically

MyPackage: Package {
  label: "billing.domain"
  gap: 12
  padding: 16

  BillingService: UMLComponent {
    label: "BillingService"
  }

  LedgerDB: Cylinder {
    label: "Ledger DB"
  }
}

Interactive Charts (Pie, Donut, Bar & Line)

Embed rich data visualizations seamlessly into architecture and system workflows. Supports 3D extrusion, donut holes, animated hover slice detachment, interactive legends, and dynamic light/dark theme adaptation.

Standalone: Pie { items: [...] is3D: true }
Multi-Series: Chart { Bar { ... } Line { ... } }
Controls: showLegend, showPercentage, donut, depth

RevenueShare: Pie {
  title: "Revenue by Channel"
  width: 550
  height: 320
  is3D: true
  showLegend: true
  showPercentage: true
  items: [
    { label: "SaaS Subscriptions", value: 58, color: "#3b82f6" }
    { label: "Enterprise Licenses", value: 27, color: "#10b981" }
    { label: "Cloud Services", value: 15, color: "#f59e0b" }
  ]
}

Mindmap & Idea Trees

Declare clean hierarchical trees and concept maps with @layout: mindmap. The layout engine computes node levels, child subtrees, and renders organic cubic Bézier connector branches automatically.

Directive: @layout: mindmap
Multi-Directional / Single: @mindmap: { direction: "radial" } or left/right
Root & Child nodes use standard components (Process, Rectangle, etc.)

@layout: mindmap

Core: Process {
  label: "App Architecture"
  themeOverride: {
    backgroundColor: "#3b82f6"
    textColor: "#ffffff"
  }
}

Frontend: Process { label: "Client Web App" }
API: Process { label: "REST / GraphQL Gateway" }
Worker: Process { label: "Async Task Pipeline" }

Core -> Frontend
Core -> API
Core -> Worker

Tags & Filtering

Categorize components with metadata tags to group them and dynamically filter the preview diagram view.

Syntax: @tags: ["tag1", "tag2"]
Decorators are placed directly above component definitions
Interactive filter buttons appear automatically on the preview panel

@tags: ["frontend", "client"]
WebClient: Process {
  label: "Frontend Web Client"
}

@tags: ["backend", "api"]
AuthService: Cube {
  label: "Auth Service"
}

Relationships & Exterior Endpoints

Define routes linking elements or connecting canvas edges. The engine automatically routes arrows cleanly, avoiding overlaps.

Syntax: SourceID -> TargetID: "Label"
Exterior directions: LEFT, RIGHT, TOP, BOTTOM
Arrow lines adjust in real time during drags

Client: Process {
  label: "Client App"
  lifeline: true
}

LEFT -> Client: "External Request"
Client -> Gateway: "Token verification"
Gateway -> RIGHT: "Log response"

Git Flow & Multi-Component Diagrams

Generate Git branching and merging flows with horizontal branch tracks, curved forks/merges, slanted commit hash badges, and release tags — combined seamlessly with Text, Cards, Containers, and architecture shapes.

Directive: @layout: git-flow
Components: Branch, Commit, plus any Text, VerticalContainer, or Shapes
Commit types: normal, merge, highlight, reverse

@layout: git-flow

Title: Text { label: "Release Pipeline"; x: 40; y: 15 }

Main: Branch {
  label: "main"
  c0: Commit { hash: "0-init" }
  c2: Commit { type: "merge"; tag: "v1.0" }
}
Develop: Branch {
  label: "develop"
  c1: Commit { hash: "1-feat" }
}
c0 -> c1
c1 -> c2
c0 -> c2

Notes: VerticalContainer {
  label: "Policies"
  x: 40; y: 280
  Rule: Text { label: "PR required for main" }
}

Text-to-Diagram, Refined.