信息发布→ 登录 注册 退出

有没有能直接在VSCode里绘制流程图或UML图的扩展?

发布时间:2025-09-27

点击量:
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 使用,写文档时嵌入图表非常方便。

标签:# java  # vscode  # js  # svg  # ai  # 绘制图表  # .net  
在线客服
服务热线

服务热线

4008888355

微信咨询
二维码
返回顶部
×二维码

截屏,微信识别二维码

打开微信

微信号已复制,请打开微信添加咨询详情!