用VSCode画时序图

前言

我不喜欢用图形编辑器画图，由于经常陷入调整格式的深渊。因而找到了这个用代码来画图的方法，发现极其好用。

配置

• 下载 Visual Studio Code

• 下载插件

  

• 新建文件扩展名.seqdiag

• 设置展现风格sequencediagrams.diagram.style，可选手绘or正常

• 启动实时预览：cmd + shift + p 调出命令模式，执行Show Sequence Diagram Preview

语法

• 注释（不可预览，也不会对预览形成影响）

# comment
复制代码

• 标题

Title: This is a title
复制代码

• 同步调用

A->B: Hello
复制代码

• 异步调用

A->>B
复制代码

• 回复消息

A-->B: Hello
复制代码

• 笔记

Note left of A: Left note
Note right of A: right note
Note over A: over note
Note over A,B: over both A and B
复制代码

• 从新排序，提早声明顺序，会覆盖后续语法的顺序

participant B
participant A
A->B: Hello
复制代码

连接

• 语法官网：js-sequence-diagrams

欢迎关注个人公众号SlowCoding