pm-skills Mermaid Style Guide

Self-contained live preview. Renders the same examples as the canonical MD doc at docs/reference/mermaid-style-guide.md. Open this file locally or via /pm-skills/mermaid-style-guide.html.

Brand palette

Two tiers: global brand (via themeVariables) applies to every diagram automatically; Triple Diamond palette (via classDef or style) applies to phase-aligned diagrams.

Global brand

VariableValueEffect
lineColor#5C7CFAIndigo edges (matches favicon Triple Diamond mark)
fontFamilysystem-ui, ...Matches Starlight body text
fontSize14pxSlightly tighter than default 16px

Triple Diamond palette

Discover #e7f5ff / #1971c2 / #0c2d5e
Define #e6fcf5 / #0ca678 / #0a4f3c
Develop #f3e8ff / #7048e8 / #3a1d8a
Deliver #fff4e1 / #d9480f / #5e2200
Measure #fff9db / #e8a317 / #5e3e00
Iterate #ffe9ec / #c2255c / #5c0a25

Examples

1. Phase flowchart with classDef (graph LR)

Use for: ordered phases with arrows. Triple Diamond palette via classDef + class.

graph LR
    subgraph "Problem Space"
        D1["Discover<br/>3 skills"] --> D2["Define<br/>4 skills"]
    end
    subgraph "Solution Space"
        D3["Develop<br/>4 skills"] --> D4["Deliver<br/>6 skills"]
    end
    subgraph "Learning Space"
        D5["Measure<br/>5 skills"] --> D6["Iterate<br/>4 skills"]
    end
    D2 --> D3
    D4 --> D5
    D6 -.->|"next cycle"| D1

    classDef discover fill:#e7f5ff,stroke:#1971c2,color:#0c2d5e,stroke-width:2px
    classDef define fill:#e6fcf5,stroke:#0ca678,color:#0a4f3c,stroke-width:2px
    classDef develop fill:#f3e8ff,stroke:#7048e8,color:#3a1d8a,stroke-width:2px
    classDef deliver fill:#fff4e1,stroke:#d9480f,color:#5e2200,stroke-width:2px
    classDef measure fill:#fff9db,stroke:#e8a317,color:#5e3e00,stroke-width:2px
    classDef iterate fill:#ffe9ec,stroke:#c2255c,color:#5c0a25,stroke-width:2px

    class D1 discover
    class D2 define
    class D3 develop
    class D4 deliver
    class D5 measure
    class D6 iterate
