diagram

Mission Control agent sessions receive env vars automatically:

• MC_API_URL — loopback API base (e.g. http://127.0.0.1:54321)
• MC_API_TOKEN — bearer token for that API
• MC_TASK_ID — the active task/session id
• MC_THEME — Mission Control UI theme: dark or light

Do not print Mermaid to the user and stop. POST it to Mission Control so the app opens an interactive viewer modal. The viewer applies Mission Control theme colors automatically — your job is to avoid fighting that styling.

When to use

• User asks for a diagram, flowchart, sequence diagram, architecture map, or state chart
• You are explaining a multi-step system and a diagram would land faster than prose
• You already drafted Mermaid and would otherwise paste it in the terminal

Skip when Mission Control env vars are missing (plain shell outside MC) — fall back to inline Mermaid in markdown.

API contract

POST $MC_API_URL/api/diagram?taskId=$MC_TASK_ID
Authorization: Bearer $MC_API_TOKEN
Content-Type: application/json

{
  "source": "<mermaid source>",
  "title": "Optional title shown in the modal",
  "format": "mermaid",
  "theme": "dark"
}

theme is optional metadata — pass "$MC_THEME" when set so Mission Control knows which UI theme was active. The viewer still re-renders using the live app theme; you do not need to bake colors into source for MC.

Success (200): { "ok": true, "id": "<uuid>" } — Mission Control opens the viewer automatically.

Common errors:

• 400 — missing/invalid body, empty source, or taskId query param missing
• 401 — bad or missing bearer token
• 404 — unknown taskId

Theme rules (critical)

Mission Control runs in dark mode by default. Diagrams fail when agents embed colors that disappear on dark backgrounds (dark gray boxes, faint borders, #111 fills).

1. Do not override Mermaid theme in source. Never use %%{init: {'theme':'dark'}}%%, %%{init: {'theme':'base', 'themeVariables': ...}}%%, YAML frontmatter theme blocks, or classDef / style with hardcoded hex/rgb fills.
2. Use plain Mermaid syntax. Let Mission Control's viewer apply accent, surface, text, and border tokens from the active UI theme.
3. Read $MC_THEME. When it is dark, avoid near-black node/participant fills. When it is light, avoid near-white fills on white backgrounds.
4. Sequence diagrams: use default participant boxes — do not set actor background colors inline. Example: