【论文技巧】Mermaid VSCode插件制作流程图保存方法
插流程图快点
利用Mermaid Preview插件自带功能
如果你的VSCode安装了支持导出图片的Mermaid预览插件(如 Mermaid Markdown Syntax Highlighting
等),可以按以下步骤进行:
- 打开Mermaid代码文件:在VSCode中打开包含Mermaid代码的
.md
(Markdown)文件。Mermaid代码通常会被包裹在三个反引号```mermaid
和 ` ````之间。例如:
- 打开预览窗口:一般可以通过右键点击编辑区域,选择“Open Mermaid Preview” 或者使用特定的快捷键(具体快捷键可能因插件配置而异)来打开Mermaid图表的预览窗口。
- 导出图片:在预览窗口中,通常会有一个导出按钮(可能是一个下载图标),点击该按钮。你可以选择导出的图片格式,如PNG、SVG等,然后选择保存的位置,完成图片的下载。
使用命令行工具结合插件
若上述方法不可行,还可以借助命令行工具 mmdc
(Mermaid CLI)来导出图片,步骤如下:
- 安装Mermaid CLI:首先要确保你已经安装了Node.js,因为
mmdc
是基于Node.js的工具。打开终端,运行以下命令来全局安装Mermaid CLI:
npm install -g @mermaid-js/mermaid-cli
- 生成图片:在终端中,使用以下命令将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图表。不过这种方式得到的图片质量可能会受屏幕分辨率等因素影响,并且不够灵活。