graph LR
    subgraph "Problem Space"
        D1["Discover
3 skills"] --> D2["Define
4 skills"]
    end
    subgraph "Solution Space"
        D3["Develop
4 skills"] --> D4["Deliver
6 skills"]
    end
    subgraph "Learning Space"
        D5["Measure
5 skills"] --> D6["Iterate
4 skills"]
    end
    D2 --> D3
    D4 --> D5
    D6 -.->|"next cycle"| D1

    classDef discover fill:#e7f5ff,stroke:#1971c2,color:#0c2d5e,stroke-width:2px
    classDef define fill:#e6fcf5,stroke:#0ca678,color:#0a4f3c,stroke-width:2px
    classDef develop fill:#f3e8ff,stroke:#7048e8,color:#3a1d8a,stroke-width:2px
    classDef deliver fill:#fff4e1,stroke:#d9480f,color:#5e2200,stroke-width:2px
    classDef measure fill:#fff9db,stroke:#e8a317,color:#5e3e00,stroke-width:2px
    classDef iterate fill:#ffe9ec,stroke:#c2255c,color:#5c0a25,stroke-width:2px

    class D1 discover
    class D2 define
    class D3 develop
    class D4 deliver
    class D5 measure
    class D6 iterate

2. Workflow flowchart with semantic palette (graph TD)

Use for: branching logic with decisions. Semantic colors (green=success, yellow=warning, blue=branch). Do NOT use Triple Diamond palette here.

graph TD
    A[Invoke skill] --> B{Inputs valid?}
    B -->|yes| C[Run inference]
    B -->|no| D[Return error]
    C --> E{Confidence high?}
    E -->|yes| F[Produce output]
    E -->|low| G[Present summary with warnings]
    G --> H{User confirms?}
    H -->|go| F
    H -->|correction| C

    style F fill:#c8e6c9
    style G fill:#fff9c4
    style B fill:#e1f5ff
    style E fill:#e1f5ff
    style H fill:#e1f5ff
graph TD
    A[Invoke skill] --> B{Inputs valid?}
    B -->|yes| C[Run inference]
    B -->|no| D[Return error]
    C --> E{Confidence high?}
    E -->|yes| F[Produce output]
    E -->|low| G[Present summary with warnings]
    G --> H{User confirms?}
    H -->|go| F
    H -->|correction| C

    style F fill:#c8e6c9
    style G fill:#fff9c4
    style B fill:#e1f5ff
    style E fill:#e1f5ff
    style H fill:#e1f5ff

3. Behavioral sequence (sequenceDiagram)

Use for: back-and-forth between named participants. Limited styling; keep clean.

sequenceDiagram
    participant You
    participant Brief as /meeting-brief
    participant Agenda as /meeting-agenda
    participant Recap as /meeting-recap

    You->>Brief: Schedule strategic meeting
    Brief-->>You: Stakeholder reads + asks
    You->>Agenda: Draft attendee-facing structure
    Agenda-->>You: Time-boxed topics
    Note over You,Recap: The meeting happens
    You->>Recap: Capture decisions + actions
    Recap-->>You: Topic summary + actions
sequenceDiagram
    participant You
    participant Brief as /meeting-brief
    participant Agenda as /meeting-agenda
    participant Recap as /meeting-recap

    You->>Brief: Schedule strategic meeting
    Brief-->>You: Stakeholder reads + asks
    You->>Agenda: Draft attendee-facing structure
    Agenda-->>You: Time-boxed topics
    Note over You,Recap: The meeting happens
    You->>Recap: Capture decisions + actions
    Recap-->>You: Topic summary + actions

4. State diagram (stateDiagram-v2)

Use for: named states + transitions, not phases or interactions.

stateDiagram-v2
    [*] --> Drafted
    Drafted --> Reviewed: pm submits for review
    Reviewed --> Approved: stakeholder signoff
    Reviewed --> Drafted: revision requested
    Approved --> Shipped: feature flag flipped
    Shipped --> Measured: instrumentation live
    Measured --> [*]
    Measured --> Drafted: pivot decision
stateDiagram-v2
    [*] --> Drafted
    Drafted --> Reviewed: pm submits for review
    Reviewed --> Approved: stakeholder signoff
    Reviewed --> Drafted: revision requested
    Approved --> Shipped: feature flag flipped
    Shipped --> Measured: instrumentation live
    Measured --> [*]
    Measured --> Drafted: pivot decision

5. Gantt timeline

Use for: overlapping work with durations.

gantt
    title v2.14.0 Migration Cycle
    dateFormat YYYY-MM-DD
    section Phase 0
    Spike + decision        :2026-05-06, 1d
    section Phase 1
    Foundation              :2026-05-07, 2d
    section Phase 2
    Parity                  :2026-05-08, 2d
    section Phase 3
    Cutover                 :2026-05-09, 1d
    section Phase 4
    Material retirement     :2026-05-10, 1d
    Final validation        :2026-05-10, 1d
gantt
    title v2.14.0 Migration Cycle
    dateFormat YYYY-MM-DD
    section Phase 0
    Spike + decision        :2026-05-06, 1d
    section Phase 1
    Foundation              :2026-05-07, 2d
    section Phase 2
    Parity                  :2026-05-08, 2d
    section Phase 3
    Cutover                 :2026-05-09, 1d
    section Phase 4
    Material retirement     :2026-05-10, 1d
    Final validation        :2026-05-10, 1d

Diagram type decision matrix

If you are showing...UseTriple Diamond palette?
Ordered phases or stepsgraph LR or graph TDYes if phase-aligned
Phase grid with constituent itemsblock-betaYes (use style)
Branching logic / decisionsgraph TD with {decision}No - use semantic colors
Roles interacting over timesequenceDiagramNo - limited styling
Named states + transitionsstateDiagram-v2Optional
Overlapping work with durationsganttNo - use section colors
Hierarchical idea expansionmindmapNo - radial structure
Percentage breakdownpieNo - dataset-driven

For agents: machine-readable summary

brand_palette:
  global_edge_color: "#5C7CFA"
  global_font_family: "system-ui, ..."
  global_font_size: "14px"

triple_diamond:
  discover: { fill: "#e7f5ff", stroke: "#1971c2", color: "#0c2d5e" }
  define:   { fill: "#e6fcf5", stroke: "#0ca678", color: "#0a4f3c" }
  develop:  { fill: "#f3e8ff", stroke: "#7048e8", color: "#3a1d8a" }
  deliver:  { fill: "#fff4e1", stroke: "#d9480f", color: "#5e2200" }
  measure:  { fill: "#fff9db", stroke: "#e8a317", color: "#5e3e00" }
  iterate:  { fill: "#ffe9ec", stroke: "#c2255c", color: "#5c0a25" }

stroke_width_default: "2px"

syntax_by_diagram_type:
  graph_lr_td: "classDef + class"
  block_beta:  "style {block-id}"
  sequence_diagram: "note + rect (limited)"
  state_diagram_v2: "classDef + class"
  gantt: "section + class"

constraints:
  no_em_dashes: true
  no_en_dashes: true
  prefer_dash_substitute: " - "
  quote_subgraph_titles: true