C4 图

🌐 C4 Diagrams

C4 图：这目前是一个实验性的图表。语法和属性在未来的版本中可能会发生变化。当语法稳定后，将提供正式的文档。

Mermaid 的 C4 图语法与 plantUML 兼容。示例如下：

🌐 Mermaid's C4 diagram syntax is compatible with plantUML. See example below:

例如，请参阅源代码 demos/index.html

🌐 For an example, see the source code demos/index.html

支持 5 种类型的 C4 图表。

• 系统上下文 (C4Context)
• 容器图（C4容器）
• 组件图（C4组件）
• 动态图 (C4 动态)
• 部署图（C4部署）

请参考链接文档 C4-PlantUML 语法 了解如何绘制 C4 图。

🌐 Please refer to the linked document C4-PlantUML syntax for how to write the C4 diagram.

C4 图是固定样式的，例如 CSS 颜色，因此在不同皮肤下不会提供不同的 CSS。updateElementStyle 和 UpdateElementStyle 写在图的最后部分。updateElementStyle 与原定义不一致，会更新关系的样式，包括文本标签相对于原始位置的偏移。

🌐 C4 diagram is fixed style, such as css color, so different css is not provided under different skins. updateElementStyle and UpdateElementStyle are written in the diagram last part. updateElementStyle is inconsistent with the original definition and updates the style of the relationship, including the offset of the text label relative to the original position.

该布局未使用全自动布局算法。形状的位置是通过改变语句的书写顺序来调整的。因此，目前没有计划支持以下布局语句。每行的形状数量和边界数量可以通过 UpdateLayoutConfig 进行调整。

🌐 The layout does not use a fully automated layout algorithm. The position of shapes is adjusted by changing the order in which statements are written. So there is no plan to support the following Layout statements. The number of shapes per row and the number of boundaries can be adjusted using UpdateLayoutConfig.

• 布局
  • Lay_U，Lay_Up
  • 躺下, 放下
  • 靠_L, 向左靠
  • 靠_R, 靠_右

以下未完成的功能在短期内不受支持。

🌐 The following unfinished features are not supported in the short term.

• [ ] sprite
• [ ] tags
• [ ] link
• [ ] 传奇
• [x] 系统上下文
  • [x] Person(alias, label, ?descr, ?sprite, ?tags, $link)
  • [x] Person_Ext
  • [x] System(alias, label, ?descr, ?sprite, ?tags, $link)
  • [x] SystemDb
  • [x] SystemQueue
  • [x] System_Ext
  • [x] SystemDb_Ext
  • [x] SystemQueue_Ext
  • [x] Boundary(alias, label, ?type, ?tags, $link)
  • [x] Enterprise_Boundary(alias, label, ?tags, $link)
  • [x] System_Boundary
• [x] 容器图
  • [x] Container(alias, label, ?techn, ?descr, ?sprite, ?tags, $link)
  • [x] ContainerDb
  • [x] ContainerQueue
  • [x] Container_Ext
  • [x] ContainerDb_Ext
  • [x] ContainerQueue_Ext
  • [x] Container_Boundary(alias, label, ?tags, $link)
• [x] 构件图
  • [x] Component(alias, label, ?techn, ?descr, ?sprite, ?tags, $link)
  • [x] ComponentDb
  • [x] ComponentQueue
  • [x] Component_Ext
  • [x] ComponentDb_Ext
  • [x] ComponentQueue_Ext
• [x] 动态图
  • [x] RelIndex(index, from, to, label, ?tags, $link)
• [x] 部署图
  • [x] Deployment_Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link)
  • [x] Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link): short name of Deployment_Node()
  • [x] Node_L(alias, label, ?type, ?descr, ?sprite, ?tags, $link): left aligned Node()
  • [x] Node_R(alias, label, ?type, ?descr, ?sprite, ?tags, $link): right aligned Node()
• [x] 关系类型
  • [x] Rel(from, to, label, ?techn, ?descr, ?sprite, ?tags, $link)
  • [x] 双向关系
  • [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(tagStereo, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite)：引入一个新的元素标签。被标记元素的样式将被更新，标签会显示在计算出的图例中。
  • [ ] AddRelTag(tagStereo, ?textColor, ?lineColor, ?lineStyle, ?sprite, ?techn, ?legendText, ?legendSprite)：引入一个新的关系标签。已标记关系的样式将被更新，并且该标签会显示在计算出的图例中。
  • [x] UpdateElementStyle(elementName, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite)：此调用更新元素（组件等）的默认样式，并且不会创建额外的图例条目。
  • [x] UpdateRelStyle(from, to, ?textColor, ?lineColor, ?offsetX, ?offsetY)：此调用用于更新默认的关系颜色，并且不会创建额外的图例条目。新增了两个参数 offsetX 和 offsetY，用于设置文本原始位置的偏移量。
  • [ ] RoundedBoxShape(): 这个调用返回圆角盒子形状的名称，并且可以用作 ?shape 参数。
  • [ ] EightSidedShape(): 这个调用返回八边形的名称，并可以作为 ?shape 参数使用。
  • [ ] DashedLine(): 该调用返回虚线的名称，可用作 ?lineStyle 参数。
  • [ ] DottedLine(): 该调用返回虚线的名称，可用作 ?lineStyle 参数。
  • [ ] BoldLine(): 此调用返回粗体线的名称，并可用作 ?lineStyle 参数。
  • [x] UpdateLayoutConfig(?c4ShapeInRow, ?c4BoundaryInRow)：新建。此调用更新默认的 c4ShapeInRow(4) 和 c4BoundaryInRow(2)。

有两种方式可以为带问号的参数赋值。一种是按参数顺序使用非命名参数赋值方法，另一种是使用命名参数赋值方法，其中名称必须以 $ 符号开头。

🌐 There are two ways to assign parameters with question marks. One uses the non-named parameter assignment method in the order of the parameters, and the other uses the named parameter assignment method, where the name must start with a $ symbol.

示例：UpdateRelStyle(from, to, ?textColor, ?lineColor, ?offsetX, ?offsetY)

🌐 Example: 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)

🌐 C4 System Context Diagram (C4Context)

C4 容器图 (C4Container)

🌐 C4 Container diagram (C4Container)

C4 组件图 (C4 组件)

🌐 C4 Component diagram (C4Component)

C4 动态图（C4Dynamic）

🌐 C4 Dynamic diagram (C4Dynamic)

C4 部署图（C4 部署）

🌐 C4 Deployment diagram (C4Deployment)