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图。

你可能感兴趣的:(效率,文本编辑器,VSCode,UML,plantuml,Markdown)