Cheatsheet: MermaidJS

FlowChart

direction - top to down

graph TD
  a-->b

direction - left to right

graph LR

Shape: round rect

id(Label)

Shape: circle

id((Start))

Shape: cylinder/database

id[(Database)]

Shape: rhombus

id{is successful}

Shape: double circle

id(((End)))

Edges: with arrow head

flowchart LR
  A-->B

Edges: without arrow

flowchart LR
  A --- B

Edges: with text

flowchart LR
  A---|This is the text|B

Subraphs/clusters

flowchart TD
subgraph Cluster1 [Cluster 1]
    direction TB
    A[Start]
    B[Step 1]
    C[Step 2]
    A --> B --> C
end

subgraph Cluster2 [Cluster 2]
    D[Step 3]
    E[Step 4]
    F[End]
    D --> E --> F
end

C --> D

style node

style id1 fill:#ff5733,stroke:#111,stroke-width:2px

assign class to node

class nodeId3,nodeId4 newClass;

assign class to node inline

C:::anotherClass --> D

Sequence Diagram

line types

sequenceDiagram
  a->b: solid no arrow
  a-->b: dashed no arrow
  a-->>b: dashed with arrow
  b<--a: reverse
  b<-->a: two-way

activate

activate Alice
Alice->Bob: Hello Bob
deactivate Alice

activate/deactivate inline

Alice->+Bob: Hello Bob
Bob->-Alice: Hi Alice

participants

participant A as Alice
participant B as Bob

Parallel

A->>B: Hello Bob, how are you?
par
  B-->>A: Hi Alice, I'm good. How about you?
and
  A->>C: Hi Charlie, long time no see!
  C-->>A: Hey Alice! Yes, indeed. How have you been?
end

Class Diagrams

define class

classDiagram
class Person{
    String name
}