为什么开发者都在用 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 等），可以按以下步骤进行：

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

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

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

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

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

下载个使用 Markdown Preview Enhanced 插件(推荐)

Chapter2 5分钟上手！Mermaid：写代码就能画专业流程图，时序图，甘特图全搞定

原文链接：https://dapenglee.blog.csdn.net/article/details/156142966

Chapter3 Mermaid使用简介

原文链接

Chapter4 vscode编写markdown文本，转换成pdf出现错误：“princexml” is required to be installed.

原文链接

原因分析：
电脑没有安装Prince软件

解决方案：

1. 安装Prince软件，进入https://www.princexml.com/download/下载自己电脑对应的安装包，我这里选择的是windows系统的安装包。

https://www.princexml.com/download/16/

按照提示进行安装即可，我选择的安装目录是F:\Program Files\Prince
2. 安装好之后，配置系统变量
在系统变量中，找到Path，点击新建

将Prince安装目录下的engine\bin对应的路径复制下来，新建到系统变量的Path路径下，我的路径是：
F:\Program Files\Prince\engine\bin