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

【论文技巧】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 插件

在这里插入图片描述

相关文章:

  • POI优化Excel录入
  • LangFlow和LangChain有什么区别
  • 大数据SQL调优专题——Flink执行原理
  • Web3 通识
  • 解锁外观模式:Java 编程中的优雅架构之道
  • TortoiseSVN\bin下的没有svn.exe的解决问题
  • Linux的基础指令和环境部署,项目部署实战(下)
  • pyinstaller打包报错:INTEL MKL ERROR: 找不到指定的模块。 mkl_intel_thread.dll.
  • linux 安装启动zookeeper全过程及遇到的坑
  • C++ 模拟真人鼠标轨迹算法 - 防止游戏检测
  • 启元世界(Inspir.ai)技术浅析(七):AI Beings 平台
  • Nginx下proxy_redirect的三种配置方式
  • 【系列教程】Python第四课:条件判断 | 让程序学会思考的秘密
  • UE求职Demo开发日志#33、34 优化#2 删没用的场景和优化UI
  • 浅谈模组-相机鬼像
  • blender笔记2
  • Leetcode 3453. Separate Squares I
  • MISRA C vs CERT C 是两种广泛使用的 C 语言编码规范对比介绍
  • RabbitMQ服务异步通信
  • 修改时无条件,可以自定义id条件(通过查询)
  • 美政府称不再对哈佛大学提供联邦资助
  • “注胶肉”或已泛滥?这几种肉,再爱吃也要管住嘴
  • 五一假期上海境外来沪消费4.55亿元,同比增长211.6%
  • 普京称俄中关系对维护世界稳定具有战略意义
  • “五一”看什么?这里有一份申城视听指南
  • 美国经济萎缩意味着什么?关税政策如何反噬经济?