# PlantUML ::: details 目录 [[toc]] ::: ## 简介 PlantUML 是一个用来绘制UML图的Java类库。支持的UML图包括:时序图、用例图、类图、组件图、活动图等。 ## 示例 ::: details 查看代码 <<< @/docs/.vuepress/public/uml/test1.puml ::: ## 开发环境 ### 安装 #### IDE IDE安装地址 #### VS Code VS Code安装地址 #### Node NPM node安装地址 检测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 开发环境的控制台窗口,切换到文档项目所在文件夹。执行以下安装命令。 ``` shell npm install ``` * 注: 若安装失败,检测当前镜像 ```shell script npm config get registry http://dev.dp.sagacloud.cn:8082/repository/npm-saga/ 若镜像地址不是 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); ``` * 注:import 引入,Vue.use挂载。 plantUML使用 ```html ``` * 注:上面的src是项目中的 “docs/.vuepress/public/uml/test1.puml”