首先得明确：你用的VS Code Markdown Preview v1.22.0本身没有内置的自动编号Mermaid图并生成可引用标题的功能，但我们有几个实用的方案可以满足你的需求——不用导出PNG，也能尽量减少手动硬编码图号的麻烦：

---

方案1：HTML元素+锚点引用（最直接，适配原生预览） #

你可以用HTML的<figure>和<figcaption>标签包裹Mermaid代码块，给标题加上编号和锚点ID，这样就能像引用图片一样跳转和引用图号。虽然需要手动维护编号，但可以用VS Code的用户片段来简化操作，避免重复输入。

示例代码：

<figure id="fig-sra-flowchart">
  ```mermaid
  flowchart LR
    A[Start] --> B[Process SRA Data]
    B --> C[Generate Report]
    C --> D[End]

``` 引用的时候直接用Markdown的锚点语法： > As shown in [Fig. 3](#fig-sra-flowchart), the SRA workflow follows a linear processing path.

如果觉得手动输入HTML太麻烦，你可以在VS Code里创建一个用户代码片段：

1. 打开命令面板（Ctrl+Shift+P），输入「Configure User Snippets」
2. 选择「markdown.json」，添加如下片段：

"Numbered Mermaid Figure": {
  "prefix": "mermaid-fig",
  "body": [
    "<figure id=\"fig-${1:title-slug}\">",
    "  ```mermaid",
    "  ${2:flowchart LR}",
    "  ```",
    "  <figcaption>Figure ${3:1}. ${4:Figure Title}</figcaption>",
    "</figure>"
  ],
  "description": "Insert a numbered Mermaid figure with caption and anchor"
}

之后输入mermaid-fig就能快速插入模板，只需要替换编号、标题和Mermaid代码即可。

---

方案2：用增强插件实现自动编号（更自动化） #

如果可以安装额外的VS Code插件，Markdown All in One是个不错的选择——它支持自动为图、表生成递增编号，还能自动处理引用。

使用步骤：

1. 安装Markdown All in One插件
2. 在设置中启用「Auto Numbering」相关选项（搜索「Markdown All in One: Enable Auto Numbering」）
3. 用特定的语法标记Mermaid图的标题，比如：

flowchart LR
  A[Start] --> B[Process]
  B --> C[End]

Figure: SRA flowchart
插件会自动把这个标题转换成带编号的格式，比如「Figure 3. SRA flowchart」，并且你可以用Fig. 3直接引用（插件会自动处理锚点）。

不过要注意：这个插件和原生Markdown Preview兼容，但需要确保你的预览模式使用的是插件提供的渲染逻辑。

---

方案3：预处理脚本自动编号（完全解放手动） #

如果你的文档非常长，手动维护编号容易出错，可以写一个简单的脚本（比如Python）来自动遍历Markdown文件，给所有Mermaid图添加编号和锚点。

比如脚本逻辑：

1. 读取Markdown文件内容
2. 识别所有的```mermaid代码块
3. 给每个代码块包裹<figure>标签，自动生成递增的图号和锚点ID（比如用标题的slug作为ID）
4. 输出处理后的Markdown文件

这样你只需要在Mermaid代码块下面写无编号的标题（比如*SRA flowchart*），脚本会自动转换成带编号的可引用标题，完全不用手动管理编号。

---

总结一下：如果只想用原生的Markdown Preview v1.22.0，方案1最适合；如果能安装插件，方案2更省心；文档特别长的话，方案3能彻底解决编号维护的问题。

备注：内容来源于stack exchange，提问作者Ben Hocking