DeepDiagram：用 React 19 + LangGraph 撸了一个 AI 绘图 Agent，支持 Draw.io/ECharts/草图转代码

背景

做开发的时候，画图一直是个痛点。Mermaid 画简单的还可以，但是稍微复杂点的架构图或者漂亮的数据报表，要么手写代码写到崩溃，要么就得去拖拉拽半天。

为了解决这个问题，我基于 LangGraph (多智能体编排) 和 React 19 (Server Components) 开发了 DeepDiagram。

它的核心理念是：让 AI 根据你的需求（文字/图片），自动把脏活累活干了，直接给你生成可用的代码。

核心架构：它是如何工作的？

不同于市面上简单的 Prompt 拼接，DeepDiagram 是一个完整的 Multi-Agent 系统：

1. Router Agent： 识别用户意图（是想画架构图？还是分析数据？）。
2. Specialist Agents： 分发给专门的绘图 Agent （ Drawio Agent, ECharts Agent, Flow Agent 等）。
3. Code Generator： 输出对应的 DSL 或 JSON 配置，并在前端渲染。

(效果演示：AI 路由分发任务)

三大核心绘图能力

为了满足不同场景，我集成了三种最常用的工程化绘图标准：

1. 复杂架构图 (Draw.io / Atlas)

• 场景： 云资源图、UML 、系统架构设计。
• 特点： 生成的不是死图，而是标准的 Draw.io XML ，支持二次编辑，复刻专业工具体验。

2. 数据可视化 (ECharts AI)

• 场景： 运营报表、数据分析。
• 特点： 扔给 AI 一段 JSON 或 Excel 数据，自动分析字段含义，生成高颜值的 ECharts 图表代码。

3. 流程与时序 (Mermaid & React Flow)

• 场景： 快速逻辑梳理。
• 特点： 支持标准 Mermaid 语法，同时对于交互要求高的场景，支持生成基于 React Flow 的节点图。

亮点功能：草图转代码 (Sketch-to-Code)

这是我觉得最好用的功能。开会时白板上画的乱七八糟的逻辑图，拍张照上传，Agent 会自动识别节点关系，直接重绘成清晰的电子图表。

技术栈 (Tech Stack)

项目完全开源，如果你对当下流行的 Agent 应用开发 感兴趣，欢迎参考：

• Frontend: React 19, TailwindCSS, ShadcnUI
• LLM Orchestration: LangGraph, LangChain
• Backend: FastAPI, PostgreSQL
• Deployment: Docker Compose (一键部署，数据掌握在自己手里)

传送门

目前还在快速迭代中，欢迎 V 友们试用反馈，觉得不错请给个 Star 支持一下！

GitHub 地址： https://github.com/twwch/DeepDiagram