typora绘制时序图

发表于 | 分类于

typora绘制类图

在Typora中，可以使用Markdown扩展语法Mermaid来创建时序图。

Mermaid是一个基于JavaScript的图表和图形生成库，可以用于生成流程图、时序图、甘特图等。

右键–>【插入】–>【代码块】

代码块右下角类型输入“mermaid”

【语法】->> 代表实线箭头，–>> 则代表虚线。

【示例】代码块内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
sequenceDiagram
    participant Client
    participant KongAPIGateway
    participant BackendServer1
    participant BackendServer2

    Client ->> KongAPIGateway: 发送TCP请求
    KongAPIGateway ->> BackendServer1: 转发TCP请求
    BackendServer1 -->> KongAPIGateway: 返回TCP响应
    KongAPIGateway -->> Client: 将TCP响应返回给客户端

    alt 其他后端服务器
        KongAPIGateway ->> BackendServer2: 转发TCP请求
        BackendServer2 -->> KongAPIGateway: 返回TCP响应
        KongAPIGateway -->> Client: 将TCP响应返回给客户端
    end

输出时序图如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
sequenceDiagram
    participant Client
    participant KongAPIGateway
    participant BackendServer1
    participant BackendServer2

    Client ->> KongAPIGateway: 发送TCP请求
    KongAPIGateway ->> BackendServer1: 转发TCP请求
    BackendServer1 -->> KongAPIGateway: 返回TCP响应
    KongAPIGateway -->> Client: 将TCP响应返回给客户端

    alt 后端服务器
        KongAPIGateway ->> BackendServer2: 转发TCP请求
        BackendServer2 -->> KongAPIGateway: 返回TCP响应
        KongAPIGateway -->> Client: 将TCP响应返回给客户端
    else 其他情况
         BackendServer2 -->> Client: 其他情况的操作
    end

【示例2】使用”alt”, “else” 和 “end”关键字创建条件分支

1
2
3
4
5
6
7
8
9
10
sequenceDiagram
    participant A as Alice
    participant B as Bob
    alt is Alice happy?
        A->>B: Hello Bob, how are you?
        B->>A: Very well, thank you!
    else is Alice sad?
        A->>B: Hi Bob...
        B->>A: What's wrong Alice?
    end
1
2
3
4
5
6
7
8
9
10
sequenceDiagram
    participant A as Alice
    participant B as Bob
    alt is Alice happy?
        A->>B: Hello Bob, how are you?
        B->>A: Very well, thank you!
    else is Alice sad?
        A->>B: Hi Bob...
        B->>A: What's wrong Alice?
    end

在这个例子中，”Alice”和”Bob”是参与者，”alt”和”else”关键字用于创建条件分支（如果Alice快乐，她会这样说，否则如果她伤心，她会那样说）。”end”关键字用于指示条件分支的结束。

请注意，需要在Typora的设置中开启Mermaid支持才能看到时序图。

参考：使用typora生成时序图-阿里云开发者社区 (aliyun.com)

​