Excalidraw支持语音转文字标注，记录灵感更快捷

Excalidraw 的语音革命：用说话的方式画架构图

在一场紧张的产品评审会上，工程师刚讲到“用户请求先经过负载均衡，再进应用集群”，产品经理却还在手忙脚乱地拖拽矩形框。这种“嘴快于手”的尴尬，在远程协作中屡见不鲜。而如今，Excalidraw 正在悄然改变这一现状——你只需要开口说一句：“画一个微服务架构”，系统就能自动生成带标注的拓扑图。

这背后不是魔法，而是语音识别与大模型技术对传统白板工具的一次精准赋能。作为一款以极简手绘风格著称的开源虚拟白板，Excalidraw 一直坚持“所想即所得”的设计哲学。最近它引入的语音转文字标注功能，并非简单叠加AI噱头，而是真正打通了从“想到”到“呈现”的最后一厘米距离。

当你说出“添加数据库连接池配置”时，声音如何变成画布上的文本框？这个过程比我们想象的更讲究。

整个流程始于浏览器对麦克风的调用。现代 Web 平台通过MediaStream API获取音频流后，并不会立刻上传全部数据。前端会先做端点检测（VAD），只在有实际语音活动时才触发后续处理，这样既节省带宽，也避免误唤醒。一旦确认有效输入，音频片段就会被送往 ASR 引擎。

目前主流部署方案有两种路径：
一是依赖云服务如 Google Speech-to-Text 或 Azure Cognitive Services，识别准确率高、多语言支持好；
二是私有化场景下运行轻量级本地模型，比如基于 Whisper.cpp 编译的 C++ 版本，虽牺牲部分精度，但保障了数据不出内网。

有意思的是，Excalidraw 并没有强依赖某一种实现。它的插件机制允许开发者自由对接不同 ASR 后端。只要返回标准文本结果，前端就能调用excalidrawAPI.updateScene()动态插入元素。以下这段 JavaScript 就展示了如何在插件中启用语音输入：

