mermaid

soulballad约 16533 字大约 55 分钟

mermaid

官网 mermaid - Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs. (mermaid-js.github.io)open in new window

1. Flowchart

1.1 流程图的设置

1.1.1 图的方向

TB，从上到下
TD，从上到下
BT，从下到上
RL，从右到左
LR，从左到右

T = TOP，B = BOTTOM，L = LEFT，R = RIGHT，D = DOWN

例如:

graph LR;
    A-->B
    B-->C
    C-->D
    D-->A

1.1.2 节点形状

默认节点 A
文本节点 B[bname]
圆角节点 C(cname)
圆形节点 D((dname))
非对称节点 E>ename]
菱形节点 F{fname}

A~F 是当前节点名字，类似于变量名，画图时便于引用
[b~f]name是节点中显示的文字，默认节点的名字和显示的文字都为A

例如:

graph TB
    A
    B[bname]
    C(cname)
    D((dname))
    E>ename]
    F{fname}

1.1.3 连线

节点间的连接线有多种形状，可以在连接线中加入标签：

箭头连接 A1–->B1
开放连接 A2—B2
标签连接 A3–text—B3
箭头标签连接 A4–text–>B4
虚线开放连接 A5.-B5
虚线箭头连接 A6-.->B6
标签虚线连接 A7-.text.-B7
标签虚线箭头连接 A8-.text.->B8
粗线开放连接 A9===B9
粗线箭头连接 A10==>B10
标签粗线开放连接 A11==text===B11
标签粗线箭头连接 A12==text==>B12

例如:

graph TB
  A1-->B1
  A2---B2
  A3--text---B3
  A4--text-->B4
  A5-.-B5
  A6-.->B6
  A7-.text.-B7
  A8-.text.->B8
  A9===B9
  A10==>B10
  A11==text===B11
  A12==text==>B12

1.2 子流程图

1.2.1 subgraph（子图）

# 外面的那层, 可以使用子图中的节点，子图中的节点名不是隔离的，可以认为是全局变量-.-
graph LR
  subgraph title1
    graph definition 
  end
  subgraph title2
    graph definition 
  end

例如:

flowchart LR
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end
    one --> two
    three --> two
    two --> c2

1.2.2 子图中方向

使用图形类型流程图，您可以使用方向语句来设置子图将呈现的方向，如本例所示。

flowchart LR
  subgraph TOP
    direction LR
    subgraph B1
        direction RL
        i1 -->f1
    end
    subgraph B2
        direction BT
        i2 -->f2
    end
  end
  A --> TOP --> B
  B1 --> B2

1.3 其他操作

1.3.1 互动

可以将单击事件绑定到节点，单击可导致 javascript 回调或链接，该链接将在新的浏览器选项卡中打开。 securityLevel='strict'``securityLevel='loose'

语法

click nodeId callback
click nodeId call callback()

例如

flowchart LR
    A-->B
    B-->C
    C-->D
    D-->E
    click A "https://www.github.com" _blank
    click B "https://www.github.com" "Open this in a new tab" _blank
    click C href "https://www.github.com" _blank
    click D href "https://www.github.com" "Open this in a new tab" _blank

1.3.2 注释

可以在流程图中输入注释，解析器将忽略这些注释。注释需要位于自己的行上，并且必须以（双倍百分号）开头。注释开始到下一个换行符之后的任何文本都将被视为注释，包括任何流语法%%

flowchart LR
%% this is a comment A -- text --> B{node}
	A -- text --> B -- text2 --> C

1.3.3 节点样式

可以设置链接样式。

flowchart LR
    id1(Start)-->id2(Stop)
    style id1 fill:#f9f,stroke:#333,stroke-width:4px
    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5

2. Sequence Diagram

2.1 基本用法

2.1.1 语法

sequenceDiagram
    participant Alice
    actor Bob
    Alice->>Bob: Hi Bob
    Bob->>Alice: Hi Alice

2.1.2 别名

执行组件可以具有方便的标识符和描述性标签。

sequenceDiagram
    participant A as Alice
    participant J as John
    A->>J: Hello John, how are you?
    J->>A: Great!

2.1.3 消息

消息可以是两个，显示实心或虚线。

[Actor][Arrow][Actor]:Message text

目前支持六种类型的箭头：

类型	描述
->	不带箭头的实线
-->	不带箭头的虚线
->>	带箭头的实线
-->>	带箭头的虚线
-x	末端带有十字的实线
--x	虚线，末尾有一个十字。
-)	末端带有开放箭头的实线（异步）
--)	末端带有开放箭头的虚线（异步）

2.1.4 激活

可以激活和停用演员。（去）激活可以是专用声明：

sequenceDiagram
    Alice->>John: Hello John, how are you?
    activate John
    John-->>Alice: Great!
    deactivate John

还有一个快捷方式表示法，方法是将 / 后缀附加到消息箭头：+``-

sequenceDiagram
    Alice->>+John: Hello John, how are you?
    John-->>-Alice: Great!

可以为同一actor堆叠激活：

sequenceDiagram
    Alice->>+John: Hello John, how are you?
    Alice->>+John: John, can you hear me?
    John-->>-Alice: Hi Alice, I can hear you!
    John-->>-Alice: I feel great!

2.1.5 Note

可以向序列图添加注释。这是通过符号注释 [ right of | left of | over ] [Actor]: 来完成的：注释内容中的文本

请参阅下面的示例：

sequenceDiagram
    participant John
    Note right of John: Text in note

还可以创建跨越两个参与者的注释：

sequenceDiagram
    Alice->John: Hello John, how are you?
    Note over Alice,John: A typical interaction

2.2 进阶用法

2.2.1 循环

可以在序列图中表示循环。这是通过符号完成的

loop Loop text
... statements ...
end

请参阅下面的示例：

sequenceDiagram
    Alice->John: Hello John, how are you?
    loop Every minute
        John-->Alice: Great!
    end

2.2.2 替代

可以在序列图中表示替代路径。这是通过符号完成的

alt Describing text
... statements ...
else
... statements ...
end

或者如果存在可选的序列（如果没有其他序列）。

opt Describing text
... statements ...
end

请参阅下面的示例：

sequenceDiagram
    Alice->>Bob: Hello Bob, how are you?
    alt is sick
        Bob->>Alice: Not so good :(
    else is well
        Bob->>Alice: Feeling fresh like a daisy
    end
    opt Extra response
        Bob->>Alice: Thanks for asking
    end

2.2.3 平行

可以显示并行发生的操作。

这是通过符号完成的

par [Action 1]
... statements ...
and [Action 2]
... statements ...
and [Action N]
... statements ...
end

请参阅下面的示例：

sequenceDiagram
    par Alice to Bob
        Alice->>Bob: Hello guys!
    and Alice to John
        Alice->>John: Hello guys!
    end
    Bob-->>Alice: Hi Alice!
    John-->>Alice: Hi Alice!

也可以嵌套平行块。

sequenceDiagram
    par Alice to Bob
        Alice->>Bob: Go help John
    and Alice to John
        Alice->>John: I want this done today
        par John to Charlie
            John->>Charlie: Can we do this today?
        and John to Diana
            John->>Diana: Can you help us today?
        end
    end

2.2.4 关键区域

可以显示必须通过有条件地处理情况自动发生的操作。

这是通过符号完成的

critical [Action that must be performed]
... statements ...
option [Circumstance A]
... statements ...
option [Circumstance B]
... statements ...
end

请参阅下面的示例：

sequenceDiagram
    critical Establish a connection to the DB
        Service-->DB: connect
    option Network timeout
        Service-->Service: Log error
    option Credentials rejected
        Service-->Service: Log different error
    end

也可能根本没有选择

sequenceDiagram
    critical Establish a connection to the DB
        Service-->DB: connect
    end

服务.DB危急[建立一个连接到数据库]连接服务.DB

这个关键块也可以嵌套，等效于上面的语句。par

2.2.5 中断

可以指示流中序列的停止（通常用于对异常进行建模）。

这是通过符号完成的

break [something happened]
... statements ...
end

请参阅下面的示例：

sequenceDiagram
    Consumer-->API: Book something
    API-->BookingService: Start booking process
    break when the booking process fails
        API-->Consumer: show failure
    end
    API-->BillingService: Start billing process

2.2.6 背景突出显示

可以通过提供彩色背景凹槽来突出流动。这是通过符号完成的

颜色是使用 rgb 和 rgba 语法定义的。

rect rgb(0, 255, 0)
... content ...
end
rect rgba(0, 0, 255, .1)
... content ...
end

请参阅以下示例：

sequenceDiagram
    participant Alice
    participant John

    rect rgb(191, 223, 255)
    note right of Alice: Alice calls John.
    Alice->>+John: Hello John, how are you?
    rect rgb(200, 150, 255)
    Alice->>+John: John, can you hear me?
    John-->>-Alice: Hi Alice, I can hear you!
    end
    John-->>-Alice: I feel great!
    end
    Alice ->>+ John: Did you want to go to the game tonight?
    John -->>- Alice: Yeah! See you there.

2.2.7 注释

可以在序列图中输入注释，解析器将忽略这些注释。注释需要位于自己的行上，并且必须以（双倍百分号）开头。注释开始到下一个换行符之后的任何文本都将被视为注释，包括任何图表语法%%

sequenceDiagram
    Alice->>John: Hello John, how are you?
    %% this is a comment
    John-->>Alice: Great!

2.2.8 用于转义字符的实体代码

可以使用此处举例说明的语法对字符进行转义。

sequenceDiagram
    A->>B: I #9829; you!
    B->>A: I #9829; you #infin; times more!

给出的数字以 10 为基数，因此可以编码为。还支持使用 HTML 字符名称。#``#35;

由于可以使用分号代替换行符来定义标记，因此需要使用在邮件文本中包含分号。#59;

2.3 高级用法

2.3.1 序列编号

可以获取附加到序列图中每个箭头的序列号。这可以在将mermaid 添加到网站时进行配置，如下所示：

    <script>
      mermaid.initialize({ sequence: { showSequenceNumbers: true }, });
    </script>

它也可以通过图代码打开，如图中所示：

sequenceDiagram
    autonumber
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!

2.3.2 演员菜单

Actor 可以具有包含指向外部页面的个性化链接的弹出菜单。例如，如果参与者表示 Web 服务，则有用的链接可能包括指向服务运行状况仪表板的链接、包含服务代码的存储库或描述服务的 Wiki 页面。

这可以通过添加一条或多条链接线来配置，格式如下：

link <actor>: <link-label> @ <link-url>

例如：

sequenceDiagram
    participant Alice
    participant John
    link Alice: Dashboard @ https://dashboard.contoso.com/alice
    link Alice: Wiki @ https://wiki.contoso.com/alice
    link John: Dashboard @ https://dashboard.contoso.com/john
    link John: Wiki @ https://wiki.contoso.com/john
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
    Alice-)John: See you later!

