（一）MarkDown中使用mermaid

Graph

关键字graph表示一个流程图的开始，同时需要指定该图的方向。例如

流程图的定义仅由graph开始，但是方向的定义不止一种。

1. TB（ top bottom）表示从上到下

2. BT（bottom top）表示从下到上

3. RL（right left）表示从右到左

4. LR（left right）表示从左到右

5. TD与TB一样表示从上到下

   节点

   有以下几种节点和形状：

   1. 默认节点 A

   2. 文本节点 B[bname]

   3. 圆角节点 C(cname)

   4. 圆形节点 D((dname))

   5. 非对称节点 E>ename]

   6. 菱形节点 F{fname}

      以上大写字母表示节点，name表示它的名字，如下图。默认节点的A同时表示该节点和它的名字，例如上图的A和B。

连线

节点间的连接线有多种形状，而且可以在连接线中加入标签：

• 箭头连接 A1——>B1

• 开放连接 A2——B2

• 标签连接 A3–text—B3 或者 A3—|text|B3

• 箭头标签连接 A4–text –>B4 或者 A4–>|text|B4

• 虚线开放连接 A5.-B5 或者 A5-.-B5 或者 A5…-B5

• 虚线箭头连接 A6.->B6 或者 A6-.->B6

• 标签虚线连接 A7-.text.-B7

• 标签虚线箭头连接 A8-.text.->B8

• 粗线开放连接 A9===B9

• 粗线箭头连接 A10==>B10

• 标签粗线开放连接 A11text=B11

• 标签粗线箭头连接 A12text>B12

  FLOW(流程图)

（二）在vue中使用mermaid

安装

cnpm install mermaid -S
cnpm install -save d3

引入(在main.j s)

import Mermaid from 'mermaid'

使用

<div class="mermaid">
  graph LR
  A --- B
  B-->C[fa:fa-ban forbidden]
  B-->D(fa:fa-spinner)
  B-->E(fa:fa-spinner aaa)
  B-->F(fa:fa-spinner aaa)
  B-->G(fa:fa-spinner aaa)
  B-->H(fa:fa-spinner aaa)
  B-->I(fa:fa-spinner aaa)
</div>

时序图

什么是时序图？

时序图（Sequence Diagram），亦称为序列图、循序图或顺序图，是一种UML交互图。它通过描述对象之间发送消息的时间顺序显示多个对象之间的动态协作。

时序图作用是什么

• 展示对象之间交互的顺序。将交互行为建模为消息传递，通过描述消息是如何在对象间发送和接收的来动态展示对象之间的交互；
• 相对于其他UML图，时序图更强调交互的时间顺序；
• 可以直观的描述并发进程。

时序图组成元素

• 角色

  系统角色，可以是人、机器、其他系统、子系统；在时序图中用 表示。

• 对象

  （1）对象的三种命名方式

  • 第一种方式包括对象名和类名，例如：直播课时:课时，在时序图中，用“对象：类”表示；
  • 第二种方式只显示类名，即表示它是一个匿名对象，例如： :课程；在时序图中，用“：类”表示；
  • 第三种方式只显示对象名不显示类名，例如：讲师；在时序图中，用“对象”表示。

  （2）命名方式的选择

  三种命名方式均可，哪种最容易让阅读该时序图的人理解，就选择哪种。

  （3）对象的排列顺序

  对象的左右顺序并不重要，但是为了作图清晰整洁，通常应遵循以下两个原则：把交互频繁的对象尽可能的靠拢；把初始化整个交互活动的对象放置在最左端。

• 生命线

  在时序图中表示为从对象图标向下延伸的一条虚线，表示对象存在的时间。

• 控制焦点

  又称为激活期，表示时间段的符号，在这个时间段内对象将执行相应的操作。它可以被理解成C语言语义中一对花括号{ }中的内容；用小矩形表示。

• 消息

  消息一般分为同步消息（Synchronous Message），异步消息（Asynchronous Message）和返回消息（Return Message）。

  • 消息的发送者把控制传递给消息的接收者，然后停止活动，等待消息的接收者放弃或者返回控制。用来表示同步的意义；
  • 消息发送者通过消息把信号传递给消息的接收者，然后继续自己的活动，不等待接受者返回消息或者控制。异步消息的接收者和发送者是并发工作的。
  • 返回消息表示从过程调用返回。

• 自关联消息

  表示方法的自身调用或者一个对象内的一个方法调用另外一个方法。

• 组合片段

mermaid 中画时序图

在mermaid中participants（参加者？对象？角色？）是按照定义顺序渲染的,所以改变参加者顺序就可以通过改变参加者定义顺序

别名

消息

[Actor][Arrow][Actor]:Message text

Type	Description
->	Solid line without arrow（带箭头的实心线）
–>	Dotted line without arrow（没有箭头的虚线）
->>	Solid line with arrowhead（有箭头的实心线）
–>>	Dotted line with arrowhead（带箭头的虚线）
-x	Solid line with a cross at the end (async)（末尾有差号的实心线）
–x	Dotted line with a cross at the end (async)（末尾有叉号的虚线）

控制焦点(两种表示方式)

note（说明）

[ right of | left of | over ] [Actor]

循环

示例

微信扫码登录

小程序登录

打印量管理

查看历史记录