Featured image of post 解放双手的AI绘图：三种方式让AI帮你绘制Excalidraw图表
折腾不休

解放双手的AI绘图：三种方式让AI帮你绘制Excalidraw图表

难得出游，一边吹着海风，看着AI帮我在一片空白的白板上慢慢添加各种元素，也是另一种触感。牛马在驱动牛马 ：）

前言

在我使用Obsidian后了解到了绘图工具excalidraw，我曾经用它画了一些图，手绘风格在众多图表呈现中有它独特的味道。作为一个开源且结构清晰的绘图文件，我们可以借助AI来帮我们绘制想要的图，这里我有一些实践和尝试过程，分享给大家，若对你有用请一键三连啊，至少点赞行不？

本文分享的自动绘图不止适用于在Obsidian的Excalidraw插件中，同时也支持网页端（如官方）自动绘图。

原理解释

我在Obsidian中随便画了一个图，这个文件从文本视角内容大概是这样：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

---

excalidraw-plugin: parsed
tags: [excalidraw]

---
==⚠  Switch to EXCALIDRAW VIEW in the MORE OPTIONS menu of this document. ⚠== You can decompress Drawing data with the command palette: 'Decompress current Excalidraw file'. For more info check in plugin settings under 'Saving'


# Excalidraw Data

## Text Elements
Hello ^vcBSVLYg

world ^SroqyGoR

kevin ^OpoVzdNT

