Excalidraw插件需先创建.excalidraw文件才能启用编辑器,导出PNG或配合Markdown Preview Enhanced插件实现MD中渲染,高分屏下应勾选高分辨率导出,协作时需规范提交信息并避免多人编辑同一文件。

Excalidraw插件装了但点不开画板
VSCode里装了Excalidraw插件却找不到入口,不是插件没生效,而是它默认不提供独立面板——必须先打开或新建一个.excalidraw文件才能激活编辑器。
- 右键资源管理器空白处 → “New File” → 输入
diagram.excalidraw(后缀必须是.excalidraw) - 或者直接用命令面板:
Ctrl+Shift+P(macOS为Cmd+Shift+P)→ 输入Excalidraw: New Excalidraw file - 如果命令搜不到,说明插件未正确启用:检查插件页是否显示
Enable按钮,点击启用后再重启VSCode
画完图怎么插入到Markdown笔记里
Excalidraw本身不支持直接“嵌入”到.md文件中显示渲染图,它生成的是纯文本格式的JSON数据,靠外部工具或插件解析。想在MD里看到图,得走导出+引用流程。
- 画完后按
Ctrl+S(或Cmd+S)保存,文件内容是可读JSON,但VSCode不会渲染图形 - 要让MD显示图:用
Excalidraw: Export to PNG命令导出图片,再手动插入 - 更省事的方案:安装
Markdown Preview Enhanced插件,它支持识别```excalidraw代码块,并在预览中实时渲染(需把Excalidraw内容粘贴进```excalidraw块内)
为什么导出PNG模糊、线条锯齿
VSCode版Excalidraw默认导出分辨率固定为设备像素比(dpr)=1,高分屏(如Mac Retina、Windows缩放125%/150%)下会明显模糊。
- 导出前,在画布右上角点击
⋯→Export→ 勾选Export with high resolution (2x) - 如果仍模糊,检查系统缩放设置:Windows在“设置→显示→缩放”调回100%,或VSCode启动时加参数
--force-device-scale-factor=1 - 注意:
Export as SVG能保持清晰,但部分Markdown预览器不支持SVG内联渲染,需转成PNG再用
协作和版本控制时要注意什么
.excalidraw文件本质是JSON,Git能跟踪文本变更,但人眼几乎无法diff图形改动——两个版本看起来都是大段哈希字段,看不出哪根线被移动了。
- 每次修改后务必写明确的commit message,例如
chore(excalidraw): 调整API网关与Auth服务连接线 - 避免多人同时编辑同一文件,冲突几乎无法手工合并;建议按模块拆分文件,如
auth-flow.excalidraw、db-schema.excalidraw - 如果团队用Obsidian,可考虑改用
Excalidraw Obsidian Plugin,它支持自动同步和图层级历史,VSCode插件没这能力
Excalidraw在VSCode里是个轻量草图工具,不是专业绘图软件。它最稳的用法是:单人快速画→导出PNG→贴进文档。想协同、回溯、复用组件,就得接受它不解决这些问题的事实。











