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实现了序列图。使用下列的格式声明一个序列图：

在网页上解析结果为：

注意：所有的序列图代码需要放在一个语法类型为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)->doIt

4. Gravizo

在研究Markdown UML图的时候，找到了很多在线绘制UML图的方式。好比Dot、PlantUML和UMLGraph等方式，并且发现了一个不用使用不论什么插件就可调用图片的方式-http://www.javashuo.com/tag/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