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 创建关系图。
简单
下面先看一个简单例子:
其实现的代码为:
sequenceDiagram
Title:DEMO 这是一个例子@dalao
Note right of 老大: 思考中……
loop 循环
老大->>老二: 你是我弟弟
老二-->>老大: 你是我哥哥
end
老大-->老二:借钱
老二-->老大:不借
老大->>老大:我去 ,涨能耐了
Note right of 老二: 思考中……
markdown 里面代码是使用 英文状态下的4个顿号括起来的,如下:
····
代码 //此时,这部分内容是不被执行的,在markdown会直接显示出来。
····
效果是代码高亮,区别于别的内容。
想要实现进度图,markdown语法是不支持的,而markdown-plus支持语法扩展,所以我们可以在markdown-plus输入别的语法来实现我们需要的功能。
····mermaid
代码区域
····
这里我们使用扩展语法 mermaid来制作进度图图,此时,代码区域的内容会被执行。
sequenceDiagram
Title:DEMO 这是一个例子@dalao
sequenceDiagram : 声明下面代码执行为时序图
Title:时序图标题, 不需要使用引号括起来
老大->>老二: 你是我弟弟
老二-->>老大: 你是我哥哥
格式 obj1->>obj2:text, 不需要声明事件,可以直接进行使用。obj1,obj2 可以是任意内容。
老大->>老二: 你是我弟弟
老二-->>老大: 你是我哥哥
老大-->老二:借钱
老二->老大:不借
可以看出有四中连接:
-> 实线
--> 虚线
->> 实线带箭头
-->>虚线带箭头
Note right of 老大: 思考中……
格式 Note [right,left] of obj: text
right和left 任选
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