moai-domain-svg-infographic

Build a box table first with id, x, y, w, h per element, then derive every other coordinate from grid and containment formulas. Pick one of four archetypes (stack, flow, comparison, hierarchy), run the containment checks, and only then author the SVG markup.

Use SVG when the deliverable is an image file for slides, email, or offline reading, when pixel-level control is required, or when CJK labels must wrap at exact widths. Keep mermaid for markdown-embedded diagrams that change often or use standard types like flowcharts and sequence diagrams.

Run node scripts/render.mjs diagram.svg --out diagram.png, which renders at 2x scale by default. The script resolves a Chromium executable from CHROME_PATH or platform locations, reports the browser version, and verifies the PNG header dimensions against the target.

Yes, the skill budgets CJK text at full-width advance (1.00em per glyph), so a line holds roughly 60% of the Latin character count. Set a CJK-first font stack and rewrite labels to fit the computed capacity rather than truncating or shrinking fonts.

Failures SVG060-SVG064 mean the accessible contract is incomplete: missing role="img", no aria-labelledby, a title that is not the first child, a missing desc, or unprefixed title/desc ids. Every informative diagram needs all four elements with per-diagram prefixed ids.

Authoring the editable SVG always works. Without Node, use the manual checklist in references/authoring.md and report it as a manual check; without a browser, deliver the SVG alone and state plainly that no PNG was produced.