2.3.3 高级菜单语法

有一种依赖于 JSON 格式的高级语法。如果您对JSON格式感到满意，那么这也存在。

这可以通过添加具有以下格式的链接行来配置：

links <actor>: <json-formatted link-name link-url pairs>

示例如下：

sequenceDiagram
    participant Alice
    participant John
    links Alice: {"Dashboard": "https://dashboard.contoso.com/alice", "Wiki": "https://wiki.contoso.com/alice"}
    links John: {"Dashboard": "https://dashboard.contoso.com/john", "Wiki": "https://wiki.contoso.com/john"}
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
    Alice-)John: See you later!

3. Class Diagram

3.1 基本语法

UML 提供了表示类成员的机制，例如属性和方法，以及有关它们的其他信息。关系图中类的单个实例包含三个隔间：

顶部分栏包含类的名称。它以粗体和居中打印，第一个字母大写。它还可能包含描述类性质的可选注释文本。
中间的分栏包含类的属性。它们是左对齐的，第一个字母是小写的。
底部隔间包含类可以执行的操作。它们也是左对齐的，第一个字母是小写的。

classDiagram
    class BankAccount
    BankAccount : +String owner
    BankAccount : +Bigdecimal balance
    BankAccount : +deposit(amount)
    BankAccount : +withdrawal(amount)

3.1.1 定义类

有两种方法可以定义类：

显式使用关键字类喜欢这将定义动物类。class Animal
通过一次定义两个类及其关系的关系。例如。Vehicle <|-- Car

classDiagram
    class Animal
    Vehicle <|-- Car

命名约定：类名应仅由字母数字字符（包括 unicode）和下划线组成。

3.1.2 定义类的成员

UML 提供了表示类成员（如属性和方法）的机制，以及有关它们的其他信息。

mermaid 根据括号是否存在来区分属性和函数/方法。with的被视为函数/方法，所有其他的都被视为属性。()``()

有两种方法可以定义类的成员，无论使用哪种语法来定义成员，输出仍将是相同的。两种不同的方式是：

使用：（冒号）后跟成员名称关联类的成员，这对于一次定义一个成员很有用。例如：

classDiagram
class BankAccount
BankAccount : +String owner
BankAccount : +BigDecimal balance
BankAccount : +deposit(amount)
BankAccount : +withdrawal(amount)

使用 {} 括号的类的关联成员，其中成员分组在大括号内。适用于一次定义多个成员。例如：

classDiagram
class BankAccount{
    +String owner
    +BigDecimal balance
    +deposit(amount)
    +withdrawal(amount)
}

3.1.3 返回类型

（可选）您可以使用将返回的数据类型结束方法/函数定义（注意：final和返回类型之间必须有一个空格）。举个例子：)

classDiagram
class BankAccount{
    +String owner
    +BigDecimal balance
    +deposit(amount) bool
    +withdrawal(amount) int
}

3.1.4 泛型类型

可以使用泛型类型定义成员，例如，字段、参数和返回类型，方法是将类型括在 within（波浪号）中。注意：当前不支持嵌套类型声明。List<int>``~``List<List<int>>

泛型可以表示为类定义的一部分，也可以在方法/函数的参数或返回值中表示：

classDiagram
class Square~Shape~{
    int id
    List~int~ position
    setPoints(List~int~ points)
    getPoints() List~int~
}

3.1.5 可见性

为了描述作为类一部分的属性或方法/函数（即类成员）的可见性（或封装），可以在该成员的名称之前放置可选符号：

+公共
-私人
#保护
~封装/内部

注意您还可以通过在方法末尾添加以下表示法来在方法定义中包含其他分类器，即：()
*摘要例如：someAbstractMethod()*
$静态，例如：someStaticMethod()$

注释还可以通过在字段名称末尾添加以下表示法，将其他分类器包含在字段定义中：
$静态，例如：String someField$

3.1.6 定义关系

关系是一个通用术语，涵盖在类图和对象图上找到的特定类型的逻辑连接。

[classA][Arrow][ClassB]

目前支持在 UML 下为类定义了八种不同类型的关系：

|类型 |描述 | |---- |------------- |----------- | |< |-- |继承| |*-- |组成| |o-- |聚合| |--> |协会| |-- |链接（常亮）| | ..> |依赖关系| | ..|> |实现| | ..|链接（虚线）|

classDiagram
classA <|-- classB
classC *-- classD
classE o-- classF
classG <-- classH
classI -- classJ
classK <.. classL
classM <|.. classN
classO .. classP

我们可以使用标签来描述两个类之间关系的性质。此外，箭头也可以用于相反的方向：

classDiagram
classA --|> classB : Inheritance
classC --* classD : Composition
classE --o classF : Aggregation
classG --> classH : Association
classI -- classJ : Link(Solid)
classK ..> classL : Dependency
classM ..|> classN : Realization
classO .. classP : Link(Dashed)

3.1.7 关系标签

可以向关系添加标签文本：

[classA][Arrow][ClassB]:LabelText

classDiagram
classA <|-- classB : implements
classC *-- classD : composition
classE o-- classF : aggregation

3.18 双向关系

关系在逻辑上可以表示 N：M 关联：

classDiagram
    Animal <|--|> Zebra

语法如下：

[Relation Type][Link][Relation Type]

其中可以是以下之一：Relation Type

|类型 |描述 | |---- |----------- |----------- | |< | |继承| |* |组成| |o |聚合| |> |协会| |< |协会| | |> |实现|

并且可以是以下之一：Link

类型	描述
--	固体
..	虚线

3.2 进阶用法

3.2.1 关系的基数/多重性

类图中的多重性或基数表示一个类的实例数，这些实例可以链接到另一个类的实例。例如，每个公司将有一名或多名员工（不是零），并且每个员工目前在零家公司或一家公司工作。

多重性表示法放置在关联末尾附近。

不同的基数选项是：

1只有 1 个
0..1零或一
1..*一个或多个
*多
nn {其中 n>1}
0..n0 到 n {其中 n>1}
1..n一到n{其中n>1}

通过将文本选项放在给定箭头之前或之后的引号内，可以轻松定义基数。例如："

[classA] "cardinality1" [Arrow] "cardinality2" [ClassB]:LabelText

classDiagram
    Customer "1" --> "*" Ticket
    Student "1" --> "1..*" Course
    Galaxy --> "many" Star : Contains

3.2.2 类的注释

可以使用标记对类进行注释，以提供有关类的其他元数据。这可以更清楚地表明其性质。一些常见的注释包括：

<<Interface>>表示接口类
<<Abstract>>表示抽象类
<<Service>>表示服务类
<<Enumeration>>表示枚举

注释在开头和结尾中定义。有两种方法可以将注释添加到类，无论哪种方式，输出都是相同的：<<``>>

在定义类后的***单独行***中：

classDiagram
class Shape
<<interface>> Shape
Shape : noOfVertices
Shape : draw()

在***嵌套结构***中以及类定义中：

classDiagram
class Shape{
    <<interface>>
    noOfVertices
    draw()
}

3.2.3 评论

注释可以在类图中输入，解析器将忽略该类图。注释需要位于自己的行上，并且必须以（双百分号）开头。下一个换行符之前的任何文本都将被视为注释，包括任何类图语法。%%

classDiagram
%% This whole line is a comment classDiagram class Shape <<interface>>
class Shape{
    <<interface>>
    noOfVertices
    draw()
}

3.2.4 设置图表的方向

对于类图，您可以使用 direction 语句来设置图的呈现方向：

classDiagram
  direction RL
  class Student {
    -idCard : IdCard
  }
  class IdCard{
    -id : int
    -name : string
  }
  class Bike{
    -id : int
    -name : string
  }
  Student "1" --o "1" IdCard : carries
  Student "1" --o "1" Bike : rides

3.3 高级用法

3.3.1 互动

可以将单击事件绑定到节点。单击可导致 javascript 回调或链接，该链接将在新的浏览器选项卡中打开。注意：此功能在使用时禁用，使用时启用。securityLevel='strict'``securityLevel='loose'

在声明所有类后，您将在单独的行上定义这些操作。

action className "reference" "tooltip"
click className call callback() "tooltip"
click className href "url" "tooltip"

