mermaid-tools

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

1. Extracts all Mermaid code blocks from the markdown file
2. Numbers them sequentially (01, 02, 03, etc.) in order of appearance
3. Generates .mmd files for each diagram
4. Creates high-resolution PNG images with smart sizing
5. Validates all generated PNG files

Output Files

For each diagram, the script generates:

• 01-diagram-name.mmd - Extracted Mermaid code
• 01-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