Markdown时序图详解

发布时间：2023-05-20

Markdown时序图语法

Markdown时序图语法由多个符号和关键词组成。主要包含下面几个要素：

  • participant: 定义参与者，格式为participant [参与者名称]。示例：participant 用户
  • activate: 使参与者进入激活状态，格式为[参与者名称] ->+ activate。示例：用户 ->+ activate
  • deactivate: 使参与者离开激活状态，格式为[参与者名称] ->- deactivate。示例：用户 ->- deactivate
  • note: 添加注释，格式为Note right of [参与者名称]: 注释内容。示例：Note right of 用户: 用户输入
  • message: 发送消息，格式为[参与者名称1] --> [参与者名称2]: 消息内容。示例：用户 --> 系统：登录
  • return: 返回消息，格式为[参与者名称1] >> [参与者名称2]: 消息内容。示例：用户 >> 系统：登录成功 示例代码如下：
participant 用户
participant 系统
用户 ->+ activate
Note right of 用户: 用户输入
系统 --> 用户: 验证信息
用户 >> 系统: 登录请求
系统 >> 用户: 登录成功

Markdown画时序图

Markdown时序图可以用多种工具来绘制。常用的工具包括：WebSequenceDiagrams、PlantUML、Mermaid等。 以WebSequenceDiagrams为例，可以按照上面介绍的语法来进行绘制。在网站上选择"Markdown"语言后，输入代码即可生成时序图。示例代码如下：

participant 用户
participant 系统
用户 ->+ activate
Note right of 用户: 用户输入
系统 --> 用户: 验证信息
用户 >> 系统: 登录请求
系统 >> 用户: 登录成功

生成的时序图如下：

Markdown图片代替文字

时序图中可以使用图片代替文字，使得图示更加直观。具体步骤如下：

  1. 准备好需要代替的图片
  2. 将图片上传到互联网上，获取其URL
  3. 在Markdown时序图语法中使用"image"关键字，格式为[参与者名称1] [参与者名称2]。示例：用户 系统

Markdown语法序号

在Markdown中，可以使用"#"符号来添加序号，表示标题等级。示例：

# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

效果如下：

一级标题

二级标题

三级标题

四级标题
五级标题
六级标题

Markdown流程图语法

除了时序图外，Markdown还支持流程图语法。具体语法及代码示例，请见Mermaid官网。

Markdown标题序号

在Markdown中，可以通过添加"[TOC]"来自动生成标题序号。示例代码如下：

# Markdown标题
## 目录
[TOC]
## 一级标题
### 二级标题
#### 三级标题
##### 四级标题

Markdown无序列表

在Markdown中，可以使用"-"符号来添加无序列表，示例：

- 列表项1
- 列表项2
- 列表项3
  • 列表项1
  • 列表项2
  • 列表项3

Markdown流程图

使用Mermaid语法可以绘制流程图，示例代码如下：

graph TD;
  A-->B;
  A-->C;
  B-->D;
  C-->D;
  D-->E;

生成的流程图如下：

总结

Markdown时序图是一种直观且易于阅读的表达方式，我们可以通过多种工具来实现时序图的绘制。除此之外，在Markdown中还有许多其他有用的语法和方法，如标题序号、无序列表、流程图等。通过熟练掌握这些语法，我们可以更好地编写文字和图形内容，让信息更加清晰明了。

推荐文章