项目详情

LikeC4

把软件架构写成代码，自动生成永远最新的交互式架构图

GitHub 地址 MIT TypeScriptLangium

更新于 2026-07-23

项目速览

一句话定位

把软件架构写成代码，自动生成永远最新的交互式架构图

Architecture as Code 工具链。用 DSL 描述软件架构，自动生成可交互、可版本化、可嵌入的架构图。灵感来自 C4 Model 和 Structurizr，但打破固定四层分类法——可自定义元素类型、符号和任意嵌套层级。Langium 解析 + Graphviz 布局 + @xyflow/react 渲染，CLI/VSCode/React/Web Component/Vite/MCP 全生态集成。

项目速览

核心数据

4.4k

GitHub Stars

300+

Contributors

v1.59

架构图维护的三宗罪

画完即过时

Draw.io / PPT 手画，代码一改图就错。架构图沦为"上次评审时的样子"。

单一视角僵化

一张大图塞所有细节。新成员看不懂，老成员改不动。

脱离代码基线

图是独立的"艺术品"，不在 Git 里，无法 diff，无法 review，无法校验。

核心理念

Architecture as Code

架构图不再是"产物"，而是"源码"。像管理业务代码一样管理架构：版本化、可 diff、CI 校验、单一事实源。

.c4 源文件→ 单一 Model→ 多个 View 投影→ 交互式图

同一个 model 通过 predicate 投影出任意视角的 view——landscape、组件细节、部署拓扑、动态流程。改一处，所有相关图同步更新。

核心差异

vs Structurizr / 传统 C4

维度	Structurizr (Simon Brown)	LikeC4
元素分类	固定四级 taxonomy `Person / System / Container / Component`	完全自定义 `specification` 块定义任意 element 类型
嵌套层级	严格受语义约束（不能给 System 加 Component 的反例规则）	任意深度嵌套，无强制语义
视图选择	预定义视图类型（Context/Container/Component）	Predicate 驱动，任意 `include/exclude` 规则组合
样式定制	有限，主题色为主	shape/color/icon/size 全可控，内置 tech 图标库
部署建模	独立的 deployment view	独立 `deployment` 块，与 model 节点交叉引用

LikeC4 = Structurizr 的自由形态扩展。C4 四层可作为约定，但不是枷锁。

语言结构

DSL 四大顶层块

Block 1

specification

定义元素"类型词典"——声明有哪些 element kind、relationship kind、notation。LikeC4 灵活性的根源。

Block 2

model

按 specification 实例化真实架构：节点、嵌套层级、关系。支持多文件 import 合并成单一 model。

Block 3

deployment

描述部署拓扑——节点实例部署在哪些环境/节点上，与 model 节点交叉引用，生成 deployment view。

Block 4

views

用 predicate 从 model/deployment 投影出视图。每个 view 可独立 title、style、include/exclude 规则。

顶层只允许 import / specification / model / deployment / views / global 六类语句。

DSL 实战

一段真实语法

// 1. 定义类型词典（灵活性的起点）
specification {
  element actor { style { shape person } }
  element system
  element component
  relationship async
}
// 2. 实例化架构
model {
  customer = actor 'Customer' { description '系统用户' }
  saas = system 'Our SaaS' {
    component ui 'Frontend' {
      style { icon tech:nextjs; shape browser }
    }
    component backend 'Backend'
    ui -> backend 'fetches via HTTPS'
  }
  customer -> saas.ui 'opens in browser'
}
// 3. 投影视图
views {
  view index { title 'Landscape'; include * }
  view of saas { include *; style customer { color muted } }
}

视图系统

Predicate 驱动的投影

视图不是"画"出来的，是从 model 用规则"查询"出来的。同一份 model，不同 predicate 产出任意视角。

include / exclude：按元素、类型、关系、通配符组合规则。include * 只纳入顶层元素并自动推断跨层关系
view of <element>：聚焦某节点，展开其内部子结构与关系
Dynamic view：描述特定场景的步骤化交互流，不改 model 本身
局部 style：每个 view 独立覆盖颜色/形状/图标，不影响其他视图
视图继承：extended view 的 predicate 与 style 在祖先视图之上叠加应用

技术架构

从文本到交互图的管线

