怎么使用markdownplus画时序图/How to use markdownplus to create relation diagram

Summary:
Markdown-plus is a markdown editor, but it also can help us to create relation diagram . Today i will show you how to use markdownplus to create relation diagram.
Markdown-plus从名字看是markdown的升级版，不仅仅可以让我们用md语法写文章，同时支持让我们创建图表，今天我介绍如何使用markdown-plus 创建关系图。

What Will I Learn?/教程知识点

• Markdown语法格式输入，以及如何支持扩展语言
• 声明时序图，定义时序图标题
• 定义具体事件
• 事件之间连接线、文字、箭头
• 状态文字设置
• 创建循环关系以及自我连接

Requirements/要求

• 简单英文基础
• 简单markdown语法基础
• 下载markdown-plus编辑器

Difficulty/难度

简单

Tutorial Contents/教程内容

下面先看一个简单例子：

其实现的代码为：

sequenceDiagram
Title:DEMO 这是一个例子@dalao
Note right of 老大: 思考中……
loop 循环
    老大->>老二: 你是我弟弟
    老二-->>老大: 你是我哥哥
end
老大-->老二:借钱
老二-->老大:不借
老大->>老大:我去 ，涨能耐了
Note right of 老二: 思考中……

知识点1：Markdown语法格式输入，以及如何支持扩展语言

markdown 里面代码是使用 英文状态下的4个顿号括起来的，如下：

····
代码  //此时，这部分内容是不被执行的，在markdown会直接显示出来。
····

效果是代码高亮，区别于别的内容。

想要实现进度图，markdown语法是不支持的，而markdown-plus支持语法扩展，所以我们可以在markdown-plus输入别的语法来实现我们需要的功能。

····mermaid
代码区域
····

这里我们使用扩展语法 mermaid来制作进度图图，此时，代码区域的内容会被执行。

知识点2：声明时序图，定义时序图标题

sequenceDiagram
Title:DEMO 这是一个例子@dalao

sequenceDiagram : 声明下面代码执行为时序图
Title：时序图标题， 不需要使用引号括起来

知识点3：定义具体事件

老大->>老二: 你是我弟弟
老二-->>老大: 你是我哥哥

格式 obj1->>obj2:text， 不需要声明事件，可以直接进行使用。obj1，obj2 可以是任意内容。

知识点4：事件之间连接线、文字、箭头

 老大->>老二: 你是我弟弟
老二-->>老大: 你是我哥哥

老大-->老二:借钱
老二->老大:不借

可以看出有四中连接：
-> 实线
--> 虚线
->> 实线带箭头
-->>虚线带箭头

知识点5：状态文字设置

Note right of 老大: 思考中……

格式 Note [right,left] of obj: text
right和left 任选

知识点6：创建循环关系以及自我连接

loop 循环
    老大->>老二: 你是我弟弟
    老二-->>老大: 你是我哥哥
end

格式：

loop title
obj1-->obj2
end

也允许自己连接自己：

老大->>老大:我去 ，涨能耐了

格式： obj1->>obj1:text

下面是多个事件的时序图演示：

样例代码：

sequenceDiagram
Title:DEMO 这是一个例子@dalao
Note right of 老大: thinking……
loop 循环
    A->>B: 你是我弟弟
    B-->>A: 你是我哥哥
end
老大-->老二:借钱
老二->老大:不借
老大->>老大:我去 ，涨能耐了
Note right of 老二: 思考中……
老二-->>A:hello

Curriculum/系列课程

• 怎么使用markdownplus画流程图/How to use markdownplus to create a flow chart
• 怎么使用markdownplus画工作进度图/How to use markdownplus to create work schedule

---

Posted on Utopian.io - Rewarding Open Source Contributors

---