An architecture diagram that draws itself on the film clock. Nodes (device, app, server, tool, model, store, surface, user) pop in, edges draw box edge to box edge with arrowheads and labels, and messages, the payloads that actually move, ride the edges as chips (back true for the reply). Each element has a window [at, at + dur] of the progress p a motion_timeline track drives; standalone it is the finished diagram. Pure SVG and CSS, no script.
| Surface | Note |
|---|---|
| Prints the finished diagram; messages in flight are not shown |
| Field | Type | Required |
|---|---|---|
| nodes | array (max 12) of {id, kind?, label, sub?, x, y, w?, h?, at?, dur?}. id ^[a-z][a-z0-9_-]{0,31}$. kind "device" | "app" | "server" | "tool" | "model" | "store" | "surface" | "user" (default "server") sets the glyph and tint. x, y are the centre in percent of the frame; w, h percent (default 20 and 15). at, dur are the appearance window in p (0-1). | required |
| edges | array (max 16) of {from, to, label?, style?, both?, curve?, color?, at?, dur?}. from and to are node ids. style "solid" (draws on) | "dashed" (fades in). both adds a second arrowhead. curve -100 to 100 bends it. | required |
| messages | array (max 12) of {edge, text, back?, color?, at?, dur?}. edge is an index into edges; text (max 40) is the payload chip; back true sends it from the edge's end to its start. | required |
| groups | array (max 4) of {label, x, y, w, h, at?, dur?}: dashed boundaries in percent of the frame. | required |
| w | integer. ViewBox width, 200-2000. Default 1000. | optional |
| h | integer. ViewBox height, 120-2000. Default 560. | optional |
| size | integer. Label px, 8-40. Default 17. | optional |
| accent | "#rrggbb". Device, app and surface nodes, and messages. Default the stage accent. | optional |
| accent2 | "#rrggbb". Server and tool nodes, and edges. Default "#2ac4ce". | optional |
| color | "#rrggbb". Label ink. Default the stage ink. | optional |
| mute | "#rrggbb". Sub-labels and group frames. Default "#9ca5b1". | optional |
| fill | "#rrggbb". Node fill. Default "#2d3642". | optional |
| background | "#rrggbb". Halo behind edge labels; match the stage. Default "#1e2733". | optional |
| label | string (optional, max 80). Accessible name. Default "Architecture diagram". | optional |
{
"type": "motion_arch",
"edges": [],
"messages": 1,
"groups": []
}{
"identifier": "urn:air:a2uicatalog.ai:atom:motion_arch",
"displayName": "Motion Arch",
"type": "application/vnd.a2ui.atom+json",
"url": "https://a2uicatalog.ai/atoms/motion_arch",
"capabilities": [
"web",
"google-meet-stage",
"google-apps-script-web",
"mcp-apps",
"android"
],
"description": "An architecture diagram that draws itself on the film clock. Nodes (device, app, server, tool, model, store, surface, user) pop in, edges draw box edge to box edge with arrowheads and labels, and messages, the payloads that actually move, ride the edges as chips (back true for the reply). Each element has a window [at, at + dur] of the progress p a motion_timeline track drives; standalone it is the finished diagram. Pure SVG and CSS, no script.",
"representativeQueries": [
"show a architecture diagram that draws itself, with payloads moving along its edges",
"an architecture diagram that draws itself on the film clock. nodes (device, app, server, tool, model",
"render a motion arch"
]
}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