CSDN Markdown简明教程4-UML图

╰+哭是因爲堅強的太久メ 2022-08-07 05:46 178阅读 0赞

![Markdown简明教程4-Markdown UML图][Markdown_4-Markdown 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][]实现了序列图，使用下列的格式声明一个序列图：  
![序列图][20150315220734627]  
在网页上解析结果为：

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

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

## 2.2 序列图语法 ##

序列图的语法如下图所示。  
![序列图语法][20150316191258743]  
具体来说：

*  设置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自言自语实线实箭头虚线实箭头实线虚箭头虚线虚箭头

下面的案例演示了序列图语法的混合使用，参见代码：  
![序列图设置][20150315223328558]  
在网页上解析之后结果为：

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

# 3. 流程图 #

## 3.1 流程图示例 ##

CSDN Markdown基于[flowchart.js][]实现流程图。一个简单的流程格式如下代码所示：  
![这里写图片描述][20150316200738992]  
编译之后结果为：

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

**注意：**所有的流程图代码需要放在一个语法类型为**flow**的代码块中。如下面代码所示。  
![这里写图片描述][20150316215555156]

## 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的方式绘制一个用例图，代码如下。  
![用例图][usecase_015.png]。

@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_blog.csdn.net_whqet_article_details_44281463]*  
*欢迎大家访问独立博客[http://whqet.github.io][http_whqet.github.io]*

[Markdown_4-Markdown UML]: /images/20220805/6a9c9fbf9efc4c7eab77333a439d0658.png
[js-sequence-diagrams]: http://bramp.github.io/js-sequence-diagrams/
[20150315220734627]: /images/20220805/d15f7dd0a935473686539464de778536.png
[20150316194355337]: /images/20220805/0e112488e458412b9b0374612ebdd80e.png
[20150316191258743]: /images/20220805/0ce4d48aa99841d79d0324f6ccd28f21.png
[20150315223328558]: /images/20220805/f95a356efaf04c2d9cb844e63e4c8d47.png
[flowchart.js]: http://adrai.github.io/flowchart.js/
[20150316200738992]: /images/20220805/8d388bebd70c4f2593fc13fb5c3bdb63.png
[20150316215555156]: /images/20220805/a118bea38d5a4fa08d4f45e1db5e1551.png
[Dot]: http://en.wikipedia.org/wiki/DOT_%28graph_description_language%29
[PlantUML]: http://plantuml.sourceforge.net/index.html
[UMLGraph]: http://www.umlgraph.org/doc/cd-model.html
[usecase_015.png]: /images/20220805/f7a89bc160bd40dea3c902e9abb962ea.png
[http_blog.csdn.net_whqet_article_details_44281463]: http://blog.csdn.net/whqet/article/details/44281463
[http_whqet.github.io]: http://whqet.github.io