☰
vscode的md文件显示memaid图
2026/10/15 6:04:35 网站建设 项目流程

VSCode 支持在 Markdown 中显示 Mermaid 图,主要有两种方式:

🚀 方式一:使用内置功能 (VSCode ≥ 1.75)

新版本的 VSCode 已内置 Mermaid 支持,无需安装额外插件。

  1. 确认版本:确保您的 VSCode 版本 ≥ 1.75。
  2. 编写代码块:在.md文件中使用mermaid语言标识符。
    graph TD A[开始] --> B{判断} B -->|是| C[执行操作] B -->|否| D[结束] C --> D
  3. 预览:按Ctrl+Shift+V打开预览即可看到渲染后的图表。

🧩 方式二:安装扩展 (适用于旧版或增强需求)

如果您的 VSCode 版本较旧,或需要更丰富的功能,可以安装以下扩展。

Markdown Preview Enhanced

这是一个功能强大的第三方预览插件,除了 Mermaid,还支持 LaTeX 公式、导出 PDF/HTML 等。

  • 安装:在扩展市场搜索Markdown Preview Enhanced并安装。
  • 使用:在.md文件中编写 Mermaid 代码块,右键选择 “Markdown Preview Enhanced: Open Preview to the Side” 即可预览。
  • 导出:支持将包含 Mermaid 图的文档直接导出为 PDF 或 HTML。

但是要注意,使用扩展的时候要把memaid弄成md格式。

```mermaid // 你的 Mermaid 图表代码写在这里 ```

⚠️ 注意:是三个反引号 ```开头和结尾,第二行紧接mermaid关键字,然后换行写具体图表定义。

需要专业的网站建设服务?

联系我们获取免费的网站建设咨询和方案报价,让我们帮助您实现业务目标

立即咨询