先选择视图，再添加元素
系统上下文图回答谁使用系统、系统依赖什么；容器图展示一个系统内部的应用和数据存储；只有读者确实需要了解某个容器的内部构件时，才进入组件图。
PlantUML C4 架构图在线编辑器
在线创建 C4-PlantUML 架构图，选择系统上下文、容器或组件模板，定义架构关系，并实时预览和导出。
PlantUML C4 架构图在线编辑器工作区
从中文C4 架构图模板开始，编辑 PlantUML 源码并实时查看渲染结果。
使用轻量编辑器快速预览。需要 AI 生成、语法修复或项目协作时，请打开完整编辑器。
图表预览
使用 PlantUML 创建C4 架构图
在可编辑工作区中设计人员、软件系统、系统边界、容器、组件、技术、职责和同一架构层级中的关系，无需安装 Java 或 Graphviz。
内置C4 架构图模板
从可直接渲染的中文C4 架构图示例开始。
实时图表预览
编辑 PlantUML 源码时同步检查图表结构与标签。
专属语法说明
学习人员、软件系统、系统边界、容器、组件、技术、职责和同一架构层级中的关系的常用表达方式。
PNG 与 SVG 导出
从同一份源码下载适合分享或文档使用的图表。
如何在线创建 PlantUML C4 架构图
使用内置模板创建适用于架构入门、系统全景评审、服务边界设计、技术文档和工程讨论的C4 架构图。
- 01
根据受众的问题选择 C4 层级：系统上下文、容器或组件。
- 02
在编辑器中选择对应的系统上下文、容器或组件模板。
- 03
定义与目标系统交互的人员和外部系统。
- 04
为容器或组件填写职责与技术，并为关系添加动作标签。
- 05
删除其他缩放层级的细节，检查预览并导出 PNG 或 SVG。
PlantUML C4 架构图语法与应用场景
学习C4 架构图的核心语法与建模方法，并直接在上方编辑器中应用。
引入对应的 C4-PlantUML 库
C4-PlantUML 是配合 PlantUML 使用的宏库。PlantUML 标准库已经包含发布版 C4 文件，因此容器图可以使用下面的标准库路径，无需在渲染时从远程 URL 获取文件。
!include <C4/C4_Container>说明职责、技术和关系
每个容器或组件只写一个清晰职责，并在有助于技术读者理解时标注主要技术。关系标签应使用“调用”“发送”“读取”“写入”等动作，只有协议会影响设计时才补充协议。
Container(api, "渲染接口", "Web API", "渲染图表源码")
ContainerDb(store, "项目存储", "数据库", "保存图表项目")
Rel(api, store, "读写项目", "SQL")一张图只保留一个缩放层级
有效的 C4 图应面向一个受众回答一个架构问题。不要把源码类混进容器图，也不要一次展开所有系统；需要下一层细节时，应创建并关联另一张图。
PlantUML C4 架构图中文示例
编辑示例源码，检查实时预览，并按需导出 PNG 或 SVG。
@startuml
!include <C4/C4_Container>
LAYOUT_LEFT_RIGHT()
Person(user, "图表作者", "创建和评审图表")
System_Boundary(workspace, "图表工作区") {
Container(web, "Web 应用", "Next.js", "编辑源码并显示图表预览")
Container(api, "渲染接口", "Web API", "校验源码并请求渲染结果")
ContainerDb(store, "项目存储", "数据库", "保存图表项目")
}
Rel(user, web, "创建图表", "HTTPS")
Rel(web, api, "请求预览", "HTTPS/JSON")
Rel(api, store, "读写项目", "SQL")
SHOW_LEGEND()
@enduml相关 PlantUML 工具
需要其他导出格式或完整 PlantUML 编辑流程时，可以使用这些相关工具。
为什么使用 PlantUML 创建C4 架构图
PlantUML 将C4 架构图保存为可审阅文本，便于更新、版本控制、复用和导出。
从正确模板开始
直接使用C4 架构图模板，无需改造无关示例。
让模型便于评审
使用可读文本保存设计，适合文档和版本控制。
导出前检查结果
在分享之前检查图表结构、关系和标签。
常见问题
什么是 PlantUML C4 架构图在线工具？
这是一个从C4 架构图模板开始的浏览器编辑器，可编辑源码、实时预览并导出 PNG 或 SVG。
C4 架构图适合哪些场景？
常见场景包括架构入门、系统全景评审、服务边界设计、技术文档和工程讨论，可以根据实际系统替换内置示例。
C4 语法是 PlantUML 内置语法吗？
C4 图使用 C4-PlantUML 宏库。发布版 C4 文件已包含在 PlantUML 标准库中，可以通过 <C4/C4_Container> 等路径引入。
应该先画系统上下文图、容器图还是组件图？
需要全局视角时从系统上下文图开始；需要展示系统内部应用和数据存储时使用容器图；只有需要解释某个容器的内部结构时才使用组件图。多数技术架构讨论可以先从容器图开始。
可以把C4 架构图导出为 PNG 或 SVG 吗？
可以。PNG 适合演示文稿和快速分享，SVG 适合需要缩放的网页与技术文档。
需要安装 PlantUML、Java 或 Graphviz 吗？
不需要。在线工具通过服务端生成预览，可以直接在浏览器中编辑和导出。
需要 AI 辅助编辑吗？
打开 OnUML 完整编辑器，使用 AI 生成、语法修复、分享和项目管理。