Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →modu-ai/moai-domain-svg-infographic
Author editable SVG technical infographics — architecture, flow, comparison, hierarchy — by computing the layout numerically before writing markup, then rendering a 2x PNG via headless Chromium. Carries a CJK-first font stack, a deterministic source lint, and mermaid-vs-SVG selection rules.
Passed 16 of 19 test cases with the skill, and 7 of 19 without it.
and 13 more in the full report
11 fixed7 passed either way3 still failing1 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 10 test cases the skill fixed. Same model, same prompt, with and without the skill.
We have an existing draw.io XML diagram in docs/architecture.drawio. I want to use the opt-in import workflow to convert it into a numeric-layout vector SVG graphic. What is the rule regarding the original source file when importing?
| Checked | Without skill | With skill |
|---|---|---|
| The response states that the original draw.io source file must be replaced outright in the same change following the one-home rule. | Missed | Passed |
The instructions your model reads when the skill loads.
Produce a hand-editable SVG diagram whose geometry was decided by arithmetic rather than by eye, plus a 2x PNG raster of it. The output is one static image: no animation, no scripting, no external asset at view time.
This skill is additive to the mermaid pipeline, never a replacement for it. Nothing here migrates, rewrites, or deprecates an existing mermaid diagram on its own (the sole exception: a caller-invoked import through the opt-in importer references in the bundled-references table, where the one-home rule below governs and the source is replaced outright in the same change), and no diagram should ever exist in both forms — that is dual maintenance, and it is the one failure this section exists to prevent.
Route the request before drawing anything:
| Signal | Route to |
|---|---|
| The diagram lives inside a markdown document | mermaid |
| It changes often, alongside the prose around it | mermaid |
| It is a standard type: flow, sequence, ER, state, class, gantt | mermaid |
| Its text labels are kept in sync across locales | mermaid |
| The deliverable is an image file for slides, email, social, or offline reading | this skill |
| It is a freeform architecture or concept infographic with no standard shape | this skill |
| Pixel-level control of position, spacing, or layering is required | this skill |
| Korean or other CJK labels must wrap at exact, verified widths | this skill |
When several signals point both ways, mermaid wins: a mermaid block is cheaper to keep correct than an image. Choose this skill only when the routing table gives it an unopposed reason.
One diagram, one home. If a mermaid version already exists, either replace it outright (and delete the mermaid block in the same change) or leave it alone. Never ship both.
Node 18 or later and a headless Chromium-family browser are needed **only to
test cases passed, vs 7 / 19 without
More skills from the same source and nearby in the registry, with their headline benchmark lift.