Agent skill · creative production · daymade
mermaid-tools
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.
Why this skill is useful
Adds 3 executable scripts for extracting Mermaid diagrams and generating high-quality PNG images that are not commonly available in public documentation.
What it needs
Requires google-chrome, mermaid-cli, python3 installed locally. About 2k tokens when loaded. Last updated 2026-08-07. 1,320 stars on the source repository.
What this skill does
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, extractdiagrams.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: Parameters: <markdownfile>: Path to the markdown file containing Mermaid diagrams <outputdirectory>: (Optional) Directory for output files. Defaults to <markdownfiledirectory>/diagrams Example: 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: Available variables: MERMAIDWIDTH (default: 1200) - Base width in pixels MERMAIDHEIGHT (default: 800) - Base height in pixels MERMAIDSCALE (default: 2) - Scale factor for high-resolution output High-Resolution Output for Presentations Print-Quality Output Smart Sizing Feature The script automatically adjusts dimensions based on diagram type (detected from filename): Timeline/Gantt: 2400×400 (wide and short) Architecture/System/Caching: 2400×1600 (large and detailed) Monitoring/Workflow/Sequence/API: 2400×800 (wide for process flows) Default: 1200×800 (standard size) Context-aware naming in the extraction process helps trigger appropriate smart sizing. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills daymade/mermaid-tools