20260913-2141-diagram-approach-comparison Publish a diagram-approach comparison page

• status: completed
• priority: P2
• owner: diagram-compare/session-20260913-2141
• createdAt: 2026-09-13 21:41

Description

The product matrix currently renders through Mermaid with the ELK layout. Two alternatives were prototyped locally and need a side-by-side page the user can judge before any of them replaces the current approach:

1. Mermaid + ELK — the published approach, client-rendered, three charts.
2. fireworks-tech-graph — build-free static SVG generated from a JSON definition, bus-lane layout, one chart.
3. HTML/CSS layered cards — hand-designed layout, clickable product cards, responsive, follows the site theme in light and dark.

Publish one comparison page carrying all three, plus the trade-offs of each, and serve the local preview through nsl.

Constraint discovered during investigation: markdown.html is false in the VitePress config, so raw HTML and Vue component tags in Markdown are escaped. The HTML/CSS prototype therefore ships as a standalone asset linked from the page rather than inlined, and the config is not changed for this comparison.

Acceptance: the page renders all three approaches; the SVG and the standalone HTML prototype are published as assets; no product statement changes; bun run docs:build and git diff --check pass; the local nsl preview URL is reported.

ActiveForm

Publishing the diagram-approach comparison page.

Dependencies

• blocked by: (none)
• blocks: (none)

Notes

• Full tier: new page, new assets, dev-preview wiring.

• The comparison is a decision aid; it does not itself change the product matrix in bizplan/product/index.md.

• complete: Comparison page and assets published; nsl preview served locally.