%%
## Drawing
```compressed-json
N4KAkARALgngDgUwgLgAQQQDwMYEMA2AlgCYBOuA7hADTgQBuCpAzoQPYB2KqATLZMzYBXUtiRoIACyhQ4zZAHoFAc0JRJQgEYA6bGwC2CgF7N6hbEcK4OCtptbErHALRY8RMpWdx8Q1TdIEfARcZgRmBShcZQUebQBGAFZtAAYaOiCEfQQOKGZuAG1wMFAwMogSbghsQgoAaQB9ADkmlIpiACUAdgAZADEAKQBOZQAtZwaedLLIWEQqwOwojmVg
省略后续...

将这个文件丢给AI分析了一下，给了如下的描述：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

# Excalidraw .excalidraw.md 格式说明

- 用途：由 Obsidian Excalidraw 插件生成/维护的绘图文件（Markdown 包装 + 压缩场景数据）。
- 头部 Front matter
  - `excalidraw-plugin: parsed`：标记已被插件解析
  - `tags: [excalidraw]`：便于检索
- 操作提示行
  - “Switch to EXCALIDRAW VIEW…”：提示在 Excalidraw 视图中查看/编辑；命令面板支持“Decompress current Excalidraw file”。
- 数据区 Excalidraw Data
  - Text Elements：画布上的文本清单
    - 每行形式：`文本内容 ^块ID`
    - 作用：可用 Obsidian 块链接引用/嵌入该文本
      - 引用：`[[路径/文件#^块ID]]`
      - 嵌入：`![[路径/文件#^块ID]]`
  - `%% ... %%` 注释包裹
    - Obsidian 注释语法；用于隐藏机器数据，避免在普通 Markdown 视图中干扰阅读。
  - Drawing（压缩数据）
    - 代码块标记：```compressed-json
    - 存放压缩后的场景（形状/连线/样式/坐标等）
    - 可在命令面板解压为可读 JSON；插件设置 Saving 可配置是否压缩。
- 编辑建议
  - 不要手工改动 `compressed-json` 内容；请在 Excalidraw 视图中编辑，以免损坏绘图。
- 常用操作
  - 打开绘图：More options → Open in Excalidraw view
  - 解压/压缩：命令面板对应命令或插件设置 Saving
  - 引用示例（来自本文件）：
    - 引用文本块：`[[Excalidraw/Drawing 2025-08-23 16.22.25.excalidraw.md#^vcBSVLYg]]`
    - 嵌入文本块：`![[Excalidraw/Drawing 2025-08-23 16.22.25.excalidraw.md#^SroqyGoR]]`
- 本文件中的文本元素
  - "Hello" `^vcBSVLYg`
  - "world" `^SroqyGoR`
  - "kevin" `^OpoVzdNT`

既然内容只是一个JSON，有压缩标识也可以不压缩，那么让AI帮我们生成内容难度就不大了。 我们先看看市面上当前有哪些方案以及它们的特点。

初阶尝试：借助于mcp_excalidraw绘图

我搜索到有个MCP server (mcp_excalidraw](https://github.com/yctimlin/mcp_excalidraw)，可以简单的启用：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

# 克隆代码
git clone https://github.com/yctimlin/mcp_excalidraw.git
cd mcp_excalidraw
npm install

# 构建前端
npm run build

# 启动canvas server
npm run canvas

现在我们打开浏览器，访问：http://localhost:3000 看到熟悉的Excalidraw绘图页面: excalidraw 点右上角的Sync to Backend后我们的前后台打通，即可准备mcp server来操作这个画布了。以下是mcp-server的配置(替换成你的本地路径)：

1
2
3
4
5
6

{
  "excalidraw": {
    "command": "node",
    "args": ["/absolute/path/to/mcp_excalidraw/dist/index.js"]
  }
}

使用如下prompt:

请使用excalidraw mcp插件绘制一个太阳系及行星的运行图

选择一个合适的模型比如Claude-4-Sonnet，不一会儿我们就可以得到一个还不错的太阳系科谱示意图了： solar system 各个行星相对于地球的体积AI还挺讲究，大体是对了。

这个方案用的是自托管的服务器，将Excalidraw的画布作为Server开放出去，可以随时调用API来绘图，同时借助Mcp Server与之通信，完成了AI绘图的一个通路，不错的思路。 那么，既然在网页上绘图，咱能不能直接在 Excalidraw 官方绘图网站上直接使用AI绘图呢？

进阶实践：在 Excalidraw 官方网站AI绘图

我这里说的不是官方网站的AI绘图功能，它需要开通会员，而且我在免费试用期间就感觉到它还比较简单，AI画不了啥有用的图，但别慌，我们有黑科技！ 我们先介绍一个强大的Chrome浏览器插件mcp-chrome插件：

🌟 让chrome浏览器变成你的智能助手 - 让AI接管你的浏览器，将您的浏览器转变为强大的 AI 控制自动化工具。

可以在GitHub根据文档下载安装，之后打开它：

mcp-chrome-install

可以看到它也是启用了一个MCP server，类似的我们将这个配置复制到任何一个你常用的能驱动MCP Server的工具，比如我是到Cursor的mcp.json中，顺手它改个名字叫mcp-chrome：

1
2
3
4
5
6
7
8

{
  "mcpServers": {
    "mcp-chrome": {
      "type": "streamable-http",
      "url": "http://127.0.0.1:12306/mcp"
    }
  }
}

我们可以刷新一下工具，可以看到它有这些能力： mcp-chrome-tools

原来它的实现原理是向页面中注入一些脚本，之后通过HTTP和页面通信，并基于我们发给它的消息内容调用相应的页面工具。可是咱们是要在这个页面绘图呢，这就需要另一个东西 excalidraw-prompt了，你同样可以在上面的repo的prompt中获取到。我们可以简单看下内容：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

角色
你是一位顶级的解决方案架构师，不仅精通复杂的系统设计，更是Excalidraw的专家级用户。你对其声明式的、基于JSON的数据模型了如指掌，能够深刻理解元素（Element）的各项属性，并能娴熟地运用**绑定（Binding）、容器（Containment）、组合（Grouping）与框架（Framing）**等核心机制来绘制出结构清晰、布局优美、信息传达高效的架构图和流程图。

核心任务
根据用户的需求，通过调用工具与excalidraw.com画布交互，以编程方式创建、修改或删除元素，最终呈现一幅专业、美观的图表。

规则
注入脚本: 必须首先调用 chrome_inject_script 工具，将一个内容脚本注入到 excalidraw.com 的主窗口（MAIN）
脚本事件监听: 该脚本会监听以下事件：
getSceneElements: 获取画布上所有元素的完整数据
addElement: 向画布添加一个或多个新元素
updateElement: 修改画布的一个或多个元素
deleteElement: 根据元素ID删除元素
cleanup: 清空重置画布
发送指令: 通过 chrome_send_command_to_inject_script 工具与注入的脚本通信，触发上述事件。指令格式如下：
获取元素: { "eventName": "getSceneElements" }
添加元素: { "eventName": "addElement", "payload": { "eles": [elementSkeleton1, elementSkeleton2] } }
更新元素: { "eventName": "updateElement", "payload": [{ "id": "id1", ...其他要更新的属性 }] }
删除元素: { "eventName": "deleteElement", "payload": { "id": "xxx" } }
清空重置画布: { "eventName": "cleanup" }
遵循最佳实践:
布局与对齐: 合理规划整体布局，确保元素间距适当，并尽可能使用对齐工具（如顶部对齐、中心对齐）使图表整洁有序。
尺寸与层级: 核心元素的尺寸应更大，次要元素稍小，以建立清晰的视觉层级。避免所有元素大小一致。
配色方案: 使用一套和谐的配色方案（2-3种主色）。例如，用一种颜色表示外部服务，另一种表示内部组件。避免色彩过多或过少。
连接清晰: 保证箭头和连接线路径清晰，尽量不交叉、不重叠。使用曲线箭头或调整points来绕过其他元素。
组织与管理: 对于复杂的图表，使用**Frame（框架）**来组织和命名不同的区域，使其像幻灯片一样清晰。

将它复制到你的prompt中，如果在Cursor等编辑器中，另存为一个文件，一会引用它。现在我们就准备就绪了，测试一下：

请参考 @excalidraw-prompt.md ,调用mcp-chrome在excalidraw中帮我绘制一个太阳系的示意图

你会发现浏览器自动打开了excalidraw.com页面并且LLM正在尝试注入控制脚本等，如果顺利，一会便能在白板上陆续出现各种元素了。但也可能不幸运，卡在首页中，注入脚本不成功。经过我分析，这种情况有两种可能：

  1. 你用的模型智能度不够，换一个模型。最近在Cursor中免费的grok-code-fast-1也能基本完成任务。使用Gemini2.5 Pro或Claude4也完全没问题。
  2. 你访问的网页被重定向到了app.excalidraw.com。因为如你有登录态，网站会重定向到app.excalidraw.com，那个页面插件就找不到正确的注入点了。有两种做法，修改脚本让它兼容，或者修改一下我们的prompt，让打开 excalidraw.com/#noredirect页面。

使用mcp-chrome+prompt绘制太阳系

这个插件如果只是画图，基本使用就是这样，但它提供了浏览器的操作能力，所以还有不少玩法，比如总结某些页面内容等，或者将页面的内容以excalidraw可视化呈现。 那么如果你像我一样，不信任（不好用）云上存放笔记内容，习惯于本地化保存笔记，接下来咱当然要追求下能否直接在Obsidian中作图。

终局方案：在Obsidian绘制Excalidraw图

虽然我们使用mcp-chrome+prompt在excalidraw.com上绘图很方便，但仍然需要浏览器操作，甚至还需要一点儿时间等待打开浏览器和注入脚本等动作。如开篇所说，Excalidraw的文件格式是比较简单的，并且Obsidian有插件可以直接绘制或呈现它的，那么如何在Obsidian中更便捷使用呢？

我们让AI先基于之前分析的Excalidraw文件格式，生成一套提示词：

请参考 @excalidraw格式说明.md ，帮我生成一个用于指导 AI 生成相关excalidraw文件的prompt 文件，取名为excalidraw绘图大师

没一会AI就给我们生成了一份不错的Prompt指南，想的还挺周到，绝对比我自己写的初版要好，请你也过目一下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

# Excalidraw 绘图大师 - AI 绘图指导 Prompt

## 角色定义
你是一位专业的 Excalidraw 绘图大师，精通创建结构化、美观且实用的图表。你的任务是根据用户需求生成标准的 `.excalidraw.md` 格式文件，这些文件可以在 Obsidian Excalidraw 插件中完美使用。

## 核心能力
- 🎨 **视觉设计**：创建清晰、美观、逻辑性强的图表
- 📝 **文档结构**：严格遵循 Excalidraw 文件格式规范
- 🔗 **元素关联**：合理使用文本块ID，支持 Obsidian 块链接
- 🎯 **用户导向**：根据具体需求定制图表类型和风格

## 文件格式规范
省略更多规范及示例说明...

我们稍作一点小修改，原来Excalidraw的文件中有一部分 compressed-json字段，有压缩的格式后续让AI生成容易出错，我们将其改为不需要压缩，这样AI生成绘图文件一次成功率便高多了。现在我们只要一句话，比如：

请参考 @excalidraw绘图大师.md 帮我创建一个火箭发射的运行原理示意图

让AI来绘制火箭发射原理

这个办法简单有效，不用依赖任何的MCP Server也不用安装其它插件，但它需要我们使用Cursor等AI编辑器打开Obsidian的Vault目录。我们再贪心点，能不能直接在Obsidian中操作呢？也不是不行。

有一款插件叫obsidian-local-rest-api，可以让我们的Obsidian以REST API来提供接口：

This plugin provides a secure HTTPS interface gated behind api key authentication that allows you to:

  • Read, create, update or delete existing notes. There’s even a PATCH HTTP method for inserting content into a particular section of a note.
  • List notes stored in your vault.
  • Create and fetch periodic notes.
  • Execute commands and list what commands are available.

为了能够在Obsidian中直接调用AI绘制而不再依赖其它编辑器，我们还需要安装一个Obsidian插件 Smart Composer。它提供了和大模型聊天对话而修改笔记的功能，灵感来源于Cursor。同时也支持MCP Server。关于它的更多使用技巧，未来有空可以另起一篇文章。现在我们继续配置上：Obsidian mcp-server：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

{
  "mcp-obsidian": {
    "command": "uvx",
    "args": [
      "mcp-obsidian"
    ],
    "env": {
      "OBSIDIAN_API_KEY": "<your_api_key_here>",
      "OBSIDIAN_HOST": "<your_obsidian_host>",
      "OBSIDIAN_PORT": "<your_obsidian_port>"
    }
  }
}

然后和之前类似，我们只要让它参考我们的Prompt，说明要绘制什么即可，当然对现在有笔记进行总结并梳理出一些图表也是不在话下。

直接在Obsidian中绘图

后记

经过一番探索，相信你也大概感受到了基于AI来调用Excalidraw绘图并非难事。未来当基础模型越发强大，这块的上手难度可能会更低。 在实际体验中，不同模型的审美以及指令遵循上还是有不少差异的。使用时需要注意选择适合自己的模型，也需要注意花费。

本文借助于AI分析文件格式，又借助AI生成提示词，再借助AI调用MCP Server等，很多过往我们完全需要手搓的时刻已经越来越少，如何顺应这种思维，提供更多的价值和可能性，是未来我们值得探索的方向。

当然，模型的更新可以毁灭曾经的各种努力，但，在路上就是意义，是吧？

以上便是最近关于Excalidraw的一点折腾经验，希望对你有帮助。欢迎点赞、收藏、分享，更欢迎分享你的使用经验。我们下篇文章见。

我是个爱折腾技术的工程师，也乐于分享。欢迎点赞、关注、分享，更欢迎一起探讨技术问题，共同学习，共同进步。为了获得更及时的文章推送，欢迎关注我的公众号：爱折腾的风

扫码关注公众号