C4 图
C4 图：这目前是一个实验性图表。语法和属性可能会在将来的版本中发生更改。当语法稳定后，将提供完整的文档。
Mermaid 的 C4 图语法与 PlantUML 兼容。请参见下面的示例
例如，请参见源代码 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
以下未完成的功能短期内不支持。
[ ] 精灵图
[ ] 标签
[ ] 链接
[ ] 图例
[x] 系统上下文
- [x] Person(别名, 标签, ?描述, ?精灵图, ?标签, $链接)
- [x] Person_Ext
- [x] System(别名, 标签, ?描述, ?精灵图, ?标签, $链接)
- [x] SystemDb
- [x] SystemQueue
- [x] System_Ext
- [x] SystemDb_Ext
- [x] SystemQueue_Ext
- [x] Boundary(别名, 标签, ?类型, ?标签, $链接)
- [x] Enterprise_Boundary(别名, 标签, ?标签, $链接)
- [x] System_Boundary
[x] 容器图
- [x] Container(别名, 标签, ?技术, ?描述, ?精灵图, ?标签, $链接)
- [x] ContainerDb
- [x] ContainerQueue
- [x] Container_Ext
- [x] ContainerDb_Ext
- [x] ContainerQueue_Ext
- [x] Container_Boundary(别名, 标签, ?标签, $链接)
[x] 组件图
- [x] Component(别名, 标签, ?技术, ?描述, ?精灵图, ?标签, $链接)
- [x] ComponentDb
- [x] ComponentQueue
- [x] Component_Ext
- [x] ComponentDb_Ext
- [x] ComponentQueue_Ext
[x] 动态图
- [x] RelIndex(索引, 从, 到, 标签, ?标签, $链接)
[x] 部署图
- [x] Deployment_Node(别名, 标签, ?类型, ?描述, ?精灵图, ?标签, $链接)
- [x] Node(别名, 标签, ?类型, ?描述, ?精灵图, ?标签, $链接): Deployment_Node() 的简短名称
- [x] Node_L(别名, 标签, ?类型, ?描述, ?精灵图, ?标签, $链接): 左对齐的 Node()
- [x] Node_R(别名, 标签, ?类型, ?描述, ?精灵图, ?标签, $链接): 右对齐的 Node()
[x] 关系类型
- [x] Rel(从, 到, 标签, ?技术, ?描述, ?精灵图, ?标签, $链接)
- [x] BiRel (双向关系)
- [x] Rel_U, Rel_Up
- [x] Rel_D, Rel_Down
- [x] Rel_L, Rel_Left
- [x] Rel_R, Rel_Right
- [x] Rel_Back
- [x] RelIndex * 与 C4-PlantUML 语法兼容，但忽略索引参数。序列号由 rel 语句的写入顺序决定。
[ ] 自定义标签/构造型支持和皮肤参数更新
- [ ] AddElementTag(标签构造型, ?背景色, ?字体颜色, ?边框颜色, ?阴影, ?形状, ?精灵图, ?技术, ?图例文本, ?图例精灵图): 引入新的元素标签。更新带标签元素的样式，并在计算的图例中显示标签。
- [ ] AddRelTag(标签构造型, ?文本颜色, ?线条颜色, ?线条样式, ?精灵图, ?技术, ?图例文本, ?图例精灵图): 引入新的关系标签。更新带标签关系的样式，并在计算的图例中显示标签。
- [x] UpdateElementStyle(元素名称, ?背景色, ?字体颜色, ?边框颜色, ?阴影, ?形状, ?精灵图, ?技术, ?图例文本, ?图例精灵图): 此调用更新元素（组件，...）的默认样式，并且不会创建额外的图例条目。
- [x] UpdateRelStyle(从, 到, ?文本颜色, ?线条颜色, ?偏移量 X, ?偏移量 Y): 此调用更新默认关系颜色，并且不会创建额外的图例条目。添加了两个新参数偏移量 X 和偏移量 Y，用于设置文本相对于原始位置的偏移量。
- [ ] RoundedBoxShape(): 此调用返回圆角框形状的名称，可作为 ?形状参数使用。
- [ ] EightSidedShape(): 此调用返回八边形形状的名称，可作为 ?形状参数使用。
- [ ] DashedLine(): 此调用返回虚线的名称，可作为 ?线条样式参数使用。
- [ ] DottedLine(): 此调用返回点线的名称，可作为 ?线条样式参数使用。
- [ ] BoldLine(): 此调用返回粗线的名称，可作为 ?线条样式参数使用。
- [x] UpdateLayoutConfig(?c4ShapeInRow, ?c4BoundaryInRow): 新的。此调用更新默认的 c4ShapeInRow(4) 和 c4BoundaryInRow(2)。
使用问号分配参数有两种方法。一种是使用非命名参数分配方法按参数顺序进行，另一种是使用命名参数分配方法，名称必须以 $ 符号开头。
例如：UpdateRelStyle(从, 到, ?文本颜色, ?线条颜色, ?偏移量 X, ?偏移量 Y)
UpdateRelStyle(customerA, bankA, "red", "blue", "-40", "60")
UpdateRelStyle(customerA, bankA, $offsetX="-40", $offsetY="60", $lineColor="blue", $textColor="red")
UpdateRelStyle(customerA, bankA, $offsetY="60")