diagram-to-image

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Diagram to Image

图表转图片

Convert Mermaid diagrams and Markdown tables to images (PNG/SVG) for use in platforms that don't support rich formatting, like X (Twitter).

将Mermaid图表和Markdown表格转换为图片（PNG/SVG格式），用于X（Twitter）等不支持富文本格式的平台。

When to Use

使用场景

Use this skill when:

User has a Mermaid diagram that needs to be converted to an image
User has a Markdown table that needs to be converted to an image
User is writing content for X/Twitter and needs visual exports
User asks to "convert to image", "export as PNG", "make this an image", or similar

在以下场景中使用此技能：

用户需要将Mermaid图表转换为图片
用户需要将Markdown表格转换为图片
用户正在为X/Twitter创作内容，需要视觉化导出
用户要求“转换为图片”“导出为PNG”“将此转为图片”或类似需求

Prerequisites

前置条件

Ensure dependencies are installed:

bash

undefined

确保已安装依赖项：

bash

undefined

Check if mermaid-cli is installed

检查是否安装了mermaid-cli

which mmdc || npm install -g @mermaid-js/mermaid-cli

undefined

which mmdc || npm install -g @mermaid-js/mermaid-cli

undefined

Smart Output Location

智能输出位置

IMPORTANT: Determine the best output location based on context. Follow this decision tree:

重要提示： 根据上下文确定最佳输出位置，遵循以下决策流程：

1. User Specifies Path

1. 用户指定路径

If user explicitly mentions a path or filename, use that.

如果用户明确提及路径或文件名，则使用该路径。

2. Project Context Detection

2. 项目上下文检测

Check for common image/asset directories in the current project:

bash

undefined

检查当前项目中的常见图片/资源目录：

bash

undefined

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 convention

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/` - 简写约定

3. Article/Document Context

3. 文章/文档上下文

If user is writing an article or document:

Look for the document's directory
Create
```
images/
```
subdirectory if appropriate
Name the image based on the document name + descriptor

如果用户正在撰写文章或文档：

查找文档所在目录
必要时创建
```
images/
```
子目录
根据文档名称+描述符命名图片

4. Conversation Context

4. 对话上下文

Analyze the conversation to determine:

What the diagram represents → Use for filename (e.g.,
```
auth-flow.png
```
,
```
user-journey.png
```
)
Related file being discussed → Place image near that file
Topic being discussed → Use for naming

分析对话内容以确定：

图表代表的内容 → 用于文件名（例如
```
auth-flow.png
```
、
```
user-journey.png
```
）
讨论的相关文件 → 将图片放置在该文件附近
讨论的主题 → 用于命名

5. Default Fallback

5. 默认 fallback

If no context clues:

Use current working directory
Generate descriptive filename from diagram content

如果没有上下文线索：

使用当前工作目录
根据图表内容生成描述性文件名

Filename Generation

文件名生成

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`
`gantt` chart	`project-timeline.png`
Table with comparison	`comparison-table.png`
Table with data	`data-table.png`

Rules:

Use kebab-case (lowercase with hyphens)
Keep names concise but descriptive (2-4 words)
Avoid generic names like
```
diagram.png
```
or
```
image.png
```
Include topic/subject when identifiable

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

内容模式	示例文件名
包含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`

规则：

使用短横线分隔的小写格式（kebab-case）
名称需简洁且具有描述性（2-4个词）
避免使用
```
diagram.png
```
或
```
image.png
```
这类通用名称
可识别主题/主题时需包含在内

Conversion Process

转换流程

Step 1: Analyze Context

步骤1：分析上下文

Before converting, gather context:

Check current working directory
Look for existing image directories
Analyze diagram/table content for naming
Consider any files or topics mentioned in conversation

转换前，收集上下文信息：

检查当前工作目录
查找现有图片目录
分析图表/表格内容以命名
考虑对话中提及的任何文件或主题

Step 2: Determine Output Path

步骤2：确定输出路径

bash

undefined

bash

undefined

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"

undefined

undefined

Step 3: Create Temporary Input File

步骤3：创建临时输入文件

bash

undefined

bash

undefined

For Mermaid

处理Mermaid图表

cat > /tmp/diagram.mmd << 'DIAGRAM_EOF' <mermaid content> DIAGRAM_EOF

cat > /tmp/diagram.mmd << 'DIAGRAM_EOF' <mermaid内容> DIAGRAM_EOF

For Markdown table

处理Markdown表格

cat > /tmp/table.md << 'TABLE_EOF'

<table content> TABLE_EOF ```

