Mermaid 图表工具：从 Markdown 自动提取并生成高质量 PNG 图像

mermaid-tools by daymade/claude-code-skills

170 周安装量

713 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/daymade/claude-code-skills --skill mermaid-tools

数据可视化自动化技术文档

🇨🇳中文介绍

Mermaid 工具

概述

此技能支持从 Markdown 文件中提取 Mermaid 图表并生成高质量的 PNG 图像。该技能将所有必要的脚本（extract-and-generate.sh、extract_diagrams.py 和 puppeteer-config.json）打包在 scripts/ 目录中，以确保可移植性和可靠性。

核心工作流程

标准图表提取与生成

使用打包的 extract-and-generate.sh 脚本从 Markdown 文件中提取 Mermaid 图表并生成 PNG 图像：

cd ~/.claude/skills/mermaid-tools/scripts
./extract-and-generate.sh "<markdown_file>" "<output_directory>"

参数：

<markdown_file>：包含 Mermaid 图表的 Markdown 文件路径

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

自定义尺寸和缩放

使用环境变量覆盖默认尺寸：

cd ~/.claude/skills/mermaid-tools/scripts
MERMAID_WIDTH=1600 MERMAID_HEIGHT=1200 ./extract-and-generate.sh "<markdown_file>" "<output_directory>"

MERMAID_WIDTH（默认：1200）- 基础宽度（像素）
MERMAID_HEIGHT（默认：800）- 基础高度（像素）
MERMAID_SCALE（默认：2）- 高分辨率输出的缩放因子

演示文稿的高分辨率输出

cd ~/.claude/skills/mermaid-tools/scripts
MERMAID_WIDTH=2400 MERMAID_HEIGHT=1800 MERMAID_SCALE=4 ./extract-and-generate.sh "<markdown_file>" "<output_directory>"

cd ~/.claude/skills/mermaid-tools/scripts
MERMAID_SCALE=5 ./extract-and-generate.sh "<markdown_file>" "<output_directory>"

智能尺寸调整功能

脚本会根据图表类型（通过文件名检测）自动调整尺寸：

时间线/甘特图：2400×400（宽而短）
架构/系统/缓存：2400×1600（大而详细）
监控/工作流/序列/API：2400×800（适用于流程的宽图）
默认：1200×800（标准尺寸）

提取过程中的上下文感知命名有助于触发适当的智能尺寸调整。

关键：请使用此技能 scripts/ 目录中打包的 extract-and-generate.sh 脚本。所有必要的依赖项都已打包在一起。

切换到脚本目录

从其自身目录运行脚本，以正确定位依赖项（extract_diagrams.py 和 puppeteer-config.json）：

cd ~/.claude/skills/mermaid-tools/scripts
./extract-and-generate.sh "<markdown_file>" "<output_directory>"

如果不先切换到脚本目录就运行脚本，可能会因缺少依赖项而失败。

运行脚本前，请验证依赖项是否已安装：

mermaid-cli：mmdc --version
Google Chrome：google-chrome-stable --version
Python 3：python3 --version

如果缺少任何一项，请查阅 references/setup_and_troubleshooting.md 获取安装说明。

有关详细的故障排除指南，请参阅 references/setup_and_troubleshooting.md，其中涵盖：

浏览器启动失败
权限问题
未找到图表
Python 提取失败
输出质量问题
特定图表尺寸问题

常见问题的快速修复：

权限被拒绝：

chmod +x ~/.claude/skills/mermaid-tools/scripts/extract-and-generate.sh

输出质量低：

MERMAID_SCALE=3 ./extract-and-generate.sh "<markdown_file>" "<output_directory>"

Chrome/Puppeteer 错误： 验证所有 WSL2 依赖项是否已安装（完整列表请参阅参考资料）。

此技能打包了 Mermaid 图表生成所需的所有脚本：

extract-and-generate.sh - 协调提取和 PNG 生成的主脚本
extract_diagrams.py - 用于从 Markdown 中提取 Mermaid 代码块的 Python 脚本
puppeteer-config.json - 适用于 WSL2 环境的 Chrome/Puppeteer 配置

所有脚本必须从 scripts/ 目录运行，以正确定位依赖项。

references/setup_and_troubleshooting.md

全面的参考资料文档，包括：

完整的先决条件安装说明
详细的环境变量参考
广泛的故障排除指南
WSL2 特定的 Chrome 依赖项设置
验证程序

在处理设置问题、安装问题或高级自定义需求时，请加载此参考资料。

🇺🇸English

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:

cd ~/.claude/skills/mermaid-tools/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:

cd ~/.claude/skills/mermaid-tools/scripts
./extract-and-generate.sh "/path/to/document.md" "/path/to/output"

What the Script Does

Extracts all Mermaid code blocks from the markdown file
Numbers them sequentially (01, 02, 03, etc.) in order of appearance
Generates .mmd files for each diagram
Creates high-resolution PNG images with smart sizing
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:

cd ~/.claude/skills/mermaid-tools/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

cd ~/.claude/skills/mermaid-tools/scripts
MERMAID_WIDTH=2400 MERMAID_HEIGHT=1800 MERMAID_SCALE=4 ./extract-and-generate.sh "<markdown_file>" "<output_directory>"

Print-Quality Output

cd ~/.claude/skills/mermaid-tools/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.

Change to Script Directory

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

cd ~/.claude/skills/mermaid-tools/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:

mermaid-cli : mmdc --version
Google Chrome : google-chrome-stable --version
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:

chmod +x ~/.claude/skills/mermaid-tools/scripts/extract-and-generate.sh

Low quality output:

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.

Weekly Installs

107

Repository

daymade/claude-…e-skills

GitHub Stars

636

First Seen

Jan 21, 2026

Security Audits

Gen Agent Trust HubFail SocketPass SnykPass

Installed on

claude-code91

opencode84

gemini-cli79

codex78

cursor71

github-copilot69

Skills CLI 使用指南：AI Agent 技能包管理器安装与管理教程

33,600 周安装

Mermaid 图表工具：从 Markdown 自动提取并生成高质量 PNG 图像

🇨🇳中文介绍

Mermaid 工具

概述

核心工作流程

标准图表提取与生成

相关 Skills

脚本功能

输出文件

高级用法

自定义尺寸和缩放

演示文稿的高分辨率输出

打印质量输出

智能尺寸调整功能

重要原则

使用打包脚本

切换到脚本目录

先决条件验证

故障排除

打包资源

scripts/

references/setup_and_troubleshooting.md

🇺🇸English

Mermaid Tools

Overview

Core Workflow

Standard Diagram Extraction and Generation

What the Script Does

Output Files

Advanced Usage

Custom Dimensions and Scaling

High-Resolution Output for Presentations

Print-Quality Output

Smart Sizing Feature

Important Principles

Use Bundled Scripts

Change to Script Directory

Prerequisites Verification

Troubleshooting

Bundled Resources

scripts/

references/setup_and_troubleshooting.md

最新 Skills