夏洛魂
夏洛魂

Mermaid Shortcode

夏洛魂 夏洛魂 收录于 Markdown 和 Markdown
 约 2900 字 预计阅读 6 分钟 

Mermaid 是一个基于 JavaScript 的图表工具，它允许你使用文本和代码创建图表和可视化。

流程图

所有 流程图 都由节点、几何形状和边缘（箭头或线）组成。Mermaid 代码定义了这些节点和边缘的制作方式和交互方式。

1
2
3
4
5
6
7

```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

序列图

序列图 是一种交互图，显示进程如何相互操作以及按什么顺序进行操作。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

```mermaid
sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!
```
sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts 
prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!

类图

类图 是面向对象建模的主要构建单元。它用于应用程序结构的一般概念建模，并将模型转换为编程代码的详细建模。类图也可以用于数据建模。类图中的类既表示应用程序中的主要元素和交互，也表示要编程的类。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

```mermaid

[类图][mermaid-classDiagram] 是面向对象建模的主要构建单元。它用于应用程序结构的一般概念建模，并将模型转换为编程代码的详细建模。类图也可以用于数据建模。类图中的类既表示应用程序中的主要元素和交互，也表示要编程的类。

````markdown
```mermaid
classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label
```
classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label

状态图

Mermaid 可以渲染 状态图。语法尝试与 plantUml 中使用的语法兼容，因为这将使用户更容易在 mermaid 和 plantUml 之间共享图表。

一个 状态图 mermaid 示例：

1
2
3
4
5
6
7
8
9

```mermaid
stateDiagram-v2
    [*] --> Still
    Still --> [*]
    Still --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]
```

呈现的输出效果如下：

stateDiagram-v2
    [*] --> Still
    Still --> [*]
    Still --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]

实体关系图

实体关系图（或 ER 图）描述了特定领域中相关的事物。基本的 ER 图由实体类型（分类感兴趣的事物）组成，并指定可以存在于实体之间（这些实体类型的实例）的关系。

1
2
3
4
5
6

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

用户旅程图

用户旅程图 在高层次上描述了不同用户在系统、应用程序或网站中完成特定任务所采取的确切步骤。这种技术展示了当前（现有）的用户工作流程，并揭示了 to-be 工作流的改进区域。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

```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
```
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

甘特图

甘特图 是一种条形图，由 Karol Adamiecki 在 1896 年首次开发，独立于 Henry Gantt 在 1910 年代开发，用于说明项目进度和完成任何一个项目所需的时间量。甘特图说明了项目的终端元素和摘要元素的开始和结束日期之间的天数。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

```mermaid
gantt
dateFormat  YYYY-MM-DD
title Adding GANTT diagram to mermaid
excludes weekdays 2014-01-10

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
```
gantt
dateFormat  YYYY-MM-DD
title Adding GANTT diagram to mermaid
excludes weekdays 2014-01-10

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

饼图

Mermaid 可以渲染 饼图。

一个 饼图 mermaid 示例：

1
2
3
4
5
6

```mermaid
pie
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 15
```

呈现的输出效果如下：

pie
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 15

象限图

象限图 是一种将数据划分为四个象限的视觉表示。它用于在二维网格上绘制数据点，一个变量表示在 x 轴上，另一个变量表示在 y 轴上。通过根据特定于所分析数据的一组标准将图表划分为四个相等的部分来确定象限。象限图通常用于识别数据中的模式和趋势，并根据图表中数据点的位置确定操作的优先级。它们通常用于商业、营销和风险管理等领域。

一个 象限图 mermaid 示例：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

```mermaid
quadrantChart
    title Reach and engagement of campaigns
    x-axis Low Reach --> High Reach
    y-axis Low Engagement --> High Engagement
    quadrant-1 We should expand
    quadrant-2 Need to promote
    quadrant-3 Re-evaluate
    quadrant-4 May be improved
    Campaign A: [0.3, 0.6]
    Campaign B: [0.45, 0.23]
    Campaign C: [0.57, 0.69]
    Campaign D: [0.78, 0.34]
    Campaign E: [0.40, 0.34]
    Campaign F: [0.35, 0.78]
```

呈现的输出效果如下：

quadrantChart
    title Reach and engagement of campaigns
    x-axis Low Reach --> High Reach
    y-axis Low Engagement --> High Engagement
    quadrant-1 We should expand
    quadrant-2 Need to promote
    quadrant-3 Re-evaluate
    quadrant-4 May be improved
    Campaign A: [0.3, 0.6]
    Campaign B: [0.45, 0.23]
    Campaign C: [0.57, 0.69]
    Campaign D: [0.78, 0.34]
    Campaign E: [0.40, 0.34]
    Campaign F: [0.35, 0.78]

依赖图

依赖图 提供了需求及其相互关系和其他文档化元素的可视化。建模规范遵循 SysML v1.6 定义的规范。

一个 依赖图 mermaid 示例：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

```mermaid
requirementDiagram

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

element test_entity {
type: simulation
}

test_entity - satisfies -> test_req
```

呈现的输出效果如下：

requirementDiagram

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

element test_entity {
type: simulation
}

test_entity - satisfies -> test_req

Git 图

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

一个 Git 图 mermaid 示例：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

```mermaid
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
```

呈现的输出效果如下：

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

时间轴

警告

时间轴：目前这是一个实验性图表。语法和属性可能会在未来版本中发生变化。除了图标集成（实验性部分）外，语法是稳定的。

一个 时间轴 mermaid 示例：

1
2
3
4
5
6
7
8
9

```mermaid
timeline
    title History of Social Media Platform
    2002 : LinkedIn
    2004 : Facebook
         : Google
    2005 : Youtube
    2006 : Twitter
```

呈现的输出效果如下：

timeline
    title History of Social Media Platform
    2002 : LinkedIn
    2004 : Facebook
         : Google
    2005 : Youtube
    2006 : Twitter

XY 图

在 mermaid-js 的上下文中，XY 图 是一个全面的图表模块，它包含各种类型的图表，这些图表使用 x 轴和 y 轴来表示数据。目前，它包括两种基本图表类型：条形图和折线图。这些图表旨在直观地显示和分析涉及两个数值变量的数据。

注意

值得注意的是，虽然 mermaid-js 的当前实现包括这两种图表类型，但该框架的设计是动态和适应性的。因此，它具有扩展和将来包含其他图表类型的能力。这意味着用户可以期待 XY 图表模块中不断发展的一套图表选项，随着新图表类型的引入，可以满足各种数据可视化需求。

一个 XY 图 mermaid 示例：

1
2
3
4
5
6
7
8

```mermaid
xychart-beta
    title "Sales Revenue"
    x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
    y-axis "Revenue (in $)" 4000 --> 11000
    bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
    line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
```

呈现的输出效果如下：

xychart-beta
    title "Sales Revenue"
    x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
    y-axis "Revenue (in $)" 4000 --> 11000
    bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
    line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]

相关内容

更新于 2022-06-07 
Markdown
返回 | 主页
0%