【MarkDown】CSDN Markdown之C4图(C4Context、C4Container、C4Component、C4Dynamic、C4Deployment)详解
文章目录
- C4图
-
- C4系统上下文图 (C4Context)
- C4容器图 (C4Container)
- C4组件图 (C4Component)
- C4动态图 (C4Dynamic)
- C4部署图 (C4Deployment)
C4图
C4图：目前这是一个实验性的图表。语法和属性可能会在未来版本中发生更改，当语法稳定后，将提供适当的文档说明。
CSDN 目前版本（mermaid v8.14.0）不支持此语法，以下所有示例都是在mermaid v9.4.0 进行测试。
Mermaid的C4图语法与plantUML兼容。以下是示例：
** 代码：**
C4Context
title 互联网银行系统的系统上下文图
Enterprise_Boundary(b0, "企业边界") {
Person(customerA, "标签：银行客户A", "描述：银行的客户，拥有个人银行账户。")
Person(customerB, "标签：银行客户B")
Person_Ext(customerC, "标签：银行客户C", "描述：小微企业代表")
Person(customerD, "标签：银行客户D", "描述：银行的客户，
拥有个人银行账户。")
System(SystemAA, "标签：互联网银行系统", "描述：允许客户查看有关其银行账户的信息并进行付款。")
Enterprise_Boundary(b1, "标签：银行企业边界") {
SystemDb_Ext(SystemE, "标签：银行主系统", "描述：存储关于客户、账户、交易等所有核心银行信息的系统。")
System_Boundary(b2, "标签：银行系统边界") {
System(SystemA, "标签：银行系统A")
System(SystemB, "标签：银行系统B", "描述：一种银行系统，带有个人银行账户。")
}
System_Ext(SystemC, "标签：电子邮件系统", "描述：微软Exchange内部电子邮件系统。")
SystemDb(SystemD, "标签：银行数据库系统D", "描述：一种银行系统，带有个人银行账户")
Boundary(b3, "标签：银行队列系统边界", "描述：队列系统") {
SystemQueue(SystemF, "标签：银行队列系统F", "描述：一种银行系统。")
SystemQueue_Ext(SystemG, "标签：银行队列系统G", "描述：一种银行系统，带有个人银行账户。")
}
}
}
BiRel(customerA, SystemAA, "标签：交互")
BiRel(SystemAA, SystemE, "标签：交互")
Rel(SystemAA, SystemC, "标签：创建邮件任务", "技术：SMTP")
Rel(SystemC, customerA, "标签：发送邮件到")
UpdateElementStyle(customerA, $fontColor="red", $bgColor="grey", $borderColor="red")
UpdateRelStyle(customerA, SystemAA, $textColor="blue", $lineColor="blue", $offsetX="5")
UpdateRelStyle(SystemAA, SystemE, $textColor="blue", $lineColor="blue", $offsetY="-10")
UpdateRelStyle(SystemAA, SystemC, $textColor="blue", $lineColor="blue", $offsetY="-40", $offsetX="-50")
UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="100", $offsetY="20")
UpdateLayoutConfig($c4ShapeInRow="4", $c4BoundaryInRow="1")
例如，要查看源代码演示demos/index.html的示例。
支持5种类型的C4图表。
- C4Context: 系统上下文图
- C4Container: 系统容器图
- C4Component: 系统组件图
- C4Dynamic: 系统动态图
- C4Deployment: 系统部署图
请参阅链接文档C4-PlantUML语法，了解如何编写C4图。
C4图是固定样式，如css颜色，因此不提供不同的css在不同的皮肤下。 updateElementStyle和UpdateElementStyle是在图表的最后一部分编写的。 updateElementStyle与原始定义不一致，并更新关系的样式，包括相对于原始位置的文本标签的偏移量。
布局不使用完全自动化的布局算法。通过更改语句编写的顺序来调整形状的位置。因此，没有计划支持以下布局语句。可以使用UpdateLayoutConfig来调整每行中的形状数量和边界数量。
- 布局
- Lay_U，Lay_Up
- Lay_D，Lay_Down
- Lay_L，Lay_Left
- Lay_R，Lay_Right
以下未完成的功能短期内不受支持。
-
sprite
-
tags
-
link
-
Legend
-
系统上下文
-
Person(alias, label, ?descr, ?sprite, ?tags, $link):人物。通常渲染为深蓝色背景带有人物符号的矩形框 -
Person_Ext：人物（已存在），参数与Person函数一致。通常渲染为灰色背景带有人物符号的节点。 -
System(alias, label, ?descr, ?sprite, ?tags, $link):系统。通常渲染为蓝色矩形框 -
SystemDb：数据库系统，参数与System函数一致。通常渲染为蓝色立式圆柱。 -
SystemQueue：队列系统，参数与System函数一致。通常渲染为蓝色横式圆柱。 -
System_Ext：普通系统(已存在)，参数与System函数一致。通常渲染为灰色矩形。 -
SystemDb_Ext：数据库系统(已存在)，参数与System函数一致。通常渲染为灰色立式圆柱。 -
SystemQueue_Ext：队列系统(已存在)，参数与System函数一致。通常渲染为灰色横式圆柱。 -
Boundary(alias, label, ?type, ?tags, $link)：边界。默认type为system通常渲染为虚线框。 -
Enterprise_Boundary(alias, label, ?tags, $link)：企业的边界。type为ENTERPRISE通常渲染为虚线框。 -
System_Boundary：系统的边界。通常渲染为虚线框。
-
-
容器图
-
Container(alias, label, ?techn, ?descr, ?sprite, ?tags, $link): 普通容器。通常渲染为蓝色矩形框。 -
ContainerDb: 数据库容器，参数与Container函数一致。通常渲染为蓝色立式圆柱。 -
ContainerQueue: 队列容器，参数与Container函数一致。通常渲染为蓝色横式圆柱。 -
Container_Ext: 普通容器(已存在)，参数与Container函数一致。通常渲染为灰色矩形。 -
ContainerDb_Ext: 数据库容器(已存在)，参数与Container函数一致。通常渲染为灰色立式圆柱。 -
ContainerQueue_Ext: 队列容器(已存在)，参数与Container函数一致。通常渲染为灰色横式圆柱。 -
Container_Boundary(alias, label, ?tags, $link)：容器的边界。通常渲染为虚线框。
-
-
组件图
-
Component(alias, label, ?techn, ?descr, ?sprite, ?tags, $link): 普通组件。通常渲染为浅蓝色矩形。 -
ComponentDb: 数据库组件，参数与Component函数一致。通常渲染为浅蓝色立式圆柱。 -
ComponentQueue: 队列组件，参数与Component函数一致。通常渲染为浅蓝色横式圆柱。 -
Component_Ext: 普通组件(已存在)，参数与Component函数一致。通常渲染为灰色矩形。 -
ComponentDb_Ext: 数据库组件(已存在)，参数与Component函数一致。通常渲染为灰色立式圆柱。 -
ComponentQueue_Ext: 队列组件(已存在)，参数与Component函数一致。通常渲染为灰色横式圆柱。
-
-
动态图
-
RelIndex(index, from, to, label, ?tags, $link):单边关系,渲染效果与Rel一致。index不是显示的序号，序列号是由rel声明的顺序决定的。
-
-
部署图
-
Deployment_Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link) -
Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link)：Deployment_Node()的简称 -
Node_L(alias, label, ?type, ?descr, ?sprite, ?tags, $link)：左对齐Node() -
Node_R(alias, label, ?type, ?descr, ?sprite, ?tags, $link):右对齐Node()
-
-
关系类型
-
Rel(from, to, label, ?techn, ?descr, ?sprite, ?tags, $link): 单边关系。通常渲染为从from指向to的箭头 -
BiRel: 双向关系，参数与Rel函数一致。通常渲染为从from指向to以及从to指向from的双向箭头。 -
Rel_U,Rel_Up:单边关系，参数与Rel函数一致。渲染效果与Rel一致。 -
Rel_D,Rel_Down:单边关系，参数与Rel函数一致。渲染效果与Rel一致。 -
Rel_L,Rel_Left:单边关系，参数与Rel函数一致。渲染效果与Rel一致。 -
Rel_R,Rel_Right:单边关系，参数与Rel函数一致。渲染效果与Rel一致。 -
Rel_Back: 反向单边关系，参数与Rel函数一致。通常渲染为从to指向from的箭头 -
RelIndex *与C4-Plantuml语法兼容，但忽略索引参数。序列号是由rel声明的顺序决定的。
-
-
自定义
tags/stereotypes支持和皮肤参数更新-
AddElementTag(tagStereo, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite)：引入新的元素标签。已标记元素的样式将更新，并在计算出的图例中显示标签。 -
AddRelTag(tagStereo, ?textColor, ?lineColor, ?lineStyle, ?sprite, ?techn, ?legendText, ?legendSprite)：引入新的关系标签。已标记关系的样式将得到更新，并在计算的图例中显示标签。 -
UpdateElementStyle(elementName, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite)：此调用更新元素（组件等）的默认样式，并不创建其他图例条目。 -
UpdateRelStyle(from, to, ?textColor, ?lineColor, ?offsetX, ?offsetY)：此调用更新默认关系颜色，并不创建其他图例条目。添加了两个新参数offsetX和offsetY来设置文本原始位置的偏移量。 -
RoundedBoxShape()：此调用返回圆形框架的名称，并可用作?shape参数。 -
EightSidedShape()：此调用返回八边形的名称，并可用作?shape参数。 -
DashedLine()：此调用返回虚线的名称，并可用作?lineStyle参数。 -
DottedLine()：此调用返回点线的名称，并可用作?lineStyle参数。 -
BoldLine()：此调用返回粗体线的名称，并可用作?lineStyle参数。 -
UpdateLayoutConfig(?c4ShapeInRow, ?c4BoundaryInRow)：新。此调用更新默认c4ShapeInRow(4)和c4BoundaryInRow(2)。如：UpdateLayoutConfig($c4ShapeInRow="1",$c4BoundaryInRow="2")
-
参数含义及说明
| 参数 | 说明 |
|---|---|
| index | 序号 |
| alias | 别名/变量名 |
| label | 标签 |
| type | 类型 |
| techn | 技术 |
| descr | 描述 |
| sprite | 图文符号 |
| tags | 标记 |
| link | 链接 |
| Legend | 图例 |
| from | 头节点 |
| to | 尾节点 |
| bgColor | 背景颜色 |
| fontColor | 字体颜色 |
| borderColor | 边框颜色 |
| shadowing | 阴影 |
| shape | 形状 |
| legendText | 图列文本 |
| legendSprite | 图列图文符号 |
| textColor | 文本颜色 |
| lineColor | 线条颜色 |
| offsetX | X方向偏移值 |
| offsetY | Y方向偏移值 |
| c4ShapeInRow | 一行显示的形状数量 |
| c4BoundaryInRow | 一行显示的边界数量 |
有两种方法可以使用问号分配参数。一种是按参数顺序使用非命名参数分配方法，另一种是使用命名参数分配方法，其中名称必须以$符号开头。
例如：UpdateRelStyle(from, to, ?textColor, ?lineColor, ?offsetX, ?offsetY)
UpdateRelStyle(customerA, bankA, "red", "blue", "-40", "60")
UpdateRelStyle(customerA, bankA, $offsetX="-40", $offsetY="60", $lineColor="blue", $textColor="red")
UpdateRelStyle(customerA, bankA, $offsetY="60")
C4系统上下文图 (C4Context)
** 代码：**
C4Context
title 互联网银行系统的系统上下文图
Enterprise_Boundary(b0, "企业边界") {
Person(customerA, "标签：银行客户A", "描述：银行的客户，拥有个人银行账户。")
Person(customerB, "标签：银行客户B")
Person_Ext(customerC, "标签：银行客户C", "描述：小微企业代表")
Person(customerD, "标签：银行客户D", "描述：银行的客户，
拥有个人银行账户。")
System(SystemAA, "标签：互联网银行系统", "描述：允许客户查看有关其银行账户的信息并进行付款。")
Enterprise_Boundary(b1, "标签：银行企业边界") {
SystemDb_Ext(SystemE, "标签：银行主系统", "描述：存储关于客户、账户、交易等所有核心银行信息的系统。")
System_Boundary(b2, "标签：银行系统边界") {
System(SystemA, "标签：银行系统A")
System(SystemB, "标签：银行系统B", "描述：一种银行系统，带有个人银行账户。")
}
System_Ext(SystemC, "标签：电子邮件系统", "描述：微软Exchange内部电子邮件系统。")
SystemDb(SystemD, "标签：银行数据库系统D", "描述：一种银行系统，带有个人银行账户")
Boundary(b3, "标签：银行队列系统边界", "描述：队列系统") {
SystemQueue(SystemF, "标签：银行队列系统F", "描述：一种银行系统。")
SystemQueue_Ext(SystemG, "标签：银行队列系统G", "描述：一种银行系统，带有个人银行账户。")
}
}
}
BiRel(customerA, SystemAA, "标签：交互")
BiRel(SystemAA, SystemE, "标签：交互")
Rel(SystemAA, SystemC, "标签：创建邮件任务", "技术：SMTP")
Rel(SystemC, customerA, "标签：发送邮件到")
UpdateElementStyle(customerA, $fontColor="red", $bgColor="grey", $borderColor="red")
UpdateRelStyle(customerA, SystemAA, $textColor="blue", $lineColor="blue", $offsetX="5")
UpdateRelStyle(SystemAA, SystemE, $textColor="blue", $lineColor="blue", $offsetY="-10")
UpdateRelStyle(SystemAA, SystemC, $textColor="blue", $lineColor="blue", $offsetY="-40", $offsetX="-50")
UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20")
UpdateLayoutConfig($c4ShapeInRow="4", $c4BoundaryInRow="1")
C4容器图 (C4Container)
** 代码：**
C4Container
title 网上银行系统容器图
System_Ext(email_system, "标签：电子邮件系统", "描述：内部 Microsoft Exchange 系统。", $tags="v1.0")
Person(customer, "标签：客户", "描述：银行的客户，拥有个人银行账户。", $tags="v1.0")
Container_Boundary(c1, "网上银行") {
Container(spa, "标签：单页面应用", "技术：JavaScript, Angular", "描述：通过网络浏览器向客户提供所有的网上银行功能。")
Container_Ext(mobile_app, "标签：移动应用", "技术：C#, Xamarin", "描述：通过客户的移动设备为其提供有限的网上银行功能子集。")
Container(web_app, "标签：Web应用程序", "技术：Java, Spring MVC", "描述：提供静态内容和网上银行单页面应用（SPA）。")
ContainerDb(database, "标签：数据库", "技术：SQL Database", "描述：存储用户注册信息、哈希认证凭据、访问日志等。")
ContainerDb_Ext(backend_api, "标签：接口应用程序", "技术：Java, Docker Container", "描述：通过API提供网上银行功能。")
}
System_Ext(banking_system, "标签：银行主系统", "描述：存储关于客户、账户、交易等所有核心银行信息。")
Rel(customer, web_app, "标签：使用", "技术：HTTPS")
UpdateRelStyle(customer, web_app, $offsetY="60", $offsetX="90")
Rel(customer, spa, "标签：使用", "技术：HTTPS")
UpdateRelStyle(customer, spa, $offsetY="-40")
Rel(customer, mobile_app, "标签：使用")
UpdateRelStyle(customer, mobile_app, $offsetY="-30")
Rel(web_app, spa, "Delivers")
UpdateRelStyle(web_app, spa, $offsetX="130")
Rel(spa, backend_api, "标签：使用", "技术：async, JSON/HTTPS")
Rel(mobile_app, backend_api, "标签：使用", "技术：async, JSON/HTTPS")
Rel_Back(database, backend_api, "标签：读取和写入", "技术：sync, JDBC")
Rel(email_system, customer, "标签：发送电子邮件")
UpdateRelStyle(email_system, customer, $offsetX="-45")
Rel(backend_api, email_system, "标签：创建电子邮件任务", "技术：sync, SMTP")
UpdateRelStyle(backend_api, email_system, $offsetY="-60")
Rel(backend_api, banking_system, "标签：使用", "技术：sync/async, XML/HTTPS")
UpdateRelStyle(backend_api, banking_system, $offsetY="-50", $offsetX="-140")
C4组件图 (C4Component)
** 代码：**
C4Component
title 互联网银行系统API应用程序的组件图
Container(spa, "标签：单页应用程序", "技术：javascript 和 angular", "描述：通过网络浏览器，为客户提供所有互联网银行功能。")
Container(ma, "标签：移动应用", "技术：Xamarin", "描述：通过移动设备，向客户提供互联网银行功能的有限子集。")
ContainerDb(db, "标签：数据库", "技术：关系数据库模式", "描述：存储用户注册信息、哈希认证凭证、访问日志等等。")
System_Ext(mbs, "银行主系统", "存储有关客户、账户、交易等核心银行信息的全部数据。")
Container_Boundary(api, "接口应用程序") {
Component(sign, "标签：登录控制器", "技术：MVC Rest Controller", "描述：允许用户登录网上银行系统")
Component(accounts, "标签：账户汇总控制器", "技术：MVC Rest Controller", "描述：为客户提供银行账户汇总")
Component(security, "标签：安全组件", "技术：Spring Bean", "描述：提供与登录、更改密码等相关的功能。")
Component(mbsfacade, "标签：银行主系统入口", "技术：Spring Bean", "描述：银行主系统的入口")
Rel(sign, security, "标签：使用")
Rel(accounts, mbsfacade, "标签：使用")
Rel(security, db, "标签：读取和写入", "技术：JDBC")
Rel(mbsfacade, mbs, "标签：使用", "技术：XML/HTTPS")
}
Rel_Back(spa, sign, "标签：使用", "技术：JSON/HTTPS")
Rel(spa, accounts, "标签：使用", "技术：JSON/HTTPS")
Rel(ma, sign, "标签：使用", "技术：JSON/HTTPS")
Rel(ma, accounts, "标签：使用", "技术：JSON/HTTPS")
UpdateRelStyle(spa, sign, $offsetX="-50", $offsetY="20")
UpdateRelStyle(spa, accounts, $offsetX="-50", $offsetY="40")
UpdateRelStyle(ma, sign, $offsetX="0", $offsetY="-40")
UpdateRelStyle(ma, accounts, $offsetY="-0")
UpdateRelStyle(sign, security, $offsetX="-180", $offsetY="10")
UpdateRelStyle(accounts, mbsfacade, $offsetX="160", $offsetY="10")
UpdateRelStyle(security, db, $offsetY="-40")
UpdateRelStyle(mbsfacade, mbs, $offsetY="-40")
C4动态图 (C4Dynamic)
** 代码：**
C4Dynamic
title 互联网银行系统 - API应用的动态图
ContainerDb(c4, "标签：数据库", "技术：关系数据库模式", "描述：存储用户注册信息、哈希认证凭证、访问日志等等。")
Container(c1, "标签：单页面应用", "技术：JavaScript 和 Angular", "描述：通过客户的Web浏览器为客户提供所有互联网银行功能。")
Container_Boundary(b, "标签：接口应用") {
Component(c3, "标签：安全组件", "技术：Spring Bean", "描述：提供与登录、更改密码等功能相关的功能。")
Component(c2, "标签：登录控制器", "技术：Spring MVC Rest Controller", "描述：允许用户登录互联网银行系统。")
}
Rel(c1, c2, "标签：提交凭证", "技术：JSON/HTTPS")
Rel(c2, c3, "标签：调用 isAuthenticated()接口")
Rel(c3, c4, "标签：select * from users where username = ?", "技术：JDBC")
UpdateRelStyle(c1, c2, $textColor="red", $offsetY="-40")
UpdateRelStyle(c2, c3, $textColor="red", $offsetX="-40", $offsetY="60")
UpdateRelStyle(c3, c4, $textColor="red", $offsetY="-40", $offsetX="10")
C4部署图 (C4Deployment)
** 代码：**
C4Deployment
title 网上银行系统部署示意图-Live
Deployment_Node(mob, "标签：客户移动设备", "系统类型：苹果IOS或安卓"){
Container(mobile, "标签：移动应用程序", "技术：Xamarin", "描述：为客户在他们的移动设备上提供有限的互联网银行功能。")
}
Deployment_Node(comp, "标签：客户电脑", "系统类型：Windows或MacOS"){
Deployment_Node(browser, "标签：网络浏览器", "浏览器类型：Google Chrome, Mozilla Firefox,
Apple Safari 或者 Microsoft Edge"){
Container(spa, "标签：单页面应用程序", "技术：JavaScript 和 Angular", "描述：通过客户的网络浏览器为客户提供所有互联网银行功能。")
}
}
Deployment_Node(plc, "标签：大银行股份有限公司", "公司部门类型：大银行股份有限公司数据中心"){
Deployment_Node(dn, "标签：大银行接口*** x8", "系统类型：Ubuntu 16.04 LTS（长期支持版本）"){
Deployment_Node(apache, "标签：Apache Tomcat", "版本类型：Apache Tomcat 8.x"){
Container(api, "标签：接口应用程序", "技术：Java 和 Spring MVC", "描述：通过JSON / HTTPS API提供互联网银行功能。")
}
}
Deployment_Node(bb2, "标签：大银行网页*** x4", "系统类型：Ubuntu 16.04 LTS（长期支持版本）"){
Deployment_Node(apache2, "标签：Apache Tomcat", "版本类型：Apache Tomcat 8.x"){
Container(web, "标签：Web 应用程序", "技术：Java和 Spring MVC", "描述：提供静态内容和互联网银行单页面应用程序。")
}
}
Deployment_Node(bigbankdb01, "标签：大银行数据库1", "系统类型：Ubuntu 16.04 LTS（长期支持版本）"){
Deployment_Node(oracle, "标签：Oracle主库", "版本类型：Oracle 12c"){
ContainerDb(db, "标签：数据库", "技术：关系数据库模式", "描述：存储用户注册信息、哈希认证凭证、访问日志等等。")
}
}
Deployment_Node(bigbankdb02, "标签：大银行数据库2", "系统类型：Ubuntu 16.04 LTS（长期支持版本）") {
Deployment_Node(oracle2, "标签：Oracle从库", "版本类型：Oracle 12c") {
ContainerDb(db2, "标签：数据库", "技术：关系数据库模式", "描述：存储用户注册信息、哈希认证凭证、访问日志等等。")
}
}
}
Rel(mobile, api, "标签：调用API", "技术：json/HTTPS")
Rel(spa, api, "标签：调用API", "技术：json/HTTPS")
Rel_R(web, spa, "标签：传输到客户的Web浏览器")
Rel(api, db, "标签：从api读取或写入数据库", "技术：JDBC")
Rel(api, db2, "标签：从api读取或写入数据库", "技术：JDBC")
Rel_R(db, db2, "标签：复制数据")
UpdateRelStyle(spa, api, $offsetY="-40")
UpdateRelStyle(web, spa, $offsetY="-40")
UpdateRelStyle(api, db, $offsetY="-20", $offsetX="5")
UpdateRelStyle(api, db2, $offsetX="-40", $offsetY="-20")
UpdateRelStyle(db, db2, $offsetY="-10")
