VS Code中通过Mermaid...

VS Code中通过Mermaid Chart VS Code Plugin插件可以直接创建和编辑Mermaid.js图表↓

可以用来画软件架构图、记录API流程、修复文档或管理流程图和序列图……

1. 无需账户即可编辑：打开和编辑.mmd文件，无需注册账户，适用于快速更新图表。
2. 自动文件识别与语法高亮：插件可自动识别.mmd文件，并提供Mermaid.js语法高亮，清晰展现流程结构，减少编辑错误。
3. 实时图表渲染：在VS Code内实时编辑和预览Mermaid.js图表，支持平移和缩放功能，提供流畅的编辑体验。
4. Markdown中嵌入Mermaid图表：插件能自动检测.md文件中的Mermaid.js图表，并提供编辑和查看的链接，方便将视觉内容集成到文档中。

高级协作功能：
- 云集成和图表链接：登录后可将本地.mmd文件链接到Mermaid Chart项目，实现自动云同步。
- 代码中嵌入图表：可直接在代码中嵌入图表，通过“查看图表”按钮快速访问视觉内容。
- 灵活编辑：支持在VS Code本地或Mermaid Chart平台上的可视编辑器、白板或Mermaid AI助手中编辑图表。
- 离线编辑+基于Git的版本控制：支持离线工作同时保持与Mermaid Chart的图表同步。
- 使用AI从代码生成图表：用AI从源代码自动生成图表，支持通过GitHub Copilot Chat提及@ mermaid-chart 来实现

使用案例：
- DevOps图表绘制：清晰展示CI/CD流水线、基础设施层或Kubernetes等容器编排系统。
- 可视化API流程：使用序列图记录REST、GraphQL或gRPC端点间的服务通信。
- 微服务架构文档化：展现系统边界、依赖关系和服务间消息传递。
- 改进内部文档：通过嵌入图表使内部Wiki或README更加吸引人并易于理解。
- 软件设计白板：用于头脑风暴系统设计，然后转到Mermaid.js代码进行精细化和版本控制。

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

Blog：docs.mermaidchart.com/blog/posts/mermaid-chart-vs-code-plugin-create-and-edit-mermaid-js-diagrams-in-visual-studio-code

ai创造营科技程序员