Staff Engineer Blogging Toolkit

Copy-ready diagram and chart snippets for technical posts, rendered live via Mermaid and styled for the Cold Coast theme (cream + navy). Diagrams render fine under the other two palettes too, but the colors are fixed to Cold Coast rather than reactive — toggle to that theme (the wave icon in the header) for the intended look.

Each example shows the rendered diagram and its copyable source side by side.

Series palette

Sankey flows, Kanban priority tags, and chart series draw from a validated 8-hue categorical set — chosen so adjacent colors stay distinguishable under color-vision deficiency, not eyeballed. Assign in this fixed order; never recolor by value.

1 — Blue#2a78d6

2 — Orange#eb6834

3 — Aqua#1baf7a

4 — Yellow#eda100

5 — Magenta#e87ba4

6 — Green#008300

7 — Violet#4a3aa7

8 — Red#e34948

Four of the eight (orange, aqua, yellow, magenta) sit below 3:1 contrast on cream — Mermaid always renders a visible text label on the mark, which is the required relief channel, so this is safe as shipped; don't strip the labels.

Flowchart

RenderedSource

flowchart TD
    A[New capability needed] --> B{Core differentiator?}
    B -->|Yes| C[Build in-house]
    B -->|No| D{Vendor exists?}
    D -->|Yes| E[Buy / integrate]
    D -->|No| F[Build minimal, revisit later]

flowchart TD
    A[New capability needed] --> B{Core differentiator?}
    B -->|Yes| C[Build in-house]
    B -->|No| D{Vendor exists?}
    D -->|Yes| E[Buy / integrate]
    D -->|No| F[Build minimal, revisit later]

Sequence diagram

RenderedSource

sequenceDiagram
    participant C as Client
    participant G as API Gateway
    participant A as Auth Service
    participant S as Service

    C->>G: POST /orders
    G->>A: Validate token
    A-->>G: 200 OK (claims)
    G->>S: Forward request
    S-->>G: 201 Created
    G-->>C: 201 Created

sequenceDiagram
    participant C as Client
    participant G as API Gateway
    participant A as Auth Service
    participant S as Service

    C->>G: POST /orders
    G->>A: Validate token
    A-->>G: 200 OK (claims)
    G->>S: Forward request
    S-->>G: 201 Created
    G-->>C: 201 Created

State diagram

RenderedSource

stateDiagram-v2
    [*] --> Detected
    Detected --> Triaged
    Triaged --> Mitigating
    Mitigating --> Resolved
    Resolved --> PostMortem
    PostMortem --> [*]

stateDiagram-v2
    [*] --> Detected
    Detected --> Triaged
    Triaged --> Mitigating
    Mitigating --> Resolved
    Resolved --> PostMortem
    PostMortem --> [*]

Entity relationship

RenderedSource

