Show HN: Mermaid Chart VS Code 插件：在 Visual Studio Code 中使用 Mermaid.js 绘制图表

Show HN: Mermaid Chart VS Code Plugin: Mermaid.js Diagrams in Visual Studio Code

Source | HN Comments

该文章介绍了 Mermaid Chart VS Code 插件，它允许在 Visual Studio Code 中创建和编辑 Mermaid.js 图表。插件提供无需账户的本地编辑、语法高亮、实时预览、Markdown 集成等基础功能。登录后，可实现云同步、团队协作、可视化编辑、AI 辅助生成图表等高级功能。插件支持多种图表类型，适用于 DevOps、API 流程、微服务架构等场景，并提供 Git 版本控制支持。

Mermaid ▾ Syntax Release notes Guides ▾ Editor Plugins Handbook Blog Discord GitHub Dashboard Docs ▾ Explore Mermaid syntax User guides Plugins Blog Mermaid Release notes Mermaid Chart Dashboard Contact us Handbook

Show HN: Mermaid Chart VS Code 插件：在 Visual Studio Code 中创建和编辑 Mermaid.js 图表

2025 年 3 月 21 日 • 5 分钟

这个 Mermaid Chart VS Code 插件是一个强大的开发者图表工具，它将 Mermaid.js 图表功能直接带入你的 Visual Studio Code 环境。无论你是可视化软件架构、记录 API 流程、修复糟糕的文档，还是管理流程图和时序图，这个插件都能无缝集成到你的工作流程中。

Mermaid Chart VS Code 插件图表功能的主要特性

在 VS Code 中无需账户即可编辑 Mermaid.js 图表

无需注册，无需中断。你可以使用内置的 Mermaid Chart Editor 立即打开和编辑 .mmd 文件，无需任何帐户。这非常适合快速更新图表和低摩擦的工作流程。

自动文件识别和 Mermaid.js 语法高亮

该插件自动识别 VS Code 文件浏览器中的 .mmd 文件。你还可以获得原生的 Mermaid.js 语法高亮，使你的图表更易于阅读和编辑。语法支持可以明确流程结构并减少编辑错误。

具有平移和缩放功能的实时图表渲染

在 VS Code 中直接实时编辑和预览你的 Mermaid.js 图表。交互式的平移和缩放功能可在你工作时保持你的视图状态，为你提供流畅、不间断的编辑体验。

Markdown 中嵌入 Mermaid 图表

使用 Markdown？该插件会自动检测 .md 文件中的 Mermaid.js 图表，并提供一个编辑和查看它们的链接。这使得将视觉效果集成到文档中变得很容易，而无需切换工具。

用于协作开发的高级功能

当你准备好超越基础知识时，登录 Mermaid Chart 可以解锁更多为团队协作和大型项目量身定制的强大功能。

云集成和图表链接

登录以将本地 .mmd 文件链接到你的 Mermaid Chart 项目。每个图表都在其代码中获得一个引用，从而实现自动云同步。这允许团队通过基于浏览器的编辑器与非开发人员共享图表，从而消除了 VS Code 对协作的依赖。

在 VS Code 插件中连接你的图表

直接在代码中嵌入图表。一个 “View Diagram” 按钮会内联显示，让开发人员无需离开文件即可快速访问视觉效果。这非常适合在上下文中查看代码文档图表。

灵活的编辑：本地或可视化编辑器

你可以通过以下方式编辑图表：

在 VS Code 中本地编辑
在 Mermaid Chart 平台上通过可视化编辑器、白板或 Mermaid AI 助手编辑

这种灵活性同时支持视觉优先的用户和喜欢原始代码的用户。

离线编辑 + 基于 Git 的版本控制

使用 “Download Connected Diagram” 功能，你可以在离线工作的同时，保持图表与 Mermaid Chart 同步。这非常适合在版本控制存储库中管理图表的开发人员。

使用 AI 从代码生成图表

使用 AI 从你的源代码自动创建图表。只需启动一个 GitHub Copilot Chat 并提及 @mermaid-chart。 @mermaid-chart“为这些文件生成一个类图”“从此 API 调用流创建一个时序图” 链接你的相关文件，助手将生成一个 Mermaid 图表，即时预览它，甚至让你保存并在以后编辑它。 *注意：某些功能需要用户安装 GitHub Copilot 扩展才能访问 Github Copilot Chat 视图中的 AI 参与者 @mermaid-chart。

真实用例：以开发者为中心的图表

以下是开发人员如何在实际项目中使用 Mermaid Chart VS Code 插件：

1. DevOps 图表

使用清晰的流程图可视化 CI/CD 管道、基础设施层或像 Kubernetes 这样的容器编排系统。

2. 可视化 API 流程

使用时序图来记录服务如何通过 REST、GraphQL 或 gRPC 端点进行通信。

3. 记录微服务架构

以一种技术和非技术利益相关者都容易理解的方式显示系统边界、依赖关系和服务到服务的消息传递。

4. 改进内部文档

通过嵌入式图表增强你的内部维基或 README，使文档更具吸引力和可读性。

5. 白板软件设计

使用可视化编辑器或白板模式进行头脑风暴系统设计，然后转换为原始 Mermaid.js 代码进行改进和版本控制。

入门：几分钟内安装和使用

从 VS Code Marketplace 安装该插件。
打开一个 .mmd 或 .md 文件并开始编写 Mermaid.js 语法。
使用实时预览窗格立即查看图表更改。
登录 Mermaid Chart 以访问高级功能，如云同步、团队协作和可视化编辑器。

关键优势回顾

无需帐户 即可进行基本编辑
完整的语法高亮和文件识别
具有平移/缩放功能的实时图表渲染
Markdown 集成 用于嵌入式图表
云同步和协作选项
Git 友好的版本控制工作流程

常见问题解答：Mermaid Chart VS Code 插件

如何在 VS Code 中渲染 Mermaid.js 图表？

开发人员可以打开包含 Mermaid 语法的 .mmd 或 Markdown 文件。该插件在预览窗格中渲染图表。

我可以在没有 Mermaid Chart 帐户的情况下使用此插件吗？

可以。基本的代码编辑、语法高亮和预览无需帐户即可工作。云集成和 AI 等高级功能需要登录。

它是否支持流程图、甘特图或时序图？

是的。Mermaid Chart 的 VS Code 插件支持所有标准的 Mermaid.js 图表类型，包括流程图、甘特图、时序图、类图等。

我可以与非开发人员协作吗？

是的。当连接到云时，可以通过基于浏览器的工具共享和访问图表，从而使不熟悉语法的非开发人员可以轻松地使用可视化编辑器或白板查看和贡献。

它是否适合记录软件架构？

绝对适合。该插件广泛用于使用 AWS 和 Azure 图标进行软件架构可视化，帮助团队清晰地映射系统和依赖项。

图表可以在 Git 中进行版本控制吗？

是的。本地保存的图表可以在 Git 中进行跟踪，并在需要时与 Mermaid Chart 的云功能同步。