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, connections, and edge labels.
• Sequence: sequenceDiagram with participants, message arrows, notes, activations, grouped blocks (loop, alt, opt), and autonumber.

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