Mermaid Tools
Extract Mermaid diagrams from markdown files and render them to high-quality PNG images using bundled scripts — turning text diagrams into shareable visuals.
Mermaid diagrams live as code in your markdown, but you need real images for slides, READMEs, and exports. This playbook extracts and renders them to clean PNGs.
Who it's for: developers, technical writers, documentation teams
Example
"Render all the Mermaid diagrams in this doc to PNGs" → Extracted diagrams converted to high-quality PNG images, ready to embed
CLAUDE.md Template
New here? 3-minute setup guide → | Already set up? Copy the template below.
npx ccplaybooks add mermaid-tools# 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:
Get new playbooks like this one
One email a week with new Claude Code workflows. Free, like everything here.
No spam. Unsubscribe anytime.
What This Does
Extract Mermaid diagrams from markdown files and render them to high-quality PNG images using bundled scripts — turning text diagrams into shareable visuals.
What's Inside
The template covers:
- Core Workflow
- Advanced Usage
- Smart Sizing Feature
- Important Principles
- Prerequisites Verification
- Troubleshooting
Quick Start
Step 1: Create a Project Folder
Make a dedicated folder for this workflow and open it in Claude Code.
Step 2: Download the Template
Click Download above to save the template, then drop it into your project as CLAUDE.md (or paste it into your existing one).
Step 3: Start Working
Tell Claude what you need in plain language — it will follow the template's workflow automatically. For example:
Render all the Mermaid diagrams in this doc to PNGs
Claude reads the template and runs the steps for you.