用「说话」的方式,给开源白板装上AI 工具

先看成品：一块白板，三个 AI 工具

先放结果。现在打开我那块白板，工具栏右侧有一个「AI ▾」下拉，点开是三个工具：AI 对话绘图（多轮对话画流程图，能接着改）、AI 帮我画图（一句话出手绘简笔画）、线框图至代码（画个框写几行字，直接变成能用的网页）。

▲ 工具栏的「AI ▾」下拉：三个工具都收在这里，随点随用，阅读原文直接体验

这三个工具不是我写的——我不会前端，也从没读过这个项目的源码。它们是我「说」出来的：我把要什么讲给 AI 听，AI 去改开源代码，我上线验收，不满意就再说。

一、为什么一定要自己搭，而不是用别人的在线服务

Excalidraw（那块开源手绘白板）官方就有在线版，也有别人搭好的集成服务。但我还是花了一个晚上自己搭了一套，因为「本地部署、完全可控」这八个字，对一个要长期用、甚至给同事用的人来说，值回所有投入，另外 AI 功能在官网中属于增值服务，有额度限制：

• 数据可控
  ：画布内容全存浏览器本地，不走任何第三方服务器。肯定完全本地离线部署，采用本地大模型方式；
• 成本可控
  ：AI 接口是我自己的，一次生成几分钱，一天封顶几块钱，还有熔断和限额兜底——不存在「月底账单惊喜」；
• 规则可控
  ：谁用、用多少、提示词怎么定、风格长什么样，全是我说了算。想改个按钮、加个入口，说话就行；
• 不怕关停
  ：开源项目（MIT 协议）装在自己服务器上，就算原项目哪天变了，我手里这套照常跑。

一句话：工具是租来的，能力才是自己的。自己搭的这套东西，就是长在自己服务器上的能力。

二、怎么搭的：

搭建过程分三步。

第一步，把项目跑起来。：

十几分钟后，一个和官方一模一样的白板就在我的域名下跑起来了——这一步没有写一行代码。

第二步，把 AI 接口接进去：

于是就有了安全的第一层：密钥不出服务器，谁也偷不走。底层模型我用的是 DeepSeek v4.1 flash——自带视觉能力和思考链，响应快、单次成本只有几分钱，做这种「短平快」的生成任务正合适。

第三步，就是把三个工具一个个「说」出来。参考指令：

① 工具栏加一个「AI」下拉，收三个入口：   对话绘图 / 帮我画图 / 线框图至代码② 对话绘图要支持多轮：我接着说「审批那步改成蓝色」，   它在上一版基础上改，而不是重新画一张③ 帮我画图出的是简笔画元素，进画布后能拆开随便改；   用户要画流程图就提示他去对话绘图④ 线框生成的页面要能像改文档一样改文字，保存后写回画布⑤ 给接口加上限额和熔断：单 IP 每天限次、单日预算上限，   超了自动停，防止被刷爆

每提一个需求，AI 改完代码，我刷新页面看效果，不对就接着说。整个改造前后需要多轮对话，每一轮都是「说清楚 → 看结果 → 提修改」的循环。

我还有个固定动作：让 AI 顺手给每个功能写一份「验收脚本」——自动化测试跑一遍「点按钮、输内容、看结果对不对」。AI 说「做完了」不算数，脚本跑绿 + 我亲眼看过截图，两道都过才算完。有了这道闸，后面每次改动才敢放手做。

三、场景一：AI 对话绘图——把「说不清楚」变成图

这个工具适合脑子里有流程、嘴上说不清的时候。打开对话框，像聊天一样说需求，它画到画布上；不满意就接着说，它在原图上改。

演示 1：请假审批流程。在对话框里输入：

几秒钟，一张带分支判断的手绘流程图就上了画布——「是 / 否」的标签都是它自己补的：

▲ 对话框里一句话，流程图直接画进画布（截自真实系统）

演示 2：下单到发货。换个业务场景再试一次：

同样一句话，换个主题就是另一张图：

▲ 多轮对话：第一轮画完，还可以接着说「给支付加一个失败分支」

常规功能展示：语义着色与迭代。生成的是可编辑的图形元素（不是图片），每个框、每根线都能拖能改；同类节点自动配色，起点、判断、异常用不同颜色区分，复杂流程一眼能看懂层级：

▲ 复杂流程也不糊：左侧语法右侧预览，节点按语义自动着色，插入后仍可手改

四、场景二：AI 帮我画图——给白板配一个插画师

这个工具管「好看」：一句话，出一幅手绘风简笔画，而且是矢量元素——生成后每个部件都能拆开挪、换色、改，不是一张死图片。

演示 1：小朋友在公园里玩纸飞机：

21 个图形部件上了画布：

▲ 每个部件可单独编辑

演示 2：一枚火箭发射升空。给汇报页、欢迎页配个主题插画，一句话的事：

