1,066· 73 forks· JavaScript· MIT开发工具

Draw.io 科学插图实时绘制 MCP 插件

icebird1998/drawio-scientific-illustrator

让 AI 在可见的 draw.io 画布上实时绘制科学插图,通过 MCP 协议直接控制图形 API 而非模拟鼠标操作

成熟度维护活跃,最近提交7天前,open issues 3个,项目创建仅9天处于早期快速迭代阶段

GitHub 仓库 →对标:BioRender

项目体检

技术 · JavaScript + Node.js,基于 MCP 协议和 draw.io Electron 远程调试 API

许可 · MIT 许可,可自由商用、修改和分发

活跃 · 7天前有提交,1个贡献者,v1.0.0 发布于9天前,项目处于早期活跃开发阶段

解决什么

科学论文配图重绘是研究者的常见痛点:参考文献中的示意图需要用自己的数据重新绘制,手工操作 draw.io 或 Illustrator 既耗时又难以精确还原布局。现有 AI 绘图方案通常生成静态图片或 XML 文件,无法实时观察绘制过程,也难以在生成后进行细节调整。该项目通过 MCP(Model Context Protocol)让 Codex AI 直接控制 draw.io 桌面版的图形 API,在可见画布上逐步绘制形状、标注、箭头和样式,用户可实时观察并介入调整,最终导出可编辑的 .drawio 文件和高分辨率 PNG/SVG/PDF。

为何火

项目上线仅9天即获 1066 stars,因为它填补了"AI 辅助科学插图"的空白市场。核心亮点有三:一是实时可视化,不像传统工具先生成代码再渲染,而是让 AI 像人类设计师一样在画布上作画;二是保持可编辑性,所有元素都是 draw.io 原生对象,可后续手工修改;三是技术路径独特,通过 Electron 远程调试协议直接操作 draw.io 的图形模型,避免了脆弱的 OS 级鼠标键盘自动化。对于需要频繁重绘论文配图的研究团队,这比手工操作效率提升数倍,且输出符合期刊投稿的矢量图要求。

核心功能

  1. 实时画布控制:通过 drawio_live_launch 启动 draw.io 并建立 localhost MCP 连接,后续工具调用直接修改活动图形模型
  2. 分步绘制:drawio_live_draw_sequence 支持设置延迟(如100ms),让 AI 逐个添加形状/边/标签,用户可观察构建过程
  3. 视觉检查循环:drawio_live_screenshot 截取当前画布,AI 分析后用 drawio_live_update_cell 修正位置/样式/文字
  4. 多格式导出:drawio_export 支持 PNG(可指定宽度如2000px)、SVG、PDF、JPEG,满足不同发表需求
  5. Codex 技能包:内置提示词模板教 AI 如何分解参考图、控制绘制节奏、处理多面板布局和图例

典型工作流:上传参考图 → 提示"用 Draw.io Scientific Illustrator 重绘" → AI 启动 draw.io → 逐步添加元素 → 截图检查 → 调整细节 → 保存 .drawio 和导出 PNG。

安装

前置依赖:

  • Codex 桌面版或 CLI(需插件支持)
  • draw.io 桌面版(从官网下载)
  • Node.js 22+(用于运行 MCP 服务器)
  • Git

一键安装(Windows):

$p="$env:TEMP\drawio-scientific-install.ps1"; Invoke-WebRequest https://raw.githubusercontent.com/icebird1998/drawio-scientific-illustrator/main/install.ps1 -OutFile $p; powershell -ExecutionPolicy Bypass -File $p

手动安装:

git clone https://github.com/icebird1998/drawio-scientific-illustrator.git
cd drawio-scientific-illustrator
codex plugin marketplace add "$(pwd)"
codex plugin add drawio-scientific-illustrator@drawio-scientific-tools

安装后必须重启 Codex 并新建任务才能加载插件。draw.io 路径自动检测,非标准安装可设 DRAWIO_PATH 环境变量。

适合谁

  1. 学术研究者:需重绘论文配图、制作实验流程图、绘制系统架构示意图
  2. 技术文档作者:快速将草图或参考图转为规范的矢量插图
  3. 教育工作者:演示复杂概念的分步构建过程
  4. 设计师:用 AI 辅助完成重复性绘图任务,保留手工调整空间

不适合:需要像素级精确还原照片的场景(应用 AI 图像生成),或完全自动化无需人工介入的批量生产(该工具强调交互式调整)。

社区评价

暂无足量社区公开讨论,以下为基于项目本身的中立评估:

该项目技术路径新颖,通过 MCP 协议桥接 AI 与专业绘图工具,避免了传统 RPA 方案的脆弱性。9天获千星说明需求真实,但项目极早期(单一贡献者、仅3个 issue),文档完善但缺少实际案例展示。README 明确标注 Windows 测试最充分,macOS/Linux 可能遇到 Electron 打包差异导致的兼容性问题。技能包依赖 Codex 的推理能力,建议使用 GPT-5.6 Sol + Max 推理档位处理复杂配图,这会增加 token 成本。安全设计合理(仅绑定 127.0.0.1),但需注意 draw.io 进程会持续运行占用资源。

选型对比

vs BioRender(商业工具):BioRender 提供海量生物医学素材库和拖拽式编辑,适合快速组装标准化插图,但订阅费高昂(年费数百美元)且素材风格固定。Draw.io Scientific Illustrator 完全免费开源,可绘制任意领域插图,AI 辅助降低学习曲线,但需自备 draw.io 技能且依赖 Codex 订阅。

vs Inkscape + AI 脚本:Inkscape 是开源矢量编辑器,可通过 Python 脚本自动化,但需编写大量代码且难以实时调整。该项目用自然语言控制,实时可视化反馈,更适合非程序员。

vs 直接用 ChatGPT 生成 SVG:ChatGPT 可输出 SVG 代码但常出现语法错误,且无法利用 draw.io 的布局算法和样式库。该方案生成的是 draw.io 原生对象,可无缝衔接后续手工编辑。

已知坑

  1. 平台兼容性:README 明确提示 macOS/Linux 的 draw.io 可执行文件检测和 Electron 行为可能不一致,建议 Windows 用户优先尝试
  2. 端口冲突:默认使用 9333 端口,若被占用需手动设 DRAWIO_LIVE_PORT 或让程序自动选择邻近端口
  3. Node.js 版本:需 22+,部分系统默认 Node 版本过低会导致 MCP 服务器启动失败
  4. Codex 依赖:项目强绑定 Codex 生态,无法单独作为通用 draw.io 自动化工具使用
  5. 推理成本:复杂科学插图建议用 Max 推理档位,单次任务可能消耗数万 tokens
  6. 进程管理:draw.io 实例由插件启动后会持续运行,需手动关闭避免资源占用
  7. 导出限制:依赖 draw.io 桌面版的导出能力,某些复杂样式可能在 PNG 导出时渲染异常

中国用户额外注意:Codex 桌面版获取可能需要特殊网络环境,draw.io 官网国内可直连但下载速度慢,建议使用镜像源或 GitHub Releases 下载。

安装方式:git clone + codex plugin 命令