Pwner's Blog

能全力以赴不尽力而为

0%

使用 VSCode 绘制流程图类图组件图等

PlantUML 是一个开源项目,支持快速绘制:
时序图、用例图、类图、活动图、组件图、状态图、对象图、部署图、定时图,同时还支持以下非 UML 图:
线框图形界面、架构图、规范和描述语言 (SDL)、Ditaa diagram、甘特图、思维导图、WorkBreakdown Structure diagram、以 AsciiMath 或 JLaTeXMath 符号的数学公式、Entity Relationship diagram

通过简单直观的语言来定义这些示意图,与 MarkDown 有相似的作用,这两种语言一个主要面向文本渲染一个主要用于图形绘制。

环境准备

  • VSCode
  • PlantUML 插件

语法

官方文档

例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
@startuml

skinparam dpi 1000 #指定图片分辨率,如果不指定,默认的参数导出的图片放大以后会比较模糊

scale 13500 width #指定图片的高度和宽度

scale 2200 height

用户 -> 认证中心: 登录操作

认证中心 -> 缓存: 存放(key=token+ip,value=token)token

用户 <- 认证中心 : 认证成功返回token

用户 -> 认证中心: 下次访问头部携带token认证

认证中心 <- 缓存: key=token+ip获取token

其他服务 <- 认证中心: 存在且校验成功则跳转到用户请求的其他服务

其他服务 -> 用户: 信息

@enduml

文件格式

.wsd, .pu, .puml, .plantuml, .iuml

预览

Alt+D

上述例子的预览效果图

example

导出

可以导出为 png、svg、eos、pdf、scxml、html、txt、utt、latex、latex:nopreamble 等格式

  1. F1/ctrl+shift+p;
  2. PlantUML: 导出当前图表;
  3. 选择导出格式 png;导出即可。

官方教程:https://plantuml.com/zh/sequence-diagram

如果文章对你有用,可以请我喝杯咖啡~
  • 本文作者: Pwner
  • 本文链接: https://pwner.cn/posts/4f3f9c8e.html
  • 版权声明: 本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!