RepoDaily · 2026-07-25 · Infrastructure / Runtime

LikeC4:让架构图与代码实时同步的架构即代码工具

#18 Infrastructure / Runtime TypeScript +339 likec4/likec4 打开仓库

MIT 许可的 TypeScript 建模语言与工具链,灵感来自 C4 Model 和 Structurizr DSL,从你完全掌控的声明式源文件生成实时架构图。

项目类型Infrastructure / Runtime
最适合希望将 C4 风格的架构图从声明式模型文件中生成、而非手动维护图片的工程团队。
风险等级低 —— MIT 许可,通过 npm 分发,附带 Docker 镜像、VSCode 和 Open VSX 扩展。
评估时间30 分钟即可写出第一个模型并通过 `npx likec4 start` 预览。

核心问题: 你的团队是否愿意在版本控制中与应用代码一起维护一份声明式架构模型?

88/100

RepoDaily 采用评分

RepoDaily 将该项目的采用分评为 88/100(强):分数来自文章来源、安装路径、生产风险、差异化、许可证清晰度以及 AI/Agent 适配度。

基于 RepoDaily 来源和采用说明的方向性评分,不是基准测试。风险: 低
100证据质量

包含 6 个来源、覆盖 4 类来源;如有 RepoDaily 独有模块,会进一步提高证据分。

100可安装/可试用性

检测到 5 个工作流步骤、4 个下一步动作,以及 4 个命令/安装信号。

70维护可信度

趋势热度为 +339 stars;如内容中有 release、issue 或维护信号,会提高维护可信度。

94生产准备度

采纳风险标记为 low,并包含 4 条安全说明与 3 条跳过条件。

92差异化

2 个机会视角、4 个替代方案,以及 4 个类型化模块支撑差异化判断。

82许可证清晰度

文章中包含许可证来源或许可证表述。

60Agent / AI 适配度

文章正文和元数据中检测到 2 个 AI/Agent 相关信号。

项目概览

LikeC4 是一种用于描述软件架构的建模语言及其配套工具链,能够从模型生成架构图。项目使用 TypeScript 编写,以 `likec4` 包名发布在 npm 上,当前版本 1.59.2,采用 MIT 许可证(版权 2023-2026,Denis Davydkov)。它提供了 CLI 命令行工具、浏览器端 playground、VSCode 扩展、Open VSX 扩展以及用于 CI 流水线的 Docker 镜像。

项目灵感来自 C4 Model 和 Structurizr DSL,但增加了灵活性。README 明确说明你可以自定义符号、定义自己的元素类型,并在架构模型中嵌套任意数量的层级,而非锁定在固定的 C4 层级中。图从源文件实时渲染而非手绘,意味着只要模型被维护,图就能保持最新。

与通用绘图工具不同,LikeC4 将架构视为代码。模型是存储在仓库中的文本文件,在 Pull Request 中被审查,每位查看者看到一致的渲染结果。README 中的 npm 版本徽章和 VSCode 安装徽章确认了它通过标准 JavaScript 和编辑器工具链分发。playground.likec4.dev 的在线 playground 和 template.likec4.dev 的部署模板让评估者在安装前就能查看渲染效果。

解决什么问题

  • 拖拽式工具创建的架构图在数周内就会与代码脱节,因为没有机制在代码变更时强制更新图片。
  • 通用绘图工具生成的图形没有语义——元素只是方框和箭头,而非具有可校验关系的类型化组件。
  • Structurizr DSL 等已有 C4 工具提供了语义,但强制使用固定符号和元素层级,可能不匹配你组织内部的术语体系。
  • 跨团队共享架构图通常意味着导出静态图片或 PDF,丧失了导航、缩放和深入嵌套视图的能力。

