Mermaid notes

1. Flowchart

Direction: TB (Top to Bottom), BT (Bottom to Top), LR (Left to Right), RL (Right to Left).

graph LR
    A[Square Box] --> B(Rounded Box)
    B --> C{Decision}
    C -- Yes --> D((Circle))
    C -- No --> E[/Parallel/]
    E --> F[\Data\]
    F --> G[(Database)]

produces

• Nodes: [ ] square, ( ) rounded, ([ ]) stadium, [[ ]] subroutine, (( )) circle, { } diamond.
• Links: --> arrow, --- line, -- text --> arrow with text, ==> thick arrow, -.- dashed line.

2. Sequence Diagram

Used for illustrating interactions between objects over time.

sequenceDiagram
    autonumber
    participant A as Alice
    participant B as Bob
    
    A->>B: Solid line, arrow
    B-->>A: Dashed line, arrow
    A-)B: Open arrow (async)
    
    Note over A,B: Shared Note
    
    rect rgb(200, 255, 200)
        A->>B: Grouped actions
    end

    alt is successful
        A->>B: Success
    else is failed
        A->>B: Failure
    end

produces

• Arrows: -> (line), ->> (arrow), -->> (dashed arrow).
• Activations: activate A, deactivate A or shorthand: A->>+B (activates B).

3. Gantt Chart

Used for project scheduling.

gantt
    title Project Plan
    dateFormat  YYYY-MM-DD
    section Phase 1
    Task 1           :a1, 2023-01-01, 30d
    Task 2           :after a1, 20d
    section Phase 2
    Critical Task    :crit, done, 2023-01-20, 12d
    Future Task      :active, 5d

produces

• Status: done, active, crit, after [id].

4. Class Diagram

Used for object-oriented modeling.

classDiagram
    Animal <|-- Duck
    Animal : +int age
    Animal : +isAlive()
    
    class Duck{
        +String beakColor
        +swim()
        +quack()
    }

produces

• Visibility: + Public, - Private, # Protected, ~ Package/Internal.
• Relationships: <|-- Inheritance, *-- Composition, o-- Aggregation, --> Association.

5. Entity Relationship Diagram (ERD)

Used for database schemas.

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER {
        string name
        string email
    }

produces

• Cardinality:
  • |o Zero or one
  • || Exactly one
  • o{ Zero or many
  • |{ One or many

6. State Diagram

Used for workflow and lifecycle states.

stateDiagram-v2
    [*] --> Idle
    Idle --> Moving : Start
    Moving --> Idle : Stop
    Moving --> Crash : Error
    Crash --> [*]
    
    state Moving {
        [*] --> Slow
        Slow --> Fast
    }

produces

7. Mindmap

Great for brainstorming.

mindmap
  root((Project))
    Topic 1
      Subtopic A
      Subtopic B
    Topic 2
      (Note/Shape)

produces

8. Pie Chart

Simple data visualization.

pie title Pets Adopted
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 15

produces

9. Styling & Customization

Subgraphs (Flowcharts)

graph TB
    subgraph Container
    A --> B
    end

produces

Styling Nodes

graph LR
    A:::customNode --> B
    classDef customNode fill:#f9f,stroke:#333,stroke-width:4px

produces

Comments

graph LR
    %% This is a comment and won't be rendered 
    A:::customNode --> B
    classDef customNode fill:#f9f,stroke:#333,stroke-width:4px

Colors and other cosmetics

flowchart LR 
%% colors %%
classDef blue fill:#2374f7,color:white,stroke:white
classDef green fill:green,color:white,stroke:white

a["square"]:::blue --> b("round"):::green

produces

Quick Reference Tips

1. Escape characters: Use quotes for special characters: Node["Text with (brackets)"].
2. Font Awesome: Most Mermaid integrations support icons: A[fa:fa-car Car].
3. Clickable Nodes: click A "https://google.com" "Tooltip Text".
4. Markdown Support: Use backticks for bold/italics inside nodes if the renderer supports it: A["**Bold** Text"].

Shape types

This cheat sheet focuses specifically on the node shapes available in Mermaid, primarily used within Flowcharts.

1. Basic Flowchart Shapes

Flowchart shapes are defined by the characters surrounding the text inside the node.

2. Logic & Data Shapes

3. Visual Reference (Code)

You can copy this into a Mermaid editor to see them all side-by-side:

4. Specialized Shapes (Other Diagrams)

While Flowcharts have the most variety, other diagrams use specific fixed shapes:

Sequence Diagrams

• Participant: participant A (Box)
• Actor: actor A (Stick figure)
• Activation: activate A (Vertical colored bar on the lifeline)

State Diagrams

• Start/End: [*] (Solid black circle)
• State: state "Description" as S1 (Rounded box)
• Composite State: state Parent { [*] --> Child } (Large box containing other boxes)
• Choice: state myChoice <<choice>> (Small diamond)

ER Diagrams

• Entity: ENTITY_NAME { ... } (Box with a header and list of attributes)

5. Formatting Tips for Shapes

1. Multi-line Text: Use <br> to create a new line inside any shape.
   • id[Line 1<br>Line 2]
2. Special Characters: If your text contains brackets or parentheses, wrap the text in quotes.
   • id["Node with (Parentheses)"]
3. Styling Shapes: You can add CSS styles to shapes using style.
   • style id1 fill:#f9f,stroke:#333,stroke-width:4px
4. Markdown inside Shapes: (Supported in newer Mermaid versions)
   • id["Bold Text"] (Use backticks and quotes).

6. Summary Table: Syntax Shortcut