Draw.io Scientific Illustrator：AI 手绘科研插图

Fen9Pi2026/7/28大约 9 分钟

前言：当 AI 遇上科研插图

想象这样一个场景：

你是一名科研人员，需要重绘一张复杂的科学插图。传统方式是：

手动在 draw.io 或 Illustrator 中绘制
花费数小时调整形状、箭头、标签
难以保证与原图一致
难以保持可编辑性

如果 AI 能帮你完成呢？

Draw.io Scientific Illustrator 正是这样的工具：让 AI 在 draw.io 桌面版画布上实时绘制科研插图，你可以亲眼看到形状、文字、箭头、配色和布局按步骤出现。

今天，我们就来分析这个革命性的开源项目。

一、项目概览

1.1 是什么？

Draw.io Scientific Illustrator 是一个 Codex 插件，让 AI 能够在 draw.io 桌面版画布上实时绘制科学插图。

核心特点：

✅ 实时绘制：亲眼看到绘图过程
✅ 直接控制：调用 draw.io 的图模型 API
✅ 可编辑性：所有元素保持可编辑
✅ 科学插图：专为科研插图优化

项目地址：https://github.com/icebird1998/drawio-scientific-illustrator 开源协议：MIT License 测试状态：Windows 已测试，macOS/Linux 尽力支持

1.2 核心价值

传统科研插图的痛点：

手动绘制耗时数小时
难以保证与原图一致
难以保持可编辑性
难以复现和修改

Draw.io Scientific Illustrator 的解决方案：

AI 自动绘制，节省时间
直接控制画布 API，保证准确性
所有元素可编辑，易于修改
过程可见，易于调试

二、技术架构

2.1 核心组件

1. drawio-live MCP 服务器

启动或连接到可见的 draw.io 桌面编辑器
实时编辑其活动图模型
通过 localhost-only MCP 通道通信

2. drawio-file-utils MCP 服务器

验证保存的 .drawio 文档
导出 PNG、SVG、PDF 或 JPG 交付物

3. Codex Skill

教 AI 检查参考图
分解为可编辑原语
按节奏绘制
视觉审查
细化实时图
仅在可见绘图存在时保存

4. 插件市场配置

将 MCP 服务器、Skill 和界面元数据打包
作为可安装的插件单位分享

2.2 技术特点

不会做什么：

❌ 不会模拟系统鼠标或键盘
❌ 不会先生成 XML 再打开
❌ 不会使用 OS 级别的自动化

会做什么：

✅ 直接调用 draw.io 的图模型 API
✅ 实时编辑可见画布
✅ 保持所有元素可编辑
✅ 仅在完成后保存 .drawio 文件

2.3 工作流程

流程图1

三、核心功能

3.1 实时绘制工具

1. drawio_live_launch

启动或连接到可见的 draw.io 编辑器
自动检测常见 draw.io 安装位置
支持 Windows、macOS、Linux

2. drawio_live_status

确认图模型已就绪
检查画布状态
验证连接

3. drawio_live_add_shape

添加形状（矩形、圆形、椭圆等）
设置样式（颜色、边框、阴影）
设置位置和大小

4. drawio_live_add_edge

添加箭头和连线
设置样式（实线、虚线、点线）
设置箭头样式

5. drawio_live_draw_sequence

按设定间隔逐步绘制
控制绘制节奏
支持暂停和继续

3.2 编辑工具

1. drawio_live_inspect

检查画布上的元素
获取元素属性
验证绘制结果

2. drawio_live_update_cell

修改文字内容
调整样式
移动位置
调整大小

3. drawio_live_fit

保持图形在视野内
自动缩放
自动居中

3.3 导出工具

1. drawio_live_save_snapshot

将可见画布保存为 .drawio 文件
仅在完成后保存
保持可编辑性

2. drawio_validate

验证 .drawio 文件结构
检查元素完整性
检查引用有效性

3. drawio_export

导出为 PNG
导出为 SVG
导出为 PDF
导出为 JPG
支持自定义尺寸

四、使用场景

4.1 科研插图重绘

场景：你有一张复杂的科研插图，需要重绘并保持可编辑性。

传统方式：

手动在 draw.io 中绘制
花费数小时
难以保证与原图一致

使用 Draw.io Scientific Illustrator：

使用 Draw.io Scientific Illustrator。
启动实时 draw.io，以 100 ms 的步骤间隔逐步重绘这张参考图。
必须直接控制 draw.io 自己的画布 API，不要控制系统鼠标键盘，也不要先生成 XML。
所有文字、箭头、分区、图例都要保持可编辑。
每完成一个逻辑区域就检查并修正，最后保存 .drawio，并导出宽度为 2000 px 的 PNG 预览图。

结果：

AI 自动绘制
实时可见过程
保持可编辑性
节省大量时间

4.2 流程图绘制

场景：需要根据文字描述绘制复杂的流程图。

使用 Draw.io Scientific Illustrator：

使用 Draw.io Scientific Illustrator。
绘制一个流程图，展示用户认证系统的流程。
包括：用户登录、验证凭证、生成 token、返回 token、验证 token、访问资源。
以 100 ms 的步骤间隔绘制，完成后保存 .drawio 并导出 PNG。

结果：

AI 自动绘制流程图
布局合理
箭头清晰
易于修改

4.3 架构图绘制

场景：需要绘制系统架构图。

使用 Draw.io Scientific Illustrator：

使用 Draw.io Scientific Illustrator。
绘制一个微服务架构图，包括：
- API Gateway
- Auth Service
- User Service
- Order Service
- Database
- Cache

展示它们之间的连接关系。
以 100 ms 的步骤间隔绘制，完成后保存 .drawio 并导出 PNG。

结果：

AI 自动绘制架构图
分层清晰
关系明确
易于扩展

五、安装与使用

5.1 安装要求

必需：

Codex 桌面应用或 Codex CLI（支持插件）
draw.io 桌面版（已安装）
Git
Node.js 22+（推荐）

可选配置：

DRAWIO_PATH：自定义 draw.io 路径
DRAWIO_LIVE_PORT：自定义调试端口
DRAWIO_LIVE_PROFILE：自定义 draw.io 配置目录

5.2 安装方式

方式 1：让 Codex 安装（最简单）

在 Codex 任务中粘贴：

安装这个公开 Codex 插件：https://github.com/icebird1998/drawio-scientific-illustrator。
把仓库克隆到本地，将仓库根目录注册为 Codex Marketplace，
然后安装 drawio-scientific-illustrator@drawio-scientific-tools。
完成后告诉我何时重启 Codex。

方式 2：Windows 一键安装

PowerShell：

$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

方式 3：macOS/Linux 一键安装

Bash：

curl -fsSL https://raw.githubusercontent.com/icebird1998/drawio-scientific-illustrator/main/install.sh | bash

方式 4：手动安装

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