What is Flow

Flow is a local-first diagram studio. You write Mermaid source on the left, and a diagram renders on the right as you type. Nothing is uploaded — no account, no CDN, no telemetry. Diagrams autosave to your browser's localStorage and export as crisp vector or raster files.

• Live editor Syntax highlighting, bracket matching, and instant re-render.
• Every diagram type Flowcharts, sequences, class, state, ER, Gantt, and more — with 12 starter templates.
• Real exports SVG, PNG, and JPG at 1×–4×, or copy straight to the clipboard.
• Yours alone Everything runs offline; your diagrams never leave the computer.

The interface

The studio is three columns under a top bar.

Drag the splitter between the two panes to resize them; double-click it to reset to 50/50.

Create a diagram

1. Hit ＋ new diagram in the library rail, or open the templates tab and pick a starting point.
2. Type Mermaid source in the editor. With live on (the green dot), the preview re-renders as you type.
3. Prefer manual control? Turn live off and press Ctrl/Cmd + Enter to render on demand.
4. Rename it by clicking the title in the top bar. Everything autosaves — the badge flips from dirty to saved.

Save & library

There's no save button to hunt for — Flow autosaves every change to local storage. Each diagram lives in the library rail, where you can:

• Switch Click any diagram to load it into the editor.
• Rename Edit the title in the top bar (or via the item's menu).
• Duplicate Fork a copy to experiment without touching the original.
• Delete Remove diagrams you no longer need.

Export

Open the export ▾ menu in the top bar. You can save a file or copy directly to the clipboard:

Two controls in the menu shape raster output:

• scale 1× to 4× — higher scale means sharper PNG/JPG on retina screens and print.
• background transparent or solid — solid uses a colour that matches the active diagram theme.

Share links

Pick Copy share link from the export menu (or press Ctrl/Cmd + L). Flow encodes the entire diagram — name, source, and theme — into the URL's hash fragment. Anyone who opens that link in their own copy of Flow gets the diagram locally; nothing is uploaded anywhere, and the data never leaves the URL itself.

Themes

There are two independent theme controls:

• Diagram theme The theme picker in the top bar restyles the diagram itself — default, dark, forest, neutral, base — and is saved per diagram.
• Interface theme The ◐ button toggles the studio chrome between Blueprint (dark drafting-table) and Drafting (light paper). This guide follows the same setting — try the toggle in the top bar.

Keyboard shortcuts

Mermaid basics

Every diagram is plain text. The first word declares the diagram type; the lines that follow describe its contents. The examples in this reference are rendered live — hit copy on any of them and paste it into the studio to start from there.

Shared rules

• Comments Start a line with %% and it's ignored by the renderer.
• Indentation Whitespace is for readability (and required by a few types like mindmap); the studio's tidy button normalises it.
• Quoting Wrap label text in "…" when it contains spaces, punctuation, or characters the parser would otherwise read as syntax.

Flowchart

Boxes and arrows. Declare flowchart followed by a direction — TD/TB (top-down), LR (left-right), RL, or BT. Nodes are id plus a shape; edges connect them.

Node shapes

The bracket style around the label sets the shape:

Edges, labels & subgraphs

Use --> for a solid arrow, --- for a plain line, -.-> for dotted, and ==> for thick. Add a label with -->|text|. Group nodes inside a subgraph.

Sequence

Messages exchanged between participants over time. ->> is a solid call, -->> a dashed reply. Add autonumber to number messages, and use activate/deactivate or loop, alt, opt, and Note blocks for structure.

Class

UML class diagrams. Define members inside class Name { … } with visibility markers (+ public, - private, # protected). Relationships: <|-- inheritance, *-- composition, o-- aggregation, --> association.

State

Finite-state machines with stateDiagram-v2. [*] is the start or end point; A --> B : event is a labelled transition. States can nest and you can mark concurrency with --.

Entity relation

Database schemas with erDiagram. Crow's-foot cardinality lives in the connector: || exactly one, o{ zero-or-many, |{ one-or-many. Attributes go in a { … } block.

Gantt

Project timelines. Set dateFormat, group work into sections, and give each task a status (done, active), an id, a start (after otherId or a date), and a duration like 5d.

Pie

Proportions. Add showData to print values, a title, then "Label" : value rows.

Mind map

Hierarchies built purely from indentation — each deeper level is a child of the line above. The root can take a shape, e.g. root((Text)).

User journey

Map an experience. Under each section, every task is Task name: score: Actor, where the score (1–5) sets the smiley and bar height.

Git graph

Branch and merge history. commit, branch name, checkout name, and merge name — tag commits with tag: "v1.0".

Quadrant

Scatter points across two axes. Define the x-axis and y-axis labels, name the four quadrant-1..4 regions, then plot Point: [x, y] with values from 0 to 1.

Timeline

Events along a line. A title, then period : event rows — repeat the colon to attach several events to one period.