DASHBOARD

Every diagram in the folder, in one file

Point vibex dashboard at a folder of specs and it writes one HTML file. Inside: a sidebar of every diagram, an overview with the numbers that matter, a Documentation panel for each docs spec, a Changes panel for the changelog, and the links between them all worked out.

Open the Relay dashboard Build your own

$ vibex dashboard docs/index.html docs \

--title "Payments platform" --repo .

docs/index.html

Relay, all of it

Nine diagrams, two documents and a changelog, in one file of about 800 KB. This is the dashboard the landing page's “live demo” button opens.

dashboard.html · 9 diagrams · 2 documents · changesFull screen ↗

[sidebar]details panel\notes/searchttheme

Each panel collapses and remembers that choice across reloads. A collapsed panel keeps its markers, so you can still find your way back.

What goes in it

Everything is picked up from the folder by file name. There is no config file and no list to maintain.

*.erd.json · *.c4.json *.endpoints.json *.lifecycle.json: One sidebar entry each, with the same viewer as the standalone file: search, details panel, source links, SVG and PNG export.
*.docs.json: A Documentation panel each, listed first in the sidebar. Claims can be filtered by text and by whether they need attention. Pass --repo, or every anchored claim shows as unverifiable.
changelog.json: A Changes panel. Each entry lists the specs it touched as chips that open those diagrams. --changelog points at one kept somewhere else.

What the overview works out

HEADLINE NUMBERS

A card per diagram

Entities, relationships and groups for an ERD. Elements, relationships and boundaries for C4. Endpoints, groups and types for a catalogue. States and transitions for a lifecycle. Totals for the whole system sit at the top: diagrams, nodes, connections and cross-links.

TABLES ↔ ENDPOINTS

Which routes touch which table

From each endpoint's entities list, a table showing every ERD table and the endpoints that read or write it. Every chip opens the right panel with that node selected.

DRILL-DOWN

C4 levels, linked

Every C4 link that points at a diagram in the same dashboard is listed, from box to target, and each one opens that panel.

Every view has a URL

The address bar follows you, so you can send someone the thing itself instead of “it's in the dashboard somewhere”.

index.html#d=2 # the third diagram

index.html#d=2&node=shipment # …with one node selected

index.html#docs # the first document

index.html#docs-1 # the second one

index.html#changelog # the Changes panel

It is a file

CSS, JavaScript and every spec are inlined. The file makes no outbound requests: no fetch, no web fonts, no CDN, no analytics, and PNG export renders in memory. It works from file://, an internal nginx, a private Pages site or a Confluence attachment, and it keeps working with the network unplugged.

That matters because an architecture diagram maps your system: table names, service topology, auth boundaries, every internal route. The file can go wherever your source code is allowed to go, and nowhere it isn't.

Knowing when it is out of date

$ vibex outdated docs

docs/index.html stale built by vibex 0.4.0

docs/db.erd.html current

1 of 2 out of date. Regenerate them.

Every generated file records which build produced it. The fingerprint covers every renderer and inlined asset, not just the version number. vibex outdated lists the files this version would now render differently, and exits 1 so CI can gate on it.

It answers whether the renderer moved. Whether the code moved is what the docs check and a fresh import answer.