svg-chartslisted

Generate a standalone, brand-colorable SVG chart file (bar, line, pie, or combo) for cases the suite's default Mermaid-in-markdown convention cannot cover — more than roughly five pie or bar segments, custom per-series colors, log scales, or multi-series combo charts — saved as a real file and embedded via an img tag, since GitHub strips inline svg markup from rendered markdown. Use when a genre skill's chart need exceeds Mermaid's documented limits.
modeled-information-format/mif-docs-plugin · ★ 0 · Data & Documents · score 73

Install: claude install-skill modeled-information-format/mif-docs-plugin

# svg-charts Shared helper (not a standalone document genre). Produces a real, standalone **`.svg` file** — never inline `<svg>` markup pasted into a document body — for chart needs the suite's default embedded-Mermaid convention (see `market-research-report`, `competitive-quadrant`, `trend-analysis`, `c4-model-diagram`, `business-plan`) cannot cover. ## Why a separate file, not inline markup GitHub Flavored Markdown strips embedded `<svg>` elements from rendered markdown for XSS/security reasons; SVG only renders there via an `<img>` tag pointing at a **separate file**, never inline in the markdown body. Since every MIF document this suite produces is read as rendered markdown (GitHub PRs, repository browsing, Starlight sites), a chart helper that emitted inline SVG markup into the document body would silently fail to render on GitHub — the primary surface these documents are viewed on. `svg-charts` therefore always writes a real `.svg` file next to the document and returns the `<img src="...">` line to embed — never raw markup for the body. Source: GitHub strips embedded `<svg>` elements; only an `<img>` pointing to an external file renders — <https://alexwlchan.net/notes/2024/how-to-render-svgs-on-github/>, <https://github.com/orgs/community/discussions/151372>. ## When to reach for this instead of Mermaid **Stay with the default embedded-Mermaid convention** (`xychart-beta`, `pie`, `quadrantChart` — see `market-research-report`, `competitive-quadrant`, `trend-analys