cat > /tmp/table.md << 'TABLE_EOF' <表格内容> TABLE_EOF

undefined

Step 4: Convert

步骤4：执行转换

Mermaid to PNG:

bash

mmdc -i /tmp/diagram.mmd -o <output_path>.png -b white -s 2

Mermaid to SVG:

bash

mmdc -i /tmp/diagram.mmd -o <output_path>.svg -b transparent

Table to PNG:

bash

python3 ~/.claude/skills/diagram-to-image/scripts/table_to_image.py /tmp/table.md <output_path>.png

Mermaid转PNG：

bash

mmdc -i /tmp/diagram.mmd -o <output_path>.png -b white -s 2

Mermaid转SVG：

bash

mmdc -i /tmp/diagram.mmd -o <output_path>.svg -b transparent

表格转PNG：

bash

python3 ~/.claude/skills/diagram-to-image/scripts/table_to_image.py /tmp/table.md <output_path>.png

Step 5: Report Result

步骤5：反馈结果

After conversion, tell the user:

Full path where image was saved
Why that location was chosen (briefly)
Image dimensions or file size
Suggest they can specify a different location if needed

转换完成后，告知用户：

图片保存的完整路径
选择该位置的原因（简要说明）
图片的尺寸或文件大小
提示用户如果需要可以指定其他位置

Examples

示例

Example 1: Project with images/ directory

示例1：带有images/目录的项目

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:

Detect
```
./images/
```
exists
Analyze content → authentication flow
Generate filename:
```
login-flow.png
```
Output:
```
./images/login-flow.png
```

上下文： 用户处于一个包含

./images/

目录的项目中，正在讨论认证相关内容。

用户请求： “将此转换为图片”

flowchart TD
    A[Login] --> B{Valid?}
    B -->|Yes| C[Dashboard]
    B -->|No| D[Error]

操作：

检测到
```
./images/
```
目录存在
分析内容 → 认证流程
生成文件名：
```
login-flow.png
```
输出路径：
```
./images/login-flow.png
```

Example 2: Writing X article about AI

示例2：撰写关于AI的X文章

Context: User mentioned writing an article about AI agents for X.

User: "Make this a PNG"

flowchart LR
    User --> Agent --> Tools --> Response

Action:

No standard image directory found
Context: AI agents article for X
Generate filename:
```
ai-agent-flow.png
```
Output:
```
./ai-agent-flow.png
```

上下文： 用户提到正在为X撰写关于AI Agent的文章。

用户请求： “将此转为PNG”

flowchart LR
    User --> Agent --> Tools --> Response

操作：

未找到标准图片目录
上下文：AI Agent相关的X文章
生成文件名：
```
ai-agent-flow.png
```
输出路径：
```
./ai-agent-flow.png
```

Example 3: Data comparison table

示例3：数据对比表格

User: "Export this table as image"

| Model | Speed | Accuracy |
|-------|-------|----------|
| GPT-4 | Slow | High |
| Claude | Fast | High |

Action:

Check for image directories
Analyze content → model comparison
Generate filename:
```
model-comparison.png
```
Output to appropriate location

用户请求： “将此表格导出为图片”

| Model | Speed | Accuracy |
|-------|-------|----------|
| GPT-4 | Slow | High |
| Claude | Fast | High |

操作：

检查图片目录
分析内容 → 模型对比
生成文件名：
```
model-comparison.png
```
输出到合适位置

Example 4: User specifies location

示例4：用户指定位置

User: "Save this diagram to ~/Desktop/my-chart.png"

Action: Use exactly

~/Desktop/my-chart.png

as specified.

用户请求： “将此图表保存到~/Desktop/my-chart.png”

操作： 严格使用指定路径

~/Desktop/my-chart.png

Error Handling

错误处理

If output directory doesn't exist, create it (with user confirmation for new directories)
If file already exists, append number:
```
auth-flow-2.png
```
If mmdc not installed:
```
npm install -g @mermaid-js/mermaid-cli
```
If Pillow not installed:
```
pip install pillow
```

如果输出目录不存在，创建该目录（新建目录需获得用户确认）
如果文件已存在，追加数字：
```
auth-flow-2.png
```
如果未安装mmdc：执行
```
npm install -g @mermaid-js/mermaid-cli
```
如果未安装Pillow：执行
```
pip install pillow
```