在VSCode中绘制流程图：Mermaid.js集成使用指南

安装Mermaid插件后可在VSCode中编写并实时预览流程图，需使用`mermaid代码块并在Markdown中右键预览，导出图片需借助截图或在线工具。

VSCode 中可以通过集成 Mermaid.js 来轻松绘制流程图、序列图、甘特图等。虽然 VSCode 本身不原生支持 Mermaid 渲染，但结合插件可以实现编写与实时预览功能。以下是具体使用方法。

安装 Mermaid 支持插件

要在 VSCode 中编写并预览 Mermaid 图，需安装支持该语法的扩展：

• Markdown Preview Mermaid Support：为 Markdown 文件中的 Mermaid 代码块提供预览支持。
• Mermaid Diagrams：独立预览 .mmd 文件或代码片段。

打开 VSCode 扩展市场（Ctrl+Shift+X），搜索 “Mermaid”，选择下载量高且维护活跃的插件进行安装。

在 Markdown 中编写流程图

Mermaid 流程图通常嵌入在 Markdown 文件中。创建一个 .md 文件，使用如下语法：

```mermaid
graph TD
    A[开始] --> B{条件判断}
    B -->|是| C[执行操作]
    B -->|否| D[结束]
    C --> D
```

保存文件后，右键点击编辑器选择 “Open Preview” 或使用快捷键 Ctrl+Shift+V，在预览窗口中即可看到渲染后的流程图。

绘蛙-多图成片

绘蛙新推出的AI图生视频工具

48

查看详情

启用实时预览与错误提示

部分插件支持自动刷新预览。确保设置中启用了实时更新功能。若图表未显示：

• 检查 Mermaid 代码是否以 ```mermaid 开头，而非普通 ```。
• 确认插件已正确安装并启用。
• 查看 VSCode 控制台是否有渲染错误（帮助 → 开发者工具）。

某些插件还提供语法高亮和结构校验，有助于快速定位拼写或格式问题。

导出图表为图片

目前 VSCode 预览不直接支持导出图像。可采用以下方式保存图表：

• 截图工具手动截取预览内容。
• 将代码复制到在线 Mermaid Live Editor（如 mermaid.live），导出为 PNG 或 SVG。
• 使用支持导出的 IDE 插件或脚本自动化渲染。

基本上就这些。配置一次后，就能在 VSCode 里流畅地写文档和画图了。Mermaid 简洁的语法配合插件支持，让技术文档中的图示变得更高效。不复杂但容易忽略细节，比如代码块标识写错就白写了。

以上就是在VSCode中绘制流程图：Mermaid.js集成使用指南的详细内容，更多请关注php中文网其它相关文章！