Excalidraw 的中文界面之路：从社区翻译到本土化实践
在远程协作成为常态的今天，可视化工具早已不只是程序员的专属武器。产品团队用它画流程图，设计师拿它做原型草稿，甚至教育工作者也开始在课堂上借助白板进行实时演示。Excalidraw 就是这样一款“看起来简单、用起来上头”的手绘风虚拟白板工具——没有复杂的菜单栏，也没有令人眼花缭乱的功能按钮，一切设计都指向一个目标：让人更自然地表达想法。
但再好的工具，如果语言成了障碍，体验就会大打折扣。对于大量中文用户来说，刚打开页面就面对满屏英文术语，“Undo”、“Paste”、“Group Elements”，哪怕意思不难猜，也总归多了几分疏离感。尤其在团队协作中，非技术成员往往因为看不懂操作提示而不敢动手，最终只能旁观。这正是国际化（i18n）的价值所在：不是为了翻译而翻译，而是为了让每个人都能平等地参与创造。
幸运的是，Excalidraw 并没有把非英语用户拒之门外。它的多语言支持虽然不像商业软件那样开箱即用，却以一种更具生命力的方式生长着——由全球开发者共同推动，其中中文界面的落地，就是一个典型的社区驱动案例。
一套轻量级但高效的国际化机制
Excalidraw 没有采用复杂的后端语言服务或庞大的 i18n 框架（比如 i18next），而是选择了一套极简但足够有效的方案：前端 JSON 映射 + React 状态管理。这套机制的核心逻辑其实很朴素——所有界面上的文字都不直接写死，而是通过一个t()函数动态获取。
比如这个按钮：
<button>{t("buttons.export")}</button>它显示什么内容，取决于当前语言环境下buttons.export这个键对应的值。如果是英文环境，就读取"Export"；切换成中文，则返回"导出"。所有的翻译文本都被组织在一个个.json文件里，按语言分类存放：
// src/i18n/lang/zh-CN.json { "labels.cut": "剪切", "labels.copy": "复制", "labels.paste": "粘贴", "buttons.export": "导出", "app.menu.item.help": "帮助" }系统启动时会预加载这些资源，然后根据浏览器的语言设置自动匹配。如果你的navigator.language返回的是zh-CN或zh，框架就会优先尝试加载简体中文包。整个过程无需刷新页面，也不依赖网络请求，响应迅速，非常适合像 Excalidraw 这样强调即时交互的应用。
有意思的是，这种设计背后体现了一种工程上的克制。Vite 的import.meta.glob被用来一次性引入所有语言文件，避免了异步加载带来的延迟问题。当然，这也意味着如果未来语言包变得特别庞大，可能需要改为按需加载策略，否则会影响首屏性能。但在当前阶段，这种“全量预载”的方式反而成了优势——快、稳、可靠。
const translations = import.meta.glob("/src/i18n/lang/*.json", { eager: true }); Object.keys(translations).forEach((key) => { const lang = key.match(/\/([^/]+)\.json$/)?.[1]; if (lang) { cache[lang] = (translations[key] as any).default; } });你可能会问：为什么不直接发 API 请求去拉语言包？原因很简单——Excalidraw 大部分场景是静态部署的，甚至可以完全离线运行。在这种前提下，把翻译资源作为构建产物打包进去，是最务实的选择。
中文界面是如何“活”起来的？
现在我们知道了底层机制，那具体到中文界面，它是怎么一步步变成现实的？
首先要明确一点：官方主仓库并没有一开始就内置中文支持。最早的 Excalidraw 界面完全是英文的。中文用户的呼声越来越高，才促使社区贡献者提交了关键 PR（如 #3789），将完整的zh-CN.json文件合并进主线。这一举动意义重大——它意味着今后任何使用最新版本的用户，只要浏览器语言设为中文，就能自动看到本地化界面。
这个语言包覆盖了绝大多数高频操作项：
- 基础编辑：“撤销”、“重做”、“删除”
- 图形命名：“矩形”、“圆形”、“箭头”
- 导出功能：“导出为 PNG”、“复制为 SVG”
- 提示信息：“双击进入文本编辑模式”
覆盖率超过 90%，已经足以支撑日常使用。更重要的是，项目还区分了zh-CN和zh-TW，照顾到了大陆与港台地区的用语差异。例如：
- “颜色” vs “色彩”
- “撤销” vs “復原”
- “复制” vs “複製”
这种细节上的考量，让翻译不再是机械替换，而是一种真正的语境适配。
不过也要注意，并非所有地方都能完美显示中文。比如某些第三方插件或嵌入式实例（如集成在 Obsidian 中的 Excalidraw 视图），可能基于旧版本构建，未同步最新的 i18n 提交，导致部分按钮仍显示英文。这时候你就得确认所使用的镜像是否及时更新了上游代码。
如果你想强制启用中文界面（比如测试或调试），也很简单：
function App() { const { setLang } = useI18n(); useEffect(() => { setLang("zh-CN"); }, []); return ( <div className="excalidraw"> {/* 所有文本将通过 t() 自动转换 */} </div> ); }只需要一行setLang("zh-CN")，就能绕过浏览器检测，立即切换语言。生产环境中通常不会这么做，毕竟尊重用户偏好才是最佳实践，但这对开发和测试非常有用。
为什么母语界面如此重要？
也许有人会觉得：“几个单词而已，对照着也能用。” 可实际体验远比想象中复杂。
考虑这样一个场景：你在主持一场线上产品评审会，邀请了产品经理、UI 设计师和几位业务方代表。会议中途你需要快速画一张流程图说明逻辑分支。如果你一边操作一边解释“我现在要 group 这两个元素”，对方听到的是陌生术语，理解成本立刻上升。但如果界面上清清楚楚写着“组合”，他们不仅能看懂你的操作，甚至可以主动接手修改——这才是真正意义上的协作。
这就是母语界面的力量：它降低的不仅是学习门槛，更是沟通摩擦。
再往深一层看，一些中国企业对办公系统的合规性有明确要求——必须支持中文界面。这意味着像 Excalidraw 这样的开源工具，只有具备完善的本地化能力，才有可能被纳入内部协作平台。而由于其 MIT 许可证和高度可定制性，企业完全可以自行部署并微调翻译内容，既满足安全审计需求，又能贴合内部术语习惯。
我曾见过某金融科技公司在内部知识库中深度集成 Excalidraw，但他们做的第一件事就是把“Stroke”统一改为“边框”，把“Fill”译为“填充色”，而不是直译成“描边”和“填充”——后者虽然准确，但在他们的设计规范文档中并不常用。这种灵活性，正是开源生态独有的优势。
工程实现之外的设计思考
实现翻译只是第一步，如何让翻译“好用”，才是真正考验产品思维的地方。
首先是优先级管理。并不是所有文案都需要第一时间翻译。开发团队很聪明地采用了渐进式策略：先搞定最常出现的按钮和菜单项，比如“导出”、“分享链接”、“锁定元素”，然后再逐步完善那些只在特定状态下才显示的提示语。这种做法确保了核心路径的流畅性，避免因追求“全覆盖”而拖慢迭代节奏。
其次是语义一致性。同一个英文词在不同上下文中可能有不同的中文表达。比如 “duplicate” 在多数情况下应译为“复制”，但在图形编辑语境下，“克隆”似乎更专业？但为了降低认知负担，Excalidraw 最终统一使用“复制”，保持操作直觉的一致性。类似的例子还有 “group” —— 曾有过“群组”、“组合”、“打包”等多种译法讨论，最终选定“组合”，因为它更贴近“将多个元素合并为一个单元”的动作本质。
还有容易被忽视的视觉适配问题。中文字符普遍比英文字母宽，某些按钮内的文本一旦变长就可能溢出。为此，CSS 样式需要预留足够的内边距，或者启用省略号截断。更麻烦的是 Canvas 内部的字体渲染——Excalidraw 使用 HTML5 Canvas 绘图，中文如果不指定合适的字体栈，很容易出现模糊或锯齿。因此项目中显式设置了'PingFang SC', 'Hiragino Sans GB', sans-serif等苹方、冬青黑体系列，保证在 macOS 和 Windows 上都能清晰显示。
最后别忘了 SEO 和无障碍访问。当语言切换时，HTML 根节点的lang属性也应同步更新：
<html lang="zh-CN">这对屏幕阅读器识别语言至关重要，也能帮助搜索引擎正确索引多语言版本的内容。虽然这只是一个小标签，却是整体可用性拼图中不可或缺的一块。
向“全链路本土化”迈进
目前的中文支持主要集中在界面层，但未来的方向显然不止于此。随着 AI 功能的引入，Excalidraw 开始探索“通过自然语言生成图表”的能力。试想一下：一位用户输入“帮我画一个用户登录流程，包含手机号验证和密码找回”，系统就能自动生成对应架构图——如果这个输入能用中文完成，那才是真正意义上的“本土化”。
而这不仅仅是翻译问题，更涉及 NLP 模型对中文语义的理解能力。好消息是，这类技术正在快速发展。我们可以预见，在不远的将来，Excalidraw 不仅能“说中文”，还能“听懂中文”，从而实现从输入、交互到输出的全链路中文支持。
对普通用户而言，当下最实用的建议是：
- 使用v0.15.0 及以上版本，确保包含完整的中文语言包；
- 若自建部署，定期同步上游lang/目录的更新；
- 发现翻译不准确或遗漏？欢迎直接向 excalidraw/excalidraw 提交 PR——每一个修正，都在让这款工具变得更包容。
Excalidraw 正在证明，优秀的开源项目不仅要有强大的功能，更要懂得倾听全球用户的声音。而中文，无疑是这其中最响亮、最具活力的声音之一。
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
