mermaid-tools by daymade/claude-code-skills
npx skills add https://github.com/daymade/claude-code-skills --skill mermaid-tools此技能支持从 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 开发者,精准高效
<output_directory>:(可选)输出文件的目录。默认为 <markdown_file_directory>/diagrams示例:
cd ~/.claude/skills/mermaid-tools/scripts
./extract-and-generate.sh "/path/to/document.md" "/path/to/output"
.mmd 文件对于每个图表,脚本会生成:
01-diagram-name.mmd - 提取的 Mermaid 代码01-diagram-name.png - 高分辨率 PNG 图像编号确保图表保持其在源文档中的顺序。
使用环境变量覆盖默认尺寸:
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>"
脚本会根据图表类型(通过文件名检测)自动调整尺寸:
提取过程中的上下文感知命名有助于触发适当的智能尺寸调整。
关键:请使用此技能 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>"
如果不先切换到脚本目录就运行脚本,可能会因缺少依赖项而失败。
运行脚本前,请验证依赖项是否已安装:
mmdc --versiongoogle-chrome-stable --versionpython3 --version如果缺少任何一项,请查阅 references/setup_and_troubleshooting.md 获取安装说明。
有关详细的故障排除指南,请参阅 references/setup_and_troubleshooting.md,其中涵盖:
常见问题的快速修复:
权限被拒绝:
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 图表生成所需的所有脚本:
所有脚本必须从 scripts/ 目录运行,以正确定位依赖项。
全面的参考资料文档,包括:
在处理设置问题、安装问题或高级自定义需求时,请加载此参考资料。
每周安装次数
107
代码仓库
GitHub 星标数
636
首次出现
2026年1月21日
安全审计
已安装于
claude-code91
opencode84
gemini-cli79
codex78
cursor71
github-copilot69
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.
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>/diagramsExample:
cd ~/.claude/skills/mermaid-tools/scripts
./extract-and-generate.sh "/path/to/document.md" "/path/to/output"
.mmd files for each diagramFor each diagram, the script generates:
01-diagram-name.mmd - Extracted Mermaid code01-diagram-name.png - High-resolution PNG imageThe numbering ensures diagrams maintain their order from the source document.
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 pixelsMERMAID_HEIGHT (default: 800) - Base height in pixelsMERMAID_SCALE (default: 2) - Scale factor for high-resolution outputcd ~/.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>"
The script automatically adjusts dimensions based on diagram type (detected from filename):
Context-aware naming in the extraction process helps trigger appropriate smart sizing.
CRITICAL : Use the bundled extract-and-generate.sh script from this skill's scripts/ directory. All necessary dependencies are bundled together.
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.
Before running the script, verify dependencies are installed:
mmdc --versiongoogle-chrome-stable --versionpython3 --versionIf any are missing, consult references/setup_and_troubleshooting.md for installation instructions.
For detailed troubleshooting guidance, refer to references/setup_and_troubleshooting.md, which covers:
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).
This skill bundles all necessary scripts for Mermaid diagram generation:
All scripts must be run from the scripts/ directory to properly locate dependencies.
Comprehensive reference documentation including:
Load this reference when dealing with setup issues, installation problems, or advanced customization needs.
Weekly Installs
107
Repository
GitHub Stars
636
First Seen
Jan 21, 2026
Security Audits
Gen Agent Trust HubFailSocketPassSnykPass
Installed on
claude-code91
opencode84
gemini-cli79
codex78
cursor71
github-copilot69
Skills CLI 使用指南:AI Agent 技能包管理器安装与管理教程
33,600 周安装