▲ 「一枚火箭发射升空」：项目启动会、季度启动页的标配插画

常规功能展示：知道自己该干什么。它是插画师，不是图表工具——如果你让它「画个请假流程图」，它会提醒你这类需求更适合去对话绘图，两个工具不抢活：

▲ 画图表的需求会被礼貌劝去对话绘图，各干各的

五、场景三：线框图至代码——最「职场」的一个

这是我用得最多、也最建议你试的一个。流程是：在画布上拖一个框（框的大小就是页面尺寸），在框里写上你想要的内容，点「转换成代码」——几秒钟，一个排版完整、可以直接打开的网页就出现在预览里。

演示 1：从线框到页面。我在框里写了个「员工入职引导」，就这几行字：

看这个转换瞬间——左边是我画的线框，右边是生成出来的完整页面：

▲ 框里写几行字，框上出现「转换成代码」按钮

▲ 生成后：预览卡就在画布上，导航、卡片、按钮全齐，还能全屏、复制源码

演示 2：更复杂的成品。同样的打法，输入写具体一点：

出来的就是一个带步骤条、申请列表、审批信息面板的完整后台界面——拿去开会演示完全够用：

▲ 输入越具体，成品越可用：栏目名、数字、时间都写上，直接能用

常规功能展示：四种固定风格，一句话换装。这是「线框图至代码」的另一张王牌：工具栏里选个风格，同一句话的产出就完全不同。我在四个风格下输入了同一句话：

看结果：

▲ 管理后台风格：年会工作台，步骤、会务要点、筹备进度全配好

▲ 演示幻灯片风格：深色大字标题页，直接投屏开会用

▲ 活动欢迎牌风格：签到大屏、投屏迎宾，仪式感拉满

▲ 海报通知风格：时间地点对象着装一栏一项，直接发群里

根据规则，自动生成指定版本

常规功能展示：生成完还能接着改。预览里的文字可以像改文档一样直接点开改、不要的块能删，点保存，改动写回画布——「生成」只是起点，「改」才是日常：

• 改文字
  ：预览里点任意文字直接编辑，保存后同步回画布；
• 复制源码
  ：单个 HTML 文件，发给谁都能双击打开，不依赖任何环境；
• 同画布多版
  ：一版不满意，换个说法再生成一版，两张并排比着挑。

六、搭起来要花多少钱、多少事

把账摊开算，你会发现门槛比想象中低得多：

改造全程十几轮对话，摊在几个晚上做。最贵的不是钱，是你得把自己的需求想清楚——而这件事，本来就是你的活。

七、这块画布，还能玩出什么

AI 只是加在这块白板上的一层能力，白板本身的底子也很有意思。Excalidraw 官方给自己的定义是——一块可以随手画草图的虚拟白板，画出来的东西自带手绘感。这句话就是它的核心吸引力：你不需要会画画，画出来的东西也像回事。

我特别喜欢它的三件事：

• 矢量图，放大不糊
  ：画布上所有内容都是矢量元素，可以导出 SVG / PNG，也能存成源文件下次接着画。导出的 SVG 直接塞进 PPT、文档、公众号，放大到一面墙都不失真——这是位图和矢量最本质的差别；
• 能画画，也能改别人的画
  ：AI 出的是可拆开的元素而不是一张图片，所以你可以把那只猫的耳朵拉尖一点、换个颜色、给它加个领结。这类「自己动手改一改」的乐趣，才是创作的感觉；
• 手绘感本身就是优势
  ：它天生不严肃。给领导看的东西还在做，先拿一版草稿去对齐，比端出一版「成品」被推翻要轻松得多——草稿降低的是沟通成本，不是质量。

官方版本还有一堆好用的底子（这套自托管版基本都保留了）：

说句实话：官方在线版的实时协作（端到端加密的多人同画）是我这套纯静态自托管版没有的——你要是想多人一起画，得另配服务。我用「数据不出门」换掉了它，这个取舍见仁见智。

再往下，能玩的方向还有很多：

• 系统架构图 / 时序图 / 类图
  ：技术评审、交接文档里的常客；
• 产品原型草图
  ：先摆一版线框和同事对齐，比画高保真快十倍；
• 教学示意图
  ：给孩子、给新人讲原理，边画边讲，比翻 PPT 有感染力；
• 会议板书
  ：开着投屏当临时黑板，散会直接导出 PNG 发群里；
• 自己的作品
  ：情绪表情包、活动海报元素、公众号配图、孩子的涂鸦故事——AI 出个八成，你改到满意，署名是你。

这也是我最想说的一点：这套东西最有价值的用法，不是「让 AI 替你干完」，而是你拿着 AI 出的那版，改成你自己的作品。它负责从 0 到 70 分，剩下那 30 分的改动，才是你会被看见的地方——而且这部分，会越玩越有意思。

本文为「小易AI实践」系列 · 全站实录自 sycode.cn

阅读原文体验本次作品