Mermaid VSCode插件制作流程图保存方法

[为什么开发者都在用 Mermaid？](#为什么开发者都在用 Mermaid？)
[Chapter1 Mermaid VSCode插件制作流程图保存方法](#Chapter1 Mermaid VSCode插件制作流程图保存方法)
- [利用Mermaid Preview插件自带功能](#利用Mermaid Preview插件自带功能)
- [下载个使用 Markdown Preview Enhanced 插件(推荐)](#下载个使用 Markdown Preview Enhanced 插件(推荐))
[Chapter2 5分钟上手！Mermaid：写代码就能画专业流程图，时序图，甘特图全搞定](#Chapter2 5分钟上手！Mermaid：写代码就能画专业流程图，时序图，甘特图全搞定)
[Chapter3 Mermaid使用简介](#Chapter3 Mermaid使用简介)
[Chapter4 vscode编写markdown文本，转换成pdf出现错误："princexml" is required to be installed.](#Chapter4 vscode编写markdown文本，转换成pdf出现错误：“princexml” is required to be installed.)

为什么开发者都在用 Mermaid？

在写文档时，最痛苦的往往不是初始的构思，而是后期无休止的修改。

版本管理友好： 纯文本格式，可以和代码一起存入 Git。当逻辑变更时，Diff 对比清晰可见，不再是一堆二进制图片的黑盒。
维护成本极低： 无需手动拖拽对齐，无需纠结像素级的间距。改几行代码，图形自动重排。
跨平台通用： Notion、GitHub、Obsidian、VS Code 等主流工具原生支持，一次编写，到处渲染。
专注逻辑本身： 让开发者把精力放在业务流向，而不是图形的填充颜色、线条粗细和箭头方向。

Chapter1 Mermaid VSCode插件制作流程图保存方法

原文链接：https://blog.csdn.net/qq_41767061/article/details/145702274

利用Mermaid Preview插件自带功能

如果你的VSCode安装了支持导出图片的Mermaid预览插件（如 Mermaid Markdown Syntax Highlighting 等），可以按以下步骤进行：

打开Mermaid代码文件：在VSCode中打开包含Mermaid代码的 .md（Markdown）文件。Mermaid代码通常会被包裹在三个反引号 ```mermaid 和 ````（尾部也是三个反引号）之间。例如：

bash 复制代码

#```mermaid
开头：三个反引号，后面跟一个mermaid

#```
结尾：三个反引号

04/12 04/19 04/26 05/03 需求调研与收集需求文档编写需求评审与确认架构设计数据库设计模块接口设计用户管理模块财务记账模块权限控制模块报表统计模块单元测试系统集成集成测试系统测试用户验收测试文档整理系统部署用户培训需求分析系统设计开发实现测试验收部署上线财务软件系统开发甘特图

javascript 复制代码

gantt
    title 财务软件系统开发甘特图
    dateFormat  YYYY-MM-DD
    axisFormat  %m/%d
    tickInterval 1week
    
    section 需求分析
    需求调研与收集   :a1, 2026-04-08, 4d
    需求文档编写     :a2, after a1, 3d
    需求评审与确认   :a3, after a2, 1d
    
    section 系统设计
    架构设计       :b1, after a3, 2d
    数据库设计     :b2, after a3, 3d
    模块接口设计   :b3, after b1, 2d
    
    section 开发实现
    用户管理模块     :c1, after b2, 3d
    财务记账模块     :c2, after b2, 4d
    报表统计模块     :c3, after c1, 3d
    权限控制模块     :c4, after b3, 3d
    系统集成         :c5, after c2 c3, 2d
    
    section 测试验收
    单元测试       :d1, after c1, 5d
    集成测试       :d2, after c5, 3d
    系统测试       :d3, after d2, 3d
    用户验收测试   :d4, after d3, 2d
    
    section 部署上线
    文档整理       :e1, after d4, 2d
    系统部署       :e2, after d4, 2d
    用户培训       :e3, after e1, 2d

打开预览窗口：一般可以通过右键点击编辑区域，选择"Open Mermaid Preview" 或者使用特定的快捷键（具体快捷键可能因插件配置而异）来打开Mermaid图表的预览窗口。
导出图片：在预览窗口中，通常会有一个导出按钮（可能是一个下载图标），点击该按钮。你可以选择导出的图片格式，如PNG、SVG等，然后选择保存的位置，完成图片的下载。