The Poster Comes Alive

One HTML file that makes .dot graphs navigable

The Setup

Agents draw systems as .dot graphs — but a rendered graph is a poster, not a map

Amplifier agents describe the systems they build as static Graphviz .dot files. Render one and you get a flat image: something to look at, not something you can use.

And it's not one stray file — this is everywhere.

.dot = a Graphviz graph description agents emit for the systems they build
Rendered to a flat image, you can look — but you can't touch it
A poster on the wall, not a map you navigate

The Scale

Hundreds of these graphs live in the workspace — the biggest past 700 lines

This isn't a corner case. Across the ANext workspace the raw material is real and at scale, so the poster problem is worth solving.

And when a graph gets this big, the flat image starts to hurt.

363

.dot files in the workspace (last count)

736

lines in the largest single .dot (03-graph-model.dot)

The Cost

At 700+ lines, the poster problem bites hard

A flat image of a graph this size gives you no way to interrogate it. Five things you'd want to do — and can't — right where the graphs are largest.

Therefore: make the poster something you can actually use.

Can't hover a node to see what it is
Can't search for one node among hundreds
Can't drag a node out of the tangle
Can't collapse a whole subsystem
Can't follow a single dependency edge

The Fix

dotviewer: one self-contained HTML file that renders Graphviz in the browser

dotviewer is a single .dot viewer — 1,679 lines, 71,177 bytes — that renders Graphviz in-browser and layers interactivity on top. Its only dependencies are two CDN scripts.

So how do you get a graph in? You just drop it.

1,679

lines in dotviewer.html (single file)

2

CDN libraries: @viz-js/viz 3.11.0 + svg-pan-zoom 3.6.1

Getting In

Drop a .dot file in — or run the tiny dotview shim — and it renders

The viewer accepts .dot, .gv, and .graphviz via a file picker or a "Drop a .dot file here" overlay. A 47-line dotview bash shim embeds any file into a temp copy and opens it (WSL2-aware).

Once it's on screen, you can start tracing the wiring.

1

Drop or openDrag a .dot onto the overlay, or click "Open .dot"

2

Or run dotview47-line shim injects the .dot and opens the browser

3

Renders instantlyTwo CDN libs, zero local asset files

Following the Wiring

Hover a node to light up its neighbors, click an edge to follow the arrow

This is the single most map-like thing a poster can't do: trace connections. Hover previews a node's info and highlights its neighbors; clicking an edge follows the arrow and pans straight to its target.

And that's just the start of what the live map lets you do.

Hover a node — preview its info panel and highlight its neighbors
Click an edge — follow the arrow and pan to select the target
Drag a node — pull it out of the tangle

The Poster Comes Alive

Focus a node, collapse a subsystem, search live, reflow on demand

The static image is now a living map. Click to focus a node and dim the rest, double-click a cluster to collapse a whole subsystem, search with a live match count, and flip layout direction — all in the one file you just opened.

And the whole thing fits in a single portable file.

Focus — click a node to dim everything else
Collapse — double-click a cluster to fold a subsystem
Search — live match count as you type
Reflow — toggle layout TB / LR / BT / RL
Recolor — 6 luminance-aware color schemes

What You Keep

Built over 7 commits in two days — the whole viewer ships in one file

From first commit to final polish, dotviewer went from a 447-line pan/zoom viewer to a 1,679-line navigable map. Any .dot graph, anywhere, becomes explorable with one portable HTML file you can just open.

The poster you used to squint at is now a map you explore.

7

commits, 2026-03-31 to 2026-04-01

447

lines at first commit → 1,679 today

Sources

Research Methodology

STATUS: COMMITTED & CLEAN ON MAIN

Data as of: fact-check re-run against ramparte/amplifier-toolkit (remote git@github.com:ramparte/amplifier-toolkit.git, branch main). 7 commits, all dated 2026-03-31 to 2026-04-01.

Research performed:

File size: wc -l dotviewer.html; wc -c dotviewer.html → 1679 lines / 71177 bytes; wc -l dotview; wc -c dotview → 47 content lines / 1091 bytes
Dependencies: grep -nE 'https?://' dotviewer.html | grep -v 'w3.org' → @viz-js/viz@3.11.0, svg-pan-zoom@3.6.1; grep -c '<style' = 1, grep -c '<script src' = 2
Interactivity: sed -n '210,236p' dotviewer.html + grep -nE 'isDragging|panToNode|spotlight|collapseCluster|expandCluster|searchCount'
Color schemes: grep -n "label: '" dotviewer.html → 6 (Dark, Light, Midnight, Solarized Dark, Blueprint, High Contrast)
Workspace scale: find . -name '*.dot' -type f | grep -v node_modules | grep -v '/.git/' | wc -l → 363; largest via xargs wc -l | sort -rn | head → 736 (03-graph-model.dot)
Timeline & contributors: git log --format='%h %an %ad %s' --date=iso -- dotviewer.html; git log --format='%an' -- dotviewer.html | sort | uniq -c

Gaps: The .dot file count (363) drifts as the workspace changes — presented as "hundreds of." No per-graph node count is asserted; the scale claim is line- and file-count based. No test suite, benchmark, or adoption telemetry exists, so no performance or usage claims are made.

Primary contributors: Sam Schillace (4 commits on dotviewer.html), Amplifier Dev (3 commits).