Agent skill · design visual · erichowens
mermaid-graph-renderer
Renders Mermaid diagrams to SVG, PNG, and PDF in both web and offline contexts. Covers client-side lazy loading, SSR trade-offs, CLI batch export, and native Rust rendering. Use when exporting
Why this skill is useful
Adds specific rendering techniques and performance optimizations for Mermaid diagrams that the AI wouldn't reliably generate on its own.
What it needs
About 6k tokens when loaded. Last updated 2026-07-14. 180 stars on the source repository.
What this skill does
Mermaid Graph Renderer Renders Mermaid diagrams to production-quality SVG, PNG, and PDF in web and offline contexts. Covers the full spectrum from lazy-loaded client-side rendering to 1000x-faster native Rust batch export. Core Constraint Mermaid.js requires browser APIs (document.createElement, SVGTextElement.getBBox()) to compute text dimensions. Every non-browser rendering path must either embed a headless browser or reimplement the renderer from scratch. This constraint shapes every decision below. --- When to Use ✅ Use for: Rendering Mermaid diagrams on web pages (performance-optimized) Exporting diagrams to SVG, PNG, or PDF (offline/CLI) Setting up CI/CD pipelines that generate diagram images Choosing between rendering libraries for a project Optimizing Mermaid load time on documentation sites ❌ NOT for: Writing Mermaid syntax (use mermaid-graph-writer) Rendering non-Mermaid formats (PlantUML, GraphViz — see Kroki) General image processing or manipulation --- Rendering Decision Tree --- Web Rendering Option 1: Lazy-Loaded mermaid.js (Recommended) Best for documentation sites, blogs, and apps where only some pages have diagrams. How it works: Check for .mermaid elements before loading the library. The ~480 KB cost is only paid on pages that actually need it. Key detail: Handle both initial page load AND client-side navigation (SPA route changes) by re-running mermaid.run() when new diagram content appears. Aspect Value -------- ------- Bundle size ~480 KB (core + lazy diagram chunks) Render time ~50-200 ms per diagram (client) Diagram coverage Full (all Mermaid types) Best for Docs sites, blogs, apps with occasional diagrams Option 2: @mermaid-js/tiny Pre-bundled subset for CDN use. All diagram types included upfront (no lazy-loading of diagram chunks). Smaller total but loaded eagerly. Use when: You know exactly which 1-2 diagram types you need and want a single-file import. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills erichowens/mermaid-graph-renderer