Rendering — the differentiator#

A GUI is a persistent app you navigate; rackattack cuts it. A visualization is just an artifact the service renders on demand and hands back. The agent is the input, a generated artifact is the output: you ask a question in plain language and rackattack renders exactly the picture that answers it — blast radius with only the affected racks lit red, survivors green, everything else dimmed. The diagram is an answer, not a map.

Graphviz as a layout brain, custom SVG as the painter#

Graphviz has two parts people conflate: a world-class layout engine and a dated renderer. rackattack keeps the first and throws away the second. Layout positions come from dot -Tjson; a single custom Go SVG painter (with the shared design system) does every visual. Geometric screens (rack elevation, floor heatmap) skip Graphviz entirely — their layout is just a grid we compute directly.

Graphviz layout-brain vs. geometric grid, feeding one Go SVG painter
Graphviz layout-brain vs. geometric grid, feeding one Go SVG painter

Delivery: interactivity without a GUI#

  1. SVG (primary) — vector-crisp, tiny, renders inline in agent chat UIs and any browser.
  2. PNG (fallback) — for surfaces that need raster.
  3. Self-contained interactive HTML (wow tier) — one generated .html with the SVG embedded plus minimal vanilla JS for hover / zoom / pan / click-to-drill. A generated artifact, not a maintained app — no server, no build.

The screens#

The five signature screens, each driven by one tool call (see API and TOOLS.md):

  • Blast-radius map(hero) — Graphviz-laid power topology, failed feed highlighted, dead racks red, redundant survivors green.
  • Cable-path ribbon — left-to-right device cards with port pins, traced path glowing.
  • Isometric rack elevation — 2.5D racks, devices colored by heat or power.
  • Floor heatmap — geometric grid of racks shaded by thermal headroom.
  • Network fabric — legible leaf-spine mesh with utilization.

The approved mockups in assets/ are the visual contract: a renderer is “done” when its output matches the mockup for the example preset.