CSDN Markdown简明教程4-UML图

0.目录

目录

前言

序列图
1 序列图示例

2 序列图语法

流程图
1 流程图示例

2 流程图语法
节点定义

节点连接

Gravizo

声明

1. 前言

Markdown是一种轻量级的标记语言，把作者从繁杂的排版工作中解放出来，实现易读易写的文章写作，已经逐渐成为事实上的行业标准。CSDN博客支持Markdown可以让广大博友更加专注于博客内容，大赞。但是，不少博友可能对Markdown比较生疏，本博接下来用一个系列文章《Markdown简明教程》扼要介绍Markdown，希望可以对大家有所帮助。

系列教程目录

关于Markdown

Markdown基本使用

Markdown表格和公式

Markdown UML图

CSDN Markdown快速上手

Markdown 参考手册

本文为《Markdown简明教程》系列教程的第4篇Markdown UML图，主要讲解Markdown序列图、流程图等, 顺便为介绍了无需任何插件的在线绘制UML的Gravizo。

2. 序列图

2.1 序列图示例

基于js-sequence-diagrams实现了序列图，使用下列的格式声明一个序列图：



在网页上解析结果为：

Created with Raphaël 2.1.2DHCP客户机DHCP客户机DHCP服务器DHCP服务器IP租约请求IP租约提供IP租约选择IP租约确认

注意：所有的序列图代码需要放在一个语法类型为sequence的代码块中。如下面代码所示。

2.2 序列图语法

序列图的语法如下图所示。



具体来说：

设置title，采用title: message。

title: 序列图标题

1


[/code]

将编译为：

Created with Raphaël 2.1.2序列图标题

设置participant，采用participant: actor

participant A
participant B

1
2


[/code]

将编译为：

Created with Raphaël 2.1.2AABB

设置note，

左侧note： note left of acotor： message

右侧note： note right of actor: message,

覆盖note： note over actor:message

note left of A: 左侧note
note right of B: 右侧note
note over C: 覆盖note
note over A,B: 覆盖多个actor
note over B,C: 测试下\n 换行

1
2
3
4
5


[/code]

将编译为：

Created with Raphaël 2.1.2AABBCC左侧note右侧note覆盖note覆盖多个actor测试下 换行

设置会话，

实线实箭头： actor->actor: message

虚线实箭头： actor–>actor:message

实线虚箭头： actor->>actor:message

虚线虚箭头： actor–>>actor:message

A->A:自言自语
A->B:实线实箭头
A-->B:虚线实箭头
A->>B:实线虚箭头
A-->>B:虚线虚箭头

1
2
3
4
5


[/code]

将编译为：

Created with Raphaël 2.1.2AABB自言自语实线实箭头虚线实箭头实线虚箭头虚线虚箭头

下面的案例演示了序列图语法的混合使用，参见代码：



在网页上解析之后结果为：

Created with Raphaël 2.1.2作业通知提交序列图教师教师班长班长同学们同学们通知明天作业通知记得明天交作业了解交作业作业

3. 流程图

3.1 流程图示例

CSDN Markdown基于flowchart.js实现流程图。一个简单的流程格式如下代码所示：



编译之后结果为：

Created with Raphaël 2.1.2StartMy OperationYes or No?Endyesno

注意：所有的流程图代码需要放在一个语法类型为flow的代码块中。如下面代码所示。

3.2 流程图语法

流程图绘制包括两部分：节点定义和节点连接。

1. 节点定义

格式如下：

节点名称=>节点类型: 提示文本

1


[/code]

节点名称可随意起，甚至支持中文。提示文本可以为英文，可以为中文，也可以为空使用默认值。例如：

st=>start: start
or
kaishi=>start: 开始
or
起点=>start: 起点
or
start=>start

1
2
3
4
5
6
7


[/code]

节点类型有start、operation、condition、end等，如下图所示。

start=>start: 开始
login=>operation: 登陆
isLogin=>condition: 是否已登陆？
test=>operation: 进行测试
end=>end: 结束

1
2
3
4
5


[/code]

2. 节点连接

格式如下

一般节点连接：
节点->节点
条件判断节点连接：
条件节点(yes)->正确应答节点
条件节点(no)->错误应答节点

1
2
3
4
5


[/code]

如下面代码所示：

start->isLogin
isLogin(yes)->test
isLogin(no)->login->test
test->end

1
2
3
4


[/code]

编译之后结果为

Created with Raphaël 2.1.2开始是否已登陆？进行测试结束登陆yesno

接下来做一个复杂的案例，如下图所示，请大家思考如何实现。

Created with Raphaël 2.1.2开始是否已登录？选择一张图片格式是否正确？完成资料资料是否符合要求？完成登陆yesnoyesnoyesno

列出源代码供大家参考。

start=>start: 开始
isLogin=>condition: 是否已登录？
login=>operation: 登陆
selectPic=>operation: 选择一张图片
isPic=>condition: 格式是否正确？
doIt=>operation: 完成资料
isRight=>condition: 资料是否符合要求？
end=>end: 完成

start->isLogin
isLogin(yes)->selectPic
isLogin(no)->login->selectPic
selectPic->isPic
isPic(yes)->doIt->isRight
isPic(no)->selectPic
isRight(yes)->end
isRight(no)->doIt

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17


[/code]

4. Gravizo

在研究Markdown UML图的时候，找到了不少在线绘制UML图的方式，例如Dot、PlantUML和UMLGraph等方式，并且发现了一个不用使用任何插件就可调用图片的方式-Gravizo。

例如，我们可以使用PlantUML的方式绘制一个用例图，代码如下。


。

@startuml
left to right direction
skinparam packageStyle rect
actor customer
actor clerk
rectangle checkout {
customer -- (checkout)
(checkout) .> (payment) : include
(help) .> (checkout) : extends
(checkout) -- clerk
}
@enduml

1
2
3
4
5
6
7
8
9
10
11
12


[/code]

然后，我们就可以使用下面代码调用该图片：

<img src='http://g.gravizo.com/g?
@startuml
left to right direction;
skinparam packageStyle rect;
actor customer;
actor clerk;
rectangle checkout {
customer -- (checkout);
(checkout) .> (payment) : include;
(help) .> (checkout) : extends;
(checkout) -- clerk;
}
@enduml
'>

1
2
3
4
5
6
7
8
9
10
11
12
13
14


[/code]

本文为《Markdown简明教程》系列教程的第4篇Markdown UML图，主要讲解Markdown序列图、流程图等, 顺便为介绍了无需任何插件的在线绘制UML的Gravizo。下一篇文章我们来研读CSDN Markdown的一些特性。

5. 声明

前端开发whqet，关注前端开发，分享相关资源。csdn专家博客，王海庆希望能对您有所帮助，限于作者水平有限，出错难免，欢迎拍砖！

欢迎任何形式的转载，烦请注明装载，保留本段文字。

本文原文链接，http://blog.csdn.net/whqet/article/details/44281463

欢迎大家访问独立博客http://whqet.github.io