Mermaid Flowchart

Create flowcharts using Mermaid syntax for version-controlled diagrams.

Example

flowchart LR
    A[Start] --> B{Decision}
    B -->|Yes| C[Process]
    B -->|No| D[End]
    C --> D

Supported Syntax

Currently, only flowchart syntax is supported:

• flowchart LR - Left to right
• flowchart TB - Top to bottom
• Node shapes: [], (), {}, >], [()]
• Connections: -->, -.->, ==>
• Labels on connections

Icons

You can use any of the 200,000+ icons available on iconify.design. The format is set:icon-name, for example fa:user or fa:desktop. Use valid Iconify names; invalid names will not render.

{
  "id": "server",
  "label": "Web Server",
  "imageUrl": "fa:desktop"
}

Features

• Live Preview: See changes instantly as you type
• Export: Export to PNG, JPEG, or SVG
• Themes: Light and dark theme support
• Version Control: Plain text format is git-friendly