::: details 目录 [[toc]] :::
PlantUML 是一个用来绘制UML图的Java类库。支持的UML图包括:时序图、用例图、类图、组件图、活动图等。
::: details 查看代码
<<< @/docs/.vuepress/public/uml/test1.puml
:::
检测Node.js是否安装成功,Node安装自带npm包管理工具。打开cmd命令行(win + r), 输入 node - v 显示当前Node版本号,npm -v 显示当前npm版本号。
```shell script node -v v12.18.4
npm -v 6.14.6
* 注:版本号只用来证明安装成功,版本不定时更新,版本无需统一。
### 插件配置
IDE插件安装 ( File --> Settings --> Plugins )
![搜索plantUML插件](./../img/umlPlugins.png)
![plantUML成功状态](./../img/umlRestart.png)
IDE安装成功验证
![安装plantUML并重启](./../img/umlInstalled.png)
vscode插件安装
![安装plantUML插件](./../img/vscodeUML.png)
vscode安装成功验证
![安装plantUML成功](./../img/vscodeUMLSuccess.png)
### 项目使用方法
修改项目文件 “package.json” 。在 “dependencies” 项目下增加 "@persagy-vue-doc" 依赖。
``` json {5}
"dependencies": {
......
"@persagy-vue-doc": "^1.1.21",
......
}
在 Windows 控制台 cmd 命令行(win + r) 或 IDE 开发环境的控制台窗口,切换到文档项目所在文件夹。执行以下安装命令。
npm install
若镜像地址不是 http://dev.dp.sagacloud.cn:8082/repository/npm-saga/ 则修改镜像地址,命令如下:
npm config set registry http://dev.dp.sagacloud.cn:8082/repository/npm-saga/
修改后,再次执行
npm install
引入组件,修改项目文件 ”docs/.vuepress/enhanceApp.js“ ,如果不存在则创建该文件。
```javascript
import Vue from "vue";
import PDoc from "persagy-vue-doc";
Vue.use(PDoc);
plantUML使用
<PPlantUML src="/uml/test1.puml" />