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

感谢非常清晰的教程 🙏🏻