Mermaid.js Comprehensive Cheat Sheet

Mermaid.js Comprehensive Cheat Sheet #

A condensed guide to all Mermaid.js chart types, with syntax, options, and illustrative examples.

1. Flowchart #

Used for creating flow diagrams.

Syntax # 

flowchart TD
    A[Start] --> B{Is it?};
    B -- Yes --> C[OK];
    C --> D[End];
    B -- No --> E[Not OK];
    E --> D;
  • Nodes: id[text], id(text), id((text)), id>text], id{text}
  • Links: -->, ---, -.->, -- text -->
  • Direction: TD (top-down), LR (left-right), etc.
  • Subgraphs:
flowchart TD
    subgraph one
        a1-->a2
    end
    subgraph two
        b1-->b2
    end
    c1-->c2

2. Sequence Diagram #

Illustrates interactions between actors/participants over time.

Syntax # 

sequenceDiagram
    participant A as Alice
    participant J as John
    A->>J: Hello John, how are you?
    loop Healthcheck
        J->>J: Fight against hypochondria
    end
    J-->>A: Great!
    J->>A: How about you?
    A-->>J: Also great!
  • Participants: participant name or actor name
  • Messages: ->, -->, ->>, -->> (solid/dashed, with/without arrow)
  • Activations: activate/deactivate participant
  • Notes: Note right of A: text
  • Loops, Alts, Opts: loop, alt, opt blocks.

3. Class Diagram #

Describes the structure of a system by showing classes, attributes, methods, and relationships.

Syntax # 

classDiagram
    Animal <|-- Duck
    Animal <|-- Fish
    Animal <|-- Zebra
    Animal : +int age
    Animal : +String gender
    Animal: +isMammal()
    Animal: +mate()
    class Duck{
        +String beakColor
        +swim()
        +quack()
    }
    class Fish{
        -int sizeInFeet
        -canEat()
    }
    class Zebra{
        +bool is_wild
        +run()
    }
  • Relationships: <|-- (inheritance), *-- (composition), o-- (aggregation), --> (association), -- (link)
  • Members: +public, -private, #protected, ~package/internal
  • Cardinality: "1", "0..*", etc.

4. State Diagram #

Models the behavior of a single object, specifying the sequence of states it goes through.

Syntax # 

stateDiagram-v2
    [*] --> Still
    Still --> [*]

    Still --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]
  • States: state name or [*] for start/end.
  • Transitions: -->
  • Composite States: state name { ... }
  • Forks/Joins: <<fork>>, <<join>>
  • Choices: <<choice>>

5. Entity Relationship (ER) Diagram #

Visualizes the relationships between entities in a database.

