使用VSCode和PlantUML插件绘制UML图表

vscode 配合 Plantuml 插件可高效绘制各类 UML 图；需先安装 java 和官方 PlantUML 插件，配置本地 plantuml.jar 路径或在线服务，新建 .puml 文件编写文本并预览导出。

用 VSCode 配合 PlantUML 插件画 UML 图，确实轻量又高效——不用装大型建模工具，写几行文本就能生成清晰图表，改起来也方便。

安装插件和依赖环境

先确保本地有 Java 运行环境（PlantUML 底层依赖 Java），然后在 VSCode 扩展市场搜 “PlantUML”，安装官方插件（作者是 jebbs）。插件本身不带渲染引擎，需额外配置 PlantUML 服务或本地 jar 包。

• 推荐方式：下载 plantuml.jar，放在本地某个路径（比如 D:toolsplantuml.jar）
• 在 VSCode 设置中搜索 plantuml.jar，填入完整路径
• 也可启用在线服务器（如 https://www.plantuml.com/plantuml），但私有图不建议传公网

新建并编写 PlantUML 文件

新建一个后缀为 .puml 或 .pu 的文件，比如 class-diagram.puml。开头加上 @startuml，结尾加 @enduml，中间写 UML 描述语法。

OrgChart组织结构插件

gt是一款简单实用的组织结构图表jQuery插件。gt通过DOM元素，jQuery和CSS3过渡效果来制作组织结构图表。可以使用本地数据，或通过ajax调用来完成数据的填充。

78

查看详情

• 类图示例：

  @startuml class User {   +String name   +int age } class Order User --> Order : places @enduml
• 保存后，右键选择 “Preview Current Diagram” 就能实时看到渲染图
• 支持类图、时序图、用例图、活动图、状态图等主流 UML 类型

常用技巧和小提示

实际画图时有些细节能让效率更高、效果更稳：

• 按 Ctrl+Shift+P（windows）调出命令面板，输入 “PlantUML” 可快速预览、导出 PNG/svg/pdf
• 导出图片默认带阴影和圆角，如需简洁风格，开头加 skinparam defaultRoundCorner 0
• 中文显示异常？在文件顶部加 skinparam defaultFontName "microsoft YaHei" 或你系统已安装的中文字体
• 支持注释：' 单引号开头 或 ' ' 多行注释

基本上就这些。写文本、点预览、导出图，整个流程顺滑不卡顿，适合日常设计记录、文档配图、甚至团队协作时共享图源代码。