Blog Mermaid Diagrams

Create mermaid diagrams that match the blog’s visual theme.

Color Theme

The blog uses sky as primary and zinc as neutral colors.

Diagram Style Guidelines

1. Keep it simple – Prefer fewer nodes with clear relationships
2. Use horizontal layouts – flowchart LR reads better than TB for most cases
3. Group related items – Use subgraphs to cluster concepts
4. Consolidate arrows – Use & syntax: A & B & C --> D
5. Minimal labels – Edge labels should be 1-3 words max

Flowchart Template

flowchart LR
    subgraph GroupName
        A[Node A]
        B[Node B]
    end

    A --> C[Result]
    B --> C

Sequence Diagram Template

sequenceDiagram
    participant A as Actor
    participant B as System

    A->>B: action
    B-->>A: response

State Diagram Alternative

Prefer flowcharts over state diagrams – they render more reliably:

flowchart TB
    Start([Start]) --> State1
    State1 -->|condition| State2
    State2 --> End([End])

Examples

Good: Simple and clear

flowchart LR
    Lead[Orchestrator] -->|spawns| W1 & W2 & W3
    W1 & W2 & W3 -->|report| Lead

Bad: Over-complicated

flowchart TB
    subgraph Layer1[First Layer]
        direction LR
        A1[Component A1] --> A2[Component A2]
        A2 --> A3[Component A3]
    end
    subgraph Layer2[Second Layer]
        direction LR
        B1[Component B1] --> B2[Component B2]
    end
    A1 --> B1
    A2 --> B2
    A3 --> B1
    A3 --> B2

Simplify to essential relationships only.