C4 图表查看器和编辑器

作者
  • C4 图表查看器和编辑器
系列： UML and Software Architecture
集数： (2/7)

C4 图示查看器与编辑器：MassiveDiag Playground

在 MassiveDiag 中使用 C4 模型图示

MassiveDiag Playground 提供强大的 C4 图示查看器与编辑器，可将基于文本的图示代码实时转换为专业的系统架构可视化图。作为一款出色的 C4 模型实时编辑器，它让你在开发过程中即时查看和优化软件架构图。

无论你需要：

  • C4 图示代码转 SVG 用于网页文档，
  • C4 图示代码导出为 Word 文档 用于技术规范，
  • C4 模型代码转 PNG 用于演示，
  • C4 模型转 PDF 用于正式文档，

MassiveDiag Playground 都能轻松满足，带来流畅的工作流程。

my Image

立即试用 MassiveDiag 的 C4 图示编辑器 →

什么是 C4 模型？

C4 模型 是由 Simon Brown 提出的一种分层软件架构可视化方法。它通过四个层级的图示，为软件系统文档提供标准化表达方式：

  1. 上下文图（Context） - 展示系统与外部交互的整体视角
  2. 容器图（Container） - 展示系统的主要技术架构
  3. 组件图（Component） - 展示容器内部的逻辑组件
  4. 代码图（Code） - 展示实现细节（可选）

MassiveDiag 是功能强大的 C4 模型代码图示生成器，让开发者与架构师更容易掌握架构可视化。

C4 图示代码入门

上下文图示例

@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml

title Internet Banking System 的系统上下文图

Person(customer, "银行客户", "银行拥有个人账户的客户。")
System(banking_system, "网上银行系统", "允许客户查看账户信息并进行付款。")
System_Ext(mail_system, "邮件系统", "内部 Microsoft Exchange 邮件系统。")
System_Ext(mainframe, "主机银行系统", "存储客户、账户、交易等核心银行信息。")

Rel(customer, banking_system, "使用")
Rel(banking_system, mail_system, "发送邮件")
Rel(banking_system, mainframe, "使用")
@enduml

my Image

容器图示例

@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml

title Internet Banking System 的容器图

Person(customer, "银行客户", "银行拥有个人账户的客户。")

System_Boundary(c1, "网上银行系统") {
    Container(web_app, "Web 应用", "Java 和 Spring MVC", "提供静态内容和单页应用。")
    Container(spa, "单页应用", "JavaScript 和 Angular", "为客户提供所有网银功能。")
    Container(mobile_app, "移动应用", "Xamarin", "为客户提供部分网银功能。")
    Container(api, "API 应用", "Java 和 Spring MVC", "通过 JSON/HTTPS API 提供功能。")
    Container(database, "数据库", "Oracle", "存储用户信息、认证数据、访问日志等。")
}

System_Ext(mainframe, "主机银行系统", "存储客户、账户、交易等核心银行信息。")
System_Ext(email, "邮件系统", "内部 Microsoft Exchange 邮件系统。")

Rel(customer, web_app, "使用", "HTTPS")
Rel(customer, spa, "使用", "HTTPS")
Rel(customer, mobile_app, "使用")
Rel(web_app, spa, "传递到浏览器")
Rel(spa, api, "调用 API", "JSON/HTTPS")
Rel(mobile_app, api, "调用 API", "JSON/HTTPS")
Rel(api, database, "读写", "JDBC")
Rel(api, mainframe, "调用 API", "XML/HTTPS")
Rel(api, email, "发送邮件")
@enduml

my Image

如何使用 MassiveDiag 查看 C4 图示

1. 编写或生成 C4 模型代码

你可以自己编写 C4 模型代码，也可以借助 AI 工具如 ChatGPT 生成基础结构。

@startuml Basic Sample
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml

Person(admin, "管理员", $sprite="person2", $link="https://github.com/plantuml-stdlib/C4-PlantUML/blob/master/LayoutOptions.md#hide_person_sprite-or-show_person_spritesprite")
System_Boundary(c1, "示例系统", $link="https://github.com/plantuml-stdlib/C4-PlantUML") {
    Container(web_app, "Web 应用", "C#, ASP.NET Core 2.1 MVC", $descr="对比多个 Twitter 时间线", $link="https://github.com/plantuml-stdlib/C4-PlantUML/blob/master/LayoutOptions.md")
}
System(twitter, "Twitter", $link="https://github.com/plantuml-stdlib/C4-PlantUML")

Rel(admin, web_app, "使用", "HTTPS", $link="https://plantuml.com/link")
Rel(web_app, twitter, "获取推文", "HTTPS", $link="https://plantuml.com/link")
@enduml

2. 将代码粘贴到 MassiveDiag Playground

前往 MassiveDiag Playground —— 无需安装，无需注册，直接粘贴或上传你的代码。

my Image

3. 选择 C4 图示类型

系统会自动识别图示类型，也可以手动选择 “C4 PlantUML”。

my Image

4. 创建图示

点击 “Create Diagram” 即可将代码转化为可视化图示。

my Image

5. 编辑与优化

使用双栏界面可：

  • 实时编辑代码并预览图示更新
  • 直接在 SVG 图中进行可视化调整

6. 导出你需要的格式

支持多种导出选项：

  • SVG：适合网页使用
  • PNG：适合演示文稿
  • PDF：适合正式文档
  • Word 文档：适合技术规范
  • React JSX：适合网页组件集成

my Image

立即创建你的第一个 C4 图示 →

C4 图示的实际应用场景

软件架构文档

C4 图示可用于不同层次的系统设计文档：

  • 上下文图：供非技术干系人了解系统
  • 容器图：供开发团队把握结构
  • 组件图：用于开发实施阶段的规划

技术规格说明

为以下文档生成架构图：

  • 系统提案书
  • 架构决策记录（ADR）
  • 技术需求文档

团队培训与知识传递

通过视觉化系统总览，帮助新成员快速了解：

  • 系统边界与交互方式
  • 技术栈组成
  • 各组件的功能职责

关于 C4 图示与 MassiveDiag 的常见问题

C4 有何区别于其他图示方法？

C4 提供 标准化、分层级的架构建模方式，帮助不同角色理解系统架构。

使用 C4 图示查看器是否需要编程经验？

具备基础的代码语法知识有帮助，但并非必需。

可以协作编辑 C4 图示吗？

当然可以，你可以 分享图示代码 或 导出图像文档 供团队审阅。

如何将 C4 图示集成到我的文档中？

  • 导出为 SVG/PNG 用于网页或演示
  • 导出为 PDF/Word 用于正式文档

立即创建专业的 C4 图示 →

分享