【论文技巧】Mermaid VSCode插件制作流程图保存方法

插流程图快点

利用Mermaid Preview插件自带功能

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

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

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

使用命令行工具结合插件

若上述方法不可行，还可以借助命令行工具 mmdc（Mermaid CLI）来导出图片，步骤如下：

1. 安装Mermaid CLI：首先要确保你已经安装了Node.js，因为 mmdc 是基于Node.js的工具。打开终端，运行以下命令来全局安装Mermaid CLI：

npm install -g @mermaid-js/mermaid-cli

2. 生成图片：在终端中，使用以下命令将Mermaid代码文件转换为图片。假设你的Mermaid代码文件名为 example.mmd，你可以使用以下命令将其转换为PNG图片：

mmdc -i example.mmd -o example.png

其中，-i 后面跟的是输入的Mermaid代码文件路径，-o 后面跟的是输出的图片文件路径和文件名。
3. 获取Mermaid代码文件：如果你在VSCode中编写了Mermaid代码，可以将其复制到一个新的文本文件中，将文件扩展名改为 .mmd 或 .mermaid，然后再使用上述命令进行转换。

截图方式

如果以上方法都不适用，还可以使用系统自带的截图工具（如Windows的截图快捷键 Win + Shift + S，Mac的 Command + Shift + 3 或 Command + Shift + 4 等），直接截取预览窗口中的Mermaid图表。不过这种方式得到的图片质量可能会受屏幕分辨率等因素影响，并且不够灵活。

下载个使用 Markdown Preview Enhanced 插件