Extract Mermaid diagrams from Markdown files and render them as PNG images.
npx skills add https://github.com/daymade/claude-code-skills --skill mermaid-tools
Please help me install this Agent Skill. Skill: mermaid-tools Source: https://github.com/daymade/claude-code-skills/tree/main/mermaid-tools Command: npx skills add https://github.com/daymade/claude-code-skills --skill mermaid-tools
This Skill automates the tedious process of converting Mermaid diagrams embedded in Markdown files into high-quality PNG images, saving manual effort and ensuring consistent visual outputs.
Use the mermaid-tools skill to extract all Mermaid diagrams from 'my_document.md' and save them as PNGs in the 'diagrams' folder.
High-intent search queries and answers about installing and using this skill.
Extract Mermaid diagrams from Markdown files and convert them to high-quality PNG images automatically. The Skill finds all Mermaid code blocks, generates numbered .mmd files, and renders them as PNGs with customizable dimensions using mermaid-cli and Chrome.
Yes. The Skill extracts all Mermaid blocks from a Markdown file in source order, assigns sequential numbers to each diagram, and generates corresponding PNGs in bulk—ideal for converting technical documents with dozens of embedded diagrams into presentation-ready visuals.
Set MERMAID_WIDTH, MERMAID_HEIGHT, and MERMAID_SCALE to adjust PNG sizing and resolution. These variables enable smart sizing and custom dimensions across all generated diagrams without modifying source Markdown.
Yes. The Skill requires google-chrome-stable, mermaid-cli, and python3 to extract and render diagrams. Chrome provides the rendering engine; mermaid-cli orchestrates the conversion from .mmd files to PNGs.
Use the Skill's extract-and-generate.sh script with a Markdown file path to fully automate extraction, numbering, and rendering. The Skill validates all generated PNGs and outputs them to a specified folder, eliminating manual screenshotting.
Yes. The Skill supports smart sizing and variable dimensions through MERMAID_WIDTH, MERMAID_HEIGHT, and MERMAID_SCALE environment variables, letting you generate PNGs at any scale or resolution needed for your documentation and presentations.
shirulotExtract Mermaid diagram code blocks from markdown files and render them as PNG images.
X-School-AcademyRender uploaded HTML files into static PNG images with specified viewport dimensions.
neozenithRender and analyze Mermaid.JS diagrams in markdown files for WCAG contrast compliance.
calesthioRender Mermaid diagrams as SVG and PNG using the Beautiful Mermaid library.