工作原理

  1. 使用 LikeC4 建模语言在声明式源文件中编写模型,定义元素、关系和视图。
  2. 运行 `npx likec4 start` 启动本地预览服务器,将模型渲染为浏览器中的交互式架构图。
  3. 自定义符号、元素类型和嵌套层级以匹配你的领域——LikeC4 不强制固定的 C4 层级集合。
  4. 在 VSCode 或 Open VSX 扩展中打开模型,进行行内编辑、语法校验和实时预览。
  5. 在 CI 或自动化渲染场景中使用 Docker 镜像(基于 node:22.22.3-bookworm-slim,内含 Graphviz 和 Playwright 1.60.0)进行无头渲染。

最快上手路径

  • 克隆模板仓库 likec4/template,或通过 README 中的 StackBlitz 链接直接在浏览器中打开。
  • 访问 https://template.likec4.dev/view/index 立即查看已部署的渲染效果。
  • 本地运行 `npx likec4 start` 即可,无需全局安装——CLI 首次运行时自动拉取最新 npm 版本。
  • 跟随 https://likec4.dev/tutorial/ 官方教程快速了解建模语言语法。
  • 编辑器集成:从 VSCode 插件市场安装 likec4.likec4-vscode,或从 Open VSX 安装 likec4/likec4-vscode 用于非微软编辑器。

集成面

LikeC4 在三个层面集成:npm 包、编辑器扩展和 Docker 镜像。npm 包 `likec4` 暴露 CLI,提供 `start` 等命令用于本地预览。VSCode 扩展(标识符 likec4.likec4-vscode)和 Open VSX 扩展(likec4/likec4-vscode)提供编辑器内建模、语法支持和实时预览面板。

Dockerfile 构建了一个两阶段镜像。第一阶段在 node:22.22.3-bookworm 内从源码编译 Graphviz,因为如 Dockerfile 注释所述,近期版本没有预编译二进制包。第二阶段创建基于 node:22.22.3-bookworm-slim 的精简运行环境,内含 Playwright 1.60.0 和 chromium 用于无头渲染。入口点为 `/usr/local/bin/likec4`,暴露端口 5173 和 24678——这是 LikeC4 预览服务器的默认端口。

维护与依赖风险

  • package.json 显示当前版本为 1.59.2,项目通过 OpenCollective 和 GitHub Sponsors 获得持续资助。
  • package.json 的 engines 字段要求 Node.js >=22.22.3;CONTRIBUTING.md 指定贡献者需 Node.js >=22.21.1 和 pnpm。
  • Dockerfile 从源码构建 Graphviz 是因为近期版本缺少二进制分发——增加了镜像层的构建时间,但已由提供的 Dockerfile 自动处理。
  • /e2e 目录下的端到端测试会将 likec4 打包为 tarball,在隔离工作区中安装,从模型生成 spec 文件,并运行 Playwright——证明真实的打包流程经过测试,而非仅靠单元测试。

Docker 部署须知

Docker 镜像以 node:22.22.3-bookworm-slim 为运行基础。Graphviz 在独立的构建阶段编译并复制到运行镜像中,确保使用最新 Graphviz 功能而不依赖发行版包。Playwright 1.60.0 和 chromium 通过 `npx -y playwright@1.60.0 install chromium --with-deps` 安装,用于无头截图和 PDF 生成。

LIKEC4_VER 构建参数默认为 `latest`,镜像通过 `npm install -g likec4@${LIKEC4_VER}` 全局安装 likec4。工作目录为 `/data`,暴露端口 5173 和 24678,默认 CMD 为 `-h`(帮助)——因此你必须覆盖命令才能渲染或导出架构图。

谁适合关注

适合关注

  • 你的架构图在一个迭代周期内就过时,因为没有人更新 Visio 或 draw.io 文件。
  • 你希望架构模型在 Pull Request 中与代码一起审查,而非存放在单独的 wiki 中。
  • 你需要 C4 风格的架构图,但需要 Structurizr DSL 不支持的自定义元素类型和符号。
  • 你需要在 CI 中渲染架构图以生成文档或合规交付物。

可以先跳过

  • 你需要 UML 类图、时序图或 ER 模式——LikeC4 专注于架构的上下文、容器和组件视图。
  • 你的团队不愿维护声明式模型文件,更偏好手绘图。
  • 你需要从运行中的基础设施实时自动发现服务,而非维护一份精选模型。

