画图工具Mermaid学习笔记——流程图2

（以下均省略在md中需要的```mermaid ```前后缀）

设置子图，子图间同样可以用名字进行连接，或在子图中包含子图

若子图中的某个节点与外界的节点连接了，则子图规定的自身方向将失效，而是遵循母图的方向

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

---

特殊字符串：用双星号使用粗体，单星号使用斜体，直接换行

flowchart LR
subgraph "One"
  a("`The **cat**
  in the hat`")  --> b{{"`The *dog* in the hog`"}}
end

---

 设置连接的样式：如下设置了第四条连接的颜色和宽度

linkStyle 3 stroke:#ff3,stroke-width:4px;

设置连接曲线的风格：在该语句 'stepbefore' 处使用不同的参数即可（basis, bumpX, bumpY, cardinal, catmullRom, linear, monotoneX, monotoneY, natural, step, stepAfter 等等）

%%{ init: { 'flowchart': { 'curve': 'stepBefore' } } }%%

设置节点的风格：

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

 

定义一类风格用于多个节点，例如：

classDef className fill:#f9f,stroke:#333,stroke-width:4px;

 对一个或多个节点使用该风格：

class nodeId1,nodeId2 className;

简单的写法，直接在 nodeId 后接上，穿插使用即可，如下：

nodeId:::className

flowchart LR
    A:::foo & B:::bar --> C:::foobar
    classDef foo stroke:#f00
    classDef bar stroke:#0f0
    classDef foobar stroke:#00f