C4 图

🌐 C4 Diagrams

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

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

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

代码:

⌘ + 回车键|

这个例子中的颜色是自定义样式的演示，不是默认设置。UpdateElementStyle 会把“银行客户A”变成红色，而旁边的 UpdateRelStyle 语句会重新着色四条关系——三条是蓝色，包括离开“银行客户A”的那条，另一条是从电子邮件系统来的红色。删掉这些语句后，每个元素和关系都会按照标准的C4调色板显示。

🌐 The colours in this example are a demonstration of custom styling, not the defaults. UpdateElementStyle turns "Banking Customer A" red, and the UpdateRelStyle statements beside it recolour four relationships - three blue, including the one leaving "Banking Customer A", and the one arriving from the e-mail system red. Remove those statements and every element and relationship renders in the standard C4 palette.

例如，请参阅源代码 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")

元素文本换行

🌐 Element text wrapping

从 v11.17.1 开始，C4 图默认会自动换行，可以通过将 wrap 或 c4.wrap 设置为 false 来禁用。在 v11.17.1 之前，默认是不换行的，可以通过将 wrap 设置为 true 来启用换行（但不能用 c4.wrap）。

🌐 Since v11.17.1, C4 diagrams wrap by default and can be disabled by either setting wrap or c4.wrap to false. Before v11.17.1, wrapping was disabled by default, and could be enabled by setting wrap to true (but not c4.wrap).

下面的例子演示了如何通过使用 c4.wrap 来禁用默认换行。

🌐 Example below illustrates disabling of default wrapping by use of c4.wrap.

---
config:
  c4:
    wrap: false
---

C4 系统上下文图 (C4Context)

🌐 C4 System Context Diagram (C4Context)

代码:

⌘ + 回车键|

如上所述，“银行客户A”是红色的，因为示例将其重设为 UpdateElementStyle，而不是因为 Person 的默认外观。

🌐 As above, "Banking Customer A" is red because the example restyles it with UpdateElementStyle, not because that is the default appearance of a Person.

C4 容器图 (C4Container)

🌐 C4 Container diagram (C4Container)

代码:

⌘ + 回车键|

C4 组件图 (C4 组件)

🌐 C4 Component diagram (C4Component)

代码:

⌘ + 回车键|

C4 动态图（C4Dynamic）

🌐 C4 Dynamic diagram (C4Dynamic)

代码:

⌘ + 回车键|

C4 部署图（C4 部署）

🌐 C4 Deployment diagram (C4Deployment)

代码:

⌘ + 回车键|