风险与注意事项

MIT 许可,通过 npm 分发,附带 Docker 和编辑器扩展。主要风险是组织层面对模型维护的承诺,而非技术锁定。

  • MIT 许可证(版权 2023-2026 Denis Davydkov)对商业使用和再分发没有限制。
  • 模型是纯文本文件,没有专有运行时;即使 LikeC4 停止开发,任何未来的渲染器都可以从源文件重新生成图。
  • Node.js >=22.22.3 的要求比较具体,可能需要更新旧版 CI runner,但 Docker 镜像消除了流水线中的这一问题。
  • Graphviz 必须在 Docker 中从源码构建,因为近期版本缺少二进制分发——这是由提供的 Dockerfile 处理的构建时复杂度,但对于重建镜像的团队需要留意。
  • Docker 镜像使用 `--with-deps` 安装 Playwright,会拉取额外的系统包——在加固环境中运行时请审查 apt 包列表。
  • Docker 镜像通过 `npm install -g likec4@${LIKEC4_VER}` 全局安装 npm 包;请将 LIKEC4_VER 固定到特定版本以避免意外漂移。
  • MIT 许可证无 copyleft 义务;完整文本位于仓库 LICENSE 文件中。
  • 项目使用 husky 管理 git hooks,使用 nano-staged 进行提交前格式化(dprint fmt),这些在本地运行,不会将模型数据传输到外部。

替代方案比较

方案适用场景代价
Structurizr DSL
你希望严格遵循 C4 模型,使用成熟的 DSL,且不需要自定义符号。DSL 开源;Structurizr 云服务有付费层。
Mermaid
你需要在 Markdown 或 GitHub README 中嵌入轻量级图表,配置最少。MIT 许可,免费。
PlantUML
你需要从文本生成 UML 和架构图,且需要一个历史悠久的社区和丰富的图表类型。开源,免费。
C4 Model(仅方法论)
你只需要概念框架和符号指南,不需要具体工具实现。c4model.com 上的免费方法论文档。

这个趋势说明了什么

用每次提交都渲染的模型替换过时的 Confluence 架构页面

将文档流水线指向 LikeC4 Docker 镜像,在 CI 中渲染架构图,并将 HTML 发布到 wiki。每次合并都会更新视觉输出,消除手动刷新截图的需求。

Docker 镜像暴露端口 5173 和 24678,并包含 Playwright 1.60.0 用于无头渲染,确认 CI 友好的输出生成是受支持的路径。

使用自定义元素类型映射领域特定的架构词汇

LikeC4 允许定义自己的符号和嵌套层级,不像固定的 C4 工具。将内部术语(如 lambda 函数、队列、数据产品)映射为类型化元素,并保持一致的样式。

README 指出 LikeC4 受 C4 Model 和 Structurizr DSL 启发,但提供了灵活性,包括自定义符号、元素类型和任意数量的嵌套层级。

下一步建议

用 10 行代码在 5 分钟内写一个模型并预览

最快的验证方式是写一个最小的 LikeC4 模型并查看渲染结果。使用 README 中的 StackBlitz 链接或本地 npm CLI。

  1. 打开 https://template.likec4.dev/view/index 查看渲染效果。
  2. 点击 README 中的 StackBlitz 徽章,在浏览器 IDE 中打开 likec4/template 仓库。
  3. 编辑 .c4 源文件,添加两个元素和一条关系,观察预览更新。
  4. 如果偏好本地运行,在新目录中执行 `npx likec4 start` 并打开终端中显示的 localhost URL。

RepoDaily 判断

LikeC4 将架构图从不断衰减的产物转变为版本控制的源文件。凭借 MIT 许可、CI 友好的 Docker 镜像、日常使用的编辑器扩展,以及超越标准 C4 的自定义符号能力,它在趋势榜上的位置实至名归——适合那些认真对待架构文档准确性的团队。

信息来源