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实现了序列图。使用下列的格式声明一个序列图：
在网页上解析结果为：
注意：全部的序列图代码须要放在一个语法类型为sequence的代码块中。
如以下代码所看到的。
2.2 序列图语法
序列图的语法例如以下图所看到的。
详细来说：
- 设置title，採用title: message。
title: 序列图标题将编译为：
- 设置participant，採用participant: actor
participant A
participant 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 换行将编译为：
- 设置会话，
- 实线实箭头： actor->actor: message
- 虚线实箭头： actor–>actor:message
- 实线虚箭头： actor->>actor:message
- 虚线虚箭头： actor–>>actor:message
A->A:自言自语
A->B:实线实箭头
A-->B:虚线实箭头
A->>B:实线虚箭头
A-->>B:虚线虚箭头将编译为：
以下的案例演示了序列图语法的混合使用。參见代码：
在网页上解析之后结果为：
3. 流程图
3.1 流程图演示样例
CSDN Markdown基于flowchart.js实现流程图。
一个简单的流程格式例如以下代码所看到的：
编译之后结果为：
注意：全部的流程图代码须要放在一个语法类型为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编译之后结果为
接下来做一个复杂的案例。例如以下图所看到的，请大家思考怎样实现。
列出源码供大家參考。
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)->doIt4. 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
版权声明：本文博客原创文章。博客，未经同意，不得转载。