DrakoFlow Examples

Explore real-world architecture flowcharts, sequence diagrams with sub-modules, and multi-layer container setups. Open any example directly in the live interactive player or launch it in the editor.

Simple Process Flowchart

Flowchart Basic DSL

Demonstrates basic shape declarations (Rectangle, Process) and simple directed (`->`) and bidirectional (`<->`) relationship connections.

Open Fullscreen Player

Multi-Layer Architecture with Tags & Containers

Sequence Diagram Vertical Container @tags Metadata

Demonstrates complex architecture layouts using `VerticalContainer` components, custom color theme overrides, styled connectors, and `@tags` decorator metadata for interactive layer filtering.

Open Fullscreen Player

Lifeline Sequence with Activation Steps & Sub-Modules

Architecture Sequence Diagram Sub-Modules

Shows component headers with lifelines (`lifeline: true`), child version sub-modules attached to lifelines, bridge arcs over intermediate vertical lifelines, and exterior call events (`LEFT -> ...`).

Open Fullscreen Player

Git Flow Branching & Merging Workflow

Git Flow @layout: git-flow Branch Lanes

Visualizes a complete Git branching model with main, develop, and feature lanes, smooth Bézier merge/fork curves, slanted -45° commit hash badges, and specialized merge nodes.

Open Fullscreen Player

Mindmap Brainstorming & Ontology Diagram

Mindmap @layout: mindmap Radial Branches

Demonstrates the specialized radial mindmap layout engine with automatic root node detection, branch theme color inheritance, and organic Bézier connections.

Open Fullscreen Player

Interactive 3D Bar & Line Chart

Chart 3D Bar Extrusion Line Series

Demonstrates the `Chart` component with custom numeric ranges (`4000 -> 11000`), formatted category axes, 3D columnar bar extrusion (`is3D: true`), line plots, and interactive hover tooltips.

Open Fullscreen Player

Interactive Pie & Donut Chart

Pie Chart Custom Colors Interactive Legend

Demonstrates the `Pie` component with custom slice labels, numeric values, custom color palettes (`colors: [#f0f0f0, #ff0000, ...]`), slice explosion hover animations, tooltips, and interactive legend.

Open Fullscreen Player

More Examples Coming Soon!

Have a diagram pattern or workflow to share? DrakoFlow is open-source and community-driven. Submit your `.drako` scripts on GitHub to feature them in the gallery.

Submit Example on GitHub