CSDN Markdown简明教程4-UML图

0.目录

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.2 DHCP客户机 DHCP客户机 DHCP服务器 DHCP服务器 IP租约请求 IP租约提供 IP租约选择 IP租约确认

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

2.2 序列图语法

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

具体来说：

• 设置title，采用title: message。

title: 序列图标题

将编译为：

Created with Raphaël 2.1.2 序列图标题

• 设置participant，采用participant: actor

participant A
participant B

将编译为：

Created with Raphaël 2.1.2 A A B B

• 设置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 换行

将编译为：

Created with Raphaël 2.1.2 A A B B C C 左侧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:虚线虚箭头

将编译为：

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

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

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

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

3. 流程图

3.1 流程图示例

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

编译之后结果为：

Created with Raphaël 2.1.2 Start My Operation Yes or No? End yes no

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

3.2 流程图语法

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

1. 节点定义

格式如下：

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

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

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

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

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

2. 节点连接

格式如下

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

如下面代码所示：

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

编译之后结果为

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

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

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

列出源代码供大家参考。

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

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

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

<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
'>

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

5. 声明

前端开发whqet，关注前端开发，分享相关资源。csdn专家博客，王海庆希望能对您有所帮助，限于作者水平有限，出错难免，欢迎拍砖！
欢迎任何形式的转载，烦请注明装载，保留本段文字。
本文原文链接，http://blog.csdn.net/whqet/article/details/44281463
欢迎大家访问独立博客http://whqet.github.io