使用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

本文标题:使用VSCode绘制流程图类图组件图等

文章作者:Pwner

发布时间:2020年09月22日 - 14:09

最后更新:2020年09月30日 - 11:09

原始链接:https://pwner.cn/posts/4f3f9c8e.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

Buy me a cup of coffee.