Cheatsheet: MermaidJS

graph TD
  a-->b

graph LR

id(Label)

id((Start))

id[(Database)]

id{is successful}

id(((End)))

flowchart LR
  A-->B

flowchart LR
  A --- B

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

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 id1 fill:#ff5733,stroke:#111,stroke-width:2px

class nodeId3,nodeId4 newClass;

C:::anotherClass --> D

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

activate Alice
Alice->Bob: Hello Bob
deactivate Alice

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

participant A as Alice
participant B as Bob

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

classDiagram
class Person{
    String name
}