LikeC4（全称 LikeC4 — Architecture as Code）是一款基于 TypeScript 开发的架构图成形工具，通过特定的 DSL 语言描述软件架构，再自动生成专业级的 C4 图。目前在 GitHub 上拥有 3,314 Stars，被 216 个项目开发者分叉，允许使用 MIT License。该项目提供了 VSCode 扩展、CLI 命令行工具和 Web 预览环境，让开发团队可以在代码改动时实时更新架构图，完全避免手动绘制图的麻烦。

在实际项目开发中，架构图通常是最先美丽却又最容易被遗忘的文档。LikeC4 解决的核心问题是：让架构图始终与源代码同步。它通过将架构描述为代码的一部分，确保每次编译或推送都能自动更新图形，这对于大型项目和分布式团队来说极其重要。

与传统的 PlantUML 或 Mermaid 相比，LikeC4 的优点在于：1) 它提供了 VSCode 扩展，支持语法高亮和自动补全，字体面就已经很好用；2) 它采用了 C4 Model 方法论，较为主流的架构图标准；3) 支持多种输出格式（PNG、SVG、HTML 等）；4) 它的 DSL 语言允许定制元素类型和等级层次，比 Structurizr DSL 更灵活。

LikeC4 的核心理念是"Architecture as Code"，即将软件架构的描述以代码方式编写，再通过 LikeC4 CLI 生成图形。具体来说：

• C4 Model 灵感：它受 C4 Model 方法论的一致性启发，提供等级化的系统图、容器图、组件图和部署图，但每个图的类型和等级层次都可自定义。
• 多平台支持：除了 VSCode 扩展，还提供了在线 StackBlitz 开始的快速预览，无需安装任何软件。
• 给图完整性保障，任何时候生成的图片都与当前源代码状态完全一致，每次 push 都能自动更新。

场景一：新项目起始时的架构设计

开发新项目时，通过 LikeC4 先构建架构模型，再开始编码。这种方式让开发者在实际完成代码之前就能够将架构思路对外输出，便于团队内部交流和审核。

场景二：文档自动更新

在 CI/CD 流程中通过 npx likec4 build 导出静态 HTML，部署到 GitHub Pages 或其他静态网站，文档始终与代码同步。每次 merge 后都能自动更新图片，无须手动维护。

场景三：多人协作和架构审核

开发团队通过 LikeC4 的模型文件（*.c4）进行版本控制，可以在 PR 中同时审核架构设计变更，具有围绑的体验，比输入文字说明更直观。

本教程将尝试使用 LikeC4 起始一个简单的作业管理系统架构图。需要 Node.js 20+ 环境。

Step 1 — 创建 LikeC4 项目

使用 GitHub Template 创建新项目，或者直接在 VSCode 中安装 LikeC4 扩展：

code --install-extension likec4.likec4-vscode

Step 2 — 定义架构模型

在 src/model.c4 中编写架构模型：

model {  /' Person '/ person  = actor 'Customer' 'A user of the system'  /' Software System '/ system = softwareSystem 'Order System' 'Manages orders'  /' Container '/ container = container 'Web App' 'Delivers UI to browsers'}views {  systemParams system 'OrderSystem' {    include *    autoSize enabled  }  containerParams container 'OrderSystem-webapp' {    include *    autoSize enabled  }}

Step 3 — 开启本地预览

在项目目录下执行：

npx likec4 start

打开 http://localhost:3000 即可看到生成的图形。每次保存 model.c4 都会自动更新图形。

Step 4 — 导出图形

导出为图形或 HTML：

npx likec4 export png -o ./distnpx likec4 build -o ./dist

Step 5 — 部署到 GitHub Pages

将生成的 dist 文件夹推送到 GitHub Pages，即可完成网页的自动更新。

• 自定义 DSL 语法：LikeC4 的语言允许定制元素类型、关系线样式和层次结构，比 C4 Model 更灵活。例如，可以添加八边形、椭圆图等进行自定义设计。
• AI 智能职能支持：最近的快专专化，LikeC4 正在尝试提供 AI 对话功能，让开发者通过自然语言请求查看架构图（见 Issue #2958）。这是将 LLM 集合到成产工具链的新尝试。
• 多种输出格式支持：支持 PNG、SVG、HTML 等多种输出格式，通过 Graphviz 引警进行布局算法。具有良好的自动布局能力，自动调节图形大小。

⭐ 3,314 | 今日新增：待观察（实时数据请参考 GitHub）

Structurizr DSL：同样采用 DSL 方式描述架构，但 Structurizr 是一个商业化产品，有所谓的 Java 生态系统。LikeC4 则完全开源，使用 TypeScript 开发，对前端开发者更友好。

PlantUML：PlantUML 是传统方式，但语法较为围绑，绘制图形较为简单，无法做到代码与图形同步。LikeC4 在这方面有明显优势。

Issue #86 — Add hexagon shape（翻译：添加六边形图形）

这是 LikeC4 社区活跃度最高的一个 Issue，共有 12 条评论。用户 hwinkel 提出：希望能够在 LikeC4 中使用曼哈顿标准图形（六边形、椭圆图等），而不仅仅是矩形和等缩形。项目维护者 davydkov 回复称，LikeC4 的图形输出实际上取决于 Graphviz 引警，而 Graphviz 实际上已经支持多种图形类型。关键在于如何将这些图形类型造势地展示给 DSL 用户。这个讨论反馈出了用户对曼哈顿标准图形的实际需求，也进一步提示我们：LikeC4 的设计理念已经有很好的基础，但图形类型还有空间可以改善。

Issue #2986 — Fix deployment metadata filters

这个 Issue 关注部署图中无数据的过滤逻辑，就如 source.metadata.* 和 target.metadata.* 的处理。它提到了将 deployed instance metadata 作为主要条件、系统无数据作为后备选择的设计。这是一个较为技术性的问题，但它是关于如呵处理多层式部署（on-premise vs cloud）中的无数据层欢关系。

Issue #2990 — Expose diagram text to screen readers

这是一个非常有意义的 accessibility 改进，让 LikeC4 生成的图形支持屏幕阅读器访问。这个转专提到将图形中的给点和关系线文本替换为 LikeC4 特定的可访问标签，且让图形元素可通过键盘导航。这个转专表明 LikeC4 希望成为一个真正重视无障碍访问的工具，而不只是从事美观设计。

提示一：Node.js 20+ 才能正常运行

如果使用软件时报错，首先检查 Node.js 版本：

node --version  # 必须 20.x 以上

LikeC4 的 CLI 和 VSCode 扩展都依赖 Node.js ESM 模块系统，老版本可能不兼容。

提示二：图形过多时自动尽吐

如果生成的 PNG 过多，可能是图内内容过多导致 Graphviz 布局失效。可以通过 autoSize enabled 配置尽吐对自身输出，或者在 view 中使用 contains 条件限制范围。

LikeC4 是一个非常实用的架构图工具，它把架构图变成了代码的一部分，让文档始终与代码同步。它的 VSCode 扩展、多种输出格式和自定义 DSL 语法是其最大的优点。如果你正在开发一个需要持续维护架构图的项目，LikeC4 绝对是不二的选择。它采用 MIT License，完全允许商业使用。

最近 LikeC4 正在快速专专 AI 职能转专支持（Issue #2958），未来有望通过自然语言请求查看架构图，这个方向非常值得关注。

✓ GitHub 主页：https://github.com/likec4/likec4

✓ 工程师：https://github.com/likec4

✓ 官网：https://likec4.dev/

✓ VSCode 扩展：LikeC4 VSCode Extension

🔗 更多 GitHub 热门开源项目：Developer Tools