VS Code Extension

Bring the power of DrakoFlow directly into your local development environment. Write diagram scripts, structure your documentation, and preview results side-by-side with real-time bidirectional synchronization.

Auto-Open Preview: Automatically opens the interactive preview panel to the side whenever you open a .drako file.
Component Library: Access standard elements from the sidebar dock to quickly insert diagram nodes into your DSL.
100% Offline-First: Renders your diagrams entirely locally within VS Code without any external network request.

Download Extension (.vsix) All Versions on GitHub v1.0.0 • Offline Installer

How to Install

Download the drakoflow-vscode-1.0.0.vsix package using the button on the left.
Install it from your command line:
code --install-extension drakoflow-vscode-1.0.0.vsix
Alternatively: Open VS Code, navigate to the Extensions tab (Ctrl+Shift+X), click the ... menu at the top-right, choose Install from VSIX..., and select the downloaded file.

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.

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.