dotviewer turns complex DOT graphs into explorable, zoomable, interactive maps. Stop squinting at flat PNGs — drag, search, and discover your system's structure.
Static renders of complex graphs are unreadable. Dozens of nodes and edges blur into an indistinguishable tangle at any zoom level.
Graphviz desktop apps, VS Code extensions, online services requiring uploads — every option adds friction before you can see your graph.
Traditional viewers are read-only. You can't hover to see connections, drag nodes to untangle clusters, or search for what matters.
Architecture diagrams generated as DOT are only useful if people can actually explore them. A 200-node graph rendered to PNG is a poster, not a tool.
dotviewer is a fully self-contained, browser-based DOT graph viewer. No install, no server, no uploads — just open the file and drag in your .dot.
A single 1,679-line HTML file. Double-click it or serve it locally — everything is self-contained with two CDN dependencies.
Drag and drop any .dot or .gv file onto the canvas, or use the "Open .dot" button. Viz.js renders it client-side — no server round-trip.
Pan, zoom, hover, click, drag, search, collapse clusters, follow edges. The graph becomes a living, navigable map of your system.
Smooth viewport navigation powered by svg-pan-zoom. Mouse wheel to zoom, drag the background to pan. Keyboard shortcuts: Home to fit, +/- to zoom.
Switch between Dark, Light, Midnight, Solarized Dark, Blueprint, and High Contrast. Your preference persists across sessions via localStorage.
Re-render the graph in any of four directions: Top-to-Bottom, Left-to-Right, Bottom-to-Top, or Right-to-Left. Viz.js re-layouts on demand.
Type in the search bar to highlight matching nodes and dim everything else. Instant visual filter for finding what you need in large graphs.
Hovering a node dims unrelated elements and lights up directly connected nodes and edges. The info panel previews incoming/outgoing connections.
Click to lock selection. Everything except the chosen node, its edges, and neighbors fades to near-invisible. The node glows with a drop-shadow highlight.
Drag any node to reposition it. Connected edges dynamically redraw as straight lines from center-to-center, keeping the graph readable.
Click an edge to pan the viewport to the target node and select it. Walk dependency chains by clicking edge after edge — a navigation tool, not just a decoration.
A slide-out panel displays the node's label, internal ID, parent cluster, and full lists of incoming and outgoing connections with arrow notation.
Press Escape to dismiss focus mode, clear search, close the info panel, and restore full graph visibility in one keystroke.
Clusters (subgraphs) are first-class interactive citizens, not just background rectangles.
Click a cluster's background to spotlight its contents — member nodes stay bright, everything outside dims. Boundary-crossing edges show at reduced opacity.
Drag a cluster background to move the entire group — all contained nodes, nested child clusters, and labels move together. Membership detected via bounding-box containment.
Double-click a cluster to collapse it into a compact representation, hiding internal nodes. Double-click again to expand. Manage visual complexity on the fly.
Cluster membership uses bounding-box containment rather than DOM hierarchy — a rewrite that fixed broken detection when SVG groups don't nest the way you'd expect.
Initial viewer with pan/zoom and color schemes (f672668). Same day: hover highlighting, progressive reveal, node dragging, search, layout toggle, info panel (e193236). Then: edge-click-to-zoom, cluster spotlight, enhanced node focus (8d29c7a). Plus: hover info panel, wider edge hit areas, sticky drag, cluster drag (dac4563).
Double-click collapse, cluster drag moves contents, help dropdown (d908149). Cluster membership rewritten to use bbox containment (0c85cf2). Child cluster groups now move correctly when dragging parent clusters (df9d8c3).
Edge click targets use invisible 20px-wide stroke paths for easy clicking — you don't need pixel-perfect aim to follow a dependency chain.
dotviewer lives in amplifier-toolkit alongside reusable bundles, recipes, scripts, skills, and tools for the Amplifier ecosystem.
Deliberate Development, Looper, M365 Collab, Session Discovery
Feature workflows, session digests
Voice Bridge, M365 Collab CLI
Interactive graph explorer — visualize what agents build
The Amplifier platform generates DOT graphs for architecture diagrams, bundle documentation, and dependency maps. dotviewer makes those artifacts explorable instead of static.
dotviewer works with any valid DOT file — CI/CD pipelines, database schemas, state machines, org charts. If Graphviz can render it, dotviewer can make it interactive.
Primary Source
dotviewer.html (1,679 lines) in the ramparte/amplifier-toolkit repositorygit log --oneline --all -- dotviewer.html — 7 commits from March 31 – April 1, 2026git log --oneline --since="60 days ago" --no-merges for development contextData Points (all verified from source)
wc -l dotviewer.htmlgit diff --stat f672668..df9d8c3git log --format="%an"Methodology
Contributor: Sam Schillace · Deck generated: May 2026