Mermaid Diagrams

Create diagrams using Mermaid syntax. Mermaid is a popular text-based diagramming tool that supports flowcharts, sequence diagrams, and more. With ToDiagram's Mermaid support, you can visualize your diagrams in real-time as you edit the Mermaid code.

Example

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

sequenceDiagram
    participant Client
    participant APIGateway as API Gateway
    participant AuthService as Auth Service

    Client->>APIGateway: Request /data
    APIGateway->>AuthService: Validate Token
    AuthService-->>APIGateway: Token Valid
    APIGateway-->>Client: 200 OK (Data)

Supported Syntax

Supported Mermaid syntax includes:

• Flowchart: flowchart/graph directions (LR, TB, BT, RL), node shapes (see below), connections, and edge labels.
• Sequence: sequenceDiagram with participants, message arrows, notes, activations, grouped blocks (loop, alt, opt), and autonumber.

Node Shapes

All 13 of Mermaid's short-syntax flowchart shapes render as their declared silhouette:

flowchart LR
    Start([Start]) --> Decide{Approved?}
    Decide -->|yes| Store[(PostgreSQL)]
    Decide -->|no|  End(((Done)))
    Store --> End

Edges automatically anchor to the silhouette of non-rectangular shapes (instead of the bounding box) so connections meet circles, diamonds, and hexagons cleanly.

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.

flowchart LR
    A["fa:desktop Web Server"] --> B["fa:database Database"]

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