Excalidraw支持微信小程序预览，分享更方便

Excalidraw 融入微信生态：如何让设计图“扫一扫就看”

在一场跨部门的产品评审会上，技术负责人将一张架构图二维码投影到大屏上，参会同事掏出手机微信一扫——3 秒后，所有人都看到了清晰的手绘风格系统拓扑图。有人放大查看接口细节，有人截图标注疑问发到群里，而设计师则在桌面端实时收到反馈并当场修改。整个过程无需登录、不用安装 App，甚至连小程序都没跳出微信。

这背后正是Excalidraw 与微信小程序 WebView 的巧妙结合。它没有打造独立客户端，也没有重构移动端 UI，而是通过轻量级集成方式，把一个原本面向桌面浏览器的开源白板工具，无缝嵌入中国最活跃的协作场景中。

从“画出来”到“传出去”，中间差了什么？

Excalidraw 自诞生起就以极简著称：打开网页即用，数据本地存储，图形自带“手绘感”，天然适合快速表达抽象概念。它的核心用户是开发者、架构师和产品经理——这些人擅长画图，但往往苦恼于“别人看不懂”或“分享太麻烦”。

传统流程通常是这样的：

1. 在 Excalidraw 里画好一张微服务架构图；
2. 导出为 PNG 发到微信群；
3. 同事看到的是静态图片，无法缩放、不能编辑；
4. 提出修改意见后，原作者再回编辑器调整；
5. 重新导出、再次发送……

信息传递变成了一场“版本拉锯战”。更尴尬的是，客户或非技术成员常因打不开链接、需要注册账号等原因被挡在门外。

于是问题来了：能不能让一张图既保持可交互性，又能像公众号文章一样‘扫一扫就看’？

答案是肯定的。关键就在于——利用微信小程序的<web-view>组件加载 Excalidraw 的网页版，并通过 URL 参数控制行为模式。

技术实现的本质：不是移植，而是“借壳运行”

严格来说，Excalidraw 并未专门为微信小程序开发 native 功能。它依然是那个基于 React + Canvas 的 Web 应用，只不过现在多了一个“入口”：微信。

这个“入口”的核心技术载体就是<web-view>，它是微信小程序提供的一个容器，允许在小程序页面内加载外部 H5 页面。只要目标网页具备响应式布局和触控支持，就能在微信环境中正常运行。

这意味着，Excalidraw 几乎不需要做任何改造，只需满足以下条件即可实现预览：

• 支持移动端适配（viewport 设置、触摸事件处理）
• 使用 HTTPS 协议
• 域名已配置为小程序的“业务域名”
• 可通过 URL 参数启用只读模式（如?readonly=true）

一旦这些前提成立，你就可以把任意一张 Excalidraw 图表封装成一个可在微信中打开的页面，甚至生成二维码张贴在办公室墙上。

实践建议：如果你担心公网访问安全，可以部署私有实例（比如使用 Docker 部署自己的 excalidraw-server），然后将其域名加入小程序后台备案列表。

如何做到“扫码即看”？动态传参才是精髓

真正让这一功能落地的关键，不是静态嵌入，而是动态拼接图表 ID。

设想这样一个场景：每个会议室门口都贴着当前项目的进度草图二维码。不同项目对应不同图纸，但展示逻辑完全一致。我们不可能为每个图开发一个小程序页面，怎么办？

解决方案藏在微信小程序的启动机制里：支持通过扫描带参数的二维码触发特定逻辑。

<!-- page.wxml --> <web-view src="{{finalUrl}}"></web-view>

// page.js Page({ data: { finalUrl: '' }, onLoad(query) { // 解析扫码传入的 scene 参数 const scene = decodeURIComponent(query.scene); const jsonId = scene; // 假设 scene 直接传递 JSON ID const baseUrl = 'https://excalidraw.com/#json='; const readonlyParam = '&readonly=true'; this.setData({ finalUrl: `${baseUrl}${jsonId}${readonlyParam}` }); } });

这样一来，只要生成二维码时将json=abc123编码为 scene 参数，扫码后小程序就能自动提取 ID 并加载对应图表。一套代码，无限复用。

你还可以进一步增强体验：

• 添加加载动画，避免白屏等待；
• 注入轻量脚本监听postMessage，上报“用户已查看”事件；
• 在页面底部加个悬浮按钮：“联系负责人”或“返回首页”。

为什么这种集成方式特别适合中国团队？

