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客户机DHCPserverDHCPserverIP租约请求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.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 换行

将编译为：

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:虚线虚箭头

将编译为：

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. 节点定义

格式例如以下：

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

• 节点名称可任意起，甚至支持中文。

  提示文本能够为英文，能够为中文，也能够为空使用默认值。比如：

    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開始是否已登陆？进行測试结束登陆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

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

版权声明：本文博客原创文章。博客，未经同意，不得转载。