20260913-0144-product-matrix-readability Make the product matrix diagrams readable

• status: completed
• priority: P2
• owner: product-matrix/session-20260913-0144
• createdAt: 2026-09-13 01:44

Description

The product matrix added in 20260912-2057-product-matrix-diagram renders poorly. In the published page the on-boat diagram shows crossing edges, long reverse arcs, near-empty subgraph boxes, free nodes that visually land inside unrelated subgraphs, and at least one truncated node label ("过流与漏电保护").

Two causes, in order of impact: the diagram carries 14 nodes, 4 subgraphs and three peripheral product lines in one chart with several reverse edges, and Mermaid's default dagre renderer handles that structure badly. Restructure the diagrams first, then decide whether to switch the layout engine to ELK (@mermaid-js/layout-elk, which supports mermaid ^11.0.2 and therefore needs no mermaid major upgrade).

Acceptance: the on-boat view reads without crossing edges through subgraph boxes; no node label is truncated; every node belongs to a subgraph or is deliberately free; all statements still trace to PRODUCT-PLAN.md §2/§3 with no new product claims; bun run docs:build and git diff --check pass; the rendered result is checked visually, not only parsed.

ActiveForm

Making the product matrix diagrams readable.

Dependencies

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

Notes

• Full tier: touches the product index, and possibly package.json, bun.lock and .vitepress/theme/index.ts (dependency and build configuration are risk areas).

• Follows up 20260912-2057-product-matrix-diagram, which is completed and deployed.

• complete: Three restructured charts, ELK layout, natural-size rendering and click-to-zoom; verified in a headless browser against the production build.