Diagram Style

Canonical visual language for every Mermaid diagram in the wiki.

Palette #

Class	Semantic role	Fill	Stroke	Text
`actor`	Humans (Developer, Maintainer, QA)	`#ede9fe`	`#6d28d9`	`#1e1b4b`
`cli`	`@aidokit/cli` and entrypoints (`aidokit init`, `aido <verb>`)	`#dbeafe`	`#1d4ed8`	`#0c1f4a`
`adapter`	Adapter packages	`#cffafe`	`#0e7490`	`#083344`
`pack`	Stack pack packages	`#dcfce7`	`#15803d`	`#052e16`
`core`	`@aidokit/core` and Layer 1 utilities	`#fef9c3`	`#a16207`	`#422006`
`artifact`	Emitted files, task briefs, reports, `.claude/`, `.codex/`, `.copilot/`, etc.	`#f1f5f9`	`#475569`	`#0f172a`
`stop`	Hard-stop gates, decision diamonds, rollback (dashed border)	`#fee2e2`	`#b91c1c`	`#7f1d1d`
`ok`	Success terminals (exit 0, "passes", "OK")	`#ecfdf5`	`#047857`	`#064e3b`
`external`	User's AI coding CLI, npm registry, GitHub Actions, Sigstore	`#fff7ed`	`#c2410c`	`#431407`

Rules #

Every node MUST be assigned exactly one class via :::className or class A,B,C cli;.
No raw style X fill:… overrides — the palette is closed.
Subgraphs use default cluster styling (themed via clusterBkg / clusterBorder).
For failure edges, use -. fails .-> (dashed).
Max 1 class per node.
Clusters (subgraphs) never get a class.

Class vocabulary #

actor — humans (Developer, Maintainer, QA)
cli — @aidokit/cli and entrypoints (aidokit init, aido <verb>)
adapter — adapter packages
pack — stack pack packages
core — @aidokit/core and Layer 1 utilities (shared-docs, stack-detect, prereq-check, mcp-catalog, base-skills)
artifact — emitted files, task briefs, reports, .claude/, .codex/, .copilot/, docs/, agent-artifacts/, .aido/adapter.md
stop — hard-stop gates (decision diamonds, "stops before…" nodes, rollback) — dashed border
ok — success terminals (exit 0, "passes", "OK")
external — user's AI coding CLI, npm registry, GitHub Actions, Sigstore

Worked example #

Before (flat, no theme) #

flowchart LR
  user(["Dev"]) --> cli["aidokit init"] --> out[".claude/"] --> ai["Claude Code"]

After (themed, with classes) #

%%{init: {
  "theme": "base",
  "themeVariables": {
    "fontFamily": "ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif",
    "fontSize": "14px",
    "primaryColor": "#eff6ff",
    "primaryTextColor": "#0f172a",
    "primaryBorderColor": "#2563eb",
    "lineColor": "#475569",
    "secondaryColor": "#f1f5f9",
    "tertiaryColor": "#ffffff",
    "clusterBkg": "#f8fafc",
    "clusterBorder": "#cbd5e1"
  }
}}%%
flowchart LR
  classDef actor    fill:#ede9fe,stroke:#6d28d9,color:#1e1b4b,stroke-width:1.2px;
  classDef cli      fill:#dbeafe,stroke:#1d4ed8,color:#0c1f4a,stroke-width:1.4px;
  classDef adapter  fill:#cffafe,stroke:#0e7490,color:#083344;
  classDef pack     fill:#dcfce7,stroke:#15803d,color:#052e16;
  classDef core     fill:#fef9c3,stroke:#a16207,color:#422006;
  classDef artifact fill:#f1f5f9,stroke:#475569,color:#0f172a;
  classDef stop     fill:#fee2e2,stroke:#b91c1c,color:#7f1d1d,stroke-dasharray:4 3;
  classDef ok       fill:#ecfdf5,stroke:#047857,color:#064e3b;
  classDef external fill:#fff7ed,stroke:#c2410c,color:#431407;

  user(["Dev"]):::actor --> cli["aidokit init"]:::cli --> out[".claude/"]:::artifact --> ai["Claude Code"]:::external

Diagram Style

Palette #

Rules #

Class vocabulary #

Worked example #

Before (flat, no theme) #

After (themed, with classes) #

Related #