使用vscode画图表。

Mermaid

一个曾经获得过The most exciting use of technology大奖的优秀项目。
vscode安装插件：Markdown Preview Mermaid Support

Mermaid是一种简单的类似Markdown的脚本语言，通过JavaScript编程语言，将文本转换为图片。
Mermaid 支持绘制非常多种类的图，常见的有时序图、流程图、类图、甘特图等等。

除了再vscode中使用，还可以在线使用:
1、https://codepen.io/tdkn/pen/vZxQzd
2、https://mermaidjs.github.io/mermaid-live-editor/

流程图

样式流程图, 基本语法：

  • graph 指定流程图方向：graph LR 横向，graph TD 纵向
    元素的形状定义：
  • id[描述] 以直角矩形绘制
  • id(描述) 以圆角矩形绘制
  • id{描述} 以菱形绘制
  • id>描述] 以不对称矩形绘制
  • id((描述)) 以圆形绘制
  • 线条定义：
    • A–>B 带箭头指向
    • A—B 不带箭头连接
    • A-.-B 虚线连接
    • A-.->B 虚线指向
    • A==>B 加粗箭头指向
    • A–描述—B 不带箭头指向并在线段中间添加描述
    • A–描述–>B 带描述的箭头指向
    • A-.描述.->B 带描述的虚线连指向
    • A==描述==>B 带描述的加粗箭头指向
1
2
3
4
5
flowchart TD
    A[Hard] -->|Text| B(Round\nabc)
    B --> C{Decision}
    C --> |One| D[Result 1]
    C --> |Two| E[Result 2]

另一个使用：graph

1
2
3
4
5
6
7
8
9
graph TD
A(open)-->B[User Input]
A(open)-->|no|F{GoSignUp, Yes or No?}
B[User Input]-->C[Process]
C[Process]-->D{Yes or No?}
D{Yes or No?}-.yes.-> E(end)
D{Yes or No?}-.no.->F{GoSignUp, Yes or No?}
F{GoSignUp, Yes or No?}-->G(SignUp)

使用sequenceDiagram画标准流程图(该方法在vscode中待测试)

1
tag=type: content:>url
  • tag 节点名称
  • type 节点类型
  • start 开始节点
  • end 结束节点
  • operation 操作节点
  • subroutine 子程序节点
  • condition 条件节点
  • inputoutput 输入或产出节点
  • content 节点描述
  • url 超连接，与文本绑定
  • 用 -> 来关两个节点，如果是 condition 节点将会有 yes 和 no 两个分支。
1
2
3
4
5
6
7
8
9
10
11
12
13
sequenceDiagram
open=>start: Open:>https://github.com/knsv/mermaid
userInput=>inputoutput: User Input
processes=>operation: Processes
results=>condition: Yes or No?
regis=>condition: GoSignUp,Yes or No?
userr=>operation: SignUp
end=>end: End
open->userInput->processes->results
results(yes)->end
results(no)->regis
regis(yes)->userr
regis(no)->userInput

时序图

在开头使用关键字sequenceDiagram指明，基本语法：

  • Title:标题 ：指定时序图的标题
  • Note direction of 对象:描述 ： 在对象的某一侧添加描述，direction 可以为 right/left/over ， 对象 可以是多个对象，以 , 作为分隔符
  • participant 对象 ：创建一个对象
  • loop…end ：创建一个循环体
  • A->B: 描述

绘制A与B之间的对话:

  • -> 表示实线（无箭头）
  • –> 表示实心箭头
  • ->> 表示虚线（无箭头）
  • –>> 表示虚线箭头
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
sequenceDiagram
    participant j as 客户端
    participant i as 后台1
    participant d as 后台2
    
    autonumber
    rect rgb(255, 0, 0)
    j->>i: grpc: init
    j->>i: grpc: creat
    end
    loop 循环过程1
        Note right of i: note
        j-->>d: tcp: request
        j->>i: tcp: data
    end

    loop 循环过程2
        Note over i: process
        i->>d: request
    end

    j->>i: request
    i->>d: end

甘特图

在开头使用关键字gantt指明

  • deteFormat 格式 指明日期的显示格式
  • title 标题 设置图标的标题
  • section 描述 定义纵向上的一个环节
  • 定义步骤：每个步骤有两种状态done （已完成）/ active（执行中）
    • 描述: 状态,id,开始日期,结束日期/持续时间
    • 描述: 状态,id,after id2,持续时间
    • crit ：可用于标记该步骤需要被修正，将高亮显示
    • 如果不指定具体的开始时间或在某个步骤之后，将默认依次顺序排列
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
gantt
dateFormat YYYY-MM-DD

title 软件开发甘特图

section 设计
需求:done,des1, 2022-01-06,2022-01-08
原型:active,des2, 2022-01-09, 3d
UI设计:des3, after des2, 5d
未来任务:des4, after des3, 5d

section 开发
理解需求:crit, done, 2022-01-06,24h
设计框架:crit, done, after des2, 2d
开发:crit, active, 3d
未来任务:crit, 5d
休息时间:2d

section 测试
功能测试:active, a1, after des3, 3d
压力测试:after a1, 20h
测试报告: 48h