image-to-diagram

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Image to Diagram Conversion

图片转图表转换

Convert visual diagrams into editable, version-controllable code.

将可视化图表转换为可编辑、可版本控制的代码。

Workflow

工作流程

Image → Claude Vision → Mermaid/DOT code → Save → Optionally ingest to Qdrant

Image → Claude Vision → Mermaid/DOT code → Save → Optionally ingest to Qdrant

Supported Input

支持的输入类型

Type	Quality
Screenshots of diagrams	Excellent
Architecture tool exports	Excellent
Clean whiteboard photos	Good
Hand-drawn diagrams	Moderate (clear boxes/arrows help)
Low-contrast/blurry images	Poor

类型	转换质量
图表截图	优秀
架构工具导出图	优秀
清晰的白板照片	良好
手绘图表	中等（清晰的方框/箭头会提升效果）
低对比度/模糊图片	较差

Output Formats

输出格式

Mermaid (default)

Mermaid（默认）

Flowcharts, sequence diagrams, class diagrams, ER diagrams
Renders in GitHub, GitLab, Notion, VS Code
File extension:
```
.mmd
```
or
```
.mermaid
```

流程图、时序图、类图、ER图
可在GitHub、GitLab、Notion、VS Code中渲染
文件扩展名：
```
.mmd
```
或
```
.mermaid
```

DOT/Graphviz

More layout control
Better for complex graphs
File extension:
```
.dot
```
or
```
.gv
```

布局控制更灵活
更适合复杂图形
文件扩展名：
```
.dot
```
或
```
.gv
```

Conversion Process

转换流程

1. Analyze the Image

1. 分析图片

Read the image and identify:

Overall structure (hierarchy, flow, network)
Components/nodes and their labels
Relationships/connections between components
Groupings/subgraphs
Color coding (convert to styles)

读取图片并识别：

整体结构（层级、流程、网络）
组件/节点及其标签
组件间的关系/连接
分组/子图
颜色编码（转换为样式）

2. Choose Diagram Type

2. 选择图表类型

Visual Pattern	Mermaid Type
Boxes with arrows (flow)	`flowchart TD/LR`
Sequence of interactions	`sequenceDiagram`
Classes with relationships	`classDiagram`
Database tables	`erDiagram`
States and transitions	`stateDiagram-v2`
Timeline/phases	`gantt` or `timeline`
Hierarchical groups	`flowchart` with `subgraph`

视觉模式	Mermaid类型
带箭头的方框（流程）	`flowchart TD/LR`
交互序列	`sequenceDiagram`
带关系的类	`classDiagram`
数据库表	`erDiagram`
状态与转换	`stateDiagram-v2`
时间线/阶段	`gantt` 或 `timeline`
层级分组	带 `subgraph` 的 `flowchart`

3. Generate Code

3. 生成代码

Flowchart template:

mermaid

%% Description of the diagram
%% Source: converted from image

flowchart TD
    subgraph GroupName["Group Label"]
        A[Component A]
        B[Component B]
    end

    A --> B
    B --> C[External]

    %% Styling
    style A fill:#color,stroke:#border,color:#text

Sequence diagram template:

mermaid

sequenceDiagram
    participant A as Service A
    participant B as Service B

    A->>B: Request
    B-->>A: Response

流程图模板：

mermaid

%% Description of the diagram
%% Source: converted from image

flowchart TD
    subgraph GroupName["Group Label"]
        A[Component A]
        B[Component B]
    end

    A --> B
    B --> C[External]

    %% Styling
    style A fill:#color,stroke:#border,color:#text

时序图模板：

mermaid

sequenceDiagram
    participant A as Service A
    participant B as Service B

    A->>B: Request
    B-->>A: Response

4. Apply Styling

4. 应用样式

Map visual colors to Mermaid styles:

mermaid

%% Color mapping
style NodeName fill:#hexcolor,stroke:#bordercolor,color:#textcolor

%% Common colors
%% Blue: fill:#2563eb,stroke:#3b82f6,color:#fff
%% Green: fill:#059669,stroke:#10b981,color:#fff
%% Red: fill:#dc2626,stroke:#ef4444,color:#fff
%% Orange: fill:#d97706,stroke:#f59e0b,color:#fff
%% Purple: fill:#7c3aed,stroke:#8b5cf6,color:#fff

将视觉颜色映射为Mermaid样式：

mermaid

%% Color mapping
style NodeName fill:#hexcolor,stroke:#bordercolor,color:#textcolor

%% Common colors
%% Blue: fill:#2563eb,stroke:#3b82f6,color:#fff
%% Green: fill:#059669,stroke:#10b981,color:#fff
%% Red: fill:#dc2626,stroke:#ef4444,color:#fff
%% Orange: fill:#d97706,stroke:#f59e0b,color:#fff
%% Purple: fill:#7c3aed,stroke:#8b5cf6,color:#fff

5. Save and Optionally Ingest

5. 保存并可选导入

bash

undefined

bash

undefined

Save to file

Write to ~/Desktop/diagram-name.mmd

Ingest to Qdrant for pattern reuse

/reflex:ingest ~/Desktop/diagram-name.mmd --collection personal_memories

undefined

/reflex:ingest ~/Desktop/diagram-name.mmd --collection personal_memories

undefined

Tips for Best Results

最佳效果提示

Describe intent: "Convert this to Mermaid, it shows a microservices architecture"
Specify format: "Use flowchart with subgraphs" or "Make it a sequence diagram"
Request styling: "Match the colors from the image" or "Use default styling"
Iterate: "Add more detail to the auth flow" or "Simplify the database section"

描述意图："将这个转换为Mermaid，它展示了微服务架构"
指定格式："使用带subgraph的流程图"或"制作成时序图"
要求样式："匹配图片中的颜色"或"使用默认样式"
迭代优化："为认证流程添加更多细节"或"简化数据库部分"

Example Prompts

示例提示词

"Convert this whiteboard photo to Mermaid"

"Turn this architecture diagram into a flowchart with subgraphs"

"Create a sequence diagram from this interaction flow screenshot"

"Convert to Mermaid, save as microservices-arch.mmd, and ingest to Qdrant"

"将这张白板照片转换为Mermaid"

"把这张架构图转换为带subgraph的流程图"

"从这张交互流程截图创建时序图"

"转换为Mermaid，保存为microservices-arch.mmd，并导入到Qdrant"

After Conversion

转换后用途

The diagram can be:

Committed to version control
Rendered in documentation (GitHub, GitLab, Notion)
Ingested to Qdrant for semantic search and pattern reuse
Edited and refined as text
Used as a template for similar architectures

转换后的图表可以：

提交到版本控制系统
在文档中渲染（GitHub、GitLab、Notion）
导入到Qdrant用于语义搜索和模式复用
作为文本进行编辑和优化
作为类似架构的模板