erDiagram
    AUTHOR ||--o{ POST : writes
    POST ||--o{ COMMENT : has
    POST }o--o{ TAG : tagged_with

erDiagram
    AUTHOR ||--o{ POST : writes
    POST ||--o{ COMMENT : has
    POST }o--o{ TAG : tagged_with

Value stream map

Mermaid has no dedicated value-stream-map diagram type — this is the common workaround: a left-to-right flowchart with subgraphs as process stages and lead time on the connecting edges.

RenderedSource

flowchart LR
    subgraph Idea
        A[Idea captured]
    end
    subgraph Design
        B[Spec written]
    end
    subgraph Build
        C[Implementation]
    end
    subgraph Ship
        D[Deployed]
    end
    A -->|"lead: 2d"| B
    B -->|"lead: 3d"| C
    C -->|"lead: 5d"| D

flowchart LR
    subgraph Idea
        A[Idea captured]
    end
    subgraph Design
        B[Spec written]
    end
    subgraph Build
        C[Implementation]
    end
    subgraph Ship
        D[Deployed]
    end
    A -->|"lead: 2d"| B
    B -->|"lead: 3d"| C
    C -->|"lead: 5d"| D

Sankey diagram

Node colors are set per-diagram via an %%{init: ...}%% directive (Mermaid 11.15+), pulling from the series palette above.

RenderedSource

%%{init: {"theme": "base", "themeVariables": {"primaryColor": "#f3efe1", "primaryTextColor": "#1c2340", "primaryBorderColor": "#29338c", "lineColor": "#29338c"}, "sankey": {"linkColor": "gradient", "nodeColors": {"Opened": "#2a78d6", "In Review": "#eb6834", "Approved": "#1baf7a", "Changes Requested": "#e34948", "Merged": "#008300", "Closed": "#4a3aa7"}}}}%%
sankey-beta

Opened,In Review,120
In Review,Approved,85
In Review,Changes Requested,35
Changes Requested,Approved,20
Changes Requested,Closed,15
Approved,Merged,105

%%{init: {"theme": "base", "themeVariables": {"primaryColor": "#f3efe1", "primaryTextColor": "#1c2340", "primaryBorderColor": "#29338c", "lineColor": "#29338c"}, "sankey": {"linkColor": "gradient", "nodeColors": {"Opened": "#2a78d6", "In Review": "#eb6834", "Approved": "#1baf7a", "Changes Requested": "#e34948", "Merged": "#008300", "Closed": "#4a3aa7"}}}}%%
sankey-beta

Opened,In Review,120
In Review,Approved,85
In Review,Changes Requested,35
Changes Requested,Approved,20
Changes Requested,Closed,15
Approved,Merged,105

Kanban board

RenderedSource

%%{init: {"theme": "base", "themeVariables": {"primaryColor": "#f3efe1", "primaryTextColor": "#1c2340", "primaryBorderColor": "#29338c", "lineColor": "#29338c", "textColor": "#1c2340"}}}%%
kanban
    Backlog
        [Design API surface]
        [Write spec]
    In Progress
        [Implement auth]@{ assigned: 'sam', priority: 'High' }
    Review
        [PR: rate limiting]
    Done
        [Ship v1]

%%{init: {"theme": "base", "themeVariables": {"primaryColor": "#f3efe1", "primaryTextColor": "#1c2340", "primaryBorderColor": "#29338c", "lineColor": "#29338c", "textColor": "#1c2340"}}}%%
kanban
    Backlog
        [Design API surface]
        [Write spec]
    In Progress
        [Implement auth]@{ assigned: 'sam', priority: 'High' }
    Review
        [PR: rate limiting]
    Done
        [Ship v1]

Wardley map

Mermaid 11.14+ added a native wardley-beta diagram type. Coordinates follow the OnlineWardleyMaps convention: [visibility, evolution].

RenderedSource

%%{init: {"theme": "base", "themeVariables": {"primaryColor": "#f3efe1", "primaryTextColor": "#1c2340", "primaryBorderColor": "#29338c", "lineColor": "#29338c"}}}%%
wardley-beta
title Coffee Counter — Value Chain

component Customer [0.95, 0.9]
component Coffee [0.85, 0.55]
component Machine [0.5, 0.4]
component Beans [0.4, 0.65]
component Power [0.2, 0.9]

Customer -> Coffee
Coffee -> Machine
Coffee -> Beans
Machine -> Power

%%{init: {"theme": "base", "themeVariables": {"primaryColor": "#f3efe1", "primaryTextColor": "#1c2340", "primaryBorderColor": "#29338c", "lineColor": "#29338c"}}}%%
wardley-beta
title Coffee Counter — Value Chain

component Customer [0.95, 0.9]
component Coffee [0.85, 0.55]
component Machine [0.5, 0.4]
component Beans [0.4, 0.65]
component Power [0.2, 0.9]

Customer -> Coffee
Coffee -> Machine
Coffee -> Beans
Machine -> Power

XY chart

RenderedSource

%%{init: {"theme": "base", "themeVariables": {"xyChart": {"backgroundColor": "transparent", "titleColor": "#1c2340", "xAxisLabelColor": "#1c2340", "xAxisLineColor": "#29338c", "xAxisTickColor": "#29338c", "yAxisLabelColor": "#1c2340", "yAxisLineColor": "#29338c", "yAxisTickColor": "#29338c", "plotColorPalette": "#2a78d6,#eb6834,#1baf7a,#eda100,#e87ba4,#008300,#4a3aa7,#e34948"}}}}%%
xychart-beta
    title "Deploys per week"
    x-axis [Wk1, Wk2, Wk3, Wk4, Wk5, Wk6]
    y-axis "Deploys" 0 --> 40
    bar [12, 18, 22, 20, 28, 34]
    line [12, 18, 22, 20, 28, 34]

%%{init: {"theme": "base", "themeVariables": {"xyChart": {"backgroundColor": "transparent", "titleColor": "#1c2340", "xAxisLabelColor": "#1c2340", "xAxisLineColor": "#29338c", "xAxisTickColor": "#29338c", "yAxisLabelColor": "#1c2340", "yAxisLineColor": "#29338c", "yAxisTickColor": "#29338c", "plotColorPalette": "#2a78d6,#eb6834,#1baf7a,#eda100,#e87ba4,#008300,#4a3aa7,#e34948"}}}}%%
xychart-beta
    title "Deploys per week"
    x-axis [Wk1, Wk2, Wk3, Wk4, Wk5, Wk6]
    y-axis "Deploys" 0 --> 40
    bar [12, 18, 22, 20, 28, 34]
    line [12, 18, 22, 20, 28, 34]

Git graph

RenderedSource

%%{init: {"theme": "base", "themeVariables": {"primaryColor": "#f3efe1", "primaryTextColor": "#1c2340", "primaryBorderColor": "#29338c", "lineColor": "#29338c", "git0": "#2a78d6", "git1": "#eb6834", "gitBranchLabel0": "#f3efe1", "gitBranchLabel1": "#f3efe1"}}}%%
gitGraph
    commit
    branch feature/cold-coast
    checkout feature/cold-coast
    commit
    commit
    checkout main
    merge feature/cold-coast
    commit

%%{init: {"theme": "base", "themeVariables": {"primaryColor": "#f3efe1", "primaryTextColor": "#1c2340", "primaryBorderColor": "#29338c", "lineColor": "#29338c", "git0": "#2a78d6", "git1": "#eb6834", "gitBranchLabel0": "#f3efe1", "gitBranchLabel1": "#f3efe1"}}}%%
gitGraph
    commit
    branch feature/cold-coast
    checkout feature/cold-coast
    commit
    commit
    checkout main
    merge feature/cold-coast
    commit

Code snippets

Fenced code blocks use Pygments via pymdownx.highlight, with line numbers and highlighted lines available:

def brew(order: str) -> str:
    """Return a ticket for the café counter."""
    return f"one {order}, coming up"