Mermaid流程图的语法练习
安装了hexo-filter-krokiKroki
在线Mermaid编辑器
流程图
简单节点
1 2 3 4 5 --- title: Node --- flowchart LR id[Mermaid is a good helper]
id 是一个标识符, 可以为任何元素, []内的是内容, 比如可以这样
1 2 3 4 5 --- title: Node --- flowchart LR id[Mermaid is a good helper] ---> id
图
1 2 flowchart TB Top --> Bottom
流程图定位参数
TB - top to bottom
节点形状
mermaid 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 flowchart LR box_1(Round Edges) box_2[Square Edges] box_3([Stadium shape]) box_4[[Subroutine shape]] box_5[(Database)] box_6((Circle)) box_7>Asymmetric shape] box_8{Rhombus} box_10[/Parallelogram/] box_11[\Parallelogram alt\] box_12[/Trapezoid\] box_13[\Trapezoid alt/] box_14(((Double Circle)))
box_9{{Hexagon node}} 六边形不能正常显示, 会被错误解析成变量
连接线
样式汇总
1 2 3 4 5 6 7 8 9 10 11 flowchart LR A --> B --- C C -- Text on link --- D ---|Another way| E F -- Combine with Arrow --> G -->|Another way| H I -.-> J -.Dotted.-> K L ==> M == Thick ==> N O --o P o--o|New Type| Q R --x S x--x T U <--> V
多连接
1 2 3 4 5 6 7 8 9 10 11 --- title: Mulitiple nodes links --- flowchart LR A --> B & C & D--> E B -.-> F F ==> A E <---> G G -.-> H & I I --x F
改变长度
1 2 3 4 flowchart TD A --> B A ---> C A ----> D
转义符
1 2 flowchart LR sign["Tried #9749; "]
将文本放入引号内可以使用转义符
[更多参考W3C HTML Symbols] (https://www.w3schools.com/html/html_symbols.asp )
子图
1 2 3 4 5 6 7 8 9 10 11 12 13 flowchart TB subgraph s1[subgragh_1] a1 --> a2 end subgraph s2[subgragh_2] b1 --> b2 end subgraph s3[subgragh_3] c1 --> c2 end s1 --> s2 a1 --> c2 s2 --> a1
调整方向
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 flowchart LR subgraph s1 direction LR a1 --- a2 end subgraph s2 direction RL b1 --> b2 subgraph s21 direction TB c1 --> c2 end b1-->c1 end a1 --> b1
Markdwon字符串
1 2 3 %%{init: {"flowchart": {"htmlLabels": false}} }%% flowchart LR A[("`*Time*`")] -->|"`**To**`"| B(["Go"])
quote起来能用markdown的强调
节点样式
1 2 3 4 5 6 7 8 flowchart A[slef-defined style] B[classDef]:::myPattern %% 单个节点 style A fill: #ccc, stroke: red, stroke-width: 2, stroke-dasharray: 5 5 %% 类选择器 classDef myPattern fill: #f98, stroke: blue
交互与注释
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 %% this is a omitted segement flowchart LR triger_alert triger_link click triger_alert callback "Touch" click triger_link href "https://www.baidu.com" "Go Baidu" _blank %% script添加到页面中, 不过kroki转换成的是svg图片, 只有标签才能使用 <script> mermaid.initialize({ startOnLoad: true, securityLevel: 'loose' }) const callback = function () { alert('Dont Touch Me'); }; </script>
参考
Mermaid官网 Kroki W3Cschool
