Mermaid Flowchart Generator

Mermaid flowcharts: diagrams as code, rendered as SVG

Mermaid is a JavaScript library that turns a tiny markdown-flavoured syntax into interactive SVG diagrams entirely in the browser. It was created in 2014 by Knut Sveidqvist with one stubborn goal: let engineers describe architecture, flows, and processes in plain text so the diagrams live in git next to the code, get reviewed in pull requests, and never go out of sync with the system they document. A decade later Mermaid is a first-class citizen on GitHub (auto-rendered inside fenced ```mermaid blocks since 2022), GitLab, Notion, Obsidian, Azure DevOps, and is available in VS Code through the Markdown Preview Mermaid Support extension.

Because the source is text, you can grep it, diff it, and generate it from scripts. The trade-off is that Mermaid does automatic layout — you describe nodes and edges, not coordinates — so very large diagrams can become hard to read; for that case Graphviz/DOT or PlantUML offer more control, and Excalidraw is the freehand alternative for whiteboard-style sketches.

Diagram families supported by Mermaid

• flowchart (alias graph) — directed graphs, the focus of this generator
• sequenceDiagram — temporal interaction between actors
• classDiagram — UML class hierarchy and relationships
• stateDiagram-v2 — finite state machines
• erDiagram — entity-relationship for databases
• gantt — project timelines
• pie, quadrantChart, sankey — quick data visuals
• journey, mindmap, timeline, requirementDiagram, gitgraph — domain-specific

Flowchart syntax: directions, shapes, and connectors

A flowchart starts with a direction keyword: TD / TB (top-down), LR (left-right), BT (bottom-top), or RL (right-left). Nodes are declared by id and a shape; edges connect ids:

flowchart TD
  A[Start] --> B{Logged in?}
  B -->|yes| C(Dashboard)
  B -->|no| D[/Login form/]
  D --> E[(Database)]
  E --> B
  C --> F((End))

Common shape brackets: [ ] rectangle, ( ) rounded, (( )) circle, ((( ))) double circle, { } rhombus (decision), [/ /] and [\ \] parallelograms (I/O), [[ ]] subroutine, [( )] cylinder (database), and >flag] asymmetric tag.

Connector arsenal: --> arrow, --- plain line, -.-> dotted, ==> thick, --text--> labelled, <--> bidirectional.

Subgraphs, styling, and click handlers

Group nodes into a box with subgraph title ... end. Define reusable styles with classDef ok fill:#d1fae5,stroke:#10b981 and attach them with class A,B ok. Make a node clickable with click A "https://example.com" _blank. The official live editor at mermaid.live lets you experiment with theme variables, export to SVG/PNG, and copy the share URL into a PR description.

When to reach for Mermaid (and when not to)

Mermaid is excellent for linear flows (auth, payment, deployment pipeline) and small architecture sketches you want to keep in markdown. It struggles past ~50 nodes — auto-layout produces tangled edges and labels collide. For dense network diagrams, prefer Graphviz/DOT (you control rank/cluster) or PlantUML. For free-form whiteboard-style images, Excalidraw or draw.io export to SVG and live well in a docs folder.

FAQ

Is Mermaid better for architecture or process flows? Process flows. Linear, branching workflows render well; deep multi-layer system architecture often benefits from C4-Model notation or dedicated tools.

Can I customise colours and fonts? Yes, via classDef, the %%{init: { 'theme': 'forest' } }%% directive, or full theme variables passed to mermaid.initialize().

Does Mermaid play nicely with git? Yes — diagrams live in .md files, so they diff line-by-line in pull requests and never drift from the version-controlled source.

How do I render Mermaid in my own page? Drop <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script> and call mermaid.initialize({ startOnLoad: true }); any <div class="mermaid"> with valid source becomes an SVG.

Can I export to PNG for slides? Yes — the live editor exports SVG and PNG directly; for headless export use the @mermaid-js/mermaid-cli (mmdc -i diagram.mmd -o out.png).