Skip to content
| Marketplace
Sign in
Visual Studio Code>Programming Languages>Mermaid Live PreviewNew to Visual Studio Code? Get it now.
Mermaid Live Preview

Mermaid Live Preview

ruk

|
353 installs
| (1) | Free
A VS Code extension for real-time preview of Mermaid diagrams (.mmd files). Enhance your workflow with instant visualization of flowcharts, sequence diagrams, and more.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

MMD Live Preview

MMD Live Preview 是一个 Visual Studio Code 扩展,用于实时预览 Mermaid 图表(.mmd 文件)。它可以直接在 VS Code 中即时可视化流程图、时序图、甘特图等,提升你的工作效率。

功能

  • 实时预览:在编辑 .mmd 文件时自动更新预览。
  • 支持 Mermaid 语法:完全支持 Mermaid 的流程图、时序图、甘特图等语法。
  • 并排视图:在编辑器旁边打开预览面板。
  • 主题支持:自动适配 VS Code 的浅色和深色主题。

安装

  1. 打开 VS Code 的扩展视图(Ctrl+Shift+X 或 Mac 上的 Cmd+Shift+X)。
  2. 搜索 Mermaid Live Preview。
  3. 点击 Install 安装。

使用方法

  1. 在 VS Code 中打开一个 .mmd 文件。
  2. 右键点击编辑器,选择 Mermaid Live Preview。
  3. 或者使用命令面板(Ctrl+Shift+P 或 Mac 上的 Cmd+Shift+P),搜索 Mermaid Live Preview。
  4. 选择Mermaid数据右击选择Mermaid Live Preview (Selection)

系统要求

  • Visual Studio Code 版本需为 1.98.0 或更高。
  • Mermaid 图表需写在 .mmd 文件中。

已知问题

  • 大型图表可能需要更长时间渲染。
  • Mermaid 语法错误可能不会在预览中高亮显示。

贡献

欢迎贡献代码!请按照以下步骤操作:

  1. Fork 此仓库。
  2. 为你的功能或修复创建一个新分支。
  3. 提交 Pull Request。

许可证

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft