Mermaid中文文档

Appearance

C4 图表 ​

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

Mermaid 的 C4 图表语法与 plantUML 兼容。请参见下面的示例：

Code:
mermaid

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

支持 5 种类型的 C4 图表。

  • 系统上下文图 (C4Context)
  • 容器图 (C4Container)
  • 组件图 (C4Component)
  • 动态图 (C4Dynamic)
  • 部署图 (C4Deployment)

有关如何编写 C4 图表的更多信息，请参考链接文档 C4-PlantUML 语法。

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

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

  • 布局
    • Lay_U, Lay_Up
    • Lay_D, Lay_Down
    • Lay_L, Lay_Left
    • Lay_R, Lay_Right

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

  • [ ] sprite

  • [ ] tags

  • [ ] link

  • [ ] Legend

  • [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): Deployment_Node() 的简写
    • [x] Node_L(alias, label, ?type, ?descr, ?sprite, ?tags, $link): 左对齐的 Node()
    • [x] Node_R(alias, label, ?type, ?descr, ?sprite, ?tags, $link): 右对齐的 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 语法兼容，但忽略索引参数。序列号由 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)。

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

示例：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) ​

Code:
mermaid

C4 容器图 (C4Container) ​

Code:
mermaid

C4 组件图 (C4Component) ​

Code:
mermaid

C4 动态图 (C4Dynamic) ​

Code:
mermaid

C4 部署图 (C4Deployment) ​

Code:
mermaid