程序博客网 > 淘宝客邻尚品的货真假

CSDN Markdown简明教程4-UML图

来源：互联网 发布：淘宝客邻尚品的货真假 编辑：程序博客网 时间：2024/05/18 14:14

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实现了序列图，使用下列的格式声明一个序列图： 
序列图 
在网页上解析结果为：

DHCP客户机DHCP客户机DHCP服务器DHCP服务器IP租约请求IP租约提供IP租约选择IP租约确认

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

2.2 序列图语法

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

  • 设置title，采用title: message。
<code class="language-markdown hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background: transparent;">title: 序列图标题</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>

将编译为：

序列图标题
  • 设置participant，采用participant: actor
<code class="language-markdown hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background: transparent;">participant Aparticipant B</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li></ul>

将编译为：

AABB
  • 设置note， 
    • 左侧note： note left of acotor： message
    • 右侧note： note right of actor: message,
    • 覆盖note： note over actor:message
<code class="language-markdown hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background: transparent;">note left of A: 左侧notenote right of B: 右侧notenote over C: 覆盖notenote over A,B: 覆盖多个actornote over B,C: 测试下\n 换行</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li></ul>

将编译为：

AABBCC左侧note右侧note覆盖note覆盖多个actor测试下 换行
  • 设置会话， 
    • 实线实箭头： actor->actor: message
    • 虚线实箭头： actor–>actor:message
    • 实线虚箭头： actor->>actor:message
    • 虚线虚箭头： actor–>>actor:message
<code class="language-markdown hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background: transparent;"> A->A:自言自语 A->B:实线实箭头 A-->B:虚线实箭头 A->>B:实线虚箭头 A-->>B:虚线虚箭头</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li></ul>

将编译为：

AABB自言自语实线实箭头虚线实箭头实线虚箭头虚线虚箭头

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

作业通知提交序列图教师教师班长班长同学们同学们通知明天作业通知记得明天交作业了解交作业作业

3. 流程图

3.1 流程图示例

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

StartMy OperationYes or No?Endyesno

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

3.2 流程图语法

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

1. 节点定义

格式如下：

<code class="language-markdown hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background: transparent;">节点名称=>节点类型: 提示文本</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>
  • 节点名称可随意起，甚至支持中文。提示文本可以为英文，可以为中文，也可以为空使用默认值。例如：
<code class="language-markdown hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-code" style="box-sizing: border-box;">    st=>start: start</span>or<span class="hljs-code" style="box-sizing: border-box;">    kaishi=>start: 开始</span>or<span class="hljs-code" style="box-sizing: border-box;">    起点=>start: 起点</span>or<span class="hljs-code" style="box-sizing: border-box;">    start=>start</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li></ul>
  • 节点类型有start、operation、condition、end等，如下图所示。
<code class="language-markdown hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background: transparent;">start=>start: 开始login=>operation: 登陆isLogin=>condition: 是否已登陆？test=>operation: 进行测试end=>end: 结束</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li></ul>

2. 节点连接

格式如下

<code class="language-markdown hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background: transparent;">一般节点连接：<span class="hljs-code" style="box-sizing: border-box;">    节点->节点</span>条件判断节点连接：<span class="hljs-code" style="box-sizing: border-box;">    条件节点(yes)->正确应答节点</span><span class="hljs-code" style="box-sizing: border-box;">    条件节点(no)->错误应答节点</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li></ul>

如下面代码所示：

<code class="language-markdown hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background: transparent;">start->isLoginisLogin(yes)->testisLogin(no)->login->testtest->end</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li></ul>

编译之后结果为

开始是否已登陆？进行测试结束登陆yesno

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

开始是否已登录？选择一张图片格式是否正确？完成资料资料是否符合要求？完成登陆yesnoyesnoyesno

列出源代码供大家参考。

<code class="language-markdown hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background: transparent;">start=>start: 开始isLogin=>condition: 是否已登录？login=>operation: 登陆selectPic=>operation: 选择一张图片isPic=>condition: 格式是否正确？doIt=>operation: 完成资料isRight=>condition: 资料是否符合要求？end=>end: 完成start->isLoginisLogin(yes)->selectPicisLogin(no)->login->selectPicselectPic->isPicisPic(yes)->doIt->isRightisPic(no)->selectPicisRight(yes)->endisRight(no)->doIt</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li></ul>

