当前位置: 首页 > article >正文

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

插流程图快点

利用Mermaid Preview插件自带功能

如果你的VSCode安装了支持导出图片的Mermaid预览插件(如 Mermaid Markdown Syntax Highlighting 等),可以按以下步骤进行:

  1. 打开Mermaid代码文件:在VSCode中打开包含Mermaid代码的 .md(Markdown)文件。Mermaid代码通常会被包裹在三个反引号 ```mermaid 和 ` ````之间。例如:
A
B
C
  1. 打开预览窗口:一般可以通过右键点击编辑区域,选择“Open Mermaid Preview” 或者使用特定的快捷键(具体快捷键可能因插件配置而异)来打开Mermaid图表的预览窗口。
  2. 导出图片:在预览窗口中,通常会有一个导出按钮(可能是一个下载图标),点击该按钮。你可以选择导出的图片格式,如PNG、SVG等,然后选择保存的位置,完成图片的下载。

使用命令行工具结合插件

若上述方法不可行,还可以借助命令行工具 mmdc(Mermaid CLI)来导出图片,步骤如下:

  1. 安装Mermaid CLI:首先要确保你已经安装了Node.js,因为 mmdc 是基于Node.js的工具。打开终端,运行以下命令来全局安装Mermaid CLI:
npm install -g @mermaid-js/mermaid-cli
  1. 生成图片:在终端中,使用以下命令将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 + 3Command + Shift + 4 等),直接截取预览窗口中的Mermaid图表。不过这种方式得到的图片质量可能会受屏幕分辨率等因素影响,并且不够灵活。

下载个使用 Markdown Preview Enhanced 插件

在这里插入图片描述


http://www.kler.cn/a/555102.html

相关文章:

  • [Android] APK提取器(1.3.7)版本
  • 如何组织和管理JavaScript文件:最佳实践与策略
  • 泰山派RK3566移植QT,动鼠标时出现屏幕闪烁
  • #渗透测试#批量漏洞挖掘#畅捷通T+远程命令执行漏洞
  • 使用 Docker 部署 Flask 应用
  • DeepSeek 对低代码产品的影响:机遇、挑战与未来展望
  • css里flex+margin布局
  • 深度探索:DeepSeek与鸿蒙HarmonyOS应用开发的深度融合
  • 家庭相册私有化方案:Docker部署PhotoPrism与跨平台管理指南
  • java实现动态数组(二)
  • 论文阅读笔记:Tree Energy Loss: Towards Sparsely Annotated Semantic Segmentation
  • 10、k8s对外服务之ingress
  • postman传query一个数组类型的参数,并且数组里面只有一个值的时候
  • STM32 物联网智能家居 (六) OLED显示设备
  • 【HarmonyOS NEXT】获取正式应用签名证书的签名信息
  • 【python】网页批量转PDF
  • 基于图扑 HT 可视化技术打造智慧地下采矿可视化方案
  • 【Python爬虫(29)】爬虫数据生命线:质量评估与监控全解
  • Linux高并发服务器开发 第十九天(线程 进程)
  • Embedding方法:从Word2Vec到ltem2Vec