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.
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.
Extract Mermaid diagrams from a markdown file and generate PNG images using the bundled extract-and-generate.sh script:
cd "${CLAUDE_SKILL_DIR}/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>/diagramsExample:
cd "${CLAUDE_SKILL_DIR}/scripts"
./extract-and-generate.sh "<markdown_file>" "<output_directory>"
.mmd files for each diagramFor each diagram, the script generates:
01-diagram-name.mmd - Extracted Mermaid code01-diagram-name.png - High-resolution PNG imageThe numbering ensures diagrams maintain their order from the source document.
Override default dimensions using environment variables:
cd "${CLAUDE_SKILL_DIR}/scripts"
MERMAID_WIDTH=1600 MERMAID_HEIGHT=1200 ./extract-and-generate.sh "<markdown_file>" "<output_directory>"
Available variables:
MERMAID_WIDTH (default: 1200) - Base width in pixelsMERMAID_HEIGHT (default: 800) - Base height in pixelsMERMAID_SCALE (default: 2) - Scale factor for high-resolution outputcd "${CLAUDE_SKILL_DIR}/scripts"
MERMAID_WIDTH=2400 MERMAID_HEIGHT=1800 MERMAID_SCALE=4 ./extract-and-generate.sh "<markdown_file>" "<output_directory>"
cd "${CLAUDE_SKILL_DIR}/scripts"
MERMAID_SCALE=5 ./extract-and-generate.sh "<markdown_file>" "<output_directory>"
The script automatically adjusts dimensions based on diagram type (detected from filename):
Context-aware naming in the extraction process helps trigger appropriate smart sizing.
CRITICAL: Use the bundled extract-and-generate.sh script from this skill's scripts/ directory. All necessary dependencies are bundled together.
Run the script from its own directory to properly locate dependencies (extract_diagrams.py and puppeteer-config.json):
cd "${CLAUDE_SKILL_DIR}/scripts"
./extract-and-generate.sh "<markdown_file>" "<output_directory>"
Running the script without changing to the scripts directory first may fail due to missing dependencies.
Before running the script, verify dependencies are installed:
mmdc --versiongoogle-chrome-stable --versionpython3 --versionIf any are missing, consult references/setup_and_troubleshooting.md for installation instructions.
For detailed troubleshooting guidance, refer to references/setup_and_troubleshooting.md, which covers:
Quick fixes for common issues:
Permission denied:
chmod +x "${CLAUDE_SKILL_DIR}/scripts/extract-and-generate.sh"
Low quality output:
MERMAID_SCALE=3 ./extract-and-generate.sh "<markdown_file>" "<output_directory>"
Chrome/Puppeteer errors: Verify all WSL2 dependencies are installed (see references for full list).
This skill bundles all necessary scripts for Mermaid diagram generation:
All scripts must be run from the scripts/ directory to properly locate dependencies.
Comprehensive reference documentation including:
Load this reference when dealing with setup issues, installation problems, or advanced customization needs.