mermaid-tools

Name: mermaid-tools
Availability: InStock
Author: daymade

Extract Mermaid diagrams from Markdown files and render them as PNG images.

1.3k|212|Updated Oct 22, 2025

Search Tags:#automation #documentation #markdown #png #mermaid #visualization #diagrams

Ready to run

npx skills add https://github.com/daymade/claude-code-skills --skill mermaid-tools

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @mermaid-js/mermaid-cli, google-chrome-stable, python3, and includes scripts (resource) and references (resource) components.

What problem does it solve?

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.

Core Features & Use Cases

Automated Extraction: Automatically finds and extracts Mermaid code blocks from Markdown files.
High-Quality PNG Generation: Converts diagrams to crisp, high-resolution PNGs with smart sizing and custom dimensions.
Use Case: Convert a technical document with 20 embedded Mermaid diagrams into a presentation-ready PDF with all diagrams as clear images, without manual screenshotting or conversion.

Quick Start

Use the mermaid-tools skill to extract all Mermaid diagrams from 'my_document.md' and save them as PNGs in the 'diagrams' folder.

Frequently Asked Questions about mermaid-tools

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I convert Mermaid diagrams embedded in Markdown to PNG images?▼

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.

Can I batch convert multiple Mermaid diagrams from a single Markdown document?▼

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.

What environment variables control PNG output dimensions for Mermaid diagrams?▼

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.

Do I need Google Chrome installed to generate PNGs from Mermaid diagrams?▼

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.

How do I automate Mermaid diagram extraction and PNG generation in my documentation workflow?▼

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.

Can Mermaid diagram conversion work with different file sizes and diagram scales?▼

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.