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

感谢非常清晰的教程 🙏🏻