Mermaid Quick Reference

Mermaid Quick Reference

Quick reference guide for Mermaid diagram syntax used in sf-diagram.

Sequence Diagrams

Basic Syntax

sequenceDiagram
    participant A as Alice
    participant B as Bob

    A->>B: Hello Bob
    B-->>A: Hi Alice

Arrow Types

Participants and Actors

sequenceDiagram
    %% Rectangle participant
    participant A as Application

    %% Actor (stick figure)
    actor U as User

    %% With emoji
    participant SF as ☁️ Salesforce

Grouping with Boxes

sequenceDiagram
    box Blue Client Side
        participant B as Browser
        participant A as App
    end

    box Orange Server Side
        participant SF as Salesforce
    end

    B->>A: Request
    A->>SF: API Call

Activation (Lifelines)

sequenceDiagram
    participant A as Client
    participant B as Server

    A->>+B: Request
    Note right of B: Processing...
    B-->>-A: Response

Shorthand: + activates, - deactivates

Loops and Conditionals

sequenceDiagram
    participant C as Client
    participant S as Server

    loop Every 5 seconds
        C->>S: Poll for status
        S-->>C: Status response
    end

sequenceDiagram
    participant C as Client
    participant S as Server

    C->>S: Request

    alt Success
        S-->>C: 200 OK
    else Client Error
        S-->>C: 400 Bad Request
    else Server Error
        S-->>C: 500 Error
    end

Notes

sequenceDiagram
    participant A as Client
    participant B as Server

    Note left of A: Client prepares request
    Note right of B: Server processes
    Note over A,B: This spans both participants

    A->>B: Request

Autonumber

sequenceDiagram
    autonumber
    participant A as Client
    participant B as Server

    A->>B: First (1)
    B-->>A: Second (2)
    A->>B: Third (3)

Breaks and Critical Sections

sequenceDiagram
    participant A
    participant B

    critical Establish connection
        A->>B: Connect
        B-->>A: Connected
    option Connection failed
        A->>A: Log error
    end

    break When rate limited
        A->>A: Wait 60 seconds
    end

Entity Relationship Diagrams

Basic Syntax

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE_ITEM : contains

Cardinality Notation

Full Cardinality Examples

erDiagram
    A ||--|| B : "one-to-one"
    C ||--o{ D : "one-to-many"
    E }o--o{ F : "many-to-many"
    G |o--o| H : "zero-or-one to zero-or-one"

Entity Attributes

erDiagram
    ACCOUNT {
        Id Id PK "Primary Key"
        Text Name "Required field"
        Lookup OwnerId FK "Foreign Key"
        Currency AnnualRevenue
        Checkbox IsActive
    }

Attribute Keys

Flowcharts

Basic Syntax

%%{init: {"flowchart": {"nodeSpacing": 80, "rankSpacing": 70}} }%%
flowchart LR
    A[Start] --> B{Decision}
    B -->|Yes| C[Action 1]
    B -->|No| D[Action 2]
    C --> E[End]
    D --> E

    style A fill:#a7f3d0,stroke:#047857,color:#1f2937
    style B fill:#fde68a,stroke:#b45309,color:#1f2937
    style C fill:#c7d2fe,stroke:#4338ca,color:#1f2937
    style D fill:#c7d2fe,stroke:#4338ca,color:#1f2937
    style E fill:#a7f3d0,stroke:#047857,color:#1f2937

Direction

Node Shapes

flowchart LR
    A[Rectangle]
    B(Rounded)
    C([Stadium])
    D[[Subroutine]]
    E[(Database)]
    F((Circle))
    G>Asymmetric]
    H{Diamond}
    I{{Hexagon}}
    J[/Parallelogram/]
    K[\Parallelogram alt\]
    L[/Trapezoid\]
    M[\Trapezoid alt/]

Link Types

flowchart LR
    A --> B
    A --- C
    A -.-> D
    A ==> E
    A --text--> F
    A ---|text| G

Subgraphs

%%{init: {"flowchart": {"nodeSpacing": 80, "rankSpacing": 70}} }%%
flowchart TB
    subgraph sf["☁️ SALESFORCE"]
        A[Trigger]
        B[Flow]
    end

    subgraph ext["🏭 EXTERNAL"]
        C[API]
    end

    A --> B
    B --> C

    style sf fill:#ecfeff,stroke:#0e7490,stroke-dasharray:5
    style ext fill:#ecfdf5,stroke:#047857,stroke-dasharray:5
    style A fill:#ddd6fe,stroke:#6d28d9,color:#1f2937
    style B fill:#c7d2fe,stroke:#4338ca,color:#1f2937
    style C fill:#a7f3d0,stroke:#047857,color:#1f2937

Theming

Init Directive

For spacing configuration (recommended):

%%{init: {"flowchart": {"nodeSpacing": 80, "rankSpacing": 70}} }%%
flowchart LR
    A --> B

    style A fill:#a5f3fc,stroke:#0e7490,color:#1f2937
    style B fill:#a5f3fc,stroke:#0e7490,color:#1f2937

For theme variables (legacy - prefer individual style declarations):

%%{init: {'theme': 'base', 'themeVariables': {
  'primaryColor': '#00A1E0',
  'primaryTextColor': '#032D60',
  'lineColor': '#706E6B'
}}}%%
flowchart LR
    A --> B

Available Themes

Common Theme Variables

Sequence Diagrams:

• actorBkg, actorTextColor, actorBorder
• signalColor, signalTextColor
• labelBoxBkgColor, labelTextColor
• noteBkgColor, noteTextColor

ER Diagrams:

• primaryColor, primaryTextColor
• lineColor
• attributeBackgroundColorOdd/Even

Flowcharts:

• primaryColor, primaryTextColor
• lineColor, nodeBorder
• mainBkg, clusterBkg

Special Characters

Escaping

Use # codes for special characters:

Line Breaks in Text

Use <br/> for line breaks:

sequenceDiagram
    participant A as Line 1<br/>Line 2

Tips and Tricks

1. Comments

sequenceDiagram
    %% This is a comment
    A->>B: Hello

2. Multiline Notes

sequenceDiagram
    Note over A,B: Line 1<br/>Line 2<br/>Line 3

3. Styling Individual Nodes

Using style declarations (sf-skills standard):

%%{init: {"flowchart": {"nodeSpacing": 80, "rankSpacing": 70}} }%%
flowchart LR
    A[Success] --> B[Error]

    style A fill:#a7f3d0,stroke:#047857,color:#1f2937
    style B fill:#fecaca,stroke:#b91c1c,color:#1f2937

Using classDef (alternative approach):

flowchart LR
    A:::success --> B:::error

    classDef success fill:#a7f3d0,stroke:#047857,color:#1f2937
    classDef error fill:#fecaca,stroke:#b91c1c,color:#1f2937

4. Click Events (Interactive)

flowchart LR
    A[Salesforce Docs]
    click A "https://developer.salesforce.com" "Open Docs"

Resources

• Mermaid Official Docs
• Mermaid Live Editor
• Sequence Diagram Syntax
• ER Diagram Syntax
• Flowchart Syntax