重要前提
安装AI Skills的关键前提是:必须科学上网,且开启TUN模式,这一点至关重要,直接决定安装能否顺利完成,在此郑重提醒三遍:科学上网,科学上网,科学上网。查看完整安装教程 →
diagram-to-image by sugarforever/01coder-agent-skills
npx skills add https://github.com/sugarforever/01coder-agent-skills --skill diagram-to-image通过 mermaid-red API (diagramless.xyz) 将 Mermaid 图表和 Markdown 表格转换为 PNG 图片。生成高质量、带样式的输出,支持自定义主题 —— 无需繁重的本地依赖。
在以下情况使用此技能:
捆绑的脚本使用 Node.js 内置的 fetch (Node 18+)。无需 npm 安装。
# 渲染脚本与此技能捆绑:
SKILL_DIR=~/.claude/skills/diagram-to-image/scripts
ls $SKILL_DIR/diagram-to-image.mjs
重要: 根据上下文确定最佳输出位置。遵循此决策树:
如果用户明确提及路径或文件名,则使用该路径。
检查当前项目中常见的图片/资源目录:
# 检查现有图片目录(按优先级顺序)
ls -d ./images ./assets ./img ./static ./public/images ./assets/images 2>/dev/null | head -1
使用找到的第一个现有目录。常见模式:
./images/ - 通用项目广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
./assets/ - Web 项目./assets/images/ - 结构化 Web 项目./public/images/ - Next.js, React 项目./static/ - Hugo, 其他静态站点生成器./img/ - 简短形式约定如果用户正在撰写文章或文档:
images/ 子目录分析对话以确定:
auth-flow.png, user-journey.png)如果没有上下文线索:
基于内容分析创建有意义的文件名:
| 内容模式 | 示例文件名 |
|---|---|
包含 auth/login 的 flowchart | auth-flow.png |
包含 API 的 sequenceDiagram | api-sequence.png |
erDiagram | entity-relationship.png |
关于 X 的 pie 图 | x-distribution.png |
gantt 图 | project-timeline.png |
| 包含比较的表格 | comparison-table.png |
| 包含数据的表格 | data-table.png |
规则:
diagram.png 或 image.png在转换之前,收集上下文:
# 示例逻辑(在脑海中实现,非字面脚本)
if user_specified_path:
output_path = user_specified_path
elif exists("./images"):
output_path = "./images/{generated_name}.png"
elif exists("./assets"):
output_path = "./assets/{generated_name}.png"
elif exists("./public/images"):
output_path = "./public/images/{generated_name}.png"
else:
output_path = "./{generated_name}.png"
# 对于 Mermaid 图表
cat > /tmp/diagram.mmd << 'DIAGRAM_EOF'
<mermaid content>
DIAGRAM_EOF
# 对于 Markdown 表格
cat > /tmp/table.md << 'TABLE_EOF'
<table content>
TABLE_EOF
API 自动检测内容类型(mermaid 与 table)。两者使用相同的命令。
使用捆绑的脚本:
# Mermaid 图表
node ~/.claude/skills/diagram-to-image/scripts/diagram-to-image.mjs /tmp/diagram.mmd -o <output_path>.png
# Markdown 表格
node ~/.claude/skills/diagram-to-image/scripts/diagram-to-image.mjs /tmp/table.md -o <output_path>.png
# 使用自定义主题
node ~/.claude/skills/diagram-to-image/scripts/diagram-to-image.mjs /tmp/diagram.mmd -o <output_path>.png --theme ocean
# 强制指定内容类型(如果自动检测出错)
node ~/.claude/skills/diagram-to-image/scripts/diagram-to-image.mjs /tmp/table.md -o <output_path>.png --type table
可用选项:
--theme <name> — default, dark, forest, neutral, ocean, emerald, midnight, slate, lavender, blueprint--type <type> — auto (default), mermaid, table--scale <n> — 1-4 (default: 2, for 2x DPI)--bg <color> — 背景颜色 (default: white, use "transparent" for no bg)--server <url> — 覆盖服务器 (default: https://diagramless.xyz)从 stdin 管道输入也有效:
echo "graph TD; A-->B" | node ~/.claude/skills/diagram-to-image/scripts/diagram-to-image.mjs -o out.png
cat /tmp/table.md | node ~/.claude/skills/diagram-to-image/scripts/diagram-to-image.mjs --type table -o table.png
转换后,告知用户:
上下文: 用户在一个具有 ./images/ 目录的项目中,正在讨论身份验证。
用户: “将此转换为图片”
flowchart TD
A[Login] --> B{Valid?}
B -->|Yes| C[Dashboard]
B -->|No| D[Error]
操作:
./images/ 存在login-flow.png/tmp/diagram.mmdnode ~/.claude/skills/diagram-to-image/scripts/diagram-to-image.mjs /tmp/diagram.mmd -o ./images/login-flow.png上下文: 用户提到正在为 X 撰写一篇关于 AI 代理的文章。
用户: “使用 ocean 主题将其制作为 PNG”
flowchart LR
User --> Agent --> Tools --> Response
操作:
/tmp/diagram.mmdnode ~/.claude/skills/diagram-to-image/scripts/diagram-to-image.mjs /tmp/diagram.mmd -o ./ai-agent-flow.png --theme ocean用户: “将此表格导出为图片”
| Model | Speed | Accuracy |
|-------|-------|----------|
| GPT-4 | Slow | High |
| Claude | Fast | High |
操作:
/tmp/table.mdnode ~/.claude/skills/diagram-to-image/scripts/diagram-to-image.mjs /tmp/table.md -o ./model-comparison.png (自动检测为表格)用户: “将此图表保存到 ~/Desktop/my-chart.png”
操作: 完全使用 ~/Desktop/my-chart.png 作为输出路径。
--type mermaid 或 --type table--server http://localhost:3000每周安装次数
67
代码仓库
GitHub 星标数
75
首次出现
Jan 26, 2026
安全审计
安装于
cursor60
gemini-cli58
codex58
opencode58
github-copilot56
kimi-cli55
Convert Mermaid diagrams and Markdown tables to PNG images via the mermaid-red API (diagramless.xyz). Produces high-quality, styled output with custom themes — no heavy local dependencies needed.
Use this skill when:
The bundled script uses Node.js built-in fetch (Node 18+). No npm install needed.
# The render script is bundled with this skill:
SKILL_DIR=~/.claude/skills/diagram-to-image/scripts
ls $SKILL_DIR/diagram-to-image.mjs
IMPORTANT: Determine the best output location based on context. Follow this decision tree:
If user explicitly mentions a path or filename, use that.
Check for common image/asset directories in the current project:
# Check for existing image directories (in order of preference)
ls -d ./images ./assets ./img ./static ./public/images ./assets/images 2>/dev/null | head -1
Use the first existing directory found. Common patterns:
./images/ - General projects./assets/ - Web projects./assets/images/ - Structured web projects./public/images/ - Next.js, React projects./static/ - Hugo, other static site generators./img/ - Short form conventionIf user is writing an article or document:
images/ subdirectory if appropriateAnalyze the conversation to determine:
auth-flow.png, user-journey.png)If no context clues:
Create meaningful filenames based on content analysis:
| Content Pattern | Example Filename |
|---|---|
flowchart with auth/login | auth-flow.png |
sequenceDiagram with API | api-sequence.png |
erDiagram | entity-relationship.png |
pie chart about X | x-distribution.png |
Rules:
diagram.png or image.pngBefore converting, gather context:
# Example logic (implement mentally, not as literal script)
if user_specified_path:
output_path = user_specified_path
elif exists("./images"):
output_path = "./images/{generated_name}.png"
elif exists("./assets"):
output_path = "./assets/{generated_name}.png"
elif exists("./public/images"):
output_path = "./public/images/{generated_name}.png"
else:
output_path = "./{generated_name}.png"
# For Mermaid diagrams
cat > /tmp/diagram.mmd << 'DIAGRAM_EOF'
<mermaid content>
DIAGRAM_EOF
# For Markdown tables
cat > /tmp/table.md << 'TABLE_EOF'
<table content>
TABLE_EOF
The API auto-detects content type (mermaid vs table). Both use the same command.
Using the bundled script:
# Mermaid diagram
node ~/.claude/skills/diagram-to-image/scripts/diagram-to-image.mjs /tmp/diagram.mmd -o <output_path>.png
# Markdown table
node ~/.claude/skills/diagram-to-image/scripts/diagram-to-image.mjs /tmp/table.md -o <output_path>.png
# With custom theme
node ~/.claude/skills/diagram-to-image/scripts/diagram-to-image.mjs /tmp/diagram.mmd -o <output_path>.png --theme ocean
# Force content type (if auto-detect gets it wrong)
node ~/.claude/skills/diagram-to-image/scripts/diagram-to-image.mjs /tmp/table.md -o <output_path>.png --type table
Available options:
--theme <name> — default, dark, forest, neutral, ocean, emerald, midnight, slate, lavender, blueprint--type <type> — auto (default), mermaid, table--scale <n> — 1-4 (default: 2, for 2x DPI)--bg <color> — Background color (default: white, use "transparent" for no bg)--server <url> — Override server (default: https://diagramless.xyz)Piping from stdin also works:
echo "graph TD; A-->B" | node ~/.claude/skills/diagram-to-image/scripts/diagram-to-image.mjs -o out.png
cat /tmp/table.md | node ~/.claude/skills/diagram-to-image/scripts/diagram-to-image.mjs --type table -o table.png
After conversion, tell the user:
Context: User is in a project that has ./images/ directory, discussing authentication.
User: "Convert this to an image"
flowchart TD
A[Login] --> B{Valid?}
B -->|Yes| C[Dashboard]
B -->|No| D[Error]
Action:
./images/ existslogin-flow.png/tmp/diagram.mmdnode ~/.claude/skills/diagram-to-image/scripts/diagram-to-image.mjs /tmp/diagram.mmd -o ./images/login-flow.pngContext: User mentioned writing an article about AI agents for X.
User: "Make this a PNG with ocean theme"
flowchart LR
User --> Agent --> Tools --> Response
Action:
/tmp/diagram.mmdnode ~/.claude/skills/diagram-to-image/scripts/diagram-to-image.mjs /tmp/diagram.mmd -o ./ai-agent-flow.png --theme oceanUser: "Export this table as image"
| Model | Speed | Accuracy |
|-------|-------|----------|
| GPT-4 | Slow | High |
| Claude | Fast | High |
Action:
/tmp/table.mdnode ~/.claude/skills/diagram-to-image/scripts/diagram-to-image.mjs /tmp/table.md -o ./model-comparison.png (auto-detects as table)User: "Save this diagram to ~/Desktop/my-chart.png"
Action: Use exactly ~/Desktop/my-chart.png as output path.
--type mermaid or --type table explicitly--server http://localhost:3000Weekly Installs
67
Repository
GitHub Stars
75
First Seen
Jan 26, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
cursor60
gemini-cli58
codex58
opencode58
github-copilot56
kimi-cli55
MCP图像生成技能:使用Gemini AI为营销、UI设计、演示文稿创建高质量图像
7,600 周安装
Cypress 自动化测试指南:E2E 与组件测试最佳实践、安装配置与故障排除
371 周安装
ARIS 自主机器学习研究工具:夜间自动生成AI论文的Claude Code技能
360 周安装
API契约测试指南:Pact、OpenAPI验证与微服务测试最佳实践
366 周安装
AI文档生成与验证工具 - 自动检测项目类型、生成API文档、检查覆盖率
363 周安装
Google Workspace AI 代理技能 - 全面集成 Docs、Sheets、Gmail、Drive 等 API
361 周安装
React Three Fiber物理引擎教程 - r3f-physics(Rapier)快速入门与实战
364 周安装
gantt chart | project-timeline.png |
| Table with comparison | comparison-table.png |
| Table with data | data-table.png |