Claude Skill MartBrowse skillsWhat is a Skill?
 
← Back to list

Mermaid Tools

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

Docs & OfficeIntermediate★ 1,323⑂ 212AI score 8/10Last updated: Aug 8, 2026

What it does

  • Scans a markdown file and pulls out all ```mermaid code blocks automatically.
  • Numbers them in source order (01, 02, 03...) and writes both a .mmd source file and a .png image for each.
  • Applies smart sizing based on diagram type: timeline/gantt (wide and short), architecture (large and detailed), sequence/workflow/API (wide process flows).
  • Supports MERMAID_WIDTH, MERMAID_HEIGHT, and MERMAID_SCALE environment variables for presentation- or print-quality output.
  • Validates the generated PNGs and ships a full setup/troubleshooting reference, including WSL2 Chrome dependencies.

Who it's for

  • Developers and technical writers who embed Mermaid diagrams in design docs or READMEs.
  • Anyone who needs diagram images for tools that don't render Mermaid (Notion exports, Confluence, slide decks).
  • Teams converting long documents full of diagrams into a consistent image set in one pass.
  • WSL2 users who have fought with Chrome/Puppeteer errors when running mermaid-cli.

Examples

  1. Architecture doc export: ask "turn every Mermaid diagram in architecture.md into PNGs" and get a numbered set in diagrams/.
  2. Slide-ready graphics: run with MERMAID_WIDTH=2400 MERMAID_HEIGHT=1800 MERMAID_SCALE=4 for crisp images on large displays.
  3. Print quality: run with MERMAID_SCALE=5 to produce diagrams sharp enough for printed reports.

· · · Install guide · · ·

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 /tmp/claude-code-skills && mkdir -p ~/.claude/skills && cp -r /tmp/claude-code-skills/daymade-docs/mermaid-tools ~/.claude/skills/ && chmod +x ~/.claude/skills/mermaid-tools/scripts/*.sh

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

  1. Open a terminal and clone the repo: git clone https://github.com/daymade/claude-code-skills.git
  2. Create the skills folder: mkdir -p ~/.claude/skills
  3. Copy just this skill: cp -r claude-code-skills/daymade-docs/mermaid-tools ~/.claude/skills/
  4. Make the scripts executable: chmod +x ~/.claude/skills/mermaid-tools/scripts/*.sh
  5. Install the prerequisites:
    • npm install -g @mermaid-js/mermaid-cli then verify with mmdc --version
    • Install Google Chrome (verify with google-chrome-stable --version)
    • Verify Python with python3 --version
  6. Restart Claude Code and try: "convert the Mermaid diagrams in this markdown file to PNG".
  7. If Chrome launch or permission errors appear, open references/setup_and_troubleshooting.md inside the skill folder for platform-specific fixes.
View source on GitHub ↗License: MIT