Skip to content
mif-docs

Skill reference: svg-charts

Skill reference: svg-charts

Section titled “Skill reference: svg-charts”

The svg-charts skill is a substrate helper: it generates a standalone, brand-colorable .svg chart file for the specific cases the suite’s default embedded-Mermaid convention cannot cover, and returns the <img> line a calling genre skill embeds in its document body. This reference describes why a separate file (not inline markup) is required, how the skill produces one, when it earns its place over the default Mermaid convention, and its sources.

Property Value
Authors A standalone .svg chart file plus its embed line
Purpose group Authoring helpers
MIF conceptType substrate
Target MIF level 2
Primary constraint GitHub strips inline <svg> markup from rendered markdown

What this document type is

Section titled “What this document type is”

svg-charts does not author a document genre; it authors one artifact — a real .svg file — plus the exact <img src="..."> line a genre skill embeds to reference it. The reason this is a file and not markup pasted into the document body is a rendering constraint, not a stylistic choice: GitHub Flavored Markdown strips embedded <svg> elements from rendered markdown for XSS/security reasons, and only renders SVG through an <img> tag pointing at a separate file. Since every MIF document this suite produces is read as rendered markdown — GitHub PRs, repository browsing, Starlight sites — a helper that emitted inline <svg>...</svg> markup into a document body would silently fail to render on GitHub, the primary surface these documents are viewed on.

How the skill produces one

Section titled “How the skill produces one”

svg-charts carries a narrow decision rule plus an output contract as durable instructions.

  • When to use it, not Mermaid. The suite’s default is embedded Mermaid (xychart-beta, pie, quadrantChart), used directly in SKILL.md by market-research-report, competitive-quadrant, trend-analysis, c4-model-diagram, and business-plan — and that stays the default for anything within its documented range. svg-charts is reached for only when a chart genuinely needs something Mermaid’s base syntax cannot do: more than roughly five pie or bar segments (labels collide past that point), custom per-series or brand-specific colors (Mermaid assigns from a fixed theme palette only), or a log scale, error bars, or multi-series combo chart.
  • Output contract. One self-contained .svg file (inline styles/attributes only, no external font/script/CSS references) written alongside the document that will embed it, plus the exact <img> line to paste into the body — never raw markup. Static only: no <script>, no interactivity, matching what pitch-deck research says investors actually want (clarity over decoration).
  • Eval cases. The skill ships evals/evals.json covering the Mermaid-is-sufficient case (declines to over-engineer), the over-Mermaid’s-limit case (generates a file), the inline-markup anti-request (refuses and explains why), and the log-scale case. As a substrate helper it carries no templates/ exemplars; the check-exemplars gate applies only to the genre skills.

When it is beneficial

Section titled “When it is beneficial”

Reach for svg-charts from within a genre skill’s own instructions — business-plan’s SKILL.md cross-references it exactly as ears-acceptance-criteria is referenced by prd — whenever a chart’s segment count, color requirement, or scale genuinely exceeds Mermaid’s documented range. It is not a document genre on its own and never invoked directly to produce a whole document; it produces one supporting asset for a genre skill that needs it.

Do not reach for it when Mermaid already covers the need — five or fewer segments in standard colors, a simple trend line — since a generated file and an <img> reference is unnecessary indirection over a mermaid code block that already renders inline with nothing else to manage. Do not use it for interactive or drill-down visualization; it only emits static SVG.

Example

Section titled “Example”

A business-plan document names seven wholesale-grocer accounts in the company’s own brand colors — too many segments and too specific a palette for Mermaid’s fixed-theme pie chart. svg-charts generates assets/wholesale-account-share.svg and returns <img src="assets/wholesale-account-share.svg" alt="Wholesale account revenue share">, which business-plan embeds in its Market Analysis section in place of a mermaid pie block that could not have rendered all seven accounts legibly.

Provenance & citations

Section titled “Provenance & citations”