Mermaid 中文网

主题

体验 Mermaid 在线编辑器！

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)
  • 容器图 (C4Container)
  • 组件图 (C4Component)
  • 动态图 (C4Dynamic)
  • 部署图 (C4Deployment)

请参考链接文档 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_D, 向下布局
    • Lay_L, 向左布局
    • Lay_R, 向右布局

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

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

  • [ ] 精灵

  • [ ] 标签

  • [ ] 链接

  • [ ] 图例

  • [x] 系统上下文

    • [x] 人员(别名, 标签, ?描述, ?头像, ?标签, $链接)
    • [x] 人员扩展
    • [x] 系统(别名, 标签, ?描述, ?头像, ?标签, $链接)
    • [x] 系统数据库
    • [x] 系统队列
    • [x] 系统扩展
    • [x] 系统数据库扩展
    • [x] 系统队列扩展
    • [x] 边界(别名, 标签, ?类型, ?标签, $链接)
    • [x] 企业边界(别名, 标签, ?标签, $链接)
    • [x] 系统边界

  • [x] 容器图

    • [x] 容器(alias, label, ?技术, ?描述, ?图标, ?标签, $链接)
    • [x] 容器数据库
    • [x] 容器队列
    • [x] 容器扩展
    • [x] 容器数据库扩展
    • [x] 容器队列扩展
    • [x] 容器边界(alias, label, ?标签, $链接)

  • [x] 组件图

    • [x] 组件（别名, 标签, ?技术, ?描述, ?图标, ?标签, $链接）
    • [x] 组件数据库
    • [x] 组件队列
    • [x] 组件扩展
    • [x] 组件数据库扩展
    • [x] 组件队列扩展

  • [x] 动态图

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

  • [x] 部署图

    • [x] Deployment_Node(别名, 标签, ?类型, ?描述, ?图标, ?标签, $链接)
    • [x] Node(别名, 标签, ?类型, ?描述, ?图标, ?标签, $链接)：Deployment_Node() 的简称
    • [x] Node_L(别名, 标签, ?类型, ?描述, ?图标, ?标签, $链接)：左对齐的 Node()
    • [x] Node_R(别名, 标签, ?类型, ?描述, ?图标, ?标签, $链接)：右对齐的 Node()

  • [x] 关系类型

    • [x] Rel(from, to, label, ?techn, ?descr, ?sprite, ?tags, $link)
    • [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 语法兼容，但忽略 index 参数。序号由 rel 语句编写的顺序决定。

  • [ ] Custom tags/stereotypes support and skin param updates

    • [ ] 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): 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): This call updates the default style of the elements (component, ...) and creates no additional legend entry.
    • [x] 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.
    • [ ] RoundedBoxShape(): This call returns the name of the rounded box shape and can be used as ?shape argument.
    • [ ] EightSidedShape(): This call returns the name of the eight sided shape and can be used as ?shape argument.
    • [ ] DashedLine(): This call returns the name of the dashed line and can be used as ?lineStyle argument.
    • [ ] DottedLine(): This call returns the name of the dotted line and can be used as ?lineStyle argument.
    • [ ] BoldLine(): This call returns the name of the bold line and can be used as ?lineStyle argument.
    • [x] 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 组件图 (C4 组件) ​

【C4 Component diagram (C4Component)】

C4 动态图（C4Dynamic） ​

【C4 Dynamic diagram (C4Dynamic)】

C4 部署图（C4 部署） ​

【C4 Deployment diagram (C4Deployment)】

Opens in MermaidChart.com