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

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

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

环境准备

• VSCode
• PlantUML 插件

语法

官方文档

例子

@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

上述例子的预览效果图

导出

可以导出为 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