Archify i18n 完整指南：查看器 UI 如何实现中英双语而不翻译作者内容
Archify i18n 完整指南查看器 UI 如何实现中英双语而不翻译作者内容【免费下载链接】archifyAgent skill for beautiful, verifiable architecture, workflow, sequence,>项目地址: https://gitcode.com/GitHub_Trending/arch/archifyArchify 是一个为 AI Agent 提供架构图、工作流、时序图、数据流与生命周期图生成能力的开源工具可输出自带动效和导出功能的独立 HTML。它的 i18n 国际化机制只支持en与zh-CN两种语言通过一行meta.locale配置就能让整个查看器 UI工具栏、图例、导出菜单、无障碍标签切换为中文而你在 JSON 里亲手写下的节点标签、标题等内容绝不被机器翻译。本文带你完整看懂这套机制的设计思路与落地细节。第一步meta.locale 如何切换整页语言在图元文档的meta对象里写一个字段即可{ meta: { title: 生产部署架构, locale: zh-CN } }locale的取值在 common.schema.json 中被严格约束为枚举[en, zh-CN]。写fr、zh-HK等值会直接校验失败省略该字段则安全回落到英文 UI。渲染器只认这个显式声明不会根据图里的文字内容猜语言——这个决策由 i18n.mjs 中的resolveLocale完成。核心设计翻译边界在哪里这是 Archify i18n 最值得学习的点被翻译的只有渲染器拥有的读者界面作者内容永不翻译。类别是否随 locale 翻译示例html lang/svg lang✅langzh-CN文档标题后缀✅中文模式不加 Diagram 后缀默认 SVG 描述与聚焦提示✅由 Archify 生成的架构图。、聚焦{label}默认图例标签✅Frontend → 前端、Database → 数据库固定查看器控件、状态、错误提示✅导出、分享卡片、语义雷达等数百条作者内容title、subtitle、节点 label、tag、note、step 等❌ 原样保留你写什么就是什么这条边界在 authoring-contract.md 中有明确契约meta.locale controls only renderer-owned reader surfaces... It never translates authored content.。即使你的图是中文的漏写locale时 UI 仍是英文——此时契约要求你明确告知用户工件未完全本地化而不是偷偷补一个zh-CN。揭秘底层一套消息目录让漏翻不可能发生1. 消息成对存储结构上杜绝缺翻i18n.mjs 的核心是一张MESSAGE_PAIRS表每个键对应一个二元组[英文, 中文]例如viewer.export.button: [Export, 导出], viewer.kind.database: [Database, 数据库],模块加载时立刻校验任何键的元组长度不等于语言数直接抛错。也就是说某个语言漏翻不是 bug而是编译期就发生不了的事件。注释里写得很直白Keeping every locale in one tuple makes missing translations impossible to hide behind an English fallback during development.2. 模板占位符 运行时注入静态 HTML 骨架里用{{i18n:viewer.nav.zoomIn}}这类占位符渲染时由localizeTemplate按选定语言一次性替换并做 HTML 转义。同时viewerCatalog会把选中语言的全部查看器消息序列化为 JSON注入到产物的script idarchify-i18n-data中见 template.html。页面运行时只从这个本地目录取词配合{label}占位符替换和.one/.other复数形式2 跳/3 个有向跳转让查找器、路径探测、导出失败提示等交互文案也全部本地化——整个 HTML 依然零依赖、可离线打开。实践清单写出中文图表的 3 步设置meta.locale: zh-CN—— UI、图例、html lang全切中文作者文案统一用中文—— 节点标签、职责、引导章节、卡片等字段自己写产品名、命令、API 路径保持英文原样即可契约允许非中英文场景如实说明—— 图内容为日文/法文等时省略localeUI 落回英文并明确披露固定查看器 UI 未本地化切勿用zh-CN顶替。完整规则见 authoring-contract.md 的 Language consistency 一节查看器能力总览见 viewer-runtime.md。回归防线测试如何锁住不混语i18n.test.mjs 用五类图元architecture/workflow/sequence/dataflow/lifecycle× 两种语言做全量回归作者内容清单校验渲染前把图里所有作者字段登记成清单渲染后逐条断言原文还在一条不能丢、一条不能被改模板硬编码扫描断言模板中不存在Route: 等写死的英文串全部必须走目录插值变量一致性每个键在两种语言里的{placeholder}必须完全同集真实 Chrome 浏览器验证点击中文模式的查找器、路径探测、导出菜单断言标题依次为查找节点选择起点节点、导出按钮 aria-label 为导出图表。相关模块速查消息目录与本地化核心i18n.mjslocale 取值约束common.schema.json编写语言契约authoring-contract.md本地化回归测试i18n.test.mjs查看器 HTML 模板含archify-i18n-data注入点template.html示例文档web-app.architecture.json、product-analytics.dataflow.json查看器运行时能力参考viewer-runtime.md一句话总结Archify 用成对消息目录 显式 locale 永不翻译作者内容三板斧让中英双语切换既完整可验证又尊重每一位作者的原文。【免费下载链接】archifyAgent skill for beautiful, verifiable architecture, workflow, sequence,>项目地址: https://gitcode.com/GitHub_Trending/arch/archify创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考