Diagram types

Mermaider supports all major Mermaid diagram types. Every type shares the same CSS token system — set Bg, Fg, and Accent once in RenderOptions and the change applies everywhere.

General-purpose directed graphs. Supports LR, TD, RL, BT orientations, subgraphs, and all node shapes.

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

Participant interaction diagrams with loops, alt blocks, and activation bars.

sequenceDiagram
    Client->>Server: GET /api/data
    Server-->>Client: 200 OK

UML class diagrams with inheritance, composition, and member visibility.

classDiagram
    Animal <|-- Dog
    Animal : +name string
    Animal : +speak() void

ER diagrams with cardinality notation.

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains

State machine diagrams with transitions, forks, and composite states.

stateDiagram-v2
    [*] --> Idle
    Idle --> Running : start
    Running --> [*] : stop

Service/group topology diagrams with explicit edge directions (L/R/T/B). Uses a bespoke directional-grid layout — not Sugiyama.

architecture-beta
    group api[API Layer]
    service db(database)[Database] in api
    service svc(server)[Service] in api
    db:R --> L:svc

C4 model diagrams (Context, Container, Component) with boundaries and relationships.

Free-form block layout for custom structural diagrams.

Requirements traceability diagrams with verification links.

Git branch and commit history visualization.

gitGraph
    commit
    branch feature
    checkout feature
    commit
    checkout main
    merge feature

Project timeline charts with tasks, milestones, and sections.

Kanban board layout with columns and tickets.

User journey maps across stages and actors.

Chronological event timelines.

Network packet / byte-field diagrams.

Proportional pie charts.

pie title Languages
    "C#" : 72
    "F#" : 18
    "Other" : 10

Cartesian bar and line charts with labeled axes.

Two-axis scatter / categorization charts with labeled quadrants.

Flow / energy-transfer Sankey diagrams.

Multi-axis radar / spider charts.

Radial mind-map trees.

Indented tree list visualization.

Space-filling hierarchical area charts.

Set relationship Venn diagrams.

Restrict which types a renderer accepts via AllowedDiagrams:

var options = new RenderOptions
{
    AllowedDiagrams = DiagramTypes.Flowchart | DiagramTypes.Sequence | DiagramTypes.Class
};

// Diagrams of any other type throw MermaidParseException
string svg = MermaidRenderer.RenderSvg(input, options);
Edit page