vscode 插件安装和使用

插件商店搜索 "PlantUML "，点击安装即可

使用只需要新建一个 puml 文件或者 md文件，预览的话在 Windows 版本的 VS Code 中，通过 Ctrl + Shift + P 打开命令面板，输入 PlantUML，找到 Preview Current Diagram 命令，或者通过快捷键 Alt + D，打开预览页面。

思维导图绘制

@startmindmap
*[#409EFF] vue3-auth**[#79bbff] 登陆认证***_ 登陆和登出***_ 用户注册***_ 用户状态和信息保存**[#79bbff] 权限鉴定***_ 用户权限获取***_ 页面访问权限（菜单权限）***_ 页面功能权限（按钮权限）**[#79bbff] 角色管理***_ 角色新增***_ 角色修改***_ 角色删除***_ 角色绑定权限***_ 角色绑定维度**[#79bbff] 用户管理***_ 用户新增***_ 用户修改***_ 用户删除
@endmindmap

效果图如下：

关键解释如下：

@startmindmap 和 @endmindmap 这两个注解用来声明此处为使用 PlantUML 进行绘制的代码
* 是用来标注标题或者内容的等级（另外也可使用 + 或者 - 来区分方向，md 不支持）
[#fff] 用来标记颜色
*_ 使用下划线去除外边框

流程图绘制

@startuml
title 路由跳转流程图
start
:从 localStorage 中拿到 token;
if ( token 是否为空 ) then(Y) if(path 是否为登陆页) then(Y):跳转到首页;stopelse(N):设置用户信息;:根据用户信息设置侧边栏菜单;:根据菜单动态生成路由;stopendif
else(N)if(path 是否为白名单) then(Y):直接放行;stopelse(N):跳转到登陆页;stopendif
endif
@enduml

效果图如下：

关键解释如下：

start 表示活动图流程的开始
stop 表示活动图流程的结束
:xxxx;:表示活动流程节点为xxxx
if+then+endif 表示一个完整的条件判断

时序图绘制

使用 participant 关键字来声明一个参与者可以使你对参与者做出更多控制。
关键字在代码中的顺序决定了参与者的先后顺序。
你也可以使用下面这些关键字来声明参与者，这会改变参与者的外观：
• actor（角色）
• boundary（边界）
• control（控制）
• entity（实体）
• database（数据库）
• collections（集合）
• queue（队列）
关键字 as 用于重命名参与者

@startuml
title 登陆鉴权时序图actor user
participant 客户端 as client
control service as s
database db
database redis
control springSecurity as ss
autonumber
user -> client :登陆
activate s
client -> s :登陆请求\n账号/密码/验证码
s -> s :验证码校验
activate ss
s -> ss :待验证账号密码
db -> ss:用户账号密码
ss -> ss: 账号密码校验
db -> ss: 用户权限
ss --> s :authentication
s -> s :token生成
s -> redis :token/用户账号密码权限
s --> client :tokenuser -> client :鉴权
client -> ss :token
ss --> redis :token
redis -> ss : 用户账号密码权限
ss -> ss : 鉴权
ss --> s : 请求
s --> client : 资源
deactivate ss
deactivate s
@enduml

效果图：

关键词解释如下:

title:表示该UML用例图的标题
显示的顺序是怎么定义的:声明的参与者顺序将是（默认的）显示顺序。
autonumber:可以给参与者添加顺序
->:表示绘制两个参与者之间的信息,如果你希望是虚线,可以使用-->.
activate和deactivate:表示参与者的生命线

PlantUML 用代码画思维导图，时序图，流程图相关推荐

IntelliJ IDEA 还能画思维导图，果然最强 IDE！
最近栈长发现 IntelliJ IDEA 居然还能画思维导图,太牛逼了! 当然这得借助 IDEA 的 UML 插件,因为它本身也是一个 UML 图,所以这篇就从 UML 图开撕,看 IDEA 怎么画思 ...
github 思维导图开元软件_画思维导图记笔记的工具软件
思维导图是很多人在做笔记的时候都会用到的一种记录方式,使用思维导图可以简单有效的表达发散性思维,能够协助人们在各种因素间平衡展开思考,从而提升自己笔记的含金量和工作效率,有没有画思维导图记笔记的工具软 ...
在线画有穷状态自动机的软件_怎么画思维导图？不用下载软件，在线就能操作...
怎么画思维导图?在工作中,除了流程图,脑图也是很重要的一个存在:流程图帮助我们快速完成任务,而脑图告诉我们任务本质.画思维导图是一个积累的过程,急不来,对于新手来说还是有一定难度的. 由于对项目了解不 ...
画思维导图一定要用计算机来完成吗,一起来画思维导图
[0404我在悦读] 书名:我的第一本思维导图入门书作者:胡雅茹篇目:画思维导图的要点 001 适合的笔马克笔色彩鲜艳.对大脑刺激强但是笔粗写的字大,一张纸上写不了多少字. 中性笔用起来比较习惯 ...
系统架构设计师备考经验分享：边听课边画思维导图，高效学习
一.备考经验 1.把大部分精力花在重点章节系统架构设计这一章节在考试中所占据的比例非常非常高,尤其在下午题部分,几乎可以全部覆盖. 该章节每一部分的考点都重要,需要牢牢掌握. 该章节提到的相关内容可 ...
在电脑中怎样画思维导图
随着移动互联网的发展,现在有很多功能都可以代替手工进行操作使用,又方便又节约了时间,那具体表现在哪些操作中呢?就拿常用的思维导图来说,现在绘制思维导图利用电脑就可以进行绘制,那么如何在电脑上画思维导图 ...
新手怎么画思维导图，这里有一份详细的思维导图绘制教程
导语:新手想要了解怎么画思维导图,首先就是要学会临摹思维导图模板,熟悉各种专业思维导图的样式.然而,这只是它的形,此时的思维导图是没有"灵魂"的,所以我们还需要在这个形里面注入&q ...
如何用Mindmanager画思维导图
今天这篇博客中,我们将重点讲一下如何用Mindmanager绘制思维导图.说到思维导图,简单介绍一下.思维导图是将大脑中不可视化的影像通过发散.整理,从而形成可视化.方便记忆和理解图像,故称为&quo ...
画思维导图的注意事项有哪些？怎样画思维导图？
思维导图的绘制时围绕中心主图进行展开的,并且在绘制的过程中要注意上下级节点的位置从而进行搭建,思维导图的优势有很多,他可以培养我们的思维能力,逻辑能力以及创造能力,这些都是在绘制过程中培养出来的,那在 ...

PlantUML 用代码画思维导图，时序图，流程图

vscode 插件安装和使用

思维导图绘制

流程图绘制

时序图绘制

PlantUML 用代码画思维导图，时序图，流程图相关推荐

最新文章

热门文章