async function startVoiceInput(excalidrawAPI) { const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)(); recognition.lang = 'zh-CN'; recognition.interimResults = false; recognition.onresult = (event) => { const transcript = event.results[0][0].transcript.trim(); if (transcript) { const viewportCoords = { x: 100, y: 100 }; excalidrawAPI.updateScene({ elements: [ ...excalidrawAPI.getSceneElements(), { type: "text", x: viewportCoords.x, y: viewportCoords.y, text: transcript, fontSize: 16, fontFamily: 1, fillStyle: "hachure", // 手绘质感的关键 roughness: 2, strokeColor: "#000", id: Math.random().toString(36).substr(2, 9) } ] }); } }; try { await navigator.mediaDevices.getUserMedia({ audio: true }); recognition.start(); } catch (err) { alert("无法访问麦克风，请检查权限设置"); } }

别小看这几行代码。其中fillStyle: "hachure"和roughness: 2是保持视觉一致性的关键参数——它们让新生成的文字看起来像是用手画出来的，而不是冰冷的打印体。这才是用户体验无缝的核心细节。

不过 Web Speech API 在 Safari 和 Firefox 上支持有限，生产环境建议采用 WebRTC + 自建 ASR 网关的混合架构。例如使用 MediaRecorder 录制 Blob 数据，再通过 WebSocket 流式上传至后端处理，兼容性更强。

如果说语音转文字是“提速”，那接下来的 AI 图形生成则是“升维”。

试想这样的场景：你在站立会议上说：“我们现在有两个微服务，订单服务调用库存服务，中间加个熔断器。” 如果工具只能记录这句话，顶多算个智能笔记；但如果它能自动画出两个矩形、一条箭头和一个菱形控制节点，那就是真正的认知加速器。

这正是 AI 驱动图形生成的能力所在。其核心不在绘图本身，而在语义理解。Excalidraw 本身不内置 LLM，但通过插件可连接 OpenAI、Ollama 或本地部署的 LLaMA 3 模型。用户输入自然语言后，系统将其转化为结构化的绘图指令。

典型工作流如下：
1. 用户输入“画一个三层 Web 架构”
2. 请求发送至 LLM，附带预设 prompt 引导输出 JSON 格式
3. 模型返回包含类型、位置、标签的标准元素数组
4. 前端解析并批量渲染到画布

下面是一个典型的后端接口示例，使用 FastAPI 接管来自前端的描述请求：

from fastapi import FastAPI import openai import json app = FastAPI() PROMPT_TEMPLATE = """ 你是一个 Excalidraw 图表生成助手。请根据用户描述生成对应的图形元素JSON。 每个元素必须包含 type, x, y, width, height, label。 使用简单布局，水平排列主要组件，用箭头表示流向。 输出仅包含 JSON 数组，不要额外解释。 示例输入：“画一个客户端访问服务器的流程” 输出： [ { "type": "rectangle", "x": 100, "y": 200, "width": 80, "height": 40, "label": "客户端" }, { "type": "arrow", "x": 180, "y": 220, "width": 60, "height": 0 }, { "type": "rectangle", "x": 240, "y": 200, "width": 80, "height": 40, "label": "服务器" } ] """ @app.post("/generate-diagram") async def generate_diagram(prompt: str): response = openai.ChatCompletion.create( model="gpt-3.5-turbo", messages=[ {"role": "system", "content": PROMPT_TEMPLATE}, {"role": "user", "content": prompt} ], temperature=0.3 ) try: elements = json.loads(response.choices[0].message.content) for elem in elements: elem.update({ "strokeColor": "#000", "backgroundColor": "transparent", "fillStyle": "hachure", "strokeWidth": 1, "roughness": 2, "opacity": 100, "id": f"gen-{hash(json.dumps(elem)) % 10000}", "version": 1, "isDeleted": False }) return {"elements": elements} except Exception as e: return {"error": str(e)}

这里有个工程上的巧思：通过 few-shot prompting（少样本提示）约束模型输出格式，避免自由发挥导致解析失败。同时为每个元素补充 Excalidraw 所需的元字段，如id、version等，确保与现有状态机兼容。

当然，直接调用公有 API 存在隐私风险。企业级部署应优先考虑本地化方案，比如 Ollama 运行 TinyLlama + LangChain 工具链，在保证响应速度的同时满足合规要求。

整个系统的协作架构可以简化为这样一个数据流：

[用户终端] ↓ (语音输入) [Web App - Excalidraw] ↓ (调用 API) [ASR 服务] ←→ [LLM 服务] ↓ (返回文本 / JSON) [Excalidraw Engine 渲染] ↓ [协作服务器] ↔ [其他客户端]

所有变更通过 WebSocket 实时广播，实现“我说你画，他也能见”的协同体验。特别是在远程头脑风暴中，团队成员无需等待谁来“代笔”，每个人都可以直接发声贡献内容。

但这套机制也带来新的设计挑战。比如语音识别可能延迟 1~2 秒，若不做处理会让用户感觉卡顿。经验做法是立即显示一个半透明占位框，标注“正在识别…”，提升反馈即时感。

又比如权限问题——是否上传语音？能否关闭云端分析？这些都应在 UI 上明确告知，并提供“纯本地模式”开关。毕竟，信任才是生产力工具的生命线。

再比如容错机制。AI 不可能永远正确，“画个 Kafka 消费者组”被误解成“画个咖啡消费者”也不是没可能发生。因此每次生成后必须允许轻松编辑或一键撤销，绝不强制覆盖原有内容。

值得称赞的是，Excalidraw 并未因引入 AI 而变得臃肿。相反，它延续了一贯的克制美学：功能按需加载，界面依旧干净，交互逻辑不变。这种“增强而不打扰”的设计理念，正是当前 AI 工具最稀缺的品质。

数据显示，普通人的口语表达速度约为 120~180 字/分钟，远高于平均打字速度（约 30~50 字/分钟）。这意味着一次五分钟的讲解，手动记录可能只抓到核心结论，而语音输入能完整保留推理链条。对于需要追溯思维过程的技术讨论来说，这种完整性尤为珍贵。

更深远的影响在于门槛降低。过去绘制一张像样的架构图需要熟悉绘图工具的操作逻辑，而现在，只要你会说话，就能产出专业级草图。产品经理可以用自然语言快速勾勒产品逻辑，新人工程师也能借助 AI 辅助理解复杂系统。

某种意义上，Excalidraw 正在成为“思维的录音笔”——不只是记录语言，更是将抽象想法具象化的过程固化下来。它不替代思考，而是让思考更容易被看见、被共享、被迭代。

未来，随着边缘计算能力提升和小型化模型的发展，这类“轻AI+重体验”的工具将越来越多。我们或许会看到完全离线运行的语音绘图白板，或是结合手势识别的多模态输入方式。但无论形态如何变化，核心价值始终不变：让人专注于创造，而不是操作。

Excalidraw 的这次升级提醒我们，最好的技术从来不是最复杂的，而是最顺滑的——它藏在后台，默默把“我想说的”变成“我想要的”。当你张嘴那一刻，画布已经开始生长。