SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场diagram-to-image

diagram-to-image

设计与创作

查看项目

更新于 10-15 16:36

技能介绍

用途

diagram-to-image 用于把 Mermaid 图表和 Markdown 表格转换成 PNG 图片，适合需要在不支持富文本格式的平台上展示图表的场景。当用户要求“转换为图片”“导出为 PNG”“把这个做成图片”或类似表达时，可使用该技能。它通过 mermaid-red API（diagramless.xyz）生成高质量、带样式的输出，并支持自定义主题，无需重型本地依赖。

主要能力

  • 将 Mermaid 图表转换为 PNG 图片。
  • 将 Markdown 表格转换为 PNG 图片。
  • 通过 mermaid-red API（diagramless.xyz）生成高质量、带样式的输出，并支持自定义主题。
  • 自动识别内容类型（Mermaid 或表格），两者使用同一命令。
  • 支持通过 stdin 管道传入内容。

使用方式

前置条件：捆绑脚本使用 Node.js 内置 fetch（Node 18+），无需 npm install。

检查渲染脚本是否随技能捆绑：

SKILL_DIR=~/.claude/skills/diagram-to-image/scripts
ls $SKILL_DIR/diagram-to-image.mjs

使用捆绑脚本转换：

# 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

可用选项：

  • --theme <name> — default、dark、forest、neutral、ocean、emerald、midnight、slate、lavender、blueprint
  • --type <type> — auto（默认）、mermaid、table
  • --scale <n> — 1-4（默认：2，用于 2x DPI）
  • --bg <color> — 背景色（默认白色，使用 "transparent" 表示无背景）
  • --server <url> — 覆盖服务器（默认：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

创建临时输入文件：

# 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

输出位置选择

输出位置根据上下文决定，决策顺序如下：

  1. 用户指定路径：若用户明确提到路径或文件名，则使用该路径。
  2. 项目上下文检测：检查当前项目中常见的图片/资源目录：
ls -d ./images ./assets ./img ./static ./public/images ./assets/images 2>/dev/null | head -1

使用找到的第一个目录。常见模式包括：./images/（通用项目）、./assets/（Web 项目）、./assets/images/（结构化 Web 项目）、./public/images/（Next.js、React 项目）、./static/（Hugo、其他静态站点生成器）、./img/（短形式约定）。

  1. 文章/文档上下文：若用户正在撰写文章或文档，查找文档所在目录，酌情创建 images/ 子目录，并根据文档名加描述词命名图片。
  2. 对话上下文：分析对话以确定图表所代表的内容（用于命名，例如 auth-flow.png、user-journey.png）、正在讨论的相关文件（图片放在该文件附近）、正在讨论的主题（用于命名）。
  3. 默认回退：若无上下文线索，使用当前工作目录，并根据图表内容生成描述性文件名。

文件名生成

根据内容分析创建有意义的文件名，例如：

  • 含 auth/login 的 flowchart → auth-flow.png
  • 含 API 的 sequenceDiagram → api-sequence.png
  • erDiagram → entity-relationship.png
  • 关于 X 的 pie chart → x-distribution.png
  • gantt chart → project-timeline.png
  • 含比较的表格 → comparison-table.png
  • 含数据的表格 → data-table.png

规则：使用 kebab-case（小写加连字符）；名称简洁但具描述性（2-4 个词）；避免 diagram.png 或 image.png 之类的泛化名称；可识别时包含主题/对象。

转换流程

  1. 分析上下文：检查当前工作目录、查找已有图片目录、分析图表/表格内容用于命名、考虑对话中提到的文件或主题。
  2. 确定输出路径：按上述决策顺序确定。
  3. 创建临时输入文件：将 Mermaid 内容写入 /tmp/diagram.mmd，或将表格内容写入 /tmp/table.md。
  4. 通过 mermaid-red API 转换：API 自动检测内容类型（mermaid vs table），两者使用同一命令。
  5. 报告结果：转换后告知用户图片保存的完整路径、选择该位置的原因（简要）、文件大小（字节，由脚本打印），并建议用户如有需要可指定其他位置。

适用场景

  • 用户有需要转换为图片的 Mermaid 图表。
  • 用户有需要转换为图片的 Markdown 表格。
  • 用户正在为 X/Twitter 撰写内容，需要视觉导出。
  • 用户要求“转换为图片”“导出为 PNG”“把这个做成图片”或类似表达。

示例：

  • 项目含 ./images/ 目录且讨论认证时，将认证流程图保存为 ./images/login-flow.png。
  • 为 X 撰写关于 AI 的文章时，使用 ocean 主题输出 AI 智能体流程图。
  • 将模型对比表格导出为图片（自动识别为 table）。
  • 用户指定位置时（如 ~/Desktop/my-chart.png），严格使用该路径。

限制与错误处理

  • 若 API 服务器不可达，脚本会打印清晰的错误信息。
  • 若内容类型自动检测失败，需显式使用 --type mermaid 或 --type table。
  • 本地开发/测试可使用 --server http://localhost:3000。
  • 其他功能、收费、价格、平台、效果或使用步骤等事实资料中暂未提供。