Syntax # 

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
  • Entities: ENTITY_NAME
  • Relationships: ||--||, }--||, ||--|{, etc. to define cardinality.
  • Attributes:
erDiagram
    CAR {
        string registrationNumber
        string make
        string model
    }

6. User Journey Diagram #

Visualizes the steps a user takes to accomplish a goal.

Syntax # 

journey
    title My working day
    section Go to work
      Make tea: 5: Me
      Go to work: 3: Me
      Listen to music: 4: Me
    section Work
      Do work: 5: Me, Cat
  • Sections: section name
  • Tasks: task name: score: actors

7. Gantt Chart #

Illustrates a project schedule.

Syntax # 

gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD
    section Section
    A task           :a1, 2014-01-01, 30d
    Another task     :after a1  , 20d
    section Another
    Task in sec      :2014-01-12  , 12d
    another task      : 24d
  • Date Format: dateFormat YYYY-MM-DD
  • Sections: section name
  • Tasks: task name: status, start, duration/end
  • Milestones: milestone: id, date

8. Pie Chart #

Represents data in a circular statistical graphic.

Syntax # 

pie
    title Key elements in Product X
    "Calcium" : 42.96
    "Potassium" : 50.05
    "Magnesium" : 10.01
    "Iron" :  5
  • showData: Add showData after pie to display values.

9. Requirement Diagram #

Visualizes requirements and their relationships.

Syntax # 

requirementDiagram

requirement test_req {
    id: 1
    text: the test text.
    risk: high
    verifymethod: test
}

element test_entity {
    type: external_entity
}

test_entity - satisfies -> test_req
  • Types: requirement, functionalRequirement, interfaceRequirement, etc.
  • Elements: element
  • Relationships: ->, --> with types like satisfies, verifies, traces.

10. Git Graph #

Visualizes Git branching and commit history.

Syntax # 

gitGraph
   commit
   commit
   branch develop
   checkout develop
   commit
   commit
   checkout main
   merge develop
   commit
  • commit: Creates a commit on the current branch.
  • branch <name>: Creates and switches to a new branch.
  • checkout <name>: Switches to an existing branch.
  • merge <name>: Merges a branch into the current branch.
  • cherry-pick id:"...": Cherry-picks a commit.

11. Mindmap #

Visualizes hierarchical information in a tree-like structure.

Syntax # 

mindmap
  root((mindmap))
    Origins
      Long history
      ::icon(fa fa-book)
      Popularisation
        British popular psychology author Tony Buzan
    Research
      On effectiveness<br/>and features
    Tools
      Pen and paper
      Mermaid
  • Hierarchy: Defined by indentation.
  • Node Shapes: ), )), (, ((, ], [
  • Icons: ::icon(fa fa-...)

12. Timeline Diagram #

Displays a series of events in chronological order.

Syntax # 

timeline
  title History of Social Media
  2002 : LinkedIn
  2004 : Facebook
       : Google
  2005 : Youtube
  2006 : Twitter
  • Events: {time period} : {event1} : {event2}
  • Sections: section {Section Name}

13. XY Chart #

For creating bar and line charts.

Syntax # 

xychart-beta
    title "Sales Revenue"
    x-axis ["Jan", "Feb", "Mar", "Apr", "May"]
    y-axis "Revenue (in millions)" 400 --> 1000
    bar [500, 600, 750, 800, 900]
    line [550, 620, 740, 810, 850]
  • xychart-beta: Keyword to start.
  • title: Chart title.
  • x-axis / y-axis: Define axes labels and ranges.
  • bar / line: Data series.

14. Sankey Diagram #

Visualizes flow from one set of values to another.

Syntax # 

sankey-beta
    Agricultural 'waste',Bio-conversion,124.729
    Bio-conversion,Liquid,0.597
    Bio-conversion,Losses,26.862
    Bio-conversion,Solid,280.322
    Bio-conversion,Gas,81.144
  • Format: Source,Target,Value on each line.

15. Quadrant Chart #

Plots data points on a two-dimensional grid divided into four quadrants.

Syntax # 

quadrantChart
    title Reach and engagement of campaigns
    x-axis Low Reach --> High Reach
    y-axis Low Engagement --> High Engagement
    quadrant-1 We should expand
    quadrant-2 Need to promote
    quadrant-3 Re-evaluate
    quadrant-4 May be improved
    Campaign A: [0.3, 0.6]
    Campaign B: [0.45, 0.23]
    Campaign C: [0.57, 0.69]
    Campaign D: [0.78, 0.34]
    Campaign E: [0.40, 0.34]
    Campaign F: [0.35, 0.78]
  • Axes: x-axis, y-axis
  • Quadrants: quadrant-1, quadrant-2, etc.
  • Points: Point Name: [x, y] (values 0-1).

16. Kanban Diagram #

Visualizes a workflow, such as for project management.

Syntax # 

kanban
    title Simple Kanban Board
    
    todo[Todo]
        task1[Task 1]
        task2[Task 2]
    
    inprogress[In Progress]
        task3[Task 3]
    
    done[Done]
        task4[Task 4]
  • Columns: columnId[Column Title]
  • Tasks: taskId[Task Description] (indented under a column)
  • Metadata: @{key: value} for assignments, tickets, etc.

17. Radar Chart #

Displays multivariate data in the form of a two-dimensional chart of three or more quantitative variables represented on axes starting from the same point.

Syntax # 

radar-beta
    title "Team Skills"
    axis A, B, C, D, E
    curve "Team 1" {5, 4, 3, 2, 1}
    curve "Team 2" {1, 2, 3, 4, 5}
  • title: Chart title.
  • axis: Defines the axes.
  • curve: Defines a data series with values for each axis.

18. ZenUML #

An alternative syntax for creating sequence diagrams, focusing on a more natural, code-like language.

Syntax # 

zenuml
    title Login Sequence
    User->AuthService: login(username, password)
    AuthService->Database: findUser(username)
    Database-->AuthService: userRecord
    AuthService-->User: sessionToken
  • Participants: Defined implicitly on first use.
  • Messages: -> (sync), ->> (async), new, return.
  • Control Flow: loop, if/else, par, try/catch.

19. Architecture Diagram #

Used to illustrate the relationships between services and resources in cloud or CI/CD deployments.

Syntax # 

architecture-beta
    group public_api(cloud)["Public API"]
        service web_server(server)["Web Server"]
    end

    group private_network(cloud)["Private Network"]
        service database(database)["Database"]
    end

    web_server:R ->> L:database
  • group: group id(icon)["title"]
  • service: service id(icon)["title"]
  • edges: {serviceId}:{Side} {arrow} {Side}:{serviceId} (e.g., :R ->> L:)