Mermaid Viewer

Write Mermaid diagrams and see them rendered instantly

Code

Preview— Pastel

Enter Mermaid code...

Example Diagrams

Flowchart

graph TD
    A[Start] --> B{Decision}
    B -->|Yes| C[OK]
    B -->|No| D[Retry]

Sequence

sequenceDiagram
    Alice->>Bob: Hello
    Bob->>Alice: Hi there

Pie Chart

pie title Stats
    "Dogs" : 386
    "Cats" : 85
    "Birds" : 150

Nodes, arrows, decision diamonds, and subgraphs — everything you need for flowchart diagrams.

Actors, messages, activations, loops, and alt blocks for API documentation.

Complete reference covering all diagram types, node shapes, arrow styles, and themes.

Data visualization with pie charts — labels, values, and custom color themes.