我们必须承认一个现实：在中国企业协作生态中，微信几乎是事实上的统一入口。无论是内部沟通、文件传输还是审批流程，最终都会沉淀到群聊里。而 Excalidraw 这类工具如果只能存在于 Chrome 标签页中，注定难以普及。

但现在不一样了。一张图可以通过三种路径触达用户：

1. 桌面浏览器 → 全功能编辑
2. 手机浏览器 → 触控查看
3. 微信小程序 → 扫码即开，零门槛预览

三者共享同一个链接、同一份数据，真正做到“一次发布，多端同步”。

更重要的是，它降低了非技术角色的参与成本。以前让运营同事看一张 UML 图，可能得先解释怎么翻墙访问 Figma；现在只需要说一句：“扫一下这个码就行。”

不止是“能看”，还能“互动”——有限但有用的反馈闭环

虽然大多数情况下我们会设置readonly=true来防止误操作，但这并不意味着移动端只能被动浏览。

借助window.parent.postMessage和小程序端的bindmessage，我们可以建立双向通信通道。例如：

• 当用户长按某模块时，弹出菜单：“这里有疑问”；
• 点击后向父容器发送消息{ type: 'comment', element: 'user-service', text: '接口文档在哪？' }；
• 小程序接收到后，可自动记录日志或将评论推送至企业微信机器人。

当然，这种交互深度取决于具体需求。对于多数团队而言，“看见 → 截图 → 发群讨论”已经足够高效。真正的价值不在于复杂交互，而在于缩短了“发现问题”到“提出问题”的路径。

工程实践中的几个避坑指南

尽管整体实现简单，但在实际部署中仍有几个常见陷阱需要注意：

✅ 必须配置可信域名

所有通过<web-view>加载的 URL，其主域名必须在微信公众平台的小程序管理后台中完成“业务域名”备案，且必须使用 HTTPS。

✅ 避免过度依赖本地存储

Excalidraw 默认将未保存的数据存在 localStorage 中。但在微信 WebView 中，这部分数据生命周期不稳定，容易丢失。建议引导用户及时“固定链接”，并通过服务器托管重要图表。

✅ 控制资源体积，提升加载速度

虽然 Excalidraw 主包小于 2MB，但在弱网环境下仍可能出现卡顿。可考虑：
- 使用 CDN 加速静态资源；
- 对高频访问图表预加载关键资产；
- 或干脆提供“静态图 fallback”：当加载超时时，降级显示一张 SVG/PNG 快照。

✅ 敏感信息要私有化部署

如果你画的是公司级系统架构图，显然不适合放在excalidraw.com上。此时应自行部署私有实例，并关闭公网访问权限。

# 使用 Docker 快速部署私有实例 docker run -p 8080:8080 \ -e ALLOW_ANONYMOUS_EDITORS=false \ -e MAX_FILE_AGE_DAYS=7 \ excalidraw/excalidraw

然后将你的私有地址（如https://draw.your-company.com）添加到小程序业务域名列表中即可。

它解决了哪些真实痛点？

你会发现，很多效率瓶颈其实不在“会不会画图”，而在“别人能不能方便地看懂”。

更进一步：不只是“预览”，而是“嵌入知识体系”

一些先进团队已经开始尝试更深一层的整合：

• 在 Obsidian 或 Notion 中嵌入 Excalidraw 图表（通过 iframe）；
• 将关键图表链接写入 Confluence 页面；
• 用自动化脚本定期抓取架构图变更记录，生成演进时间线；
• 结合 AI 插件，输入“帮我画一个订单履约流程”自动生成初稿。

而当这些内容又被生成二维码贴在工位旁时，你就拥有了一个活的知识库——不再是尘封的 PDF 手册，而是随时可查、持续演进的视觉化文档。

最后一点思考：工具的终极目标是“消失”

最好的工具从来不是最复杂的，而是最容易被忽略的。当你不再意识到它的存在，却早已离不开它时，它才算真正成功。

Excalidraw + 微信小程序的组合之所以值得称道，是因为它没有试图颠覆什么，也没有强行教育用户改变习惯。它只是默默地把“创作”和“传播”之间的裂缝补上了。

未来或许会有更多类似工具走向“隐形协作”：
AI 自动生成图表 → 自动发布到私有实例 → 生成带权限的二维码 → 推送至相关人微信群 → 扫码即看、即时反馈。

整个过程无需人工干预，信息流转如呼吸般自然。

而现在，我们已经站在了这条路径的起点上。