Excalidraw B站视频脚本创意方向

Excalidraw：让技术表达更生动的可视化利器

你有没有过这样的经历？想在视频里讲清楚一个系统架构，结果画图花了两个小时，最后出来的图还像PPT模板套用的——规整、冰冷、毫无灵魂。观众还没看到重点，注意力已经跑偏了。

这其实是很多技术类内容创作者的真实困境：我们擅长逻辑，却不擅长视觉表达；我们能写代码，却画不出一张“让人愿意多看一眼”的示意图。

而最近在开发者圈子里悄悄流行起来的一个工具，正在改变这一点——Excalidraw。

它不是什么高精尖的设计软件，也没有Figma那样华丽的界面。相反，它的图形歪歪扭扭，字体像是小学生写的，线条还带着手抖的痕迹。可正是这种“不完美”，让它变得异常亲切、自然，甚至有种莫名的专业感：你看，这个人不是在炫技，他是在认真地跟你解释问题。

为什么是手绘风格？

先别急着怀疑审美。这种“看起来像随手画”的风格，背后其实是一套精心设计的技术机制。

Excalidraw 并没有使用真实的手绘图片资源，而是通过算法实时生成“看似随意”的图形。比如画一条直线，它不会走数学上的最短路径，而是在坐标点上叠加微小的随机扰动——就像你拿笔时手轻微抖了一下。

关键在于，这种“抖”是有记忆的。同一个图形每次加载，抖动的方式都一模一样。这不是靠运气，而是用了确定性伪随机函数：以元素ID为种子（seed），确保无论谁打开、在哪台设备上查看，看到的都是完全一致的“手绘形态”。