.c4 源码→ Langium 解析→ ModelBuilder→ LikeC4 Model→ Graphviz 布局→ @xyflow/react 渲染

@likec4/language-server

基于 Langium（TS 语言工作台）实现完整 LSP。AST → ModelBuilder 桥接到 LikeC4 模型。Hono 提供 HTTP API。

@likec4/layouts

Graphviz 自动布局，WASM（@hpcc-js/wasm-graphviz）或本地二进制双模式。ts-graphviz 抽象层。

@likec4/diagram

@xyflow/react（React Flow）做交互式画布，Mantine 提供 UI 组件。支持缩放/下钻/导航。

核心数据结构用 immer 不可变更新 + zod 校验。@likec4/generators 负责导出 Mermaid/PlantUML 等格式。

集成生态

在哪都能跑

CLI：likec4 start 本地预览、build 出静态站、serve 启动服务
VSCode 扩展：LSP 补全/校验/跳转 + 内置 Preview，VS Marketplace 与 Open VSX 双发布
Playground：浏览器内即时编辑，Cloudflare Workers 部署
React 组件：@likec4/diagram 直接嵌入任意 React 应用

Web Component：框架无关，<likec4-view> 标签即用
Vite Plugin：@likec4/vite-plugin 把 .c4 接入构建管线
GitHub Actions：CI 中校验模型、生成并发布静态站到 Pages
Docker：容器化部署，无需本地 Node 环境

AI 友好

为 LLM 时代而生

DSL 语法本身对 LLM 极其友好——结构化、低歧义、可生成。这是 LikeC4 区别于所有图形工具的隐藏优势。

LLM 原生语法：纯文本 DSL，AI Agent 可直接读懂、生成、修改架构描述
MCP Server：把架构上下文暴露给 AI Agent，无需额外标注。Claude/Cursor 等可查询模型
LikeC4 API：编程式访问与操作模型，支持脚本化批量处理
llms.txt / llms-full.txt：官方提供面向 LLM 的精简与完整文档，降低 Agent 学习成本
.agents/skills：仓库内置 Agent Skills（如 changeset-generator），本身就是 AI-native 工程实践样本

快速上手

三步起步

# 1. 装扩展或在线试
#    VSCode 搜 "likec4" 或打开 playground.likec4.dev
# 2. CLI 即时预览（无需安装）
npx likec4 start
# 3. 构建静态站，部署到任意托管
npx likec4 build
npx likec4 serve
# 4. 生成 React 组件（嵌入你的应用）
npx likec4 generate react

从零到第一张可交互架构图 < 5 分钟。官方提供 likec4/template 模板仓库与交互式教程。

适用场景

谁该用 LikeC4

中大型工程团队：架构需要随代码一起 review、一起版本化、一起 CI 校验，告别"PPT 架构图"
技术文档站点：把架构图作为一等公民嵌入 MkDocs / Docusaurus，Vite Plugin 无缝集成
AI 编码重度用户：DSL 文本格式让 Agent 能读能改能生成架构，MCP 暴露模型上下文——架构图的"AI 原生"形态
多云/复杂部署：deployment 块描述跨环境拓扑，与逻辑 model 解耦又交叉引用
教学与宣讲：landscape → component 逐层下钻的交互式叙事，比静态图强一个量级

风险提示

需要权衡

DSL 学习曲线：specification/model/views 三段式语法对非工程师不友好，产品/设计角色上手有门槛
布局可控性有限：Graphviz 自动布局为主，精细手调位置能力弱于 Draw.io 这类自由画布工具
维护规模依赖团队投入：model 一旦庞大，多文件组织与 predicate 规则需要工程化纪律，否则 model 本身变技术债
Star 量级尚小（4.4k）：相比 Structurizr 生态成熟度，社区插件/模板/最佳实践积累还在早期

潜力评估

未来空间

Architecture as Code 赛道里最现代、最 AI-native 的实现。灵活 taxonomy + Predicate 视图 + MCP 集成三张牌，让它在 LLM 时代有结构性优势——当 Agent 能直接读写架构，"图"就从人工产物变成可编程资产。若部署建模与 drift detection（Erode 项目已起步）持续完善，有机会成为云原生时代的架构文档事实标准。

上一个
Mem0

下一个
OmniRoute