mcpField
I
image-to-diagram

image-to-diagram

github.com/mindmorass文档处理237 次安装37 周前更新
代码仓库

关于 image-to-diagram

image-to-diagram 可将图像中的图表转换为可编辑的 Mermaid 或 DOT 代码，面向需要以文本维护图表的开发者。还可选择将结果导入 Qdrant，以便复用图表模式。

主要功能

  1. 01分析节点与关系
  2. 02生成 Mermaid 图表
  3. 03输出 DOT/Graphviz
  4. 04映射颜色与样式
  5. 05可选导入 Qdrant

适用场景

  1. 01将架构截图转换为代码
  2. 02把白板流程转成图表
  3. 03与代码一同进行版本控制
  4. 04通过 Qdrant 复用图表模式

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/mindmorass/reflex --skill image-to-diagram

安装后在 Claude Code 中输入/image-to-diagram确认已加载。

详细介绍

将图像转换为图表

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

工作流

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

支持的输入

类型质量
图表截图极佳
架构工具导出文件极佳
清晰的白板照片良好
手绘图表一般（清晰的方框和箭头会有帮助）
低对比度／模糊图像较差

输出格式

Mermaid（默认）
  • 流程图、时序图、类图、ER 图
  • 可在 GitHub、GitLab、Notion、VS Code 中渲染
  • 文件扩展名：.mmd 或 .mermaid
DOT/Graphviz
  • 布局控制更灵活
  • 更适合复杂图表
  • 文件扩展名：.dot 或 .gv

转换流程

1. 分析图像

读取图像并识别：

  • 整体结构（层级、流程、网络）
  • 组件／节点及其标签
  • 组件之间的关系／连接
  • 分组／子图
  • 颜色编码（转换为样式）
2. 选择图表类型
可视模式Mermaid 类型
带箭头的方框（流程）flowchart TD/LR
交互序列sequenceDiagram
带有关系的类classDiagram
数据库表erDiagram
状态和转换stateDiagram-v2
时间线／阶段gantt 或 timeline
层级分组带有 subgraph 的 flowchart
3. 生成代码

流程图模板：

%% 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

时序图模板：

sequenceDiagram
    participant A as Service A
    participant B as Service B

    A->>B: Request
    B-->>A: Response
4. 应用样式

将可视颜色映射为 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 to file
# Write to ~/Desktop/diagram-name.mmd

# Ingest to Qdrant for pattern reuse
/reflex:ingest ~/Desktop/diagram-name.mmd --collection personal_memories

获得最佳效果的提示

  1. 描述意图："将其转换为 Mermaid，它展示了微服务架构"
  2. 指定格式："使用带子图的流程图"或"将其制作为时序图"
  3. 要求设置样式："匹配图像中的颜色"或"使用默认样式"
  4. 迭代调整："为身份验证流程添加更多细节"或"简化数据库部分"

示例提示词

"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"

转换后

图表可以：

  • 提交到版本控制系统
  • 在文档中渲染（GitHub、GitLab、Notion）
  • 导入 Qdrant，用于语义搜索和模式复用
  • 以文本形式编辑和完善
  • 用作类似架构的模板

评论

支持 Markdown