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