❯ Mermaid Diagram Renderer

A Mermaid diagram renderer turns a text-based diagram source into an SVG image — flowcharts, sequence diagrams, class diagrams, state machines, ER schemas, Gantt charts, pies, and more. This tool runs the standard Mermaid library inside your browser tab. Source and rendered SVG never touch a server.

How to use the Mermaid renderer

1. Pick a sample or paste source. The Load sample dropdown has 7 starting points — flowchart, sequence, class, state, ER, Gantt, pie. Or paste any valid Mermaid 11 syntax.
2. Choose a theme. Default / Dark / Forest / Neutral. Renderer re-initializes when you switch.
3. Watch it render live. Every edit triggers a debounced re-render (400 ms). Parse errors surface inline.
4. Export. Copy SVG, Download SVG, or Download PNG (2x rasterized). Share link round-trips source + theme.

Quick syntax tour

Flowchart

flowchart LR
  A[Start] --> B{Check}
  B -->|yes| C[Done]
  B -->|no| D[Retry]
  D --> B

LR = left-to-right. TB, RL, BT also work. Shapes: [] rectangle, () rounded, {} diamond, (()) circle, [/ /] parallelogram, [( )] cylinder.

Sequence diagram

sequenceDiagram
  Alice->>Bob: Hi
  Bob-->>Alice: Hi back
  Note over Alice,Bob: They greeted

->> solid arrow, -->> dashed reply, Note over X,Y: for annotations. Add participant X as Long Name to control display order.

Class diagram

classDiagram
  class User {
    +UUID id
    +String name
    +login() bool
  }
  User "1" --> "*" Order

+ public, - private, # protected. Relationship arrows: --> association, *-- composition, o-- aggregation, --|> inheritance.

State diagram (v2)

stateDiagram-v2
  [*] --> Idle
  Idle --> Loading: fetch()
  Loading --> Success: 200
  Loading --> Error: 4xx
  Success --> [*]

[*] = start/end pseudostate. state Composite { … } for nested.

ER diagram

erDiagram
  USER ||--o{ ORDER : places
  USER {
    uuid id PK
    string email
  }

Cardinality: ||--|| one-to-one, ||--o{ one-to-many, }o--o{ many-to-many. Inside braces, list attributes; tag with PK, FK, or UK.

Gantt

gantt
  title Sprint
  dateFormat YYYY-MM-DD
  section Backend
    API     :a1, 2026-05-14, 3d
    Migrate :a2, after a1, 2d

dateFormat controls input parsing; output is always rendered against that format.

Pie

pie title Browser share
  "Chrome" : 64
  "Safari" : 19

One slice per "label" : value line. Percentages computed automatically.

When to reach for Mermaid

If the diagram is informational and version-controlled, Mermaid wins. If it needs interactive editing with visual tooling (collaborative whiteboard, freeform shapes), use draw.io, Excalidraw, or Figma instead.

Common errors and fixes

How it compares

mermaid.live is the canonical official editor maintained by the Mermaid team. This tool is similar in scope; the differences are the brand-consistent UI and integration with the rest of the bytefork toolset.

Privacy and security

A static HTML page with a small initial JavaScript bundle. The Mermaid library lazy-loads (~600 KB gzip) on first render. Once loaded it runs entirely in your browser tab. Source, parsed AST, and rendered SVG never leave the page. Mermaid is initialized with securityLevel: strict — HTML in node labels is sanitized, no scripts execute from diagram content.

Related tools

• Markdown ↔ HTML Converter — Mermaid blocks render natively in GitHub-flavored Markdown when wrapped in a mermaid code fence. Convert to/from HTML and inspect the wrapper.
• SVG Optimizer — shrink the rendered SVG before committing to your docs repo.
• Image Format Converter — if you need JPG/WebP instead of PNG.

Frequently asked questions