VSCode集成PlantUML

VSCode集成PlantUML

哈喽大海豚 前端 2018-01-23

前端 UML PlantUML VSCode

---

PlantUML介绍

PlantUML是一个允许快速编写以下图类的组件：

• 序列图(Sequence diagram)
• 用例图(Usecase diagram)
• 类图(Class diagram)
• 活动图（Activity diagram）
• 组件图(Component diagram)
• 状态图(State diagram)
• 对象图(Object diagram)
• 部署图(Deployment diagram)
• 时序图(Timing diagram)

也支持以下非UML图：

• 线框图形界面(Wireframe graphical interface)
• Archimate图(Archimate diagram)
• 规范和描述语言（Specification and Description Language,SDL）
• 黛塔图(Ditaa diagram)
• 甘特图(Gantt diagram)
• 数学与AsciiMath或JLaTeXMath符号(Mathematic with AsciiMath or JLaTeXMath notation)

PlantUML可以在许多其他工具中使用并生成PNG，SVG或LaTeX格式的图像，也可以生成ASCII艺术图（仅用于序列图），极大地提高设计和开发效率。

PlantUML官网地址：http://plantuml.com/

---

VSCode集成PlantUML

• 第一步，安装graphviz
  • 下载最新版本graphviz，并默认安装。
  • 下载页面：http://www.graphviz.org/download/
• 第二步，安装vscode插件plantuml
  • 进入vscode界面，按crtl+shift+x来打开插件界面。
  • 输入plantuml并检索。
  • 选择并安装jebbs的plantuml插件。
  • 重新启动vscode。
• 第三步，检查plantuml以确认没有使用外部服务器
  • 按Ctrl+Comma(逗号)打开设定编辑器
  • 输入plantuml.render并检索，确认一下值是"Local"。
  • 拔除网线，用vscode打开.pu文件然后按下alt+d
  • 确认右边面板显示了UML图。