Markdown · Typora | 基本画图技巧

如果想画一些简单的状态图，可以使用 typora 自带的 mermaid 工具。

（mermaid 不止能画简单的状态图，还能画流程图等，详见参考资料）

定义节点

可以定义不同形状的节点，并为节点添加文字。

graph TB 中，TB 意思是 top-bottom 从上到下，还可以使用 TD 从上到下，BT 从下到上，RL 从右到左，LR 从左到右。

代码：

```mermaid
graph TB
    A[text]
    B(text)
    C([ABCD])
    D[(text)]
    E((meow!))
    F>text]
    G{text}
    H{{text}}
    I[/text/]
    J[\text\]

效果如下：

graph TB
A[text]
B(text)
C([ABCD])
D[(text)]
E((meow!))
F>text]
G{text}
H{{text}}
I[/text/]
J[\text\]

定义边

直接定义边的关系即可。可以使用不同的边样式，还可以为边添加文字。

最常用的边应该是 --> 。

代码：

``mermaid
graph TB
  A1 --> B1
  A2 --- B2
  A3 -- 描述 --- B3
  A4 -- 描述 --> B4
  A5 -.- B5
  A6 -.-> B6
  A7 -. 描述 .- B7
  A8 -. 描述 .-> B8
  A9 === B9
  A10 ==> B10
  A11 == 描述 === B11
  A12 == 描述 ==> B12

效果如下：

graph TB
A1 --> B1
A2 --- B2
A3 -- 描述 --- B3
A4 -- 描述 --> B4
A5 -.- B5
A6 -.-> B6
A7 -. 描述 .- B7
A8 -. 描述 .-> B8
A9 === B9
A10 ==> B10
A11 == 描述 === B11
A12 == 描述 ==> B12

---

参考资料：https://blog.csdn.net/qq_32708605/article/details/123801702

感谢非常清晰的教程