Mermaid在线绘图工具

前言

刚给博客加上了 Mermaid 插件，测试一下 mermaid 功能是否正常。Mermaid是一种用纯文本代码绘制流程图的工具。只需在 Markdown 中写几行语法，即可生成漂亮、可维护的图。

Mermaid可以生成各种结构化图表，包括：

1. 流程图 2. 时序图 3. 类图 4. 状态图 5. 实体关系图 6. 用户旅程图 7. 甘特图 8. 饼图 9. 象限图 10. 需求图 等

使用方法

1
2
3
4
5
6
7
8
9
10
11

` ` `mermaid （渲染有bug，所以加了空格）
sequenceDiagram
    participant U as 用户
    participant B as 浏览器
    participant S as 服务端
    U->>B: 输入账号密码
    B->>S: 发送登录请求
    S->>S: 校验
    S-->>B: Token
    B-->>U: 登录成功
` ` `

sequenceDiagram
    participant U as 用户
    participant B as 浏览器
    participant S as 服务端
    U->>B: 输入账号密码
    B->>S: 发送登录请求
    S->>S: 校验
    S-->>B: Token
    B-->>U: 登录成功

在线使用

在线绘图工具

测试

graph LR
    A[B] -->|a| C --> D((a)) --> E{e} --> F[[1]] 
    subgraph LR AAAA
        O---P -.->W==>V
    end

参考

1. https://www.xhhao.com/archives/n8uk2nI8