| name | mermaid-tools |
| description | Extracts Mermaid diagrams from markdown files and generates high-quality PNG images using bundled scripts. Activates when working with Mermaid diagrams, converting diagrams to PNG, extracting diagrams from markdown, or processing markdown files with embedded Mermaid code. |
| zh_description | 用于mermaid、tools，支持文档、表格、演示和资料整理。 |
| version | 1.0.0 |
| author | seaworld008 |
| source | in-house |
| source_url | |
| tags | ["mermaid", "tools"] |
| created_at | 2026-03-04 |
| updated_at | 2026-03-20 |
| quality | 4 |
| complexity | intermediate |
Mermaid Tools
Overview
This skill enables extraction of Mermaid diagrams from markdown files and generation of high-quality PNG images. The skill bundles all necessary scripts (extract-and-generate.sh, extract_diagrams.py, and puppeteer-config.json) in the scripts/ directory for portability and reliability.
Core Workflow
Standard Diagram Extraction and Generation
Extract Mermaid diagrams from a markdown file and generate PNG images using the bundled extract-and-generate.sh script:
cd ~/.claude/skills/mermaid-tools/scripts
./extract-and-generate.sh "<markdown_file>" "<output_directory>"
Parameters:
<markdown_file>: Path to the markdown file containing Mermaid diagrams<output_directory>: (Optional) Directory for output files. Defaults to <markdown_file_directory>/diagrams
Example:
cd ~/.claude/skills/mermaid-tools/scripts
./extract-and-generate.sh "/path/to/document.md" "/path/to/output"
What the Script Does
- Extracts all Mermaid code blocks from the markdown file
- Numbers them sequentially (01, 02, 03, etc.) in order of appearance
- Generates
.mmd files for each diagram
- Creates high-resolution PNG images with smart sizing
- Validates all generated PNG files
Output Files
For each diagram, the script generates:
01-diagram-name.mmd - Extracted Mermaid code01-diagram-name.png - High-resolution PNG image
The numbering ensures diagrams maintain their order from the source document.
Advanced Usage
Custom Dimensions and Scaling
Override default dimensions using environment variables:
cd ~/.claude/skills/mermaid-tools/scripts
MERMAID_WIDTH=1600 MERMAID_HEIGHT=1200 ./extract-and-generate.sh
