Mermaid系列-1.基础流程图

1.流程图

1.1基础流程图

---
title:Node
---
%% 此句为注释
flowchart LR
    id(((this is id)))
    id1[this is id1]
    id2[this is id2]

    id-. id to id 1 .->id1
    id-..->id2
    id1-- this is ---id2
    id2---id

    id2-->id3{decide} --> id
    id3-.-id4
    id3== 粗连接 ==>id5
    id2-- id 2 to id 6 -->id6>this is id 6]
    id6-->id7([this is id 7])
    id6-->id8((this is id8))
    id6-->id9[(this is id9)]
    id6-->id10[[this is id10]]
    id2-->id11{{this is id 11}}
    id11-->id12[/this is id 12/]
    id11-->id13[\this is id13\]
    id11-->id14[/this is id14\]
    id11-->id15[\this is id 15/]
    
    
    a-->b & c-->d

    e & f --> g & h

    A --o B
    C --x D
    

1.2子图、样式及其他

1.2.1 子图

flowchart LR
    a-->c
    subgraph sg1[one]
    direction TB
    a-->b
    end
    subgraph sg2[two]
    b-->c
    end
    subgraph three
    direction BT
 
    e-->f
    end

    sg1-->sg2

1.2.2 MarkDown语法

    %%{init: {"flowchart": {"htmlLabels": false}} }%%
flowchart LR
subgraph "One"
  a("`The **cat**
  in the hat`") -- "edge label" --> b{{"`The **dog** in the hog`"}}
end
subgraph "`**Two**`"
  c("`The **cat**
  in the hat`") -- "`Bold **edge label**`" --> d("The dog in the hog")
end

1.2.3 链接

flowchart LR
    A-->B
    B-->C
    C-->D
    click A callback "Tooltip for a callback"
    click B "https://www.github.com" "This is a tooltip for a link"
    click C call callback() "Tooltip for a callback"
    click D href "https://www.github.com" "This is a tooltip for a link"

1.2.4 样式

%%可用的曲线样式包括 basis、bumpX、bumpY、cardinal、catmullRom、linear、monotoneX、monotoneY、natural、step、stepAfter 和 stepBefore
%%{ init: { 'flowchart': { 'curve': 'stepBefore' } } }%%
flowchart LR
    a --> b --> c --> d
    b --> e
    b --> f
    linkStyle 0,2 stroke:#f43,stroke-width:4px,color:red;
    style a fill:#f9f,stroke:#333,stroke-width:4px
    classDef someclass fill:#f96
    A:::someclass --> B --> b