mermaid流程图案例

注意

随着 mermaid 的更新，有一些新特性是不支持的，注意测试。

mermaid 插件：vuepress-plugin-mermaidjs (opens new window)
mermaid 使用：mermaid 官网 (opens new window)
mermaid 在线：mermaid-live (opens new window)

# 插件案例

# 安装插件

# 安装插件
npm install -D vuepress-plugin-mermaidjs@1.9.1
该版本插件是基于 mermaid@8.14.0 开发的

1
2
3

# 序列图案例

sequenceDiagram 序列图案例

sequenceDiagram (opens new window)

sequenceDiagram
    autonumber
    link Alice: Dashboard @ https://www.baidu.com
    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!

1
2
3
4
5
6
7
8
9
10
11

输出：

# 状态图案例

State 状态图案例

sequenceDiagram (opens new window)

stateDiagram-v2
  state "This is a state description" as s2
  [*] --> Still
  Still --> [*]: 描述

  state if_state <<choice>>
  Still --> Moving
  Moving --> Still
  Moving --> if_state
  if_state --> Crash
  if_state --> s2
  Crash --> [*]

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

输出：

# 饼状图案例

pie 饼状图案例

sequenceDiagram (opens new window)

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

1
2
3
4

输出：

# 主题

forest 主题

mermaid 主题：mermaid-themes (opens new window) default、neutral、dark、forest、base

%%{init: {'theme':'forest'}}%%
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

1
2
3
4
5
6

输出：

# 自定义主题

自定义主题，注意：theme 要使用 base

themevariables (opens new window) | 变量 (opens new window)

%%{
  init: {
    'theme': 'base',
    'themeVariables': {
      'primaryColor': '#BB2528',
      'primaryTextColor': '#fff',
      'primaryBorderColor': '#7C0000',
      'lineColor': '#F8B229',
      'secondaryColor': '#006100',
      'tertiaryColor': '#fff'
    }
  }
}%%
graph TD
  A[Christmas] -->|Get money| B(Go shopping)
  B --> C{Let me think}
  B --> G[/Another/]
  C ==>|One| D[Laptop]
  C -->|Two| E[iPhone]
  C -->|Three| F[fa:fa-car Car]
  subgraph section
    C
    D
    E
    F
    G
  end

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

输出：

#博客教程 #markdown案例

上次更新: 2023/05/12, 16:53:30

← markdown更具表现力插件→