在VSCode中使用Excalidraw绘制示意图

在 VSCode 中使用 Excalidraw 绘制示意图

你有没有过这样的经历：正在写一份技术文档，突然想画个架构图来说明流程，结果不得不停下思路，切换到另一个工具——Draw.io、Figma 或者 Visio——花十几分钟搭出几个框和箭头？等终于画完，灵感却断了。更糟的是，下次修改时还得再打开那个独立的编辑器，源文件还不一定能找着。

如果有一种方式，能让你在写 Markdown 的同时，随手点两下就画出一张清晰又不失趣味的手绘风示意图，并且双击就能继续编辑，还能一键分享给团队协作……那会节省多少上下文切换的时间？

这正是Excalidraw for VSCode想要解决的问题。

它不是一个功能庞杂的专业设计工具，而是一个“刚刚好”的轻量级白板系统，专为开发者的工作流定制。从构思草图到嵌入文档，再到多人评审，整个过程可以在不离开 VSCode 的前提下完成。更重要的是，它的手绘风格天然降低表达门槛——没人会觉得这张图必须“完美”，反而更容易激发讨论。

安装与快速启动

想在 VSCode 里用上 Excalidraw，其实非常简单。

打开扩展面板（Ctrl+Shift+X），搜索Excalidraw，找到由官方团队发布的插件（ID:excalidraw.excalidraw-editor）并安装。确认作者是 “Excalidraw” 避免误装第三方魔改版。

安装后无需重启，直接创建一个以.excalidraw结尾的文件即可触发编辑器。比如：

• api-flow.excalidraw
• system-design.excalidraw.svg

推荐使用.excalidraw.svg后缀。原因在于这种格式本质上是一个标准 SVG 文件，其中嵌入了原始 JSON 数据作为注释。这意味着你既能在浏览器或 Markdown 中正常显示图像，又能随时双击回到可编辑状态，真正做到“图文一体”。

当你首次打开这类文件时，VSCode 会在侧边栏或新标签页中加载完整的 Excalidraw 画布界面，几乎与网页版无异。

写代码时顺手画张图：这才是流畅的工作流

传统绘图工具往往割裂于开发环境之外。你在 Draw.io 里画完导出 PNG，插入文档；但一旦需要调整，就得回头找源文件——而那个.drawio文件可能早就被遗忘在某个子目录里。

Excalidraw 改变了这一点。由于每个图表都保存为项目内的普通文件，你可以像管理代码一样管理它们：

/docs/diagrams/ ├── auth-flow.excalidraw.svg ├── database-schema.excalidraw └── ci-pipeline.excalidraw.svg

这些文件可以直接提交到 Git。虽然图形差异无法像文本那样逐行对比，但结合语义化命名和提交信息（如“更新认证流程以支持 MFA”），依然具备良好的追溯性。

更重要的是，当你在 PR 中看到一张.excalidraw.svg图片时，点击即可预览；若需修改，双击即进入编辑模式——不需要额外软件，也不依赖特定操作系统。

手绘风格不只是视觉选择，更是一种沟通哲学

Excalidraw 最醒目的特点，是它那略带抖动、仿佛真人手绘的线条风格。这不是为了炫技，而是有意为之的设计哲学：让图表看起来不那么“正式”。

想想看，当你展示一张高度规整、颜色精准的架构图时，听众往往会默认：“这是最终方案”。但如果是一张看似随手勾勒的草图，大家更愿意说：“我觉得这里可以加个缓存层试试？”

这种轻微的“不完美感”，反而促进了开放讨论。尤其在早期技术评审、产品脑暴阶段，避免过早锁定设计方向至关重要。

而且，如果你有手写设备（如 iPad + Apple Pencil 或 Surface Pen），自由画笔工具的表现力会进一步提升。你可以像在纸上一样圈重点、划连接线、做批注，思维完全不受工具限制。

常用操作也很直观：

所有图形均可自定义颜色、粗细、透明度，支持分组、对齐和图层管理。虽然功能不如 Figma 全面，但对于大多数技术场景已绰绰有余。

AI 辅助绘图：从一句话生成初始草图

如果说本地集成解决了“如何方便地画图”，那么 AI 生成功能则回答了另一个问题：怎么从零开始？

Excalidraw 内置了一个实验性的 AI 图像生成模块（需登录账户启用）。你只需输入一段自然语言描述，系统就能自动生成对应的草图框架。

例如：

“Draw a microservices architecture with user service, order service, and payment gateway communicating via RabbitMQ.”

