Pipelines show data flowing through sequential transformations. They read left to right (rankdir=LR). Color follows the data lifecycle: blue for ingestion, amber for processing, green for output. Intermediate stores (caches, queues) are yellow.

rankdir=LR

[blue: source] → [blue: ingest] → [amber: transform] → [green: output]
                                          ↓
                                   [yellow: cache]

Examples: diagram-rag-pipeline, diagram-ci-cd-pipeline, diagram-2019-ml-pipeline, jq/diagram-pipeline, kubeflow/diagram-pipeline.

Clusters group stages that share a concern (ingestion plane, serving plane). Each cluster border matches the dominant color family of its contents.

Layer stacks show architectural layers from top (user-facing) to bottom (substrate). They read top to bottom (rankdir=TB). Each layer is a cluster with a distinct color family. The top layer is typically blue (closest to the user); lower layers shift through purple, amber, and green.

rankdir=TB

┌─ blue: Model layer ─────────────┐
│  [blue: Opus]  [blue: Haiku]    │
└─────────────────────────────────┘
         ↓
┌─ purple: Capability layer ──────┐
│  [purple: hooks] [purple: MCP]  │
└─────────────────────────────────┘
         ↓
┌─ green: State layer ────────────┐
│  [green: settings] [green: db]  │
└─────────────────────────────────┘

Examples: 2026-q2-claude-code-features/diagram-feature-surface, diagram-tool-systems-layers, diagram-llm-frameworks-taxonomy, 2026-q2-cloudflare-agents/diagram-stack.

The convention: each layer gets its own color family, and the cluster border matches the nodes inside it. Cross-layer edges use the default grey (#888); failure-path edges use red.

Comparisons place two or more systems side by side. They use rankdir=TB with clusters arranged horizontally via rank=same or Graphviz's natural layout. Each system gets a distinct color family. The contrast between cluster colors is the primary visual signal.

rankdir=TB

┌─ blue: System A ──┐     ┌─ amber: System B ──┐
│  [blue: node]      │     │  [amber: node]      │
│  [blue: node]      │     │  [amber: node]      │
└────────────────────┘     └─────────────────────┘

Examples: 2026-agent-isolation-freebsd-jails/diagram-isolation-comparison (blue=DIY jails, amber=Cloudflare sandbox), diagram-datalayer-schema-compare (four schema formats, four colors), diagram-eda-vs-actor, 2025-terminal-ai-agents/diagram-comparison.

The rule: never use the same color family for both sides of a comparison. The reader should distinguish the two systems by color alone.

State machines show transitions between states. They read left to right (rankdir=LR). Each state gets a color that reflects its semantic nature: green for healthy/fresh, amber for degraded/stale, blue for active/processing, purple for fallback, red for terminal/error.

rankdir=LR

[green: fresh] → [amber: stale] → [blue: revalidating] → [green: fresh]
                       ↓                    ↓
                [purple: serve-stale]  [red: evicted]

Example: diagram-cache-states (HTTP cache lifecycle per RFC 9111).

State machines are the only archetype where individual nodes routinely use different color families. The color of each node is its most important visual attribute — it tells the reader whether the state is healthy, degraded, or terminal before they read the label.

Process loops show a cyclical workflow with named phases. They read left to right (rankdir=LR) to emphasize the forward flow, with a dashed feedback edge closing the loop. Each phase is a cluster with a distinct color family, typically cycling through blue, purple, amber, green.

rankdir=LR

┌─ blue: Propose ─┐  →  ┌─ purple: Challenge ─┐  →  ┌─ amber: Defend ─┐  →  ┌─ green: Refine ─┐
│  [blue: scan]    │     │  [purple: question]  │     │  [amber: answer] │     │  [green: summary]│
└──────────────────┘     └──────────────────────┘     └─────────────────┘     └─────────────────┘
         ↑                                                                             │
         └─────────────────────── dashed: resubmit ────────────────────────────────────┘

Example: 2026-elenctic-vibe-code-review/diagram-review-loop.

The feedback edge (green → blue) is always dashed and uses the default grey. Exception nodes (e.g., operational override) use red and connect with red dashed edges.

Ecosystem maps show the relationships between tools, libraries, or systems in a domain. They use rankdir=TB with clusters grouping related items by category. Color assignment follows function: blue for core implementations, purple for protocols/standards, green for outputs/tooling, amber for configuration/build, yellow for community/ecosystem, red for deprecated or risky components.

rankdir=TB

┌─ blue: Core ────────┐
│  [blue: impl A]      │
│  [blue: impl B]      │
└──────────────────────┘
         ↓
┌─ purple: Protocols ──┐     ┌─ amber: Build ──────┐
│  [purple: spec]       │     │  [amber: toolchain]  │
└───────────────────────┘     └──────────────────────┘

Examples: diagram-scheme-llm-toolkit, 2025-terminal-ai-agents/diagram-ecosystem, diagram-clojure-ecosystem.

• shape=note: used for annotation nodes (reviewee, reviewer, legend entries). Still uses the palette; still needs all three color attributes.
• shape=diamond: used for decision points in pipelines. Typically amber (config/decision semantics).
• shape=plain: used for invisible structural nodes (start/end markers in state machines). No fill, no border.