Multi-actor message sequence diagram — participant boxes with dashed lifelines, per-message arrow rows in order, note bands, and labelled alt/opt/loop/par frames. Feature-parity with the mermaid sequenceDiagram / Google-A2A convention (solid arrow = call, dashed = return/async; optional autonumber) but fully declarative for an LLM (it describes actors + messages structurally, never mermaid syntax) and self-contained (pure HTML/CSS, no client-side JS — renders on every surface, not just web). General-purpose protocol/architecture diagram; not limited to 2-role chat threads the way chat_sequence is.
| Field | Type | |
|---|---|---|
| accent | string (optional, hex, default "#6366f1") | optional |
| theme | string (optional, "light"|"dark"|"site", default "light"). "site" follows the host page's light/dark theme (its CSS custom properties) instead of baking a fixed one — for embedding in a themed site. | optional |
| autonumber | boolean (optional, default false) — prefix each message with a sequential number badge (mermaid's autonumber). | optional |
| actors | required array of participants, left→right. Each is a plain string (used as both id and label) OR an object {id, label} for a mermaid-style alias (messages/notes may reference the short id while the box shows the friendly label). | required |
| messages | array; each item is one of — MESSAGE {from, to, text, kind?} where from/to are actor ids or labels; kind="return" (aliases reply=true / dashed=true) renders a DASHED arrow (a return or async/stream) vs the default solid arrow (a call/request), the mermaid -->> / ->> distinction; NOTE {note=true, text, over?} where over (an actor, or [a,b] pair) anchors the note box over that lifeline / across that span (mermaid's Note over X / Note over X,Y); omit over for a full-width band; FRAME {frame="alt"|"opt"|"loop"|"par"|"group", label, messages=[...], else?=[{label, messages}]} a labelled bordered box grouping nested messages (mermaid's alt/opt/loop/par control-flow frame; alt/par use the optional else branches for alternatives; frames nest). | optional |
{
"type": "sequence_diagram",
"actors": []
}{
"identifier": "urn:air:a2uicatalog.ai:atom:sequence_diagram",
"displayName": "Sequence Diagram",
"type": "application/vnd.a2ui.atom+json",
"url": "https://a2uicatalog.ai/atoms/sequence_diagram",
"capabilities": [
"web",
"mcp-apps"
],
"description": "Multi-actor message sequence diagram \u2014 participant boxes with dashed lifelines, per-message arrow rows in order, note bands, and labelled alt/opt/loop/par frames. Feature-parity with the mermaid sequenceDiagram / Google-A2A convention (solid arrow = call, dashed = return/async; optional autonumber) but fully declarative for an LLM (it describes actors + messages structurally, never mermaid syntax) and self-contained (pure HTML/CSS, no client-side JS \u2014 renders on every surface, not just web). General-purpose protocol/architecture diagram; not limited to 2-role chat threads the way chat_sequence is.",
"representativeQueries": [
"show a multi-actor sequence diagram \u2014 arrows, notes, alt/opt/loop frames",
"multi-actor message sequence diagram \u2014 participant boxes with dashed lifelines, per-message arrow ro",
"render a sequence diagram"
]
}The renderer is an open-source Google Apps Script web app. Deploy your own instance in 4 commands — you own the URL, no dependency on the demo endpoint.
git clone https://github.com/a2uicatalog/a2ui
cd a2ui/apps-script-surface/gas-wired-renderer
clasp push && clasp deploy