Mermaid入门
流程图
举例
--- title: Node --- flowchart LR i1(你好) i2[混合] i3([This ❤ Unicode]) i4[["`**markdown**`"]] i5[("`Line1 Line2 `")] A@{ shape: manual-file, label: "File Handling"} i1-->i2 i1-.->|你好|i4 subgraph one a1-->a2 end
注释
以%%开始的文字会被忽略
大体格式
--- title: 我是标题 %% title处写标题 --- flowchart TB %% flowchart代表流程图, TB代表(箭头)方向top->bottom类似的BT,RL,LR i1[文本] %% 创建一个带有文本的节点,它的编号是i1 i2[文本] %% 创建一个带有文本的节点,它的编号是i2 i1 --> i2 %% i1 指向 i2 i3["`markdown语法`"] %% 被"``"包裹可以写markdown语法
节点形状
1 | [] 方形 |
扩展节点形状
- 格式:
i1@{shape: rect, label: "文本"}
- 具体见此处
自定义节点
- 格式:
i1@{icon: "fa:user", form: "square", label: "文本"}
箭头形状
i1-->i2
i1-->|text|i2
带文字i1-.->i2
虚线i1-.->|text|i2
虚线带文字i1==>i2
加粗i1<-->i2
双向箭头i1--o i2
i1--x i2
Tips: —越多箭头越长, 可以在一行操作多个节点:
i1-->i2 & i1-->i3
子图
1 | subgraph id [title] |
- 子图也可以互相指向
对fontawesome的支持**
- 例如:
i1["fa:fa-twitter "]
Warning:
单词“end”,请将整个单词或任意字母大写(例如“End”或“END”)全部以小写字母输入“end”将破坏流程图.
如果使用字母“o”或“x”作为连接流程图节点的首字母,请在字母前添加空格或将字母大写(例如,“dev— ops”、“dev—Ops”).
输入“A—oB”将创建一个圆形边缘.输入“A—xB”将创建一个十字边
思维导图
举例
mindmap ROOT[根] A[分支1] B[分支1.1] ::icon(fa fa-book) C[分支1.2] a[分支2] b[分支2.1] c[分支2.2]
作者认为结合代码和图像就可以看清楚结构了
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 travel!
评论