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.

| Element | Light Mode | Dark Mode | | ---------------- | ---------- | --------- | | Background | white | #020618 | | Primary fill | sky-100 | sky-900 | | Secondary fill | zinc-100 | zinc-800 | | Borders/lines | sky-600 | sky-500 | | Text | zinc-900 | zinc-100 | | Accent/highlight | sky-400 | sky-400 |

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.