I2653 — Every diagram on the site is one interactive, linkable viewer whose node links are inferred, and a derived table can be drawn as a chart
Make every Mermaid diagram the site publishes zoomable, pannable, full-screen, downloadable and addressable by a fragment (#diagram-<name>, and #diagram-<name>:<node> for one node), with a node that names a rule, a decision, a command, a capability, an issue, a milestone or a document linked to that object's page by the build rather than by the diagram's author; and let a table the site already renders from derived data be drawn as an interactive Apache ECharts chart by declaring it, with no second copy of the numbers.
DONE wave 0 · p2 · implementation profile · parallel safe
Objective
Make every Mermaid diagram the site publishes zoomable, pannable, full-screen, downloadable and addressable by a fragment (#diagram-<name>, and #diagram-<name>:<node> for one node), with a node that names a rule, a decision, a command, a capability, an issue, a milestone or a document linked to that object's page by the build rather than by the diagram's author; and let a table the site already renders from derived data be drawn as an interactive Apache ECharts chart by declaring it, with no second copy of the numbers.
Why
ADR 0152. site/diagrams.js initialised Mermaid and nothing else: a wide dependency graph was a horizontal scrollbar, no diagram had an address, and a node that was an issue or a rule was text. Rule project.a-diagram-is-drawn-not-typed says a parseable diagram is what makes linking and checking possible; nothing used that. The site drew no chart at all, although ADR 0135 names ECharts as the library for measured series.
Current state
Each <pre class=\"mermaid\"> is rendered at its natural width inside a scrolling box. It has no id, no controls and no links. The Mermaid runtime (the heaviest file on the site) is fetched by a blocking script tag. Numbers the generator derives (issues per milestone and state, benchmark percentiles) are tables only.
Desired state
scripts/lib/diagrams.mjs names every diagram after the build (an explicit data-diagram, else the heading it sits under), lists its nodes, and writes beside it the links it inferred from site/data/generated; site/diagrams.js turns each into the same viewer; scripts/ci/link-check resolves a node fragment against the diagram's declared nodes; site/charts.js draws any <figure data-chart> from the table inside it, with the vendored ECharts build fetched only when a chart nears the viewport; docs/DIAGRAMS.md is the manual.
Scope
- site/diagrams.js
- site/charts.js
- site/tailwind.css
- site/templates/partials/mermaid.html
- site/templates/partials/charts.html
- site/templates/components.html
- site/templates/argument.html
- site/templates/dag.html
- site/templates/milestone.html
- site/templates/plan-section.html
- site/templates/economics.html
- share/design/figure.css
- scripts/lib/diagrams.mjs
- scripts/lib/diagrams.test.mjs
- scripts/lib/interaction-specs/diagram.mjs
- scripts/lib/interaction-specs/scroll-region.mjs
- scripts/site-build
- scripts/site-check
- scripts/ci/link-check
- test/cases/3006_diagrams_are_interactive_and_linkable.sh
- docs/DIAGRAMS.md
- docs/claims/a-diagram-is-named-linked-and-addressable.md
- docs/CLAIMS.yaml
- docs/README.md
- docs/DESIGN_SYSTEM.md
- docs/GITHUB_PAGES_ARCHITECTURE.md
- package.json
- package-lock.json
- .ai/repo/automation/inventory.jsonl
- .ai/repo/adrs/0152-a-diagram-and-a-chart-on-the-site-are-one-viewer-each-over-w.md
- .ai/repo/project/issues/I2653.yaml
- .ai/repo/project/issues/I2654.yaml
- .ai/repo/project/issues/I2655.yaml
- .ai/repo/project/issues/I2656.yaml
Out of scope
- The homepage: its story and its byte budget are declared (site/data/homepage.toml) and it carries no diagram by decision; I2655 asks that question on its own
- The Cockpit and majordomus ui: they render their own graphs; sharing this viewer with them is I2656
- Typing links into a diagram's source with Mermaid's click directive: a link is inferred from an identity or it does not exist
Dependencies
None. This issue is a root of the graph.
What waits on this
- I2654READY A chart is held to its table by a gate, and the tables that are measured series are drawn
- I2655READY The homepage decides whether it carries a derived figure, within its declared story and budget
- I2656READY The diagram viewer serves the Cockpit and majordomus ui, and a node that is a repository file links to its source
Acceptance criteria
- Every <pre class=\"mermaid\"> of the built site carries a unique id diagram-<name>, the list of its nodes, and tabindex=0; a build that would publish two diagrams with one id on a page is refused
- A node whose id or label is the identity of an object the site has a page for is listed beside the diagram as a link to that page, and scripts/ci/link-check resolves every such link
- A link to #diagram-<name>:<node> is refused by scripts/ci/link-check when the diagram does not declare that node
- In a browser, the viewer zooms, pans and resets from its toolbar and from the keyboard, copies its own link, and opens the diagram and node a fragment names
- A <figure data-chart> is drawn from the table inside it, and the table stays on the page
- The hand-drawn-diagram ratchet stays at diagrams=0
Validation
- node --test scripts/lib/diagrams.test.mjs
- MJ_TEST_JOBS=2 bash test/run.sh 3006_diagrams_are_interactive_and_linkable 12_site_build 272_diagrams_are_drawn
- scripts/site-build && scripts/site-check
- scripts/ci/diagram-check
Evidence required
- diagram_pass_unit_tests
- diagram_case_3006
- site_check_passes
Evidence
| covers | type | command | result | at commit |
|---|---|---|---|---|
| diagram_pass_unit_tests | test | node --test scripts/lib/diagrams.test.mjs | # tests 20, # pass 20, # fail 0, # skipped 0 at 09c334079f5 | 09c3340 |
| diagram_case_3006 | test | MJ_TEST_JOBS=2 bash test/run.sh 3006_diagrams_are_interactive_and_linkable 12_site_build 272_diagrams_are_drawn; scripts/ci/diagram-check | ok 3006 2s, ok 272 2s, ok 12_site_build 386s (with npm ci node_modules and target/web/rustdoc from scripts/rust-check --doc; 0 skipped); diagram-check: no hand-drawn diagram in the published documents; at 09c334079f5 with the executable of #1304 | 09c3340 |
| site_check_passes | test | scripts/site-build && scripts/site-check; scripts/ci/link-check; scripts/interaction-probe --spec diagram; node <scratch>/chart.mjs https://majordomus.dev/plan/ | site-build ok, 2023 routes; site-check: 0 failure(s); link-check OK 431283 links on 2023 pages resolve, 21664 fragments incl. #diagram-<name>:<node>; interaction-probe OK 798 diagram controls on 78 pages do what their spec says (zoom, fit, pan, keys, Link, node links); published /plan/ figure[data-chart=bar] drawn as a 1214x1058 canvas from its 38-row table, which stays shown; at 09c334079f5; delivered by #1097 in the grand top 11e53f5a451 | 09c3340 |
Timeline
- started
- 2026-10-16T17:05:18Z
- verified
- 2026-10-16T17:05:23Z
- completed
- 2026-10-16T17:05:34Z
Those three fields, the evidence above and the state of the dependencies are all the status is made of. There is no status field to disagree with them.
Canonical record: .ai/repo/project/issues/I2653.yaml. Read it back with majordomus plan show I2653.