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

您所在的位置：网站首页 › 餐厅服务流程图怎么画简单好看 › PlantUML 用代码画思维导图，时序图，流程图

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

2024-04-09 16:36| 来源: 网络整理| 查看: 265

PlantUML 是一个开源项目，支持通过脚本绘图。PlantUML 可以绘制如下种类的 UML 图：

时序图用例图类图活动图组件图状态图对象图部署图定时图

同时还支持以下非 UML 图:

线框图形界面架构图规范和描述语言 (SDL)Ditaa diagram甘特图思维导图Work Breakdown Structure diagram以 AsciiMath 或 JLaTeXMath 符号的数学公式Entity Relationship diagram 通过简单直观的语言来定义这些示意图。中文文档：https://plantuml.com/zh/guide

下面通过一些简单案例来完成思维导图，时序图，活动图

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) :跳转到首页; stop else(N) :设置用户信息; :根据用户信息设置侧边栏菜单; :根据菜单动态生成路由; stop endif else(N) if(path 是否为白名单) then(Y) :直接放行; stop else(N) :跳转到登陆页; stop endif endif @enduml

效果图如下：在这里插入图片描述

关键解释如下：

start 表示活动图流程的开始stop 表示活动图流程的结束:xxxx;:表示活动流程节点为xxxxif+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 :token user -> 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 用代码画思维导图，时序图，流程图

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

今日新闻

推荐新闻