4. Gravizo

在研究Markdown UML图的时候，找到了不少在线绘制UML图的方式，例如Dot、PlantUML和UMLGraph等方式，并且发现了一个不用使用任何插件就可调用图片的方式-Gravizo。

例如，我们可以使用PlantUML的方式绘制一个用例图，代码如下。 
用例图。

<code class="language-PlantUML hljs livecodeserver has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background: transparent;">@startumlleft <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">to</span> <span class="hljs-constant" style="box-sizing: border-box;">right</span> directionskinparam packageStyle rectactor customeractor clerkrectangle checkout {  customer <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">-- (checkout)</span>  (checkout) .> (payment) : <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">include</span>  (help) .> (checkout) : extends  (checkout) <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">-- clerk</span>}@enduml</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li></ul>

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

<code class="language-html hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">img</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">src</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">'http://g.gravizo.com/g?@startumlleft to right direction;skinparam packageStyle rect;actor customer;actor clerk;rectangle checkout {  customer -- (checkout);  (checkout) .> (payment) : include;  (help) .> (checkout) : extends;  (checkout) -- clerk;}@enduml'</span>></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li></ul>

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

5. 声明

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


      • 节点连接
  • 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实现了序列图，使用下列的格式声明一个序列图： 
序列图 
在网页上解析结果为：

DHCP客户机DHCP客户机DHCP服务器DHCP服务器IP租约请求IP租约提供IP租约选择IP租约确认

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

2.2 序列图语法

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

  • 设置title，采用title: message。
<code class="language-markdown hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background: transparent;">title: 序列图标题</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>

将编译为：

序列图标题
  • 设置participant，采用participant: actor
<code class="language-markdown hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background: transparent;">participant Aparticipant B</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li></ul>

将编译为：

AABB
  • 设置note， 
    • 左侧note： note left of acotor： message
    • 右侧note： note right of actor: message,
    • 覆盖note： note over actor:message
<code class="language-markdown hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background: transparent;">note left of A: 左侧notenote right of B: 右侧notenote over C: 覆盖notenote over A,B: 覆盖多个actornote over B,C: 测试下\n 换行</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li></ul>

将编译为：

AABBCC左侧note右侧note覆盖note覆盖多个actor测试下 换行
  • 设置会话， 
    • 实线实箭头： actor->actor: message
    • 虚线实箭头： actor–>actor:message
    • 实线虚箭头： actor->>actor:message
    • 虚线虚箭头： actor–>>actor:message
<code class="language-markdown hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background: transparent;"> A->A:自言自语 A->B:实线实箭头 A-->B:虚线实箭头 A->>B:实线虚箭头 A-->>B:虚线虚箭头</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li></ul>

将编译为：

AABB自言自语实线实箭头虚线实箭头实线虚箭头虚线虚箭头

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

作业通知提交序列图教师教师班长班长同学们同学们通知明天作业通知记得明天交作业了解交作业作业

3. 流程图

3.1 流程图示例

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

StartMy OperationYes or No?Endyesno

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

3.2 流程图语法

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

1. 节点定义

格式如下：

<code class="language-markdown hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background: transparent;">节点名称=>节点类型: 提示文本</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>
  • 节点名称可随意起，甚至支持中文。提示文本可以为英文，可以为中文，也可以为空使用默认值。例如：
<code class="language-markdown hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-code" style="box-sizing: border-box;">    st=>start: start</span>or<span class="hljs-code" style="box-sizing: border-box;">    kaishi=>start: 开始</span>or<span class="hljs-code" style="box-sizing: border-box;">    起点=>start: 起点</span>or<span class="hljs-code" style="box-sizing: border-box;">    start=>start</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li></ul>
  • 节点类型有start、operation、condition、end等，如下图所示。
<code class="language-markdown hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background: transparent;">start=>start: 开始login=>operation: 登陆isLogin=>condition: 是否已登陆？test=>operation: 进行测试end=>end: 结束</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li></ul>

2. 节点连接

格式如下

