render-mermaid
CommunityMermaid diagrams rendered to images instantly.
Authorwfukatsu
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill enables developers and documentation teams to convert Mermaid diagrams into portable image formats (PNG, SVG, PDF) from Mermaid sources, streamlining diagram sharing and offline accessibility.
Core Features & Use Cases
- Single-file render: Convert a .mmd Mermaid diagram file to PNG, SVG, or PDF.
- Markdown inline diagrams: Extract Mermaid blocks embedded in Markdown and render them as images alongside the source.
- Batch rendering: Process multiple diagrams in a directory to generate a library of ready-to-use visuals.
- Use Case: In a project wiki, convert all Mermaid diagrams into image assets for offline viewing and documentation.
Quick Start
Install Mermaid CLI and run the renderer on a sample file:
- Install: npm install -g @mermaid-js/mermaid-cli
- Render a file: mmdc -i diagrams.mmd -o diagrams.png
- Optional: render Markdown files containing mermaid blocks to produce images and update references.
Dependency Matrix
Required Modules
mermaid-cli
Components
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: render-mermaid Download link: https://github.com/wfukatsu/refactoring-agent-for-claude-code/archive/main.zip#render-mermaid Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.