Five diagram types, no runtime dependencies, and no canvas — the output is plain SVG whose every colour and
radius is a var(--fs-…) reference. Switch the look below and the diagram follows without being
redrawn: it wears your palette instead of bringing its own.
import { renderDiagram } from 'fencesvg';
const { svg, caption, warnings } = renderDiagram(source);
/* The page owns the colours:
:root { --fs-ink: …; --fs-line: …; --fs-node-fill: …; --fs-accent: …; }
Pass { accent } instead and it becomes the fallback for pages that define none. */
npm i fencesvg · GitHub ·
npm
The caption line (%% caption:) becomes the SVG's accessible name, the fallback text, and the
markdown caption underneath — leave it out and the library says so rather than drawing something nameless.