使用VS Code通过Markdown语法快速画流程图时序图等

时间:2025-04-02 07:50:42

1、安装VS Code

2、通过扩展管理器,安装必要Markdown插件:

      Markdown Preview Enhanced

      Markdown All in One(可选)

3、安装画图引擎

      Markdown Preview Mermaid Support

4、流程图示例

      4.1、新建一个MD文件

      4.2、输入代码

```mermaid
graph TD;
A-->B;
A-->X;
A-->C;
B-->D;
C-->D;
```

       4.3、按快捷键Ctrl + KV,或者右键选择“MPE:XXXXXX"

       4.4、在保侧边栏预览流程图效果

5、时序图范例,代码如下(其他与流程图一样):

```mermaid
sequenceDiagram
    participant 企业
    participant 下游
    企业->>移动: 调度
    loop 心跳检测
        移动->>移动: SDK
    end
    Note right of 移动: 详见文档 <br/>资料
    移动-->>企业: 接单
    移动->>下游: 推送
    下游-->>移动: 流程结束
```