Architecture Flow
DiagramsA system diagram assembles column by column, with orthogonal connectors that only draw once both of their endpoints exist
This is the format it was composed for. Switch above to see it lay itself out for another: same animation, re-arranged for the frame.
What you can change · 4 settings
Everything below can be changed without touching the animation. Hand the list to an agent, or edit the values at the bottom of the component file.
- Titletitle · string
Mono label above the diagram.
now: Request path
- Nodes *nodes · array
The graph's nodes, positioned on a column grid.
now: 5 items
- Edges *edges · array
Connectors. Each draws only once both endpoints exist.
now: 4 items
- Brandbrand · string
Brand token id, one of the keys of BRANDS.
now: slate
For developers · source, dependencies and provenance
Dependencies
No Tailwind, no CSS, no asset files. Inline styles only.
Source
Provenance
Prompt
A system architecture diagram that assembles from a JSON graph, node boxes appearing column by column, then orthogonal right-angle connectors drawing between them with small arrowheads and edge labels.