几秒钟后，你会看到三个矩形分别标注为对应服务，中间通过带箭头的虚线连接至消息队列。虽然布局可能不够美观，组件命名也可能需要调整，但这已经为你省去了最耗时的“第一步”——把抽象概念转化为可视结构。

这个功能特别适合以下场景：

• 准备技术分享前快速搭建演示原型
• 教学过程中即时生成示例图解
• 团队会议中根据口头描述实时构建共识模型

当然，目前 AI 输出仍处于初级阶段，复杂逻辑容易出错，也无法理解私有术语。但它不是用来替代人工，而是作为一个高效的起点助手。就像代码补全不会写出完整函数，但它能帮你跳过样板代码。

协作不再是难题：本地文件也能实时共享

很多人以为，只有云端工具才能实现协作。但 Excalidraw 巧妙地打通了本地与在线的边界。

当你在 VSCode 中编辑一个.excalidraw文件时，如果已登录 GitHub 账号，就可以点击右上角的“Share”按钮生成一个公开链接。任何人通过浏览器访问该链接，都能实时查看甚至共同编辑画布——就像使用 Google Docs 一样。

关键在于，所有更改都会同步回原始文件。如果你保持 VSCode 处于联网状态，本地文件也会自动更新。这意味着你可以一边写代码，一边参与远程白板讨论。

举个实际例子：

1. 架构师 A 在本地用 VSCode 绘制初步的服务拓扑图；
2. 生成共享链接发给运维和前端同事；
3. 对方在浏览器中打开，提出建议并直接在图上标注；
4. A 回到 VSCode，刷新后即可看到最新版本；
5. 修改完成后提交 Git，关联 PR。

整个过程无需邮件传附件，也没有版本混乱风险。相比传统的“截图+评论”模式，效率提升显著。

文档即画布：真正意义上的可编辑插图

很多团队都在用 Markdown 写技术文档，但图片始终是个痛点：要么是静态截图，难以维护；要么是外链资源，容易失效。

Excalidraw 提供了一种全新的可能性：把图表当作富文本的一部分来对待。

假设你导出了一个名为auth-flow.excalidraw.svg的文件，只需这样嵌入 Markdown：

## 认证流程设计 ![用户登录流程](auth-flow.excalidraw.svg)

VSCode 的内置预览就能实时渲染图像。更棒的是，当你双击这个 SVG 文件时，依然能进入完整的 Excalidraw 编辑器进行修改——不需要额外导入，也不依赖外部工具。

这是因为.excalidraw.svg实际上是一个合法的 SVG 文件，其内部包含如下结构：

<svg> <!-- Excalidraw scene data --> <!-- { "type": "excalidraw", "version": 2, "source": "https://excalidraw.com", "elements": [...], "appState": { ... } } --> <g>...</g> <!-- rendered shapes --> </svg>

前段注释保存了完整的可编辑数据，后段则是可视化的矢量图形。两者共存，互不干扰。

这使得你的文档具备了“自我描述”能力：读者不仅能看见结果，还能了解背后的构造逻辑。对于知识沉淀类内容（如 RFC、设计决策记录），这一点尤为珍贵。

和其他工具比，它到底适合谁？

市面上绘图工具不少，Excalidraw 并非要取代谁，而是精准切入了一个特定场景：快速表达 + 开发集成 + 轻量协作。

换句话说，如果你的需求是“快速画张图说明想法”，而不是“产出一份交付客户的正式文档”，那么 Excalidraw 往往是最优解。

小工具，大价值：为什么值得加入你的工作流

Excalidraw for VSCode 看似只是多了一个绘图插件，实则代表了一种新的思维方式：让可视化成为思考过程的一部分，而非事后补充。

过去我们习惯先写文字，再配图。但现在，你完全可以反向操作——先在白板上随意摆放几个框，理清关系后再展开描述。这种“视觉优先”的写作模式，在处理复杂系统设计时尤其有效。

再加上 AI 辅助降低起始门槛、协作功能打破沟通壁垒、SVG 元数据保障长期可维护性，这套组合拳让它不仅仅是一个“画图画得好看”的工具，而是一个真正融入现代开发实践的认知加速器。

所以，下次当你又想停下来画张图的时候，不妨试试就在当前窗口新建一个.excalidraw.svg文件。也许你会发现，那张原本打算“以后再说”的示意图，现在已经完成了大半。

这种顺滑到几乎察觉不到的存在感，才是工具演进的终极目标。