在 Visual Studio Code 中创建和编辑 Mermaid.js 图表。
Mermaid Chart VS Code 插件是一款功能强大的开发人员图表工具，可将 Mermaid.js 图表直接带入您的 Visual Studio Code 环境。无论您是可视化软件架构、记录 API 流程、修复不良文档，还是管理流程图和序列图，此插件都可以无缝集成到您的工作流程中。
Mermaid Chart VS Code 图表插件的主要功能
1、无需账户即可在 VS Code 中编辑 Mermaid.js 图表
无需注册，不会中断。您可以.mmd使用内置的 Mermaid Chart Editor 立即打开和编辑文件，无需帐户。这对于快速更新图表和低摩擦工作流程来说是理想的选择。
2、自动文件识别和 Mermaid.js 语法高亮
该插件可.mmd在 VS Code 文件资源管理器中自动识别文件。您还可以获得原生 Mermaid.js 语法高亮功能，让您的图表更易于阅读和编辑。语法支持可澄清流程结构并减少编辑错误。
3、具有平移和缩放功能的实时图表渲染
直接在 VS Code 中实时编辑和预览您的 Mermaid.js 图表。交互式平移和缩放功能可在您工作时保持您的视图状态，为您提供流畅、不间断的编辑体验。
4、Markdown 中嵌入图
使用 Markdown？该插件会自动检测 .md 文件中的 Mermaid.js 图表，并提供编辑和查看它们的链接。这样，您无需切换工具即可轻松将视觉效果集成到您的文档中。
先进的协作开发能力
当您准备超越基础功能时，登录 Mermaid Chart 即可解锁专为团队协作和大型项目量身定制的更强大的功能。
1、云集成和图表链接
登录后，将本地.mmd文件链接到您的 Mermaid Chart 项目。每个图表在其代码中都会有一个引用，从而实现自动云同步。这样，团队就可以通过基于浏览器的编辑器与非开发人员共享图表，从而消除协作对 VS Code 的依赖。
2、在 VS Code 插件中连接你的图表
将图表直接嵌入代码中。内联显示“查看图表”按钮，让开发人员无需离开文件即可快速访问视觉效果。非常适合在上下文中查看代码文档图表。
3、灵活编辑：本地或可视化编辑器
您可以通过以下方式编辑图表：
- 在 VS Code 本地运行
- 在 Mermaid Chart 平台上通过可视化编辑器、白板或 Mermaid AI 助手
离线编辑 + 基于 Git 的版本控制
借助“下载连接图”功能，您可以离线工作，同时将图表同步到 Mermaid Chart。这对于在版本控制存储库中管理图表的开发人员来说非常完美。
1、使用 AI 根据代码生成图表
使用 AI 自动从源代码创建图表。只需启动 GitHub Copilot 聊天并提及 @mermaid-chart 即可。
@mermaid-chart“为这些文件生成类图”“根据此 API 调用流创建序列图”
链接您的相关文件，助手将生成美人鱼图表，立即预览，甚至允许您稍后保存和编辑。
真实用例：以开发人员为中心的图表
以下是开发人员在实际项目中使用 Mermaid Chart VS Code 插件的方式：
1. DevOps 图表
通过清晰的流程图可视化 CI/CD 管道、基础设施层或 Kubernetes 等容器编排系统。
2. 可视化 API 流程
使用序列图来记录服务如何通过 REST、GraphQL 或 gRPC 端点进行通信。
3. 记录微服务架构
以技术和非技术利益相关者都易于理解的方式显示系统边界、依赖关系和服务到服务的消息传递。
4. 改进内部文档
使用嵌入图表增强您的内部 wiki 或 README，使文档更具吸引力和可读性。
5.白板软件设计
使用可视化编辑器或白板模式集思广益系统设计，然后过渡到原始 Mermaid.js 代码进行细化和版本控制。
入门：几分钟内即可安装并使用
- 从VS Code 市场安装插件。
- 打开.mmd或.md文件并开始编写 Mermaid.js 语法。
- 使用实时预览窗格立即查看图表变化。
- 登录 Mermaid Chart 以访问云同步、团队协作和可视化编辑器等高级功能。
常见问题解答：Mermaid Chart VS Code 插件
如何在 VS Code 中渲染 Mermaid.js 图表？
开发人员可以打开.mmd包含 Mermaid 语法的 或 Markdown 文件。该插件会在预览窗格中呈现图表。
我可以在没有 Mermaid Chart 帐户的情况下使用这个插件吗？
是的。基本代码编辑、语法高亮和预览无需帐户即可使用。云集成和 AI 等高级功能需要登录。
它是否支持流程图、甘特图或序列图？
是的。Mermaid Chart 的 VS Code 插件支持所有标准 Mermaid.js 图表类型，包括流程图、甘特图、序列图、类图等。
我可以与非开发人员合作吗？
是的。连接到云后，可以通过基于浏览器的工具共享和访问图表，这样非开发人员（如果他们不熟悉语法）就可以轻松使用可视化编辑器或白板查看和贡献。
它适合记录软件架构吗？
当然。该插件广泛用于通过 AWS 和 Azure 图标进行软件架构可视化，帮助团队清晰地映射系统和依赖关系。
图表可以在 Git 中进行版本控制吗？
是的。本地保存的图表可以在 Git 中跟踪，并在需要时与 Mermaid Chart 的云功能同步。