Mermaid.js lets you turn plain text into beautiful diagrams—right inside your markdown. In this cheat‑sheet style guide, you’ll learn the core syntax for the most common diagram types so you can start visualizing workflows, data models, and timelines in minutes.

1. Setup & Common Options

At the top of your diagram, you can configure theme and styling:

%%{init: { 
  "theme": "default", 
  "themeVariables": { 
    "primaryColor": "#ffdead" 
  } 
}}%%
  • Wrap your code in a triple‑backtick block labeled mermaid.
  • Configure theme, fonts, colors, and more via the init directive.

2. Flowcharts 

flowchart LR    %% LR = left→right; TB = top→bottom
  A[Start] --> B{Decision?};
  B -- Yes --> C[Action OK];
  B -- No  --> D[Action FAIL];
  C --> E[End];
  D --> E;
  • Node shapes
    • Rectangle: [Label]
    • Rounded: (Label)
    • Circle: ((Label))
    • Diamond (decision): {Label}
  • Arrows
    • Solid: -->
    • Dashed: -.->
    • Bold: ==>
  • Grouping 
subgraph GroupName
    A
    B
  end

3. Sequence Diagrams 

sequenceDiagram
  participant Alice
  participant Bob
  Alice->>Bob: Hello Bob
  Bob-->>Alice: Hi Alice
  Note right of Bob: Bob thinks…
  • Declare participants with participant Name.
  • Arrow types:
    • ->> solid
    • -->> dashed (reply)
  • Add inline notes: Note left/right of Participant: text

4. Gantt Charts 

gantt
  title Project Timeline
  dateFormat  YYYY-MM-DD
  section Phase 1
    Task A       :a1, 2025-04-01, 10d
    Task B       :after a1, 7d
  section Phase 2
    Milestone    :milestone, 2025-05-01, 0d
  • Use section to group tasks.
  • Specify durations in days Nd, weeks Nw, or relative (after ).

5. Class Diagrams 

classDiagram
  class Person {
    +String name
    +int age
    +greet()
  }
  class Student <|-- Person
  Person : +walk()
  • Inheritance: <|--
  • Composition: *--
  • Aggregation: o--
  • Interfaces: <|..

 6. State Diagrams 

stateDiagram-v2
  [*] --> Idle
  Idle --> Running : start
  Running --> Paused : pause
  Paused --> Running : resume
  Paused --> Idle : stop
  • Use [*] for the start state.
  • Label transitions after a colon.

 7. Entity‑Relationship (ER) Diagrams 

erDiagram
  CUSTOMER ||--o{ ORDER    : places
  ORDER    ||--|{ LINE_ITEM: contains
  CUSTOMER {
    string name
    string address
  }
  • Relationship symbols:
    • One‑to‑one: ||--||
    • One‑to‑many: ||--o{
    • Many‑to‑many: }o--o{

8. User Journey Maps 

journey
  title User Onboarding
  section Visit
    Landing Page : 5: Visitor
    Signup Form  : 3: Visitor
  section Engage
    Tutorial      : 4: New User
    First Project : 2: New User
  • Format: Step Label : score : Actor

 9. Pie Charts 

pie
  title Browser Usage
  "Chrome"  : 60
  "Firefox" : 25
  "Edge"    : 15

 10. Git Graphs 

gitGraph
  commit
  branch develop
  commit
  checkout main
  merge develop
  commit

 11. Tips & Tricks

  • Clickable Nodes & Styling 
A[Google] --> B(Click me)
  click A "https://google.com" "Go to Google"
  style B fill:#f9f,stroke:#333,stroke-width:2px
  • Comments
    • Single‑line: %% comment
    • Multi‑line: %%{ /* comment */ }%%
  • Live Editor: mermaid.live for instant previews.
  • Embedding: Works in GitHub, GitLab, Obsidian, and many CMS tools.

With this cheat‑sheet in hand, you can start embedding diagrams directly into your markdown files and documentation—no drawing tools required. Happy diagramming!