VSCode 中的 Excalidraw：让代码与草图共舞
你有没有过这样的经历？写文档时想画个架构图，结果打开绘图软件、找模板、对齐元素……一通操作下来，思路早就断了。或者更糟——改完代码后发现设计图早已“失联”，根本找不到源文件。
现在，这一切可以改变了。当你在 VSCode 里敲着代码，突然冒出一个系统设计灵感，只需新建一个.excalidraw文件，几秒内就能在熟悉的编辑器中随手勾勒出来。没有跳出工作流，也不用切换工具，就像在笔记本上涂鸦一样自然。
这就是Excalidraw + VSCode带来的体验革命。
安装即用，无需配置
要在 VSCode 中启用 Excalidraw，过程简单得几乎让人怀疑它是不是太容易了：
- 打开扩展面板（
Ctrl+Shift+X）； - 搜索 “Excalidraw”；
- 找到由Excalidraw Team发布的官方扩展（通常名为Excalidraw Support或类似名称）；
- 点击安装，然后重启编辑器。
就这么完了？是的。整个过程不需要部署服务、不依赖远程 API、也不用注册账号。扩展内置了轻量级渲染引擎，首次加载可能稍慢一点（因为它要初始化 WebAssembly 模块），但之后的操作流畅如纸笔书写。
这正是它的魅力所在：零摩擦集成。你不是在“使用一个绘图工具”，而是在“延展你的表达方式”。
创建图表：从命名开始
Excalidraw 在 VSCode 中通过文件后缀触发专属编辑器。支持三种格式：
.excalidraw—— 纯 JSON 格式，最轻便.excalidraw.svg—— SVG 容器包裹 JSON，兼容性更强.excalidraw.png—— 带嵌入数据的 PNG，适合分享
比如你可以创建：
auth-flow.excalidraw system-architecture-v3.excalidraw.svg双击打开后，立刻进入一个熟悉的手绘风格界面：灰白色画布、略带抖动的线条、简洁的工具栏——和网页版几乎一模一样。所有图形都带着那种“人为绘制”的轻微不规则感，反而让技术图示显得更亲切、更有思考痕迹。
⚠️ 小提示：第一次打开可能会卡顿几秒，这是在加载底层渲染模块。后续再开就快如闪电。
上手就是直觉本身
Excalidraw 的设计理念很明确：降低认知负担，提升表达自由度。
它的工具栏极简，每个功能都对应一种自然动作：
| 快捷键 | 工具 | 使用场景 |
|---|---|---|
T | 文本 | 添加标签或说明文字，字体自带手写质感 |
A | 箭头 | 表达流向关系，自动吸附到图形边缘 |
R/O | 矩形 / 圆形 | 构建模块框、服务节点、数据库图标等 |
P | 自由画笔 | 圈重点、划注释、画思维连线，像真的在纸上写写画画 |
V | 选择工具 | 拖动、缩放、多选组合元素 |
所有图形默认都有轻微变形和线条抖动，这不是 Bug，而是刻意为之的“人性化”视觉语言。比起冷冰冰的精准几何图形，这种风格更能传达“这是我的想法草稿”，降低评审时的心理压力。
更重要的是，这些图不是静态图片。它们是可编辑的数据结构，本质上是一个 JSON 对象，记录了每个元素的位置、样式、连接关系。这意味着你可以把它放进 Git，像管理代码一样追踪每一次修改。
想象一下：你在 PR 里提交了一张新架构图，同事评论说“认证服务应该拆成两个组件”。你只需双击.excalidraw文件，拖出一个新框，拉条线连上去，保存提交——全过程都在 VSCode 内完成，无需任何上下文切换。
AI 辅助？虽然没直接集成，但能绕过去
目前 VSCode 版本的 Excalidraw 还没有原生集成 AI 生成功能，但这不妨碍我们“曲线救国”。
社区已有增强版 Excalidraw 实例支持通过自然语言生成草图。例如访问国内可用的镜像站（如https://excalidraw.cn），输入一句：
“画一个微服务架构图，包含用户服务、订单服务、API 网关和 Redis 缓存”
AI 可能在几秒内生成初稿。导出为.excalidraw文件后，复制到本地项目中，直接用 VSCode 打开即可继续编辑。
另一种玩法是结合 GitHub Copilot 或其他 LLM 工具。由于 Excalidraw 的数据模型完全开放（就是 JSON），你可以让 AI 输出符合其 schema 的元素定义，然后粘贴进文件中复现内容。
举个例子，如果你知道某个按钮对应的 JSON 结构，完全可以提示 AI：“请生成一个红色矩形，文字为‘登录’，坐标 x=100, y=200”，然后把结果插入文件。虽然不能一键成图，但对于熟悉结构的人来说，这是一种高效的半自动构建方式。
协作模式：异步胜于实时？
多人实时协作是网页版 Excalidraw 的强项，但在 VSCode 插件中，默认是以本地文件形式存在，无法多人同时编辑。
听起来像缺点？其实换个角度看，这反而是优势。
大多数技术团队的设计演进本就是异步进行的。方案初稿由一人起草，发文档链接让大家提意见，几天后再更新版本。这个过程中，真正的价值不在于“谁在什么时候改了哪一笔”，而在于变更是否被记录、能否追溯。
而基于 Git 的.excalidraw文件恰好满足这一点：
+ 添加组件: "消息队列 Kafka" + 修改网关颜色: gray → blue + 删除冗余箭头: 用户服务 → 数据库每一次提交都能看到清晰的 diff，配合 commit message，形成一份“可视化设计日志”。这对技术负责人审查架构演进非常有价值。
所以实际工作流往往是：
- 用在线版 Excalidraw 快速协作出初稿；
- 导出并提交到仓库；
- 后续迭代全部在 VSCode 中完成，纳入版本控制；
- 最终发布时，SVG 直接嵌入文档或网站。
这种“在线共创 + 本地受控维护”的混合模式，既保留了灵活性，又确保了可审计性。
和 Markdown 天然融合，图文一体
如果说 Excalidraw 是笔，那 Markdown 就是纸。两者结合，才真正实现了“所思即所得”的技术写作体验。
假设你在写一份 API 设计文档：
## JWT 认证流程 客户端首先通过用户名密码获取 Token，后续请求携带 Token 进行鉴权。 这里引用的是.excalidraw.svg文件。GitHub、GitLab、VSCode 预览都能正常显示图像。更妙的是，双击这个图片，会直接在 Excalidraw 编辑器中打开源文件，随时修改。
这意味着什么？
- 图不会“丢失”——它就在项目目录里，和代码同生命周期；
- 改动即时生效——改完保存，预览自动刷新；
- 团队协作无障碍——新人克隆仓库就能看到完整上下文。
再加上 SVG 本身是矢量格式，放大不失真，体积小，还能被搜索引擎索引，简直是技术文档配图的理想形态。
如果你有手写设备，体验直接升维
如果你用的是 Surface、iPad 配合 Remote Desktop，或是带触控屏的笔记本，Excalidraw 的体验会上升到另一个层次。
开启压感笔支持后，自由画笔工具会根据下笔力度变化粗细，让你真正实现“手随心动”。无论是圈出关键路径、标注性能瓶颈，还是随手写下一段解释文字，都像在真实白板上操作。
我常做的一个工作流是：
- 左侧栏打开代码文件；
- 右侧新建一个
.excalidraw画布； - 边读代码边画调用关系图，用笔直接在图上写注释。
这种“眼、手、脑”同步的工作节奏，极大提升了理解和表达效率。尤其在做代码评审或教学讲解时，这种方式比纯文字评论直观得多。
提升效率的几个实战技巧
1. 建立自己的图形库
Excalidraw 支持“Library”机制，可以把常用元素保存为模板。比如：
- 公司 Logo 图标
- 标准微服务容器样式
- 数据库、缓存、消息队列的标准表示法
导出为.excalidrawlib文件后，在不同项目中导入即可复用。不仅能统一视觉风格，还能避免重复劳动。
2. 利用 Git 跟踪设计变更
因为.excalidraw是纯文本文件，Git 可以清晰展示每次修改的内容差异。不像二进制绘图文件（如 Visio），再也看不到“到底改了哪里”。
这对技术评审特别有用。你可以清楚地看到某次提交是否增加了新的依赖、删除了某个接口、调整了通信方向。
3. 多格式导出，适配各种场景
右键菜单支持多种导出方式：
- PNG：用于 PPT 汇报或微信聊天分享；
- SVG：嵌入网页、Wiki 或静态站点，保持高清质量；
- Clipboard：一键复制图像，粘贴到会议文档或即时通讯工具中。
建议优先使用 SVG 导出，既能保留编辑能力，又具备良好的传播性和 SEO 友好性。
它不是万能的，但足够聪明地填补空白
当然，Excalidraw 也有局限：
- 没有自动布局引擎，复杂图需要手动排布；
- 网格对齐功能较基础，精细控制不如专业工具；
- VSCode 插件暂未集成 AI 输入；
- 不支持实时协同编辑。
对于高度规范化的 UML 图、企业级流程建模，它确实不是最佳选择。但你要问的是：“我现在有个想法，怎么最快把它画出来？”、“这页文档缺一张示意图，能不能五分钟搞定？”——这时候，Excalidraw 几乎是唯一能做到“即想即画”的工具。
相比之下，其他选项各有短板：
- Mermaid.js：代码生成图很酷，但不够自由，难以表达非标准结构；
- Draw.io (diagrams.net)：功能强大，但界面复杂，启动成本高；
- Figma / Inkscape：专业级工具，但离开发流程太远，容易造成“图代码分离”。
而 Excalidraw 的定位非常精准：轻量、快速、贴近开发者心智模型的草图工具。
写在最后
Excalidraw 在 VSCode 中的集成，看似只是一个插件，实则代表了一种新的工作哲学：让表达回归本能，让工具消失于无形。
它不强迫你遵循某种建模范式，也不要求你掌握复杂的操作逻辑。它只是静静地待在那里，当你需要的时候，随手一画，就把脑海中的结构外化成可视内容。
更重要的是，它把“图”重新拉回了工程体系中——和代码一样可版本控制、可审查、可协作。从此，设计不再是孤立的附件，而是系统演进的一部分。
下次当你犹豫要不要画张图时，不妨试试新建一个.excalidraw文件。也许你会发现，可视化思维，原来可以如此轻松。
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
