mermaid

发表于 更新于 分类于

mermaid 是一个流程图插件的语法，可定义多种类型的流程图，详细文档参考官方文档

流程图

基本的语法 mermaid_基本的语法.png 不要使用;结尾，否则 hexo 可能会渲染会失败，有些关键词不能作为 id，比如end

graph LR;
    Start --> Stop

graph 标明当前为流程图，LR 标明方向

方向

－ TB - top to bottom － TD - top-down/ same as top to bottom － BT - bottom to top － RL - right to left － LR - left to right

节点形状

节点可以设置显示文本用于区分与唯一 id

  1. id1[text1]
  2. id2(text2)
graph LR
   id1[text1]
   id2(text2)

线条

线条的长度可以用-来增加

  1. A-->B;
  2. A---B;
  3. A---|text|B
  4. A-->|text|B
  5. A-.->B;
  6. A-.->|text|B
  7. A ==> B

文字可以统一在线条语法后使用|text|的方式来

graph LR
    A-->|1|B;
    A---|2|B;
    A---|3|B
    A-->|4|B
    A-.->|5|B;
    A-.->|6|B
    A ==>|7|B

子图

语法

1
2
3
subgraph title
    graph definition
end

例如

1
2
3
4
5
6
7
8
9
10
11
graph TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end
graph TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end

css 样式

1
2
3
4
5
graph LR
    id1(Start)-->id2(Stop)
    id3:::red-->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
graph LR
    id1(Start)-->id2(Stop)
    id3:::red-->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

可定义 class

1
2
3
graph LR
    A:::someclass --> B
    classDef someclass fill:#f96;
graph LR
    A:::someclass --> B
    classDef someclass fill:#f96;