mermaid-graph-renderer
Convert Mermaid diagrams to production-ready SVG, PNG, or PDF across web and offline contexts. Choose lazy-loaded client-side rendering for documentation sites, mermaid-cli for small batches, or the native Rust renderer for high-volume CI/CD pipelines. Handles performance optimization, theme customization, and multi-format output.
mermaid-graph-renderer exports Mermaid diagrams to SVG, PNG, and PDF formats for web and offline use.
AI-generated summary based on this skill's SKILL.md
Install
curiositech/some_claude_skills/mermaid-graph-renderer · repository language: TypeScript
git clone https://github.com/curiositech/some_claude_skills
cp -r some_claude_skills/.claude/skills/mermaid-graph-renderer ~/.claude/skills/mermaid-graph-rendererFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I render mermaid diagrams to SVG?
mermaid-graph-renderer supports SVG export through multiple paths. For web pages, use client-side rendering with lazy loading to defer diagram processing until needed. For CLI workflows, mermaid-cli provides direct SVG output. For CI/CD pipelines, the native Rust renderer handles high-volume batch conversion to SVG with optimized performance.
What are the best ways to export mermaid to PNG?
mermaid-graph-renderer offers PNG export via mermaid-cli for small batches, Puppeteer for headless browser rendering, or Kroki for multi-format output including PNG. Choose based on your context: CLI for one-off conversions, Puppeteer for web automation, or Kroki when you need simultaneous PNG and other formats from the same diagram source.
How can I optimize mermaid diagram performance on web pages?
mermaid-graph-renderer recommends lazy loading mermaid.js to defer rendering until diagrams enter the viewport, reducing initial page load time. Consider server-side rendering trade-offs for static sites, or split large diagrams into smaller components. Theme customization and rendering options tuning also improve perceived performance.
What's the best tool to render mermaid diagrams for my use case?
mermaid-graph-renderer helps you choose: use lazy-loaded client-side rendering for documentation sites, mermaid-cli for small batches, the native Rust renderer for high-volume CI/CD pipelines, or Kroki when you need multi-format output. Each balances performance, ease of setup, and scalability differently.
How do I set up a mermaid diagram CI/CD pipeline?
mermaid-graph-renderer supports automated diagram generation via mermaid-cli in Docker containers or the native Rust renderer for batch processing. Define pipeline stages to convert diagram source files to SVG/PNG/PDF on commit, store artifacts, and deploy. This approach ensures diagrams stay synchronized with documentation.
Can mermaid-graph-renderer convert mermaid to PDF?
Yes, mermaid-graph-renderer exports to PDF through mermaid-cli with Puppeteer backend or via Kroki's multi-format rendering. PDF export works well for static documentation, reports, and archival. Choose mermaid-cli for simplicity or Kroki when combining PDF with other formats in a single workflow.
SKILL.md
rendered from the published skill — quoted content, verbatim
name: mermaid-graph-renderer description: 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 diagrams to images, optimizing Mermaid rendering performance on web pages, setting up CI/CD diagram pipelines, or choosing a rendering library. Activate on "render mermaid", "export diagram", "mermaid to png", "mermaid to svg", "mermaid performance", "diagram export". NOT for writing Mermaid syntax (use mermaid-graph-writer), general image processing, or non-Mermaid diagram formats. allowed-tools: Read,Write,Edit,Bash argument-hint: '[input-file-or-diagram] [output-format: svg|png|pdf]' metadata: category: Content & Writing tags: - mermaid - graph - renderer - render-mermaid - export-diagram pairs-with: - skill: mermaid-graph-writer reason: The writer creates diagram syntax; the renderer converts it to visual SVG/PNG output - skill: diagramming-expert reason: Rendering decisions (sizing, themes, fonts) complement diagram content authoring - skill: document-generation-pdf reason: Rendered Mermaid diagrams are
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 2 files
.claude/skills/mermaid-graph-renderer/CHANGELOG.md
.claude/skills/mermaid-graph-renderer/SKILL.md