function generateJitteredLine(points: [number, number][], seed: number) { const jitteredPoints = []; let random = simpleRandom(seed); // 固定种子保证重绘一致 for (let i = 0; i < points.length; i++) { const [x, y] = points[i]; const offsetX = (random() - 0.5) * 2; const offsetY = (random() - 0.5) * 2; jitteredPoints.push([x + offsetX, y + offsetY]); } return interpolatePoints(jitteredPoints); }

这个简单的函数揭示了一个核心理念：控制中的自由度。你可以让它“像人画的”，但又不至于失控到无法协作。这对远程团队尤其重要——大家看到的是同一张图，哪怕它看起来每人画得都不太一样。

再加上Virgil或Comic Sans MS这类非正式字体，以及轻微旋转的文字排版，整个画面瞬间从“冷冰冰的流程图”变成了“白板讨论实录”，信息传达效率反而提升了。

多人协作是怎么做到轻量又稳定的？

说到协作，很多人第一反应是 Figma 或 Miro，功能强大但依赖中心化服务，数据也掌握在别人手里。而 Excalidraw 的思路完全不同：尽量少传数据，尽量本地处理。

它的协作模型可以理解为“状态差分广播 + 客户端合并”。当有人移动了一个框，系统不会把整张图重新发一遍，只会打包这次变更（diff patch），通过 WebSocket 推送到服务器，再由服务器转发给房间里的其他人。

接收方拿到更新后，并不是直接替换，而是根据每个元素的id和version字段做智能合并：

socket.on('remote-update', (payload: ExcalidrawElement[]) => { const currentState = getSceneElements(); const mergedState = mergeRemoteElements(currentState, payload); updateScene({ elements: mergedState }); }); function mergeRemoteElements( local: ExcalidrawElement[], remote: ExcalidrawElement[] ): ExcalidrawElement[] { const map = new Map<string, ExcalidrawElement>(); local.forEach(el => map.set(el.id, el)); remote.forEach(el => { if (!map.has(el.id) || map.get(el.id)?.version < el.version) { map.set(el.id, el); } }); return Array.from(map.values()); }

这套逻辑虽然简单，却非常有效。实测公网环境下端到端延迟普遍在 150–250ms 之间，单房间支持 10 人以内同时编辑毫无压力。更重要的是，你可以自建协作服务器，把整套流程放在企业内网运行，真正实现隐私优先、去中心化协作。

对于B站UP主来说，这意味着什么？如果你和小伙伴一起策划视频脚本，完全可以开个房间，边聊边画，所有修改实时可见，讨论过程本身就是内容素材的一部分。

AI 自动生成图：从“我得画”到“你说就行”

如果说手绘风格降低了表达门槛，那AI集成才是真正把生产力拉满的功能。

从2023年开始，Excalidraw 开始试验性接入大语言模型能力。你现在可以在命令面板输入一句：“画一个三层微服务架构，前端调用订单服务，订单服务依赖用户服务和数据库”，几秒钟后，一张结构清晰的草图就出来了。

背后的流程很清晰：
1. 用户输入自然语言；
2. 请求发送至LLM（如 GPT-3.5/4、Claude 等）；
3. 模型解析语义，输出标准 JSON 格式的绘图指令；
4. Excalidraw 解析并渲染成可视图形。

输出长这样：

{ "type": "excalidraw", "version": 2, "source": "excalidraw.ai", "elements": [ { "id": "rect1", "type": "rectangle", "x": 100, "y": 100, "width": 200, "height": 40, "strokeStyle": "hachure" }, { "id": "text1", "type": "text", "text": "Email", "x": 110, "y": 110 } ] }

别小看这个JSON。它是连接“人类语言”和“视觉表达”的桥梁。有了它，哪怕你完全不会画画，也能快速产出可用的技术示意图。

我自己测试过几个典型场景：
- “画一个登录页面” → 准确率90%以上，基本布局一次成型；
- “展示Kafka消费者组的工作机制” → 能正确画出Broker、Topic、Partition、Consumer之间的关系；
- “画一个Vue组件树” → 层级结构合理，命名符合惯例。

当然，AI目前还是辅助角色。复杂拓扑可能需要手动调整连线，颜色风格也未必符合预期。但它最大的价值在于：把从零开始的时间压缩了70%以上。原来要花半小时构思布局，现在三分钟拿到初稿，剩下的时间用来优化细节和讲解逻辑，效率不可同日而语。

如果你想自己搭一套私有化方案，也不难。下面这段Python脚本就能实现基础调用：

import openai import json def generate_diagram(prompt: str): response = openai.ChatCompletion.create( model="gpt-3.5-turbo", messages=[ {"role": "system", "content": "You are a diagram assistant. Output only valid Excalidraw JSON."}, {"role": "user", "content": prompt} ], temperature=0.3 ) raw_output = response.choices[0].message['content'] try: diagram_json = json.loads(raw_output) return diagram_json except json.JSONDecodeError: print("Invalid JSON returned") return None

只要稍加封装，就可以做成本地插件或浏览器扩展，既安全又高效。特别适合处理敏感架构图时使用。

在B站视频创作中，它到底怎么用？

我们来看一个具体例子：你要做一期《Redis主从复制原理》的视频。

传统做法可能是：
- 先找参考资料；
- 打开PPT或draw.io，一点点拖组件、连线、加文字；
- 导出静态图插入剪辑软件；
- 配音讲解时指着某块区域说“这里……那里……”。

而现在，你的工作流可以变成这样：

1. 打开 Excalidraw，新建一个空白画布；
2. 输入AI指令：“画一个Redis master节点和两个slave节点，用箭头表示复制流方向”；
3. AI生成初稿，你快速调整位置、配色、添加注释；
4. 开启浏览器录制功能（记得打开指针高亮），模拟“边讲边画”的过程；
5. 把录屏片段导入剪映或Premiere，配合配音完成合成；
6. 发布。

你会发现，观众的反馈变了。他们不再觉得这是“又一个技术科普”，而是像在参加一场真实的架构讨论会。那种逐笔绘制的过程，天然带有节奏感和专注力引导，比静态图更能抓住注意力。

而且，由于所有内容都是自主生成，不存在版权风险。你可以建立自己的视觉符号库——比如特定样式的服务器图标、数据库标志、网络协议标签——长期积累下来，就成了你频道的“视觉品牌”。

一些高阶玩家已经开始玩得更深入了：
- 把常用模板保存为 Library，一键复用；
- 制作专属主题配色，增强辨识度；
- 用 Excalidraw 做学习笔记，边学边画，知识沉淀更牢固；
- 录制“思考全过程”视频，展现技术人的思维路径，而不只是结论。

工具之外：一种新的知识表达方式

Excalidraw 真正厉害的地方，从来不只是技术实现有多精巧，而是它重新定义了“如何讲述技术”。

在过去，我们习惯用文档、代码、PPT来传递知识。这些方式强调精确性和完整性，但往往忽略了认知负荷的问题。一张密密麻麻的架构图，对新手来说就像天书。

而 Excalidraw 提倡的是“渐进式披露”：你可以先画一个框，再说它是什么；先连一根线，再解释它代表什么关系。这种“边画边讲”的叙事节奏，更贴近人类的理解习惯。

它也让技术表达变得更有人味。那些轻微抖动的线条、不太对齐的文本、略显笨拙的形状，都在告诉观众：“我不是机器，我是和你一样的学习者。”这种亲和力，在建立信任感方面至关重要。

对于B站这样的平台而言，这恰恰是最稀缺的特质——专业但不高冷，深入但不失趣味。

所以，与其说 Excalidraw 是个绘图工具，不如说它是一种新型的知识容器。它承载的不仅是信息，还有思考的过程、协作的痕迹、表达的情绪。

写在最后

技术传播的本质，不是把你知道的倒给别人，而是搭建一座桥，让对方愿意走过来。

Excalidraw 正是在帮我们修这座桥。它用算法模拟手绘，用轻量协议支撑协作，用AI打通语言与图形的壁垒。每一步都在降低表达的成本，提升沟通的温度。

如果你是一名技术UP主，不妨试试看：下一节视频，不要从写脚本开始，而是打开 Excalidraw，先画出来再说。

有时候，画着画着，思路就通了。