VSCode画 UML 图

VSCode画 UML 图

  • UML简介
    • 步骤:
      • 安装 Java 环境
      • 安装 PlantUM 插件
      • Markdown Preview Enhanced

UML简介

UML-Unified Modeling Language 统一建模语言,又称标准建模语言。是用来对软件密集系统进行可视化建模的一种语言。UML的定义包括UML语义和UML表示法两个元素。

步骤:

安装 Java 环境

  • PlantUML是一个实现UML快速绘图的开源项目官网链接。下载包是一个Java的jar包,所以需要安装Java环境。
  • Java下载链接。
  • 进入网页以后找到适合自己的版本的jdk进行下载
    VSCode画 UML 图_第1张图片
  • 安装成功后,设置环境变量,如果安装的jdk下没有jre,管理员方式打开cmd窗口,进入刚才jdk的安装目录,执行命令:
bin\jlink.exe --module-path jmods --add-modules java.desktop --output jre

VSCode画 UML 图_第2张图片
VSCode画 UML 图_第3张图片

安装 PlantUM 插件

VSCode画 UML 图_第4张图片

  1. 在VScode中创建新文件,后缀改为*.wsd, *.pu, *.puml, *.plantuml, *.iuml,输入代码。
  2. PlantUML语法,以@startuml开头,以@enduml结束,中间键入图表代码,Alt + DCtrl + Shift + P搜索 PlantUML Preview查看预览

Markdown Preview Enhanced

不只是使用PlantUML插件,你同样可以在Markdown文件中画UML图,通过Markdown Preview Enhanced插件来预览和导出,同样依赖与Java。

  1. 安装拓展
    VSCode画 UML 图_第5张图片
    在markdown中画uml图表,需要写在代码块中,语言标识为plantuml。
    ```plantuml 或 puml开头
    @startuml
    A -> B
    B -> C
    C -> A
    @enduml
    ```
    在Markdown编辑页面的右上角,找到Open Preview To The Side,点击,或者在空白处点击右键,在列表里面找到Open Preview To The Side,就可以在侧边预览Markdown文件的效果。
    VSCode画 UML 图_第6张图片

你可能感兴趣的:(VSCode)