PlantUML支持多种UML图和流程图,文本驱动、易集成Markdown,需Java和Graphviz;2. Mermaid扩展支持在Markdown中用代码块绘制图表,VSCode内置预览;3. Draw.io提供拖拽式绘图,保存为.drawio或.svg,适合非代码用户;4. Structurizr用于C4模型架构图,代码生成图表,适合系统设计。推荐:代码党用PlantUML或Mermaid,图形操作选Draw.io,均便于文档嵌入。

有,VSCode 里有几个扩展可以直接绘制流程图和 UML 图,无需离开编辑器就能完成图表设计。
1. PlantUML
功能:支持绘制时序图、类图、用例图、活动图、组件图等常见 UML 图表,也支持流程图。
使用 PlantUML 的文本语法编写代码,扩展会实时预览或导出为图片。
特点:
- 纯文本驱动,版本控制友好
- 与 Markdown 集成良好,可在文档中嵌入图表
- 需要安装 Graphviz(用于布局)和 Java 环境
- 支持快捷键一键预览
2. Mermaid Markdown Syntax Highlighting & Preview
功能:支持 Mermaid.js 语法,在 Markdown 中绘制流程图、序列图、甘特图等。
说明:
- 在 Markdown 文件中使用 ```mermaid 代码块即可渲染图表
- VSCode 内置对 Mermaid 的预览支持(较新版本)
- 搭配扩展如 "Mermaid Preview" 可增强交互体验
3. Draw.io Integration (diagrams.net)
功能:集成 draw.io(现 diagrams.net),提供可视化拖拽绘图界面。
优势:
- 图形化操作,适合不熟悉文本语法的用户
- 保存为 .drawio 或 .svg 文件,嵌入项目方便
- 支持导出多种格式,也可插入到 Markdown 中
4. Structurizr for VSCode(偏架构图)
适合绘制 C4 模型架构图,用代码定义软件结构,生成可视化图表,适合系统设计文档。
基本上就这些主流选择。如果你习惯写代码,推荐 PlantUML 或 Mermaid;如果更喜欢拖拽画图,draw.io 扩展最实用。配合 Markdown 使用,写文档时嵌入图表非常方便。










