[CheatSheet] mermaid diagram, tree, graph, etc

mermaid.md

Mermaid

Reference: Mermaid Docs

• Mermaid
  • Flowchart
  • Shape references
  • Arrow reference
  • Sequence Diagram
  • Mindmap

Flowchart

graph TD
    A[Client] --> B[Load Balancer]
    B --> C[Server01]
    B --> D[Server02]

Shape references

 graph TD
    id1(["line1\nline2"])
    id2(square-r)
    id3[square]
    id4[/slash/]
    id9[\slash\]
    id5[[square]]
    id1 --> id6{diamond}
    id2 --> id7[(database)]
    id3 --> id8((circle))
    id4 -->|Yes| id10{{slash}} -->|No| id8

---

Arrow reference

Only for squence diagram

Type	Description
->	Solid line without arrow
-->, -.->	Dotted line with arrow
-.-	Dotted line without arrow
->>	Solid line with arrowhead
-->>	Dotted line with arrowhead
-x	Solid line with a cross at the end
--x	Dotted line with a cross at the end
-)	Solid line with an open arrow at the end (async)
--)	Dotted line with an open arrow at the end (async)

Length	1	2	3
Normal	---	----	-----
Normal with arrow	-->	--->	---->
Thick	===	====	=====
Thick with arrow	==>	===>	====>
Dotted	-.-	-..-	-...-
Dotted with arrow	-.->	-..->	-...->

---

Sequence Diagram

• participant, actor

sequenceDiagram
    participant Alice
    participant John
    Alice->>John: Hello John, how are you?
    activate John
    Note right of John: Text in note
    John-->>Alice: Great!
    deactivate John
    Alice-)John: See you later!

sequenceDiagram
    box White Alice & John
    participant A
    participant J
    end
    box Another Group
    participant B
    participant C
    end
    A->>J: Hello John, how are you?
    J->>A: Great!
    A->>B: Hello Bob, how is Charly ?
    B->>C: Hello Charly, how are you?

sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
    Alice-)John: See you later!

---

Mindmap

mindmap
  root((mindmap))
    Origins
      Long history
      Popularisation
        British popular psychology author Tony Buzan
    Research
      On effectiveness<br/>and features
      On Automatic creation
        Uses
            Creative techniques
            Strategic planning
            Argument mapping
    Tools
      Pen and paper
      Mermaid