← Back to Editor All Tutorials
ZH

Mermaid Cheat Sheet v11.13.0

💡 Each diagram example supports one-click copy and live preview. Click "Copy Code" to copy the full code, then paste it in the editor to use.
📊 Basic Diagrams (Most Used)

Flowchart

Mermaid
flowchart TD
    %% Node definitions
    A[Start]
    B{Decision}
    C[Process]
    D((End))

    %% Connections
    A --> B
    B -->|Yes| C
    B -->|No| D
    C --> D

    %% Subgraph
    subgraph Subprocess
        C --> E[Step 1]
        E --> F[Step 2]
    end
Live Preview
Loading...
SyntaxDescription
flowchart TDTop-down direction
flowchart LRLeft-to-right
A[text]Rectangle node
A(text)Rounded rectangle
A((text))Circle
A{text}Diamond (decision)
A --> BSolid arrow
A -.-> BDotted arrow
A ==> BThick arrow

Sequence Diagram

Mermaid
sequenceDiagram
    actor User
    participant Frontend
    participant API
    participant Database

    User->>Frontend: Click login
    Frontend->>API: POST /login
    API->>Database: Query user
    Database-->API: Return data
    API-->Frontend: Return token

    loop Retry
        API->>Database: Retry query
    end

    alt User exists
        API-->Frontend: Success
    else Not found
        API-->Frontend: Error
    end
Live Preview
Loading...
SyntaxDescription
A->>B: MessageSolid arrow (send)
A-->>B: MessageDashed arrow (return)
A->>+B: MessageActivate B
A-->>-B: MessageDeactivate B
loop DescriptionLoop
alt ConditionAlternative
opt ConditionOptional

Class Diagram

Mermaid
classDiagram
    class Animal {
        +String name
        +int age
        +makeSound()
    }

    class Dog {
        +breed
        +fetch()
    }

    Animal <|-- Dog : Inheritance
    Dog o-- Toy : Aggregation
Live Preview
Loading...
SyntaxDescription
class Name { }Define class
+attributePublic
-attributePrivate
A <|-- BInheritance
A --* BComposition
A --o BAggregation
⚙️ Configuration

Themes & Config

Mermaid
---
config:
  theme: forest
  look: handDrawn
---

flowchart TD
    A[Start] --> B[End]
ConfigDescription
theme defaultDefault
theme darkDark
theme forestForest
look: handDrawnHand-drawn
look: classicClassic

Complete Diagram List

DiagramSyntaxStatus
Flowchartflowchart✅ Stable
SequencesequenceDiagram✅ Stable
ClassclassDiagram✅ Stable
StatestateDiagram-v2✅ Stable
ERerDiagram✅ Stable
Ganttgantt✅ Stable
Piepie✅ Stable
Mindmapmindmap✅ Stable
Git GraphgitGraph✅ Stable
Radar ⭐radar-beta🔥 New v11.6
Venn ⭐venn-beta🔥 New v11.13
Ishikawa ⭐ishikawa-beta🔥 New v11.13

💡 Tip: Preview all diagrams at MermZen Editor. Based on Mermaid 11.13.0.