<code class="language-markdown hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background: transparent;">一般节点连接：<span class="hljs-code" style="box-sizing: border-box;">    节点->节点</span>条件判断节点连接：<span class="hljs-code" style="box-sizing: border-box;">    条件节点(yes)->正确应答节点</span><span class="hljs-code" style="box-sizing: border-box;">    条件节点(no)->错误应答节点</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li></ul>

如下面代码所示：

<code class="language-markdown hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background: transparent;">start->isLoginisLogin(yes)->testisLogin(no)->login->testtest->end</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li></ul>

编译之后结果为

开始是否已登陆？进行测试结束登陆yesno

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

开始是否已登录？选择一张图片格式是否正确？完成资料资料是否符合要求？完成登陆yesnoyesnoyesno

列出源代码供大家参考。

<code class="language-markdown hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background: transparent;">start=>start: 开始isLogin=>condition: 是否已登录？login=>operation: 登陆selectPic=>operation: 选择一张图片isPic=>condition: 格式是否正确？doIt=>operation: 完成资料isRight=>condition: 资料是否符合要求？end=>end: 完成start->isLoginisLogin(yes)->selectPicisLogin(no)->login->selectPicselectPic->isPicisPic(yes)->doIt->isRightisPic(no)->selectPicisRight(yes)->endisRight(no)->doIt</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li></ul>

4. Gravizo

在研究Markdown UML图的时候，找到了不少在线绘制UML图的方式，例如Dot、PlantUML和UMLGraph等方式，并且发现了一个不用使用任何插件就可调用图片的方式-Gravizo。

例如，我们可以使用PlantUML的方式绘制一个用例图，代码如下。 
用例图。

<code class="language-PlantUML hljs livecodeserver has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background: transparent;">@startumlleft <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">to</span> <span class="hljs-constant" style="box-sizing: border-box;">right</span> directionskinparam packageStyle rectactor customeractor clerkrectangle checkout {  customer <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">-- (checkout)</span>  (checkout) .> (payment) : <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">include</span>  (help) .> (checkout) : extends  (checkout) <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">-- clerk</span>}@enduml</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li></ul>

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

<code class="language-html hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">img</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">src</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">'http://g.gravizo.com/g?@startumlleft to right direction;skinparam packageStyle rect;actor customer;actor clerk;rectangle checkout {  customer -- (checkout);  (checkout) .> (payment) : include;  (help) .> (checkout) : extends;  (checkout) -- clerk;}@enduml'</span>></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li></ul>

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

5. 声明

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

顶
0 0
淘宝客邻尚品的货真假 淘宝客邻尚品的货真假
原创粉丝点击
热门IT博客
淘宝 我的评价中在哪里淘宝 我的评价中在哪里
初学c语言用什么书好初学c语言用什么书好
手机商城html源码下载
铂金婚戒 知乎
淘宝网大码女装羽绒服
系统稳定性测试软件
python读取bin文件
淘宝首页优惠券代码
图片融合器软件下载
python 命令行参数
恒久软件客服电话
js跳转页面代码
薛绍和太平公主 知乎
c语言log函数怎么调用
pl sql developer配置
做片头的软件
淘宝怎么让客服介入
ubuntu如何安装jdk1.8
淘宝代购真假
php 任务队列
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 m码适合多高 体重多重 裤子m码是多大 女装m码是多大 衣服m码是多大 裤子27码是s还是m 陕汽新m3000故障码大全 裤子m码是多大尺寸 m码的裤子是多大 裤子26码是s还是m m码是多大号码裤子 羽绒服m码是多大 上衣m码是多大 男装m码是多大 m码裤子是多大码 女生m码是多大 m码衣服多大 m秃 m字头是秃顶的前兆吗 m秃能恢复吗 m型秃顶怎么办 m型发际线容易秃顶吗 m型发际线一定会秃吗 m站入口 m站下载 武汉柏林站更名m m站是什么 大鹏教育m站 m站全名是什么 m3u8资源站 2234m新站 m站app叫什么名字 m站不可描述系列 m.4hu.tv大陆站 京东m端 m端 78m12三端稳压器参数 m记 m记wifi 女m养成记 抖m爸爸养成记 抖m爸爸养成记7

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里