DrakoFlow - Text-to-Diagram Refined

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, properties, and relationships using a readable, lightweight DSL script. No coding needed.

Drag-and-Drop Positioning

Arrange objects freely by dragging. Overrides are written directly to your DSL code, preserving coordinates for subsequent loads.

Diagram Safety Lock

Toggle locks on the canvas to disable item drags. Prevents accidental modifications while viewing or exporting diagrams.

Bidirectional Highlighting

Hovering over an SVG element instantly highlights its source code definition in the editor. Cross-reference files in a flash.

Curated Themes

Toggle between stunning dark mode and light theme layouts, or completely override styles per component (background, border, text).

High-Res PNG Export

Export diagram selections or full canvases to PNG up to 4K Ultra-HD with custom paddings and background options.

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"
  }
}

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

Define routes linking elements. The engine automatically draws orthgonal arrow routes, avoiding overlaps.

Syntax: SourceID -> TargetID: "Label"
Arrow lines adjust in real time during drags

Gateway -> AuthService: "Token verification"
Gateway -> RedisCache: "Check Session"

Text-to-Diagram, Refined.