Claude Skill MartBrowse skillsQuick linesLearn by videoTerminal guideWhat is a Skill?
 
← Back to list

Mermaid Tools (Markdown → PNG)

Extracts every Mermaid diagram from a markdown file and renders them as high-resolution PNG images.

UtilitiesIntermediate★ 1,323⑂ 212AI score 9/10Last updated: Aug 8, 2026

What it does

  • Scans a markdown file for ```mermaid code blocks and writes each one to a numbered .mmd file (01, 02, ...) preserving document order.
  • Renders each diagram to a high-resolution PNG with mermaid-cli (mmdc) and validates the generated files.
  • Applies smart sizing based on diagram type: timeline/gantt (wide & short), architecture/system (large & detailed), sequence/workflow/API (wide).
  • Lets you override output size with MERMAID_WIDTH, MERMAID_HEIGHT, and MERMAID_SCALE for presentation- or print-quality exports.
  • Ships its own extract-and-generate.sh, extract_diagrams.py, and a WSL2-friendly puppeteer-config.json.

Who it's for

  • Developers and technical writers who need Mermaid architecture diagrams as images for slides, wikis, or PDFs.
  • Anyone publishing to tools that don't render Mermaid natively.
  • Teams batch-exporting many diagrams from design docs.
  • WSL2/Linux users who have fought Chrome/Puppeteer rendering issues before.

Example uses

  1. "Export all Mermaid diagrams in docs/architecture.md to PNG" → numbered images land in docs/diagrams/.
  2. "Regenerate at 2400x1800 with scale 4 for my deck" → runs with high-resolution env vars.
  3. "The PNGs look blurry, bump to print quality" → reruns with MERMAID_SCALE=5.

· · · Install guide · · ·

Try it now, no install

Paste this into Claude to use the skill without installing anything.

Read the instructions in this file and follow them to help me:
https://raw.githubusercontent.com/daymade/claude-code-skills/HEAD/daymade-docs/mermaid-tools/SKILL.md

What I want: (describe your task here)

If Claude can't open the link, open it yourself and paste the contents instead.

↓ If it works for you, download the ZIP below and install it. Then it runs on its own — no pasting each time.

Install in the Claude app (no terminal)
  1. Download the ZIP with the button below.
  2. In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
  3. Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.
↓ Download ZIP
Install in Claude Code

Let Claude do it — paste this into Claude Code

Install the skill I found on Claude Skill Mart.
Copy the daymade-docs/mermaid-tools folder from the GitHub repo daymade/claude-code-skills into my ~/.claude/skills/mermaid-tools/.
When it's done, tell me in one line what this skill can do.

Install with a command instead

git clone https://github.com/daymade/claude-code-skills.git && mkdir -p ~/.claude/skills && cp -r claude-code-skills/daymade-docs/mermaid-tools ~/.claude/skills/

⚠ This is a third-party skill. Check the source repository before installing.

  1. Install prerequisites: npm install -g @mermaid-js/mermaid-cli, plus Google Chrome (or Chromium) and Python 3.
  2. Verify them: run mmdc --version, google-chrome-stable --version, and python3 --version.
  3. Clone the repo: git clone https://github.com/daymade/claude-code-skills.git
  4. Copy the skill: mkdir -p ~/.claude/skills && cp -r claude-code-skills/daymade-docs/mermaid-tools ~/.claude/skills/
  5. Make the script executable: chmod +x ~/.claude/skills/mermaid-tools/scripts/extract-and-generate.sh
  6. Restart Claude Code and ask: "convert the Mermaid diagrams in this markdown file to PNG".
  7. If Chrome fails to launch, follow references/setup_and_troubleshooting.md inside the skill to install the missing system libraries.
View source on GitHub ↗License: MIT