Typora 中 Mermaid 的使用

发表于 本文字数： 426 阅读时长 ≈ 2 分钟

Mermaid 可以在 Markdown 中用文本和代码的方式创建可视化图表。包括但不限于：流程图（Flowchart）、时序图（Sequence Diagram）、类图（Class Diagram）、ER 图（Entity-Relationship Diagram）等。

优点

  • 使用文本和代码的方式绘图，无需关心元素排布，JS 引擎会自动渲染；
  • 极客属性；
  • 广泛。有 md 文件就可以绘图；

缺点

  • 写图需要配合文档，曲线高；
  • 不能自定义元素排布；

如何开始

  1. 明确是否使用 mermaid 写图；
  2. 决定图表类型，打开 mermaid tutorials 对应图表文档；
  3. 复制一份官方图表模板；
  4. 查看官网的语法样式，选择自己需要的进行绘制；
DATE CHANGELOG
2023年5月1日 初始化
2023年5月16日 修改标题

流程图

文档

here

声明和方向

1
flowchart LR

节点形状

here

节点连接

here

示例

flowchart TD
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D[Laptop]
    C -->|Two| E[iPhone]
    C -->|Three| F[fa:fa-car Car]

时序图

文档

here

声明

1
sequenceDiagram

参与者

1
participant

消息连接

here

示例

sequenceDiagram
    Alice->>+John: Hello John, how are you?
    Alice->>+John: John, can you hear me?
    John-->>-Alice: Hi Alice, I can hear you!
    John-->>-Alice: I feel great!

类图

文档

here

声明

1
classDiagram

类

1
2
3
4
5
6
class Animal {
    +int age
    +String gender
    +isMammal()
    +mate()
}

接口和抽象类

1
2
3
4
5
6
7
8
class Runnable {
	<<interface>>
	run() void
}

class BaseEntity {
	<<abstract>>
}

关系

here

示例

classDiagram
	class Animal {
		+int age
		+String gender
		+isMammal()
		+mate()
	}
    class Duck{
      +String beakColor
      +swim()
      +quack()
    }
    class Fish{
      -int sizeInFeet
      -canEat()
    }
    class Zebra{
      +bool is_wild
      +run()
    }
    Animal <|-- Duck
    Animal <|-- Fish
    Animal <|-- Zebra

ER 图

文档

here

示例

erDiagram
    CUSTOMER }|..|{ DELIVERY-ADDRESS : has
    CUSTOMER ||--o{ ORDER : places
    CUSTOMER ||--o{ INVOICE : "liable for"
    DELIVERY-ADDRESS ||--o{ ORDER : receives
    INVOICE ||--|{ ORDER : covers
    ORDER ||--|{ ORDER-ITEM : includes
    PRODUCT-CATEGORY ||--|{ PRODUCT : contains
    PRODUCT ||--o{ ORDER-ITEM : "ordered in"

参考

mermaid

tutorials

live editor