C4 图

¥C4 Diagrams

C4 图：这是目前的实验图。语法和属性可能会在未来版本中更改。当语法稳定时，将提供适当的文档。

¥C4 Diagram: This is an experimental diagram for now. The syntax and properties can change in future releases. Proper documentation will be provided when the syntax is stable.

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 图表。

¥5 types of C4 charts are supported.

• 系统上下文（C4Context）

  ¥System Context (C4Context)

• 容器图（C4Container）

  ¥Container diagram (C4Container)

• 组件图（C4Component）

  ¥Component diagram (C4Component)

• 动态图（C4Dynamic）

  ¥Dynamic diagram (C4Dynamic)

• 部署图（C4Deployment）

  ¥Deployment diagram (C4Deployment)

C4 图的编写方法请参考链接文档 C4-PlantUML 语法。

¥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.

该布局不使用全自动布局算法。通过更改语句的写入顺序来调整形状的位置。所以没有计划支持以下 Layout 语句。每行的形状数量和边界数量可以使用 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.

• 布局

  ¥Layout

  • Lay_U, Lay_Up

  • Lay_D, Lay_Down

  • Lay_L, Lay_Left

  • Lay_R, Lay_Right

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

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

• [ ] sprite

• [ ] tags

• [ ] link

• [ ] 传奇

  ¥Legend

• [x] 系统上下文

  ¥System Context

  • [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] 容器图

  ¥Container diagram

  • [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] 元素图

  ¥Component diagram

  • [x] Component(alias, label, ?techn, ?descr, ?sprite, ?tags, $link)

  • [x] ComponentDb

  • [x] ComponentQueue

  • [x] Component_Ext

  • [x] ComponentDb_Ext

  • [x] ComponentQueue_Ext

• [x] 动态图

  ¥Dynamic diagram

  • [x] RelIndex(index, from, to, label, ?tags, $link)

• [x] 部署图

  ¥Deployment diagram

  • [x] Deployment_Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link)

  • [x] 节点（别名、标签、？类型、？descr、？精灵、？标签、$link）：Deployment_Node() 的短名称

    ¥Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link): short name of Deployment_Node()

  • [x] Node_L（别名，标签，？类型，？descr，？精灵，？标签，$链接）：左对齐节点()

    ¥Node_L(alias, label, ?type, ?descr, ?sprite, ?tags, $link): left aligned Node()

  • [x] Node_R（别名，标签，？类型，？descr，？精灵，？标签，$链接）：右对齐节点()

    ¥Node_R(alias, label, ?type, ?descr, ?sprite, ?tags, $link): right aligned Node()

• [x] 关系类型

  ¥Relationship Types

  • [x] Rel(from, to, label, ?techn, ?descr, ?sprite, ?tags, $link)

  • [x] BiRel（双向关系）

    ¥BiRel (bidirectional relationship)

  • [x] 相对 U、相对向上

    ¥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 语句的编写顺序确定。

    ¥RelIndex * Compatible with C4-PlantUML syntax, but ignores the index parameter. The sequence number is determined by the order in which the rel statements are written.

• [ ] 自定义标签/原型支持和皮肤参数更新

  ¥Custom tags/stereotypes support and skin param updates

  • [ ] AddElementTag(tagStereo, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite):引入新的元素标签。已标记元素的样式将更新，并且标记将显示在计算的图例中。

    ¥AddElementTag(tagStereo, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite): Introduces a new element tag. The styles of the tagged elements are updated and the tag is displayed in the calculated legend.

  • [ ] AddRelTag(tagStereo, ?textColor, ?lineColor, ?lineStyle, ?sprite, ?techn, ?legendText, ?legendSprite):引入了新的关系标签。已标记关系的样式将更新，并且标记将显示在计算的图例中。

    ¥AddRelTag(tagStereo, ?textColor, ?lineColor, ?lineStyle, ?sprite, ?techn, ?legendText, ?legendSprite): Introduces a new Relationship tag. The styles of the tagged relationships are updated and the tag is displayed in the calculated legend.

  • [x] UpdateElementStyle(elementName, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite):此调用更新元素（组件，...）的默认样式，并且不创建其他图例条目。

    ¥UpdateElementStyle(elementName, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite): This call updates the default style of the elements (component, ...) and creates no additional legend entry.

  • [x] UpdateRelStyle（从，到，？textColor，？lineColor，？offsetX，？offsetY）：此调用更新默认关系颜色并且不创建其他图例条目。添加两个新参数 offsetX 和 offsetY 来设置文本原始位置的偏移量。

    ¥UpdateRelStyle(from, to, ?textColor, ?lineColor, ?offsetX, ?offsetY): This call updates the default relationship colors and creates no additional legend entry. Two new parameters, offsetX and offsetY, are added to set the offset of the original position of the text.

  • [ ] 圆角框形状()：此调用返回圆角框形状的名称，并且可以用作 ?shape 参数。

    ¥RoundedBoxShape(): This call returns the name of the rounded box shape and can be used as ?shape argument.

  • [ ] 八边形():此调用返回八边形状的名称，可以用作 ?shape 参数。

    ¥EightSidedShape(): This call returns the name of the eight sided shape and can be used as ?shape argument.

  • [ ] 虚线（）：此调用返回虚线的名称，并且可以用作 ?lineStyle 参数。

    ¥DashedLine(): This call returns the name of the dashed line and can be used as ?lineStyle argument.

  • [ ] 虚线（）：此调用返回虚线的名称，可以用作 ?lineStyle 参数。

    ¥DottedLine(): This call returns the name of the dotted line and can be used as ?lineStyle argument.

  • [ ] 粗线（）：此调用返回粗线的名称，可以用作 ?lineStyle 参数。

    ¥BoldLine(): This call returns the name of the bold line and can be used as ?lineStyle argument.

  • [x] UpdateLayoutConfig（？c4ShapeInRow，？c4BoundaryInRow）：新的。此调用更新默认的 c4ShapeInRow(4) 和 c4BoundaryInRow(2)。

    ¥UpdateLayoutConfig(?c4ShapeInRow, ?c4BoundaryInRow): New. This call updates the default c4ShapeInRow(4) and 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 组件图（C4Component）

¥C4 Component diagram (C4Component)

C4 动态图（C4Dynamic）

¥C4 Dynamic diagram (C4Dynamic)

C4 部署图（C4Deployment）

¥C4 Deployment diagram (C4Deployment)