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

插流程图快点

利用Mermaid Preview插件自带功能

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

打开Mermaid代码文件：在VSCode中打开包含Mermaid代码的 .md（Markdown）文件。Mermaid代码通常会被包裹在三个反引号 ```mermaid 和 ` ````之间。例如： #mermaid-svg-MJ67diNJheFtThL4 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-MJ67diNJheFtThL4 .error-icon{fill:#552222;}#mermaid-svg-MJ67diNJheFtThL4 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-MJ67diNJheFtThL4 .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-MJ67diNJheFtThL4 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-MJ67diNJheFtThL4 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-MJ67diNJheFtThL4 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-MJ67diNJheFtThL4 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-MJ67diNJheFtThL4 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-MJ67diNJheFtThL4 .marker.cross{stroke:#333333;}#mermaid-svg-MJ67diNJheFtThL4 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-MJ67diNJheFtThL4 .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-MJ67diNJheFtThL4 .cluster-label text{fill:#333;}#mermaid-svg-MJ67diNJheFtThL4 .cluster-label span{color:#333;}#mermaid-svg-MJ67diNJheFtThL4 .label text,#mermaid-svg-MJ67diNJheFtThL4 span{fill:#333;color:#333;}#mermaid-svg-MJ67diNJheFtThL4 .node rect,#mermaid-svg-MJ67diNJheFtThL4 .node circle,#mermaid-svg-MJ67diNJheFtThL4 .node ellipse,#mermaid-svg-MJ67diNJheFtThL4 .node polygon,#mermaid-svg-MJ67diNJheFtThL4 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-MJ67diNJheFtThL4 .node .label{text-align:center;}#mermaid-svg-MJ67diNJheFtThL4 .node.clickable{cursor:pointer;}#mermaid-svg-MJ67diNJheFtThL4 .arrowheadPath{fill:#333333;}#mermaid-svg-MJ67diNJheFtThL4 .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-MJ67diNJheFtThL4 .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-MJ67diNJheFtThL4 .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-MJ67diNJheFtThL4 .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-MJ67diNJheFtThL4 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-MJ67diNJheFtThL4 .cluster text{fill:#333;}#mermaid-svg-MJ67diNJheFtThL4 .cluster span{color:#333;}#mermaid-svg-MJ67diNJheFtThL4 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-MJ67diNJheFtThL4 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} A B C 打开预览窗口：一般可以通过右键点击编辑区域，选择“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图表。不过这种方式得到的图片质量可能会受屏幕分辨率等因素影响，并且不够灵活。

下载个使用 Markdown Preview Enhanced 插件