操作是 Canor，具体取决于要调用的交互类型link``callback
className是操作将与之关联的节点的 ID
引用是 URL 链接或回调的函数名称。
(可选）工具提示是将鼠标悬停在元素上时要显示的字符串（注意：工具提示的样式由类 .mermaidTooltip 设置。
注意：回调函数将以 nodeId 作为参数调用。

3.3.2 例子

网址链接：

classDiagram
class Shape
link Shape "https://www.github.com" "This is a tooltip for a link"
class Shape2
click Shape2 href "https://www.github.com" "This is a tooltip for a link"

回调：

classDiagram
class Shape
callback Shape "callbackFunction" "This is a tooltip for a callback"
class Shape2
click Shape2 call callbackFunction() "This is a tooltip for a callback"

<script>
  const callbackFunction = function () {
    alert('A callback was triggered');
  };
</script>

classDiagram
    class Class01
    class Class02
    callback Class01 "callbackFunction" "Callback tooltip"
    link Class02 "https://www.github.com" "This is a link"
    class Class03
    class Class04
    click Class03 call callbackFunction() "Callback tooltip"
    click Class04 href "https://www.github.com" "This is a link"

成功工具提示功能和链接到 url 的功能从版本 0.5.2 开始提供。

初学者提示 — 在 HTML 页面中使用交互式链接的完整示例：

<body>
  <pre class="mermaid">
    classDiagram
    Animal <|-- Duck
    Animal <|-- Fish
    Animal <|-- Zebra
    Animal : +int age
    Animal : +String gender
    Animal: +isMammal()
    Animal: +mate()
    class Duck{
      +String beakColor
      +swim()
      +quack()
      }
    class Fish{
      -int sizeInFeet
      -canEat()
      }
    class Zebra{
      +bool is_wild
      +run()
      }

      callback Duck callback "Tooltip"
      link Zebra "https://www.github.com" "This is a link"
  </pre>

  <script>
    const callback = function () {
      alert('A callback was triggered');
    };
    const config = {
      startOnLoad: true,
      securityLevel: 'loose',
    };
    mermaid.initialize(config);
  </script>
</body>

3.3.3 设置节点样式

可以将特定样式（例如较粗的边框或不同的背景颜色）应用于单个节点。这是通过在可以从图定义中应用的 css 样式中预定义类来完成的：

<style>
  .cssClass > rect {
    fill: #ff0000;
    stroke: #ffff00;
    stroke-width: 4px;
  }
</style>

然后将该类附加到特定节点：

    cssClass "nodeId1" cssClass;

也可以在一个语句中将类附加到节点列表：

    cssClass "nodeId1,nodeId2" cssClass;

添加类的较短形式是使用运算符将类名附加到节点：:::

classDiagram
    class Animal:::cssClass
Syntax error in graphmermaid version 9.2.2

艺术

classDiagram
    class Animal:::cssClass {
        -int sizeInFeet
        -canEat()
    }
Syntax error in graphmermaid version 9.2.2

cssClasses 不能在与关系语句同时使用此速记方法添加。

由于类图的现有标记的限制，目前无法在关系图本身中定义 css 类。*即将推出！*

3.3.4 默认样式

类图的主要样式是使用预设数量的 css 类完成的。在渲染过程中，这些类是从位于 src/themes/class.scss 的文件中提取的。下面介绍了此处使用的类：

类	描述
g.类组文本	常规类文本的样式
类组 .title	常规类标题的样式
g.类组矩形	类图矩形的样式
g.类组行	类图线的样式
.classLabel .box	类标签框的样式
.classLabel .label	类标签文本的样式
组成	合成箭头和箭头线的样式
集合体	聚合箭头和箭头线（虚线或实线）的样式
屬地	依赖项箭头和箭头线的样式

4. State Diagram

4.1 基本用法

4.1.1 状态

可以通过多种方式声明状态。最简单的方法是将状态 ID 定义为描述。

stateDiagram-v2
    s1

另一种方法是使用 state 关键字和如下描述：

stateDiagram-v2
    state "This is a state description" as s2

使用描述定义状态的另一种方法是定义状态 id，后跟冒号和说明：

stateDiagram-v2
    s2 : This is a state description

4.1.2 转换

转换是一个状态进入另一个状态时的路径/边。这使用文本箭头“-->”表示。

在两个状态之间定义转换并且尚未定义状态时，将使用转换中的 id 定义未定义的状态。稍后可以向以这种方式定义的状态添加说明。

stateDiagram-v2
    s1 --> s2

可以将文本添加到过渡中。描述它代表什么。

stateDiagram-v2
    s1 --> s2: A transition

4.1.3 开始和结束

有两种特殊状态指示关系图的开始和停止。这些是用 [*] 语法编写的，过渡到它的方向将其定义为开始或停止状态。

stateDiagram-v2
    [*] --> s1
    s1 --> [*]

4.1.4 复合状态

在现实世界中使用状态图时，您通常最终会得到多维图，就像一个状态一样。有几个内部状态。这些在此术语中称为复合状态。

为了定义复合状态，您需要使用 state 关键字，后跟 id 和 {} 之间的复合状态的主体。请参阅以下示例：

stateDiagram-v2
    [*] --> First
    state First {
        [*] --> second
        second --> [*]
    }

您可以在多个层中执行此操作：

stateDiagram-v2
    [*] --> First

    state First {
        [*] --> Second

        state Second {
            [*] --> second
            second --> Third

            state Third {
                [*] --> third
                third --> [*]
            }
        }
    }

您还可以定义复合状态之间的转换：

stateDiagram-v2
    [*] --> First
    First --> Second
    First --> Third

    state First {
        [*] --> fir
        fir --> [*]
    }
    state Second {
        [*] --> sec
        sec --> [*]
    }
    state Third {
        [*] --> thi
        thi --> [*]
    }

不能定义属于不同复合状态的内部状态之间的转换

4.1.5 选择

有时您需要在两条或多条路径之间进行建模，您可以使用<<选择>>来实现。

stateDiagram-v2
    state if_state <<choice>>
    [*] --> IsPositive
    IsPositive --> if_state
    if_state --> False: if n < 0
    if_state --> True : if n >= 0

4.1.6 分叉

可以使用<<fork>> <<join>>在关系图中指定分支。

   stateDiagram-v2
    state fork_state <<fork>>
      [*] --> fork_state
      fork_state --> State2
      fork_state --> State3

      state join_state <<join>>
      State2 --> join_state
      State3 --> join_state
      join_state --> State4
      State4 --> [*]

4.1.7 Note

有时没有什么比便利贴更能说明问题了。状态图中也是如此。

在这里，您可以选择将注释放在节点的右侧或左侧。

    stateDiagram-v2
        State1: The state with a note
        note right of State1
            Important information! You can write
            notes.
        end note
        State1 --> State2
        note left of State2 : This is the note to the left.

4.2 高级用法

4.2.1 并发

与在 plantUml 中一样，您可以使用 -- 符号指定并发性。

stateDiagram-v2
    [*] --> Active

    state Active {
        [*] --> NumLockOff
        NumLockOff --> NumLockOn : EvNumLockPressed
        NumLockOn --> NumLockOff : EvNumLockPressed
        --
        [*] --> CapsLockOff
        CapsLockOff --> CapsLockOn : EvCapsLockPressed
        CapsLockOn --> CapsLockOff : EvCapsLockPressed
        --
        [*] --> ScrollLockOff
        ScrollLockOff --> ScrollLockOn : EvScrollLockPressed
        ScrollLockOn --> ScrollLockOff : EvScrollLockPressed
    }

4.2.2 设置图表的方向

对于状态图，您可以使用 direction 语句来设置图将呈现的方向，如本例所示。

stateDiagram
    direction LR
    [*] --> A
    A --> B
    B --> C
    state B {
      direction LR
      a --> b
    }
    B --> D

4.2.3 注释

注释可以在状态图图表中输入，解析器将忽略该图表。注释需要位于自己的行上，并且必须以（双百分号）开头。注释开始到下一个换行符之后的任何文本都将被视为注释，包括任何图表语法%%

stateDiagram-v2
    [*] --> Still
    Still --> [*]
%% this is a comment
    Still --> Moving
    Moving --> Still %% another comment
    Moving --> Crash
    Crash --> [*]

4.2.4 样式

状态图的样式是通过定义许多 css 类来完成的。在渲染期间，这些类是从位于 src/themes/state.scss 的文件中提取的

4.2.5 状态名称中的空格

可以通过在顶部定义空格并在以后引用首字母缩略词来将空格添加到状态中。

stateDiagram-v2
    Yswsii: Your state with spaces in it
    [*] --> Yswsii

5. Entity Relationship Diagram

请注意，ER 建模的从业者几乎总是将实体类型简单地称为实体。例如，实体类型将简称为实体。这很常见，不建议执行任何其他操作，但从技术上讲，实体是实体类型的抽象实例，这就是 ER 图显示的 - 抽象实例以及它们之间的关系。这就是为什么实体总是使用单数名词命名的原因。CUSTOMER``CUSTOMER

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses

实体名称通常大写，尽管对此没有公认的标准，并且在mermaid 中也不是必需的。

实体之间的关系由带有表示基数的结束标记的线条表示。mermaid 使用最流行的鱼尾纹符号。鱼尾纹直观地传达了它所连接的实体的许多实例的可能性。

ER 图可用于各种目的，从没有任何实现细节的抽象逻辑模型到关系数据库表的物理模型。在 ER 图上包含属性定义以帮助理解实体的目的和含义可能很有用。这些不一定需要详尽无遗;通常，一小部分属性就足够了。mermaid 允许根据它们的类型和**名称来定义它们。

erDiagram
    CUSTOMER ||--o{ ORDER : places
    CUSTOMER {
        string name
        string custNumber
        string sector
    }
    ORDER ||--|{ LINE-ITEM : contains
    ORDER {
        int orderNumber
        string deliveryAddress
    }
    LINE-ITEM {
        string productCode
        int quantity
        float pricePerUnit
    }

在 ER 关系图上包括属性时，您必须决定是否将外键作为属性包括在内。这可能取决于您尝试表示关系表结构的紧密程度。如果你的图是一个逻辑模型，并不意味着关系实现，那么最好省略这些，因为关联关系已经传达了实体的关联方式。例如，JSON 数据结构可以使用数组实现一对多关系，而无需外键属性。类似地，面向对象的编程语言可以使用指向集合的指针或引用。即使对于用于关系实现的模型，您也可能认为包含外键属性会复制关系已描述的信息，并且不会为实体增加意义。最终，这是您的选择。

5.1 语法

5.1.1 实体和关系

ER图的mermaid 语法与PlantUML兼容，并带有标记关系的扩展。每个语句由以下部分组成：

    <first-entity> [<relationship> <second-entity> : <relationship-label>]

哪里：

first-entity是实体的名称。名称必须以字母字符开头，还可以包含数字、连字符和下划线。
relationship描述两个实体相互关联的方式。见下文。
second-entity是另一个实体的名称。
relationship-label从第一个实体的角度描述关系。

例如：

    PROPERTY ||--|{ ROOM : contains

此语句可以理解为属性包含一个或多个房间，并且房间是一个且仅一个属性的一部分。您可以看到，此处的标签是从第一个实体的角度看的：属性包含房间，但房间不包含属性。当从第二个实体的角度考虑时，等效标签通常很容易推断。（一些 ER 图从两个角度标记关系，但此处不支持这样做，并且通常是多余的）。

只有声明的一部分是强制性的。这使得显示没有关系的实体成为可能，这在图的迭代构造期间非常有用。如果指定了语句的任何其他部分，则所有部分都是必需的。first-entity

5.1.2 关系语法

每个语句的一部分可以分解为三个子组件：relationship

第一个实体相对于第二个实体的基数，
关系是否赋予“子”实体身份
第二个实体相对于第一个实体的基数

基数是一个属性，用于描述另一个实体的元素数可以与相关实体相关。在上面的例子中，acan 有一个或多个实例与之关联，而 acan 只能与一个实例关联。在每个基数标记中有两个字符。最外面的字符表示最大值，最里面的字符表示最小值。下表总结了可能的基数。PROPERTY``ROOM``ROOM``PROPERTY

值（左）	值（右）	意义
`	o`	`o
`		`
`}o`	`o{`	零或更多（无上限）
`}	`	`

5.1.3 鉴定

关系可以分类为标识关系或非标识关系，它们分别用实线或虚线呈现。当其中一个实体不能没有另一个实体而独立存在时，这一点是相关的。例如，一家为人们驾驶汽车提供保险的公司可能需要存储数据。在建模时，我们可以首先观察到 acan 可以由许多实例驱动，而 acan 驱动许多实例 - 两个实体都可以在没有另一个实体的情况下存在，所以这是一个非标识关系，我们可以在mermaid 中指定为 as：。请注意关系中间的两个点，这将导致在两个实体之间绘制一条虚线。但是，当这种多对多关系解析为两个一对多关系时，我们观察到，如果没有a和a-关系，a就无法存在，这些关系将成为标识，并且将使用连字符指定，连字符转换为实线：NAMED-DRIVER``CAR``PERSON``PERSON``CAR``PERSON }|..|{ CAR : "driver"``NAMED-DRIVER``PERSON``CAR

erDiagram
    CAR ||--o{ NAMED-DRIVER : allows
    PERSON ||--o{ NAMED-DRIVER : is

5.2 属性

可以通过指定实体名称后跟包含多个对的块来为实体定义属性，其中块由开场和闭合分隔。例如：type name``{``}

erDiagram
    CAR ||--o{ NAMED-DRIVER : allows
    CAR {
        string registrationNumber
        string make
        string model
    }
    PERSON ||--o{ NAMED-DRIVER : is
    PERSON {
        string firstName
        string lastName
        int age
    }

属性呈现在实体框中：

erDiagram
    CAR ||--o{ NAMED-DRIVER : allows
    CAR {
        string registrationNumber
        string make
        string model
    }
    PERSON ||--o{ NAMED-DRIVER : is
    PERSON {
        string firstName
        string lastName
        int age
    }

Theandvalues 必须以字母字符开头，并且可以包含数字、连字符或下划线。除此之外，没有任何限制，也没有一组隐式的有效数据类型。type``name

5.2.1 属性键和注释

属性还可以定义 aor 注释。键可以是“PK”或“FK”，用于主键或外键。ais 由属性末尾的双引号定义。注释本身不能包含双引号字符。key``comment

erDiagram
    CAR ||--o{ NAMED-DRIVER : allows
    CAR {
        string allowedDriver FK "The license of the allowed driver"
        string registrationNumber
        string make
        string model
    }
    PERSON ||--o{ NAMED-DRIVER : is
    PERSON {
        string driversLicense PK "The license #"
        string firstName
        string lastName
        int age
    }

5.2.2 其他事项

如果希望关系标签有多个单词，则必须在短语两边使用双引号
如果根本不想要关系上的标签，则必须使用空的双引号字符串

6. User Journey

mermaid 可以呈现用户旅程图：

journey
    title My working day
    section Go to work
      Make tea: 5: Me
      Go upstairs: 3: Me
      Do work: 1: Me, Cat
    section Go home
      Go downstairs: 5: Me
      Sit down: 5: Me

每个用户旅程都分为几个部分，这些部分描述了任务的一部分用户正在尝试完成。

7. Gantt

甘特图是一种条形图，最初由卡罗尔·阿达米茨基于 1896 年开发，并由亨利·甘特在 1910 年代独立开发，它说明了项目时间表以及任何一个项目完成所需的时间。甘特图说明了项目的最终元素和摘要元素的开始日期和完成日期之间的天数。

7.1 说明

甘特图会将每个计划任务记录为一个从左到右延伸的连续条形图。x 轴表示时间，y 轴记录不同的任务及其完成顺序。

重要的是要记住，当特定于任务的日期、日期或日期集合被“排除”时，甘特图将通过向右扩展相等的天数来适应这些变化，而不是通过在任务内创建间隙来适应这些变化。

但是，如果排除的日期位于设置为连续开始的两个任务之间，则排除的日期将以图形方式跳过并留空，并且以下任务将在排除日期结束后开始。

甘特图对于跟踪项目完成之前所需的时间很有用，但它也可用于以图形方式表示“非工作日”，并进行一些调整。

mermaid 可以将甘特图渲染为 SVG、PNG 或可以粘贴到文档中的 MarkDown 链接。

gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD
    section Section
    A task           :a1, 2014-01-01, 30d
    Another task     :after a1  , 20d
    section Another
    Task in sec      :2014-01-12  , 12d
    another task      : 24d

7.2 语法

gantt
    dateFormat  YYYY-MM-DD
    title       Adding GANTT diagram functionality to mermaid
    excludes    weekends
    %% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)

    section A section
    Completed task            :done,    des1, 2014-01-06,2014-01-08
    Active task               :active,  des2, 2014-01-09, 3d
    Future task               :         des3, after des2, 5d
    Future task2              :         des4, after des3, 5d

    section Critical tasks
    Completed task in the critical line :crit, done, 2014-01-06,24h
    Implement parser and jison          :crit, done, after des1, 2d
    Create tests for parser             :crit, active, 3d
    Future task in critical line        :crit, 5d
    Create tests for renderer           :2d
    Add to mermaid                      :1d
    Functionality added                 :milestone, 2014-01-25, 0d

    section Documentation
    Describe gantt syntax               :active, a1, after des1, 3d
    Add gantt diagram to demo page      :after a1  , 20h
    Add another diagram to demo page    :doc1, after a1  , 48h

    section Last section
    Describe gantt syntax               :after doc1, 3d
    Add gantt diagram to demo page      :20h
    Add another diagram to demo page    :48h

可以设置多个以空格分隔的依赖项：

    gantt
        apple :a, 2017-07-20, 1w
        banana :crit, b, 2017-07-23, 1d
        cherry :active, c, after b a, 1d

7.2.1 里程碑

您可以向图表添加里程碑。里程碑与任务不同，因为它们代表单个时刻并由关键字标识。下面是有关如何使用里程碑的示例。您可能会注意到，里程碑的确切位置由里程碑的初始日期和任务的“持续时间”决定，这样：初始日期+持续时间/2。milestone

gantt
    dateFormat HH:mm
    axisFormat %H:%M
    Initial milestone : milestone, m1, 17:49,2min
    taska2 : 10min
    taska3 : 5min
    Final milestone : milestone, m2, 18:14, 2min

7.2.2 设置日期

dateFormat`定义甘特图元素的日期**输入**的格式。这些日期在呈现的图表**输出**中的表示方式由定义。`axisFormat

输入日期格式

默认输入日期格式为。您可以定义您的自定义。YYYY-MM-DD``dateFormat

dateFormat YYYY-MM-DD

支持以下格式设置选项：

Input       Example             Description:
YYYY        2014                4 digit year
YY          14                  2 digit year
Q           1..4                Quarter of year. Sets month to first month in quarter.
M MM        1..12               Month number
MMM MMMM    January..Dec        Month name in locale set by moment.locale()
D DD        1..31               Day of month
Do          1st..31st           Day of month with ordinal
DDD DDDD    1..365              Day of year
X           1410715640.579      Unix timestamp
x           1410715640579       Unix ms timestamp
H HH        0..23               24 hour time
h hh        1..12               12 hour time used with a A.
a A         am pm               Post or ante meridiem
m mm        0..59               Minutes
s ss        0..59               Seconds
S           0..9                Tenths of a second
SS          0..99               Hundreds of a second
SSS         0..999              Thousandths of a second
Z ZZ        +12:00              Offset from UTC as +-HH:mm, +-HHmm, or Z

更多信息：https://momentjs.com/docs/#/parsing/string-format/

轴上的输出日期格式

默认输出日期格式为 YYYY-MM-DD。您可以定义您的自定义，例如 2020 年第一季度。axisFormat``2020-Q1

axisFormat  %Y-%m-%d

支持以下格式字符串：

%a - abbreviated weekday name.
%A - full weekday name.
%b - abbreviated month name.
%B - full month name.
%c - date and time, as "%a %b %e %H:%M:%S %Y".
%d - zero-padded day of the month as a decimal number [01,31].
%e - space-padded day of the month as a decimal number [ 1,31]; equivalent to %_d.
%H - hour (24-hour clock) as a decimal number [00,23].
%I - hour (12-hour clock) as a decimal number [01,12].
%j - day of the year as a decimal number [001,366].
%m - month as a decimal number [01,12].
%M - minute as a decimal number [00,59].
%L - milliseconds as a decimal number [000, 999].
%p - either AM or PM.
%S - second as a decimal number [00,61].
%U - week number of the year (Sunday as the first day of the week) as a decimal number [00,53].
%w - weekday as a decimal number [0(Sunday),6].
%W - week number of the year (Monday as the first day of the week) as a decimal number [00,53].
%x - date, as "%m/%d/%Y".
%X - time, as "%H:%M:%S".
%y - year without century as a decimal number [00,99].
%Y - year with century as a decimal number.
%Z - time zone offset, such as "-0700".
%% - a literal "%" character.

更多信息：https://github.com/mbostock/d3/wiki/Time-Formatting

7.2.3 注释

注释可以在甘特图中输入，解析器将忽略该图。注释需要位于自己的行上，并且必须以（双百分号）开头。注释开始到下一个换行符之后的任何文本都将被视为注释，包括任何图表语法%%

gantt
    title A Gantt Diagram
    %% this is a comment
    dateFormat  YYYY-MM-DD
    section Section
    A task           :a1, 2014-01-01, 30d
    Another task     :after a1  , 20d
    section Another
    Task in sec      :2014-01-12  , 12d
    another task      : 24d

7.2.4 样式

甘特图的样式是通过定义许多 css 类来完成的。在渲染过程中，这些类是从位于 src/themes/gantt.scss 的文件中提取的

使用的class

类	描述
grid.tick	网格线的样式
grid.path	网格边框的样式
.taskText	任务文本样式
.taskTextOutsideRight	超过右侧活动栏的任务文本的样式。
.taskTextOutsideLeft	超出活动栏的任务文本的样式，朝左。
今日标记	“今日标记”的切换和样式

示例样式表

.grid .tick {
  stroke: lightgrey;
  opacity: 0.3;
  shape-rendering: crispEdges;
}
.grid path {
  stroke-width: 0;
}

#tag {
  color: white;
  background: #fa283d;
  width: 150px;
  position: absolute;
  display: none;
  padding: 3px 6px;
  margin-left: -80px;
  font-size: 11px;
}

#tag:before {
  border: solid transparent;
  content: ' ';
  height: 0;
  left: 50%;
  margin-left: -5px;
  position: absolute;
  width: 0;
  border-width: 10px;
  border-bottom-color: #fa283d;
  top: -20px;
}
.taskText {
  fill: white;
  text-anchor: middle;
}
.taskTextOutsideRight {
  fill: black;
  text-anchor: start;
}
.taskTextOutsideLeft {
  fill: black;
  text-anchor: end;
}

7.2.5 标记当前日期

您可以设置或隐藏当前日期的标记样式。若要设置其样式，请为键添加一个值。todayMarker

todayMarker stroke-width:5px,stroke:#0f0,opacity:0.5

要隐藏标记，请设置。todayMarker``off

todayMarker off

7.3 配置

可以调整渲染甘特图的边距。

这是通过定义配置对象的一部分来完成的。如何使用 CLI 在mermaidCLIopen in new window页面中描述。ganttConfig

mermaid.ganttConfig 可以设置为带有配置参数或相应对象的 JSON 字符串。

mermaid.ganttConfig = {
  titleTopMargin: 25,
  barHeight: 20,
  barGap: 4,
  topPadding: 75,
  sidePadding: 75,
};

7.3.1 可配置的参数

参数	描述	默认值
mirrorActor	打开/关闭图下方和上方的Actor渲染	false
bottomMarginAdj	调整图形结束的距离。带有 css 的宽边框样式可能会生成不需要的剪辑，这就是此配置参数存在的原因。	1

7.3.2 互动

可以将单击事件绑定到任务。单击可导致 javascript 回调或链接，该链接将在当前浏览器选项卡中打开。注意：此功能在使用时禁用，使用时启用。securityLevel='strict'``securityLevel='loose'

click taskId call callback(arguments)
click taskId href URL

任务 ID 是任务的 ID
回调是在显示图形的页面上定义的 JavaScript 函数的名称，如果未指定其他参数，则将使用 taskId 作为参数调用该函数。

初学者提示 — 在 html 上下文中使用交互式链接的完整示例：

<body>
  <pre class="mermaid">
    gantt
      dateFormat  YYYY-MM-DD

      section Clickable
      Visit mermaidjs           :active, cl1, 2014-01-07, 3d
      Print arguments         :cl2, after cl1, 3d
      Print task              :cl3, after cl2, 3d

      click cl1 href "https://mermaidjs.github.io/"
      click cl2 call printArguments("test1", "test2", test3)
      click cl3 call printTask()
  </pre>

  <script>
    const printArguments = function (arg1, arg2, arg3) {
      alert('printArguments called with arguments: ' + arg1 + ', ' + arg2 + ', ' + arg3);
    };
    const printTask = function (taskId) {
      alert('taskId: ' + taskId);
    };
    const config = {
      startOnLoad: true,
      securityLevel: 'loose',
    };
    mermaid.initialize(config);
  </script>
</body>

8. Pie Chart

饼图（或圆形图）是一种圆形统计图形，它被分成多个切片来说明数字比例。在饼图中，每个切片的弧长（以及其中心角和面积）与其表示的数量成正比。虽然它因其与切片馅饼的相似之处而得名，但它的呈现方式有所不同。已知最早的饼图通常归功于威廉·普莱费尔（William Playfair）1801年的《统计圣经》（Statistical Breviary）。 -维基百科

mermaid 可以渲染饼图图表。

pie title Pets adopted by volunteers
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 15

8.1 语法

在mermaid 中绘制饼图非常简单。

开始为关键字以开始图表
```
pie
```
- showData以在图例文本之后呈现实际数据值。这是*可选的*
后跟关键字及其字符串值，为饼图提供标题。这是*可选的*title
后跟数据集
- label对于饼图中带引号的部分。" "
- 后跟冒号作为分隔符:
- 后跟（最多支持两位小数）positive numeric value

[馅饼][显示数据]（可选） [标题][标题值]（可选） “[数据密钥 1]” ： [数据值 1] “[数据密钥 2]” ： [数据值 2] “[数据密钥 3]” ： [数据值 3] . .

8.2 例子

pie showData
    title Key elements in Product X
    "Calcium" : 42.96
    "Potassium" : 50.05
    "Magnesium" : 10.01
    "Iron" :  5

9. Requirement Diagram

需求图提供了需求及其相互之间和其他记录元素的连接可视化。建模规范遵循 SysML v1.6 定义的规范。

渲染要求很简单。

requirementDiagram

    requirement test_req {
    id: 1
    text: the test text.
    risk: high
    verifymethod: test
    }

    element test_entity {
    type: simulation
    }

    test_entity - satisfies -> test_req

9.1 语法

需求图有三种类型的组件：需求、元素和关系。

定义每个语法的语法定义如下。用尖括号表示的单词（例如）是枚举关键字，这些关键字具有在 table.is 中详细说明的选项，可在任何需要用户输入的地方使用。<word>``user_defined_...

关于用户文本的重要说明：所有输入都可以用引号括起来，也可以不用引号括起来。例如，两者都有效。但是，用户必须小心未带引号的输入。如果检测到另一个关键字，解析器将失败。Id: "here is an example"``Id: here is an example

9.1.1 要求

要求定义包含要求类型、名称、ID、文本、风险和验证方法。语法如下：

<type> user_defined_name {
    id: user_defined_id
    text: user_defined text
    risk: <risk>
    verifymethod: <method>
}

类型、风险和方法是在 SysML 中定义的枚举。

关键词	选项
Type	需求、功能需求、接口要求、性能要求、物理要求、设计约束
Risk	低、中、高
VerificationMethod	分析、检验、测试、演示

9.1.2 元素

元素定义包含元素名称、类型和文档引用。这三个都是用户定义的。元素功能旨在是轻量级的，但允许将要求连接到其他文档的某些部分。

element user_defined_name {
    type: user_defined_type
    docref: user_defined_ref
}

9.1.3 关系

关系由源节点、目标节点和关系类型组成。

每个都遵循以下定义格式：

{name of source} - <type> -> {name of destination}

或

{name of destination} <- <type> - {name of source}

“源名称”和“目标名称”应该是在其他地方定义的需求或元素节点的名称。

关系类型可以是包含、复制、派生、满足、验证、优化或跟踪之一。

关系图中标记了每个关系。

9.2 示例

此示例使用关系图的所有功能。

    requirementDiagram

    requirement test_req {
    id: 1
    text: the test text.
    risk: high
    verifymethod: test
    }

    functionalRequirement test_req2 {
    id: 1.1
    text: the second test text.
    risk: low
    verifymethod: inspection
    }

    performanceRequirement test_req3 {
    id: 1.2
    text: the third test text.
    risk: medium
    verifymethod: demonstration
    }

    interfaceRequirement test_req4 {
    id: 1.2.1
    text: the fourth test text.
    risk: medium
    verifymethod: analysis
    }

    physicalRequirement test_req5 {
    id: 1.2.2
    text: the fifth test text.
    risk: medium
    verifymethod: analysis
    }

    designConstraint test_req6 {
    id: 1.2.3
    text: the sixth test text.
    risk: medium
    verifymethod: analysis
    }

    element test_entity {
    type: simulation
    }

    element test_entity2 {
    type: word doc
    docRef: reqs/test_entity
    }

    element test_entity3 {
    type: "test suite"
    docRef: github.com/all_the_tests
    }


    test_entity - satisfies -> test_req2
    test_req - traces -> test_req2
    test_req - contains -> test_req3
    test_req3 - contains -> test_req4
    test_req4 - derives -> test_req5
    test_req5 - refines -> test_req6
    test_entity3 - verifies -> test_req5
    test_req <- copies - test_entity2

10. Gitgraph Diagram

Git 图是各种分支上的 git 提交和 git 操作（命令）的图形表示。

这些图表对于开发人员和 DevOps 团队共享他们的 Git 分支策略特别有帮助。例如，它使可视化 git 流的工作原理变得更加容易。

mermaid 可以渲染 Git 图

    gitGraph
       commit
       commit
       branch develop
       checkout develop
       commit
       commit
       checkout main
       merge develop
       commit
       commit

在mermaid 中，我们支持基本的 git 操作，例如：

提交：表示当前分支上的新提交。
分支：要创建并切换到新分支，请将其设置为当前分支。
签出：签出现有分支并将其设置为当前分支。
合并：将现有分支合并到当前分支上。

借助这些关键的 git 命令，您将能够非常轻松快速地在mermaid 中绘制 gitgraph。实体名称通常大写，尽管对此没有公认的标准，并且在mermaid 中也不是必需的。

10.1 语法

Gitgraph 的mermaid 语法非常简单明了。它遵循声明性方法，其中每个提交都按照其在代码中的出现/存在的顺序绘制在图中的时间轴上。基本上，它遵循每个命令的广告顺序。

您要做的第一件事是使用gitgraph关键字声明您的图表类型。这个关键字告诉mermaid 你想画一个 gitgraph，并相应地解析图代码。gitgraph

每个 gitgraph 都使用main*分支进行初始化。因此，除非您创建其他分支，否则默认情况下提交将转到主分支。这是由 git 的工作方式驱动的，一开始你总是从主分支（以前称为主*分支）开始。默认情况下，分支设置为当前分支**。main

您可以使用***commit***关键字在当前分支上注册提交。让我们看看这是如何工作的：

一个简单的 gitgraph 显示了默认（*主*）分支上的三个提交：

    gitGraph
       commit
       commit
       commit

如果仔细查看前面的示例，可以看到默认分支以及三个提交。另外，请注意，默认情况下，每个提交都被赋予了一个唯一的随机ID。如果您想为提交提供自己的自定义 ID，该怎么办？是的，mermaid 可以做到这一点。main

10.1.1 添加自定义提交 ID

对于给定的提交，您可以在声明时使用属性指定自定义 ID，后跟 aquote 中的自定义值。例如：id``:``""``commit id: "your_custom_id"

让我们在下图的帮助下看看它是如何工作的：

    gitGraph
       commit id: "Alpha"
       commit id: "Beta"
       commit id: "Gamma"

在此示例中，我们已将自定义 ID 提供给提交。

10.1.2 修改提交类型

在mermaid 中，提交可以是三种类型，它们在图中呈现略有不同。这些类型是：

NORMAL：默认提交类型。在图中用实心圆表示
REVERSE：强调提交为反向提交。在图中由交叉实心圆表示。
HIGHLIGHT：突出显示图中的特定提交。在关系图中由填充矩形表示。

对于给定的提交，您可以在声明它时使用属性指定其类型，后跟上面讨论的所需类型选项。例如：type``:``commit type: HIGHLIGHT

注意：如果未指定提交类型，则选择为默认值。NORMAL

让我们借助下图看看这些不同的提交类型是什么样子的：

    gitGraph
       commit id: "Normal"
       commit
       commit id: "Reverse" type: REVERSE
       commit
       commit id: "Highlight" type: HIGHLIGHT
       commit

在此示例中，我们为每个提交指定了不同的类型。另外，看看我们如何在声明提交时将两者包含在一起。id``type

10.1.3 添加标签

对于给定的提交，您可以将其装饰为标签，类似于 git 世界中标签或发布版本的概念。您可以在声明提交时使用属性附加自定义标记，后跟和自定义值 withinquote。例如：tag``:``""``commit tag: "your_custom_tag"

让我们在下图的帮助下看看它是如何工作的：

    gitGraph
       commit
       commit id: "Normal" tag: "v1.0.0"
       commit
       commit id: "Reverse" type: REVERSE tag: "RC_1"
       commit
       commit id: "Highlight" type: HIGHLIGHT tag: "8.8.4"
       commit

在此示例中，我们为提交提供了自定义标记。另外，看看我们如何在单个提交声明中组合所有这些属性。您可以根据需要混合匹配这些属性。

10.1.4 创建新分支

在mermaid 中，为了创建一个新的分支，你使用关键字。您还需要提供新分支的名称。名称必须是唯一的，并且不能是现有分支的名称。使用示例：branch``branch develop

当mermaid 读取关键字时，它会创建一个新分支并将其设置为当前分支。相当于你创建一个新分支并在 Git 世界中检查它。branch

让我们在一个例子中看到这一点：

    gitGraph
       commit
       commit
       branch develop
       commit
       commit
       commit

在此示例中，看看我们如何从 defaultbranch 开始，并在此基础上推送了两个提交。然后我们创建了分支，之后的所有提交都放在分支上，因为它成为当前分支。main``develop``develop

10.1.5 检出现有分支

在mermaid 中，为了切换到现有的分支，您可以使用关键字。您还需要提供现有分支的名称。如果未找到具有给定名称的分支，则会导致控制台错误。使用示例：checkout``checkout develop

当mermaid 读取关键字时，它会找到给定的分支并将其设置为当前分支。相当于在 Git 世界中签出一个分支。checkout

让我们看看修改我们之前的例子：

    gitGraph
       commit
       commit
       branch develop
       commit
       commit
       commit
       checkout main
       commit
       commit

在此示例中，看看我们如何从 defaultbranch 开始，并在此基础上推送了两个提交。然后我们创建了分支，之后所有三个提交都放在分支上，因为它成为当前分支。在此之后，我们使用关键字将当前分支设置为，并且所有后续提交都针对当前分支注册，即main``develop``develop``checkout``main``main

10.1.6 合并两个分支

在mermaid 中，为了合并或加入现有分支，您可以使用关键字。您还需要提供要从中合并的现有分支的名称。如果未找到具有给定名称的分支，则会导致控制台错误。此外，您只能合并两个单独的分支，而不能将分支与自身合并。在这种情况下，将引发错误。merge

使用示例：merge develop

当mermaid 读取关键字时，它会找到给定的分支及其头部提交（该分支上的最后一次提交），并将其与当前分支上的头部提交连接起来。每次合并都会产生一个合并提交*，在图中用填充的双圆圈*表示。merge

让我们修改前面的示例以合并我们的两个分支：

    gitGraph
       commit
       commit
       branch develop
       commit
       commit
       commit
       checkout main
       commit
       commit
       merge develop
       commit
       commit

在此示例中，看看我们如何从 defaultbranch 开始，并在此基础上推送了两个提交。然后我们创建了分支，之后所有三个提交都放在分支上，因为它成为当前分支。在此之后，我们使用关键字将当前分支设置为，并且所有后续提交都针对当前分支注册，即在此之后，我们将分支合并到当前分支上，从而产生合并提交。由于此时的当前分支仍在，因此将针对该分支注册最后两个提交。main``develop``develop``checkout``main``main``develop``main``main

您还可以使用与提交类似的属性来修饰合并：

id--> 使用自定义 ID 覆盖默认 ID
tag--> 将自定义标记添加到合并提交
type--> 覆盖合并提交的默认形状。在这里，您可以使用前面提到的其他提交类型。

您可以选择不使用、部分或全部这些属性。例如：merge develop id: "my_custom_id" tag: "my_custom_tag" type: REVERSE

让我们在下图的帮助下看看它是如何工作的：

    gitGraph
       commit id: "1"
       commit id: "2"
       branch nice_feature
       checkout nice_feature
       commit id: "3"
       checkout main
       commit id: "4"
       checkout nice_feature
       branch very_nice_feature
       checkout very_nice_feature
       commit id: "5"
       checkout main
       commit id: "6"
       checkout nice_feature
       commit id: "7"
       checkout main
       merge nice_feature
       checkout very_nice_feature
       commit id: "8"
       checkout main
       commit id: "9"

10.1.7 cherry-pick

与“git”允许您从另一个分支到当前分支上挑选提交的方式类似，Mermaid 也支持此功能。您还可以使用关键字从另一个分支中挑选提交。cherry-pick

要使用关键字，您必须使用 theattribute 指定 id，然后在 aquote 中指定所需的提交 id。例如：cherry-pick``id``:``""

cherry-pick id: "your_custom_id"

在这里，在当前分支上创建了一个表示 cherry-pick 的新提交，并在图中直观地突出显示，其中包含一个樱桃和一个描述从中挑选它的提交 id 的标记。

这里需要注意的一些重要规则是：

您需要为要挑选的现有提交提供。如果给定的提交 ID 不存在，则会导致错误。为此，请使用声明提交的格式。请参阅上面的示例。id``commit id:$value
给定的提交不能存在于当前分支上。精心挑选的提交必须始终是与当前分支不同的分支。
当前分支必须至少有一个提交，然后才能挑选，否则会导致抛出错误。

让我们看一个例子：

    gitGraph
       commit id: "ZERO"
       branch develop
       commit id:"A"
       checkout main
       commit id:"ONE"
       checkout develop
       commit id:"B"
       checkout main
       commit id:"TWO"
       cherry-pick id:"A"
       commit id:"THREE"
       checkout develop
       commit id:"C"

10.2 Gitgraph 特定配置选项

在mermaid 中，您可以选择配置 gitgraph 图。您可以配置以下选项：

showBranches：布尔值，默认值为。如果设置为，则分支不会显示在图中。true``false
showCommitLabel：布尔值，默认值为。如果设置为，则提交标签不会显示在图中。true``false
mainBranchName：字符串，默认值为。默认/根分支的名称。main
mainBranchOrder：主分支在分支列表中的位置。默认值是，这意味着，默认情况下分支是顺序中的第一个。0``main

让我们一一看一下。

10.2.1 隐藏分支名称和行

有时您可能希望从关系图中隐藏分支名称和行。您可以使用关键字来执行此操作。默认情况下，其值为。您可以将其设置为使用指令。showBranches``true``false

使用示例：

%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': false}} }%%
      gitGraph
        commit
        branch hotfix
        checkout hotfix
        commit
        branch develop
        checkout develop
        commit id:"ash" tag:"abc"
        branch featureB
        checkout featureB
        commit type:HIGHLIGHT
        checkout main
        checkout hotfix
        commit type:NORMAL
        checkout develop
        commit type:REVERSE
        checkout featureB
        commit
        checkout main
        merge hotfix
        checkout featureB
        commit
        checkout develop
        branch featureA
        commit
        checkout develop
        merge hotfix
        checkout featureA
        commit
        checkout featureB
        commit
        checkout develop
        merge featureA
        branch release
        checkout release
        commit
        checkout main
        commit
        checkout release
        merge main
        checkout develop
        merge release

10.2.2 提交标签布局：旋转或水平

mermaid 支持两种类型的提交标签布局。默认布局是旋转的，这意味着标签放置在提交圆圈下方，旋转 45 度以获得更好的可读性。这对于具有长标签的提交特别有用。

另一个选项是水平的，这意味着标签放置在水平居中的提交圆下方，并且不会旋转。这对于带有短标签的提交特别有用。

您可以通过在指令中使用关键字来更改提交标签的布局。它默认为，这意味着提交标签已轮换。rotateCommitLabel``true

使用示例：轮换提交标签

%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'rotateCommitLabel': true}} }%%
gitGraph
  commit id: "feat(api): ..."
  commit id: "a"
  commit id: "b"
  commit id: "fix(client): .extra long label.."
  branch c2
  commit id: "feat(modules): ..."
  commit id: "test(client): ..."
  checkout main
  commit id: "fix(api): ..."
  commit id: "ci: ..."
  branch b1
  commit
  branch b2
  commit

使用示例：水平提交标签

%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'rotateCommitLabel': false}} }%%
gitGraph
  commit id: "feat(api): ..."
  commit id: "a"
  commit id: "b"
  commit id: "fix(client): .extra long label.."
  branch c2
  commit id: "feat(modules): ..."
  commit id: "test(client): ..."
  checkout main
  commit id: "fix(api): ..."
  commit id: "ci: ..."
  branch b1
  commit
  branch b2
  commit

10.2.3 隐藏提交标签

有时您可能希望从关系图中隐藏提交标签。您可以使用关键字来执行此操作。默认情况下，其值为。您可以将其设置为使用指令。showCommitLabel``true``false

使用示例：

%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': false,'showCommitLabel': false}} }%%
      gitGraph
        commit
        branch hotfix
        checkout hotfix
        commit
        branch develop
        checkout develop
        commit id:"ash"
        branch featureB
        checkout featureB
        commit type:HIGHLIGHT
        checkout main
        checkout hotfix
        commit type:NORMAL
        checkout develop
        commit type:REVERSE
        checkout featureB
        commit
        checkout main
        merge hotfix
        checkout featureB
        commit
        checkout develop
        branch featureA
        commit
        checkout develop
        merge hotfix
        checkout featureA
        commit
        checkout featureB
        commit
        checkout develop
        merge featureA
        branch release
        checkout release
        commit
        checkout main
        commit
        checkout release
        merge main
        checkout develop
        merge release

10.2.4 自定义主分支名称

有时您可能希望自定义主分支/默认分支的名称。您可以使用关键字来执行此操作。默认情况下，其值为。您可以使用指令将其设置为任何字符串。mainBranchName``main

使用示例：

%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': true, 'showCommitLabel':true,'mainBranchName': 'MetroLine1'}} }%%
      gitGraph
        commit id:"NewYork"
        commit id:"Dallas"
        branch MetroLine2
        commit id:"LosAngeles"
        commit id:"Chicago"
        commit id:"Houston"
        branch MetroLine3
        commit id:"Phoenix"
        commit type: HIGHLIGHT id:"Denver"
        commit id:"Boston"
        checkout MetroLine1
        commit id:"Atlanta"
        merge MetroLine3
        commit id:"Miami"
        commit id:"Washington"
        merge MetroLine2 tag:"MY JUNCTION"
        commit id:"Boston"
        commit id:"Detroit"
        commit type:REVERSE id:"SanFrancisco"

看看用mermaid 创建的假想铁路地图。在这里，我们已将默认的主分支名称更改为。MetroLine1

10.2.5 自定义分支排序

在mermaid 中，默认情况下，分支按其在图代码中的定义或外观顺序显示。

有时您可能希望自定义分支的顺序。您可以通过在分支定义旁边使用关键字来执行此操作。您可以将其设置为正数。order

mermaid 遵循关键字的给定优先顺序。order

主分支始终首先显示，因为它的默认订单值为。（除非它的顺序被修改并从配置中使用关键字更改）0``0``mainBranchOrder
接下来，所有没有 anare 的分支都按其在关系图代码中出现的顺序显示。order
接下来，所有带有 anare 的分支按其值的顺序显示。order``order

若要完全控制所有分支的顺序，必须定义所有分支。order

使用示例：

%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': true, 'showCommitLabel':true}} }%%
      gitGraph
      commit
      branch test1 order: 3
      branch test2 order: 2
      branch test3 order: 1

查看图表，所有分支都遵循定义的顺序。

使用示例：

%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': true, 'showCommitLabel':true,'mainBranchOrder': 2}} }%%
      gitGraph
      commit
      branch test1 order: 3
      branch test2
      branch test3
      branch test4 order: 1

看图，这里所有没有指定顺序的分支都是按照其定义的顺序绘制的。然后，根据顺序绘制分支。然后，根据顺序绘制分支。最后是抽的，因为顺序。test4``1``main``2``test1``3

注意：由于我们已经覆盖了theto，所以分支不是在开始时绘制的，而是遵循排序。mainBranchOrder``2``main

在这里，我们已将默认的主分支名称更改为。MetroLine1

10.3 主题

mermaid 支持一堆预定义的主题，您可以使用它们来找到适合您的主题。PS：您实际上可以覆盖现有主题的变量以使您自己的自定义主题运行。在此处open in new window了解有关为图表设置主题的详细信息。

以下是不同的预定义主题选项：

base
forest
dark
default
neutral

注意：要更改主题，您可以使用调用或指令。了解有关指令open in new window的更多信息让我们使用它们，看看我们的示例图表在不同主题中的外观：initialize

10.3.1 基本主题

%%{init: { 'logLevel': 'debug', 'theme': 'base' } }%%
      gitGraph
        commit
        branch hotfix
        checkout hotfix
        commit
        branch develop
        checkout develop
        commit id:"ash" tag:"abc"
        branch featureB
        checkout featureB
        commit type:HIGHLIGHT
        checkout main
        checkout hotfix
        commit type:NORMAL
        checkout develop
        commit type:REVERSE
        checkout featureB
        commit
        checkout main
        merge hotfix
        checkout featureB
        commit
        checkout develop
        branch featureA
        commit
        checkout develop
        merge hotfix
        checkout featureA
        commit
        checkout featureB
        commit
        checkout develop
        merge featureA
        branch release
        checkout release
        commit
        checkout main
        commit
        checkout release
        merge main
        checkout develop
        merge release

10.3.2 森林主题

%%{init: { 'logLevel': 'debug', 'theme': 'forest' } }%%
      gitGraph
        commit
        branch hotfix
        checkout hotfix
        commit
        branch develop
        checkout develop
        commit id:"ash" tag:"abc"
        branch featureB
        checkout featureB
        commit type:HIGHLIGHT
        checkout main
        checkout hotfix
        commit type:NORMAL
        checkout develop
        commit type:REVERSE
        checkout featureB
        commit
        checkout main
        merge hotfix
        checkout featureB
        commit
        checkout develop
        branch featureA
        commit
        checkout develop
        merge hotfix
        checkout featureA
        commit
        checkout featureB
        commit
        checkout develop
        merge featureA
        branch release
        checkout release
        commit
        checkout main
        commit
        checkout release
        merge main
        checkout develop
        merge release

10.3.3 默认主题

%%{init: { 'logLevel': 'debug', 'theme': 'default' } }%%
      gitGraph
        commit type:HIGHLIGHT
        branch hotfix
        checkout hotfix
        commit
        branch develop
        checkout develop
        commit id:"ash" tag:"abc"
        branch featureB
        checkout featureB
        commit type:HIGHLIGHT
        checkout main
        checkout hotfix
        commit type:NORMAL
        checkout develop
        commit type:REVERSE
        checkout featureB
        commit
        checkout main
        merge hotfix
        checkout featureB
        commit
        checkout develop
        branch featureA
        commit
        checkout develop
        merge hotfix
        checkout featureA
        commit
        checkout featureB
        commit
        checkout develop
        merge featureA
        branch release
        checkout release
        commit
        checkout main
        commit
        checkout release
        merge main
        checkout develop
        merge release

10.3.4 深色主题

%%{init: { 'logLevel': 'debug', 'theme': 'dark' } }%%
      gitGraph
        commit
        branch hotfix
        checkout hotfix
        commit
        branch develop
        checkout develop
        commit id:"ash" tag:"abc"
        branch featureB
        checkout featureB
        commit type:HIGHLIGHT
        checkout main
        checkout hotfix
        commit type:NORMAL
        checkout develop
        commit type:REVERSE
        checkout featureB
        commit
        checkout main
        merge hotfix
        checkout featureB
        commit
        checkout develop
        branch featureA
        commit
        checkout develop
        merge hotfix
        checkout featureA
        commit
        checkout featureB
        commit
        checkout develop
        merge featureA
        branch release
        checkout release
        commit
        checkout main
        commit
        checkout release
        merge main
        checkout develop
        merge release

10.3.5 中性主题

%%{init: { 'logLevel': 'debug', 'theme': 'neutral' } }%%
      gitGraph
        commit
        branch hotfix
        checkout hotfix
        commit
        branch develop
        checkout develop
        commit id:"ash" tag:"abc"
        branch featureB
        checkout featureB
        commit type:HIGHLIGHT
        checkout main
        checkout hotfix
        commit type:NORMAL
        checkout develop
        commit type:REVERSE
        checkout featureB
        commit
        checkout main
        merge hotfix
        checkout featureB
        commit
        checkout develop
        branch featureA
        commit
        checkout develop
        merge hotfix
        checkout featureA
        commit
        checkout featureB
        commit
        checkout develop
        merge featureA
        branch release
        checkout release
        commit
        checkout main
        commit
        checkout release
        merge main
        checkout develop
        merge release

10.4 使用主题变量进行自定义

Mermaid 允许您使用主题变量自定义图表，这些主题变量控制图表中各种元素的外观。

为了理解，让我们以一个带有主题的示例图为例，主题变量的默认值是从主题中自动选取的。稍后我们将看到如何覆盖主题变量的默认值。default

了解如何使用默认主题设置分支的颜色：

%%{init: { 'logLevel': 'debug', 'theme': 'default' } }%%
    gitGraph
       commit
       branch develop
       commit tag:"v1.0.0"
       commit
       checkout main
       commit type: HIGHLIGHT
       commit
       merge develop
       commit
       branch featureA
       commit

重要：
Mermaid 支持主题变量覆盖最多 8 个分支的默认值，即您可以使用主题变量设置最多 8 个分支的颜色/样式。在 8 个分支的阈值之后，主题变量以循环方式重用，即第 9 个分支将使用第 1 个分支的颜色/样式，或者索引位置 '8' 的分支将使用索引位置 '0' 处分支的颜色/样式。下一节将对此进行详细介绍。请参阅下面有关自定义分支标签颜色的示例

10.4.1 自定义branch颜色

您可以使用主题变量自定义分支颜色。mermaid 允许您为最多 8 个分支设置颜色，其中变量将驱动第一个分支的值，将驱动第二个分支的值，依此类推。git0``git7``git0``git1

注意：这些主题变量的默认值是从所选主题中选取的。如果要覆盖默认值，可以使用调用来添加自定义主题变量值。initialize

例：

现在让我们覆盖变量的默认值：git0``git3

%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': { 'git0': '#ff0000', 'git1': '#00ff00', 'git2': '#0000ff', 'git3': '#ff00ff', 'git4': '#00ffff', 'git5': '#ffff00', 'git6': '#ff00ff', 'git7': '#00ffff' } } }%%
    gitGraph
       commit
       branch develop
       commit tag:"v1.0.0"
       commit
       checkout main
       commit type: HIGHLIGHT
       commit
       merge develop
       commit
       branch featureA
       commit

查看如何将分支颜色更改为主题变量中指定的值。

10.4.2 自定义branch label颜色

您可以使用主题变量自定义分支标签颜色。mermaid 允许您为多达 8 个分支设置颜色，其中变量将驱动第一个分支标签的值，将驱动第二个分支标签的值，依此类推。gitBranchLabel0``gitBranchLabel7``gitBranchLabel0``gitBranchLabel1

让我们看看如何使用默认主题来设置分支标签的颜色：

现在让我们覆盖变量的默认值：gitBranchLabel0``gitBranchLabel2

%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': { 'gitBranchLabel0': '#ffffff', 'gitBranchLabel1': '#ffffff', 'gitBranchLabel2': '#ffffff', 'gitBranchLabel3': '#ffffff', 'gitBranchLabel4': '#ffffff', 'gitBranchLabel5': '#ffffff', 'gitBranchLabel6': '#ffffff', 'gitBranchLabel7': '#ffffff', 'gitBranchLabel8': '#ffffff', 'gitBranchLabel9': '#ffffff' } } }%%
  gitGraph
    checkout main
    branch branch1
    branch branch2
    branch branch3
    branch branch4
    branch branch5
    branch branch6
    branch branch7
    branch branch8
    branch branch9
    checkout branch1
    commit

在这里，您可以看到 andcolors 和样式分别从索引位置（）和（）处的分支中选取，即分支主题变量循环重复。branch8``branch9``0``main``1``branch1

10.4.3 自定义commit颜色

您可以使用 andtheme 变量分别自定义提交，以更改提交标签颜色和背景颜色。commitLabelColor``commitLabelBackground

例：现在让我们覆盖变量的默认值：commitLabelColor``commitLabelBackground

%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': { 'commitLabelColor': '#ff0000', 'commitLabelBackground': '#00ff00' } } }%%
    gitGraph
       commit
       branch develop
       commit tag:"v1.0.0"
       commit
       checkout main
       commit type: HIGHLIGHT
       commit
       merge develop
       commit
       branch featureA
       commit

了解如何将提交标签颜色和背景颜色更改为主题变量中指定的值。

10.4.4 自定义commit label字体大小

您可以使用主题变量自定义提交，以更改提交标签的字体。commitLabelFontSize

例：现在让我们覆盖变量的默认值：commitLabelFontSize

%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': { 'commitLabelColor': '#ff0000', 'commitLabelBackground': '#00ff00', 'commitLabelFontSize': '16px' } } }%%
    gitGraph
       commit
       branch develop
       commit tag:"v1.0.0"
       commit
       checkout main
       commit type: HIGHLIGHT
       commit
       merge develop
       commit
       branch featureA
       commit

查看提交标签字体大小如何变化。

10.4.5 自定义tag label字体大小

您可以使用主题变量自定义提交，以便在标签标签的字体中进行更改。tagLabelFontSize

例：现在让我们覆盖变量的默认值：tagLabelFontSize

%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': { 'commitLabelColor': '#ff0000', 'commitLabelBackground': '#00ff00', 'tagLabelFontSize': '16px' } } }%%
    gitGraph
       commit
       branch develop
       commit tag:"v1.0.0"
       commit
       checkout main
       commit type: HIGHLIGHT
       commit
       merge develop
       commit
       branch featureA
       commit

查看标签字体大小的变化。

10.4.6 自定义tag颜色

您可以使用和主题变量自定义标签，分别更改标签标签颜色、标签背景颜色和标签边框。例：现在让我们覆盖和 to变量的默认值：tagLabelColor``tagLabelBackground``tagLabelBorder``tagLabelColor``tagLabelBackground``tagLabelBorder

%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': { 'tagLabelColor': '#ff0000', 'tagLabelBackground': '#00ff00', 'tagLabelBorder': '#0000ff' } } }%%
    gitGraph
       commit
       branch develop
       commit tag:"v1.0.0"
       commit
       checkout main
       commit type: HIGHLIGHT
       commit
       merge develop
       commit
       branch featureA
       commit

查看如何将标签颜色更改为主题变量中指定的值。

10.4.7 自定义highlight commit颜色

您可以使用 thetotheme 变量自定义与其所在的分支相关的突出显示提交颜色。Mermaid 允许您为最多 8 个分支特定的突出显示提交设置颜色，其中变量将驱动第一个分支的突出显示提交的值，将驱动第二个分支的突出显示提交标签的值，依此类推。gitInv0``gitInv7``gitInv0``gitInv1

例：

现在让我们覆盖变量的默认值：git0``git3

%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': { 'gitInv0': '#ff0000' } } }%%
gitGraph
    commit
    branch develop
    commit tag:"v1.0.0"
    commit
    checkout main
    commit type: HIGHLIGHT
    commit
    merge develop
    commit
    branch featureA
    commit

查看如何将第一个分支上突出显示的提交颜色更改为主题变量中指定的值。gitInv0

11. C4C Diagram

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

有关示例，请参阅源代码 demos/index.html

支持 5 种类型的 C4 图表。

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

请参考链接的文档C4-PlantUML 语法open in new window了解如何编写 c4 图。

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

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

布局
- Lay_U， Lay_Up
- Lay_D， Lay_Down
- Lay_L， Lay_Left
- Lay_R， Lay_Right

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

mermaid

# mermaid

# 1. Flowchart

# 1.1 流程图的设置

# 1.1.1 图的方向

# 1.1.2 节点形状

# 1.1.3 连线

# 1.2 子流程图

# 1.2.1 subgraph（子图）

# 1.2.2 子图中方向

# 1.3 其他操作

# 1.3.1 互动

# 1.3.2 注释

# 1.3.3 节点样式

# 2. Sequence Diagram

# 2.1 基本用法

# 2.1.1 语法

# 2.1.2 别名

# 2.1.3 消息

# 2.1.4 激活

# 2.1.5 Note

# 2.2 进阶用法

# 2.2.1 循环

# 2.2.2 替代

# 2.2.3 平行

# 2.2.4 关键区域

# 2.2.5 中断

# 2.2.6 背景突出显示

# 2.2.7 注释

# 2.2.8 用于转义字符的实体代码

# 2.3 高级用法

# 2.3.1 序列编号

# 2.3.2 演员菜单

# 2.3.3 高级菜单语法

# 3. Class Diagram

# 3.1 基本语法

# 3.1.1 定义类

# 3.1.2 定义类的成员

# 3.1.3 返回类型

# 3.1.4 泛型类型

# 3.1.5 可见性

# 3.1.6 定义关系

# 3.1.7 关系标签

# 3.18 双向关系

# 3.2 进阶用法

# 3.2.1 关系的基数/多重性

# 3.2.2 类的注释

# 3.2.3 评论

# 3.2.4 设置图表的方向

# 3.3 高级用法

# 3.3.1 互动

# 3.3.2 例子

# 3.3.3 设置节点样式

# 3.3.4 默认样式

# 4. State Diagram

# 4.1 基本用法

# 4.1.1 状态

# 4.1.2 转换

# 4.1.3 开始和结束

# 4.1.4 复合状态

# 4.1.5 选择

# 4.1.6 分叉

# 4.1.7 Note

# 4.2 高级用法

# 4.2.1 并发

# 4.2.2 设置图表的方向

# 4.2.3 注释

# 4.2.4 样式

# 4.2.5 状态名称中的空格

# 5. Entity Relationship Diagram

# 5.1 语法

# 5.1.1 实体和关系

# 5.1.2 关系语法

# 5.1.3 鉴定

# 5.2 属性

# 5.2.1 属性键和注释

# 5.2.2 其他事项

# 6. User Journey

# 7. Gantt

# 7.1 说明

mermaid

1. Flowchart

1.1 流程图的设置

1.1.1 图的方向

1.1.2 节点形状

1.1.3 连线

1.2 子流程图

1.2.1 subgraph（子图）

1.2.2 子图中方向

1.3 其他操作

1.3.1 互动

1.3.2 注释

1.3.3 节点样式

2. Sequence Diagram

2.1 基本用法

2.1.1 语法

2.1.2 别名

2.1.3 消息

2.1.4 激活

2.1.5 Note

2.2 进阶用法

2.2.1 循环

2.2.2 替代

2.2.3 平行

2.2.4 关键区域

2.2.5 中断

2.2.6 背景突出显示

2.2.7 注释

2.2.8 用于转义字符的实体代码

2.3 高级用法

2.3.1 序列编号

2.3.2 演员菜单

2.3.3 高级菜单语法

3. Class Diagram

3.1 基本语法

3.1.1 定义类

3.1.2 定义类的成员

3.1.3 返回类型

3.1.4 泛型类型

3.1.5 可见性

3.1.6 定义关系

3.1.7 关系标签

3.18 双向关系

3.2 进阶用法

3.2.1 关系的基数/多重性

3.2.2 类的注释

3.2.3 评论

3.2.4 设置图表的方向

3.3 高级用法

3.3.1 互动

3.3.2 例子

3.3.3 设置节点样式

3.3.4 默认样式

4. State Diagram

4.1 基本用法

4.1.1 状态

4.1.2 转换

4.1.3 开始和结束

4.1.4 复合状态

4.1.5 选择

4.1.6 分叉

4.1.7 Note

4.2 高级用法

4.2.1 并发

4.2.2 设置图表的方向

4.2.3 注释

4.2.4 样式

4.2.5 状态名称中的空格

5. Entity Relationship Diagram

5.1 语法

5.1.1 实体和关系

5.1.2 关系语法

5.1.3 鉴定

5.2 属性

5.2.1 属性键和注释

5.2.2 其他事项

6. User Journey

7. Gantt

7.1 说明

7.2 语法