Skip to content

MermaidJS Flowchart Standards

Node Shapes

Shapes define the nature of each element in the diagram.

flowchart LR
    classDef bronze fill:#faf6f0,stroke:#8B4513,stroke-width:2px,color:#000
    classDef silver fill:#f5f5f5,stroke:#607D8B,stroke-width:2px,color:#000
    classDef gold fill:#fffbf0,stroke:#FF8F00,stroke-width:2px,color:#000
    classDef store fill:#f0f7ff,stroke:#1565C0,stroke-width:2px,color:#000
    classDef proc fill:#f0fff4,stroke:#00A843,stroke-width:2px,color:#000
    classDef model fill:#f8f0ff,stroke:#7E57C2,stroke-width:2px,stroke-dasharray: 5 5,color:#000
    classDef human fill:#fff0f5,stroke:#C2185B,stroke-width:2px,stroke-dasharray: 5 5,color:#000
    classDef external fill:#f5f5f5,stroke:#616161,stroke-width:2px,color:#000
    classDef decision fill:#f0ffff,stroke:#00838F,stroke-width:2px,color:#000

    Raw[Raw Data]:::bronze
    Interim@{ shape: lin-rect, label: "Intermediate Data" }
    Final[[Consolidated Data]]:::gold
    DB[(Database)]:::store

    Process([Deterministic Process]):::proc
    AI[/Probabilistic Process\]:::model
    Human[\Human Process/]:::human

    API{{API / External Service}}:::external
    Decision{Decision / Filter}:::decision

    class Interim silver

    Raw ~~~ Interim ~~~ Final
    Process ~~~ AI ~~~ Human
    API ~~~ Decision ~~~ DB

Shape Reference

Shape Syntax Meaning
Rectangle [Text] Raw / Bronze — Immutable source files (PDFs, images, logs, HTML dumps)
Lined Rectangle @{ shape: lin-rect } Intermediate / Silver — Transient, in-memory, usable artifacts
Framed Rectangle [[Text]] Consolidated / Gold — Final stage artifact of a phase
Cylinder [(Text)] Database / Store — Indexed storage with queries (can also be Gold)
Stadium ([Text]) Deterministic Process — Rule-based, predictable output
Trapezoid [/Text\] Probabilistic Process — ML/AI, may need validation
Manual Trapezoid [\Text/] Human Process — Manual, slow, costly, uncertain
Hexagon {{Text}} External / API — Network-accessed services
Diamond {Text} Decision / Filter — Conditional branching

Node Classes (Colors)

Classes define the semantic category via color coding.

flowchart LR
    classDef bronze fill:#faf6f0,stroke:#8B4513,stroke-width:2px,color:#000
    classDef silver fill:#f5f5f5,stroke:#607D8B,stroke-width:2px,color:#000
    classDef gold fill:#fffbf0,stroke:#FF8F00,stroke-width:2px,color:#000
    classDef store fill:#f0f7ff,stroke:#1565C0,stroke-width:2px,color:#000
    classDef proc fill:#f0fff4,stroke:#00A843,stroke-width:2px,color:#000
    classDef model fill:#f8f0ff,stroke:#7E57C2,stroke-width:2px,stroke-dasharray: 5 5,color:#000
    classDef human fill:#fff0f5,stroke:#C2185B,stroke-width:2px,stroke-dasharray: 5 5,color:#000
    classDef external fill:#f5f5f5,stroke:#616161,stroke-width:2px,color:#000
    classDef decision fill:#f0ffff,stroke:#00838F,stroke-width:2px,color:#000

    B[Bronze]:::bronze
    S[Silver]:::silver
    G[Gold]:::gold
    St[Store]:::store
    P[Process]:::proc
    M[Model]:::model
    H[Human]:::human
    E[External]:::external
    D[Decision]:::decision

    B ~~~ S ~~~ G ~~~ St ~~~ P
    M ~~~ H ~~~ E ~~~ D

Color Reference

Class Color Applies to
bronze Bronze (#CD7F32) Raw, immutable source data
silver Silver/Gray (#B0BEC5) Intermediate, transient data
gold Amber (#FFB300) Consolidated, final stage data
store Dark Blue (#1565C0) Databases, indexed storage
proc Vibrant Green (#00C853) Deterministic processes
model Purple + dashed (#7E57C2) Probabilistic processes (ML/AI)
human Red + dashed (#E53935) Human processes
external Gray (#9E9E9E) External APIs/services
decision Orange (#FB8C00) Decision/filter nodes

Class Definitions

classDef bronze fill:#faf6f0,stroke:#8B4513,stroke-width:2px,color:#000
classDef silver fill:#f5f5f5,stroke:#607D8B,stroke-width:2px,color:#000
classDef gold fill:#fffbf0,stroke:#FF8F00,stroke-width:2px,color:#000
classDef store fill:#f0f7ff,stroke:#1565C0,stroke-width:2px,color:#000
classDef proc fill:#f0fff4,stroke:#00A843,stroke-width:2px,color:#000
classDef model fill:#f8f0ff,stroke:#7E57C2,stroke-width:2px,stroke-dasharray: 5 5,color:#000
classDef human fill:#fff0f5,stroke:#C2185B,stroke-width:2px,stroke-dasharray: 5 5,color:#000
classDef external fill:#f5f5f5,stroke:#616161,stroke-width:2px,color:#000
classDef decision fill:#f0ffff,stroke:#00838F,stroke-width:2px,color:#000

Edge Types (Relations)

Edges define relationships between nodes. Important: Arrows only exit from processes, never from data.

Edge Reference

Without Arrow (Data → Process: "feeds")

Syntax Style Meaning
-.- Thin dotted Optional — Process can use, but works without
--- Thin solid Uses — Process needs it, but can workaround
=== Thick solid Requires — Process won't run without it

With Arrow (Process → Data/Process: "generates")

Syntax Style Meaning
-.-> Thin dotted arrow Optional flow — Conditional path
--> Thin solid arrow Flow — Standard transformation
==> Thick solid arrow Important flow — Main path
-->\|label\| Labeled arrow Named relation — Specific outcome (e.g., pass, fail)

Edge Rules

  1. Data never has outgoing arrows — Data feeds processes, processes generate outputs
  2. Process → Data: Use arrows (-->, ==>, -.->)
  3. Process → Process: Use arrows (when intermediate data is not relevant)
  4. Data --- Process: Use lines without arrows (---, -.-, ===)