New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Mermaid Tools

by daymade in daymade/claude-code-skills

Extracts Mermaid diagrams from markdown files and generates high-quality PNG images using bundled scripts.

MITAuto-check passedDevelopment

Install Mermaid Tools

skills CLI
$ npx skills add daymade/claude-code-skills --skill mermaid-tools -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install daymade/claude-code-skills mermaid-tools --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/daymade/claude-code-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/daymade-docs/mermaid-tools .claude/skills/mermaid-tools && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
mermaid-tools
GitHub stars
1.4k
Used in
1 other repo
Token cost
~1.4k tokens
SKILL.md length
468 words
Files
5 (incl. scripts, references)
Skills in repo
103
Repo updated
First seen
Licence
MIT

At a glance

Extracts Mermaid diagrams from markdown files and generates high-quality PNG images using bundled scripts.

  • Works in 5 steps: Extracts all Mermaid code blocks from… → Numbers them sequentially (01, 02, 03,… → Generates .mmd files for each diagram → …
  • Tasks that involve Diagrams
  • SKILL.md covers Overview, Core Workflow, Advanced Usage and Smart Sizing Feature, plus 4 more sections
  • Runs Shell and Python scripts from its folder; calls python3

What it does

Mermaid Tools is an agent skill from daymade/claude-code-skills. 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.

Its SKILL.md is about 1.4k tokens, which your agent loads only when the skill is triggered. The skill folder holds 6 other files, including scripts and reference files (for example `references/setup_and_troubleshooting.md`, `scripts/extract-and-generate.sh` and `scripts/extract_diagrams.py`).

It sits in Development, covering Diagrams. It works with Mermaid. The repository describes itself as: Professional Claude Code skills marketplace featuring production-ready skills for enhanced development workflows. The licence is MIT.

When your agent uses it

  • Tasks that involve Diagrams

Example prompts

  • “Use the mermaid-tools skill to extract Mermaid diagrams from markdown files and generates high-quality PNG images using bundled scripts”
  • “/mermaid-tools”

Requirements

  • Python 3
  • A Bash shell

Workflow steps

5 steps, taken from the first numbered list in SKILL.md.

  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

What it can do on your machine

Read from SKILL.md and the folder at commit 872127b. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Ships 3 files in scripts/ (Shell and Python), which the agent can run.

    Shell commands in SKILL.md call:

    • python3

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Mermaid Tools loads about 1.4k tokens when it runs, and up to ~2.7k if it reads all its reference files. Until then it costs about 72 tokens; SKILL.md has 468 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~72
When it runs · the whole SKILL.md, loaded when a task matches
~1.4k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~2.7k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.

SKILL.md

The full file from daymade/claude-code-skills at commit 872127b, republished under its MIT licence (© daymade). 468 words, ~1,381 tokens.

Download SKILL.mdSave it as .claude/skills/mermaid-tools/SKILL.md (or your agent's skills folder). This skill also uses 4 other files; get the full folder from GitHub.
name
mermaid-tools
description
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.
disable-model-invocation
true

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:

bash
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>/diagrams

Example:

bash
cd "${CLAUDE_SKILL_DIR}/scripts"
./extract-and-generate.sh "<markdown_file>" "<output_directory>"
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:

bash
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 pixels
  • MERMAID_HEIGHT (default: 800) - Base height in pixels
  • MERMAID_SCALE (default: 2) - Scale factor for high-resolution output
High-Resolution Output for Presentations
bash
cd "${CLAUDE_SKILL_DIR}/scripts"
MERMAID_WIDTH=2400 MERMAID_HEIGHT=1800 MERMAID_SCALE=4 ./extract-and-generate.sh "<markdown_file>" "<output_directory>"
Print-Quality Output
bash
cd "${CLAUDE_SKILL_DIR}/scripts"
MERMAID_SCALE=5 ./extract-and-generate.sh "<markdown_file>" "<output_directory>"

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.

Important Principles

Use Bundled Scripts

CRITICAL: Use the bundled extract-and-generate.sh script from this skill's scripts/ directory. All necessary dependencies are bundled together.

Show full SKILL.md (204 more words)Show less
Change to Script Directory

Run the script from its own directory to properly locate dependencies (extract_diagrams.py and puppeteer-config.json):

bash
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.

Prerequisites Verification

Before running the script, verify dependencies are installed:

  1. mermaid-cli: mmdc --version
  2. Google Chrome: google-chrome-stable --version
  3. Python 3: python3 --version

If any are missing, consult references/setup_and_troubleshooting.md for installation instructions.

Troubleshooting

For detailed troubleshooting guidance, refer to references/setup_and_troubleshooting.md, which covers:

  • Browser launch failures
  • Permission issues
  • No diagrams found
  • Python extraction failures
  • Output quality issues
  • Diagram-specific sizing problems

Quick fixes for common issues:

Permission denied:

bash
chmod +x "${CLAUDE_SKILL_DIR}/scripts/extract-and-generate.sh"

Low quality output:

bash
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).

Bundled Resources

scripts/

This skill bundles all necessary scripts for Mermaid diagram generation:

  • extract-and-generate.sh - Main script that orchestrates extraction and PNG generation
  • extract_diagrams.py - Python script for extracting Mermaid code blocks from markdown
  • puppeteer-config.json - Chrome/Puppeteer configuration for WSL2 environment

All scripts must be run from the scripts/ directory to properly locate dependencies.

references/setup_and_troubleshooting.md

Comprehensive reference documentation including:

  • Complete prerequisite installation instructions
  • Detailed environment variable reference
  • Extensive troubleshooting guide
  • WSL2-specific Chrome dependency setup
  • Validation procedures

Load this reference when dealing with setup issues, installation problems, or advanced customization needs.

© daymade, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 4 other files (scripts, references) in daymade-docs/mermaid-tools of daymade/claude-code-skills.

  • SKILL.md
  • references/setup_and_troubleshooting.md
  • scripts/extract-and-generate.sh
  • scripts/extract_diagrams.py
  • scripts/puppeteer-config.json

Open the folder on GitHubat commit 872127b

Used in 1 other repository

We found 1 copy of this SKILL.md (exact, near-identical or edited) in other folders, from 1 other GitHub owner. This page covers the copy in daymade/claude-code-skills, which our catalogue first saw on October 7, 2026.

Compare with similar skills

Mermaid Tools next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Mermaid Tools compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Mermaid Tools this skilldaymade/claude-code-skills1.4k1 repos~1.4kAutomated safety check: PassMIT
Archify Diagramstt-a1i/archify81k—~2.9kAutomated safety check: PassMIT
Diagram Designcathrynlavery/diagram-design47k1 repos~7.5kAutomated safety check: PassMIT
Draw.io Diagram StudioAgents365-ai/drawio-skill10k—~2.4kAutomated safety check: NotesMIT
Pretty Mermaid Rendererimxv/Pretty-mermaid-skills1.5k—~2kAutomated safety check: PassMIT
Archify Diagram BuilderUnclecheng-li/AI_Animation1.5k2 repos~4.1kAutomated safety check: PassMIT

Similar skills

  • Archify Diagrams

    tt-a1i/archify

    Creates interactive architecture, workflow, sequence, data-flow and lifecycle diagrams as standalone HTML with inline SVG, themes and image or video export.

    81k GitHub stars~2.9k tokensUpdated today
    DevelopmentAuto-check passed

  • Diagram Design

    cathrynlavery/diagram-design

    Creates branded diagrams, from architecture, flowchart and sequence to charts and maps, as self-contained HTML with inline SVG, with import from draw.io, Mermaid and Excalidraw.

    47k GitHub starsUsed in 1 repo~7.5k tokens
    DevelopmentAuto-check passed

  • Draw.io Diagram Studio

    Agents365-ai/drawio-skill

    Creates and edits editable draw.io diagrams from descriptions, code, infrastructure files, SQL and API schemas, with sync, review, test and export tools.

    10k GitHub stars~2.4k tokensUpdated 7 days ago
    DevelopmentAuto-check: notes

  • Pretty Mermaid Renderer

    imxv/Pretty-mermaid-skills

    Writes and renders Mermaid diagrams as themed SVG, PNG or terminal ASCII and Unicode art with a bundled Node.js CLI that needs no browser.

    1.5k GitHub stars~2k tokensUpdated 1 mo ago
    DevelopmentAuto-check passed

  • Archify Diagram Builder

    Unclecheng-li/AI_Animation

    Builds validated architecture, workflow, sequence, data-flow and lifecycle diagrams as standalone interactive HTML from a small JSON spec, with optional motion and image export.

    1.5k GitHub starsUsed in 2 repos~4.1k tokens
    DevelopmentAuto-check passed

  • Mermaid

    WH-2099/mermaid-skill

    Generate Mermaid diagrams from user requirements. An agent skill from WH-2099/mermaid-skill.

    288 GitHub starsUsed in 4 repos~958 tokens
    DevelopmentAuto-check passed

More from daymade/claude-code-skills

All 103 skills in this repo

  • Video Comparer

    daymade/claude-code-skills

    This skill should be used when comparing two videos to analyze compression results or quality differences.

    1.4k GitHub starsUsed in 1 repo~1.4k tokens
    Auto-check: notes

  • CLI Demo Generator

    daymade/claude-code-skills

    Generates professional animated CLI demos as GIFs using VHS terminal recordings.

    1.4k GitHub stars~1.7k tokensUpdated today
    Auto-check passed

  • Doc To Markdown

    daymade/claude-code-skills

    Converts DOCX/PDF/PPTX and saved HTML/HTM to high-quality Markdown with automatic post-processing.

    1.4k GitHub stars~2.5k tokensUpdated today
    Auto-check passed

  • Interaction Design Board

    daymade/claude-code-skills

    Generates several distinct, clickable HTML interaction prototypes for one product surface into a Design Board and collects selection/remix feedback before implementation.

    1.4k GitHub stars~2.7k tokensUpdated today
    Auto-check passed

  • Auto Repo Setup

    daymade/claude-code-skills

    Diagnoses and repairs repository setup and guarded Git workflows for Claude Code or Codex — environment repair, startup sync, hook auditing, collaborator handoff.

    1.4k GitHub stars~2.8k tokensUpdated today
    Auto-check: notes

  • Bigdata Skill

    daymade/claude-code-skills

    Pulls Bigdata.com (RavenPack) financial and news data via the official bigdata-client SDK and /v1/ REST endpoints — structured financials, prices, analyst estimates, entity-sentiment series…

    1.4k GitHub stars~3.7k tokensUpdated today
    Auto-check passed

Works with

Categories

Questions about Mermaid Tools

What does Mermaid Tools do?

Extracts Mermaid diagrams from markdown files and generates high-quality PNG images using bundled scripts. Mermaid Tools is an agent skill from daymade/claude-code-skills. Extracts Mermaid diagrams from markdown files and generates high-quality PNG images using bundled scripts.

When should I use Mermaid Tools?

Mermaid Tools fits situations like: tasks that involve Diagrams.

How do I install Mermaid Tools in Claude Code?

Run `npx skills add daymade/claude-code-skills --skill mermaid-tools -a claude-code`. Or copy the skill folder (daymade-docs/mermaid-tools in daymade/claude-code-skills) into .claude/skills/mermaid-tools in your project. Claude Code loads it when a task matches its description.

How do I install Mermaid Tools in Codex?

Run `npx skills add daymade/claude-code-skills --skill mermaid-tools -a codex`. Or copy the skill folder (daymade-docs/mermaid-tools in daymade/claude-code-skills) into .agents/skills/mermaid-tools in your project. Codex loads it when a task matches its description.

Can I use Mermaid Tools in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add daymade/claude-code-skills --skill mermaid-tools -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/mermaid-tools, .gemini/skills/mermaid-tools, .github/skills/mermaid-tools and .opencode/skills/mermaid-tools in your project.

What does Mermaid Tools need to run?

Going by SKILL.md and its folder, Mermaid Tools needs a shell and Python for the scripts in its folder and the command-line tools its instructions call (python3). Our summary lists: Python 3; A Bash shell.

Does Mermaid Tools access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Mermaid Tools safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.

What licence does Mermaid Tools use?

Mermaid Tools is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Mermaid Tools use?

About 1.4k tokens (SKILL.md is roughly 5.5k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 1.3k tokens, read only when the agent opens those files.

What are the alternatives to Mermaid Tools?

Skills that share tags, products or a category with Mermaid Tools: Archify Diagrams (tt-a1i/archify, 81k stars), Diagram Design (cathrynlavery/diagram-design, 47k stars), Draw.io Diagram Studio (Agents365-ai/drawio-skill, 10k stars) and Pretty Mermaid Renderer (imxv/Pretty-mermaid-skills, 1.5k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Mermaid Tools?

daymade (a GitHub user) maintains it in daymade/claude-code-skills, which has 1,447 GitHub stars. The repository holds 103 skills in this directory. The repository was last updated on October 9, 2026.

Source: daymade/claude-code-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.