使用Mermaid.js语法配合VSCode插件可在编辑器内高效绘制流程图。安装Mermaid Preview或Markdown Preview Mermaid Support插件后，于.md文件中编写Mermaid代码，通过Ctrl+Shift+V预览图表。采用graph TD等语法定义节点与流向，支持条件分支与多种布局方向。图表可嵌入文档实现协作，团队成员无需额外工具即可查看修改。支持右键导出图片或使用在线编辑器导出PNG/SVG。文本驱动方式使流程图可版本化、易维护，实现设计、记录、分享闭环。
在 VSCode 中直接绘制流程图，能极大提升文档编写和架构设计的效率。借助插件和文本驱动的绘图语法，你不需要离开编辑器就能完成图表创建与维护。核心方案是使用 Mermaid.js 语法配合 VSCode 插件实现即时预览和导出。
启用 Mermaid 支持：安装关键插件
VSCode 本身不自带图形渲染能力，需通过扩展支持 Mermaid 流程图。推荐安装以下插件：
- Mermaid Preview：提供独立预览窗口，支持实时刷新
- Markdown Preview Mermaid Support：增强默认 Markdown 预览，自动渲染 Mermaid 代码块
安装后，在 .md 文件中写入 Mermaid 代码即可看到流程图预览。快捷键 Ctrl+Shift+V 打开 Markdown 预览，图表会自动渲染。
编写流程图：掌握基本 Mermaid 语法
Mermaid 使用简洁的文本语法描述图形结构。常见流程图类型为 graph，方向可设为 TB（从上到下）、LR（从左到右）等。
示例代码：
```mermaid
graph TD
A[开始] --> B{用户登录?}
B -->|是| C[进入主页]
B -->|否| D[跳转登录页]
C --> E[结束]
D --> C
```
这段代码会在预览中生成一个带判断分支的流程图。节点用方括号或圆角括号表示，连接线用箭头 -->，条件文字放在竖线 | 之间。
高效协作：嵌入文档与导出图像
流程图常用于技术文档或 README，Mermaid 让图表与文本共存。将代码块写入 Markdown，团队成员无需额外工具即可查看和修改。
导出图像的方法有两种：
- 右键预览窗口，选择“另存为图片”（部分插件支持）
- 使用在线 Mermaid Live Editor，粘贴代码并导出 PNG/SVG
确保代码格式清晰，添加注释说明复杂逻辑，便于后续维护。
基本上就这些。熟练后，你可以在不切换应用的情况下完成设计、记录和分享，真正实现编辑器内闭环绘图。关键是坚持用文本定义图形，让流程图像代码一样可版本化、可复用。
