CSDN Markdown简明教程4-UML图
来源:互联网 发布:淘宝蛋蛋弟点蜡烛 编辑:程序博客网 时间:2024/05/21 16:36
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 Aparticipant B
将编译为:
- 设置note,
- 左侧note: note left of acotor: message
- 右侧note: note right of actor: message,
- 覆盖note: note over actor:message
note left of A: 左侧notenote right of B: 右侧notenote over C: 覆盖notenote over A,B: 覆盖多个actornote 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: startor 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->isLoginisLogin(yes)->testisLogin(no)->login->testtest->end
编译之后结果为
接下来做一个复杂的案例,如下图所示,请大家思考如何实现。
列出源代码供大家参考。
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
4. Gravizo
在研究Markdown UML图的时候,找到了不少在线绘制UML图的方式,例如Dot、PlantUML和UMLGraph等方式,并且发现了一个不用使用任何插件就可调用图片的方式-Gravizo。
例如,我们可以使用PlantUML的方式绘制一个用例图,代码如下。
。
@startumlleft to right directionskinparam packageStyle rectactor customeractor clerkrectangle checkout { customer -- (checkout) (checkout) .> (payment) : include (help) .> (checkout) : extends (checkout) -- clerk}@enduml
然后,我们就可以使用下面代码调用该图片:
<img src='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'>
本文为《Markdown简明教程》系列教程的第4篇Markdown UML图,主要讲解Markdown序列图、流程图等, 顺便为介绍了无需任何插件的在线绘制UML的Gravizo。下一篇文章我们来研读CSDN Markdown的一些特性。
5. 声明
前端开发whqet,关注前端开发,分享相关资源。csdn专家博客,王海庆希望能对您有所帮助,限于作者水平有限,出错难免,欢迎拍砖!
欢迎任何形式的转载,烦请注明装载,保留本段文字。
本文原文链接,http://blog.csdn.net/whqet/article/details/44281463
欢迎大家访问独立博客http://whqet.github.io
- CSDN Markdown简明教程4-UML图
- CSDN Markdown简明教程4-UML图
- CSDN Markdown简明教程4-UML图
- CSDN Markdown简明教程4-UML图
- 0.4 CSDN Markdown简明教程4-UML图
- CSDN Markdown简明教程
- CSDN Markdown简明教程
- CSDN Markdown简明教程1-关于Markdown
- CSDN Markdown简明教程1-关于Markdown
- CSDN Markdown简明教程1-关于Markdown
- CSDN Markdown简明教程2-基本使用
- CSDN Markdown简明教程5-快速上手
- 《CSDN Markdown简明教程》课程上线!
- CSDN Markdown简明教程5-快速上手
- CSDN Markdown简明教程2-基本使用
- CSDN Markdown简明教程2-基本使用
- CSDN Markdown简明教程5-快速上手
- CSDN Markdown简明教程-表格和公式
- Android下怎么给APP加root
- IndentationError:expected an indented block错误解决
- Volley常用方法示例
- 05-语言入门-05-素数求和问题
- 面试题之开两个线程交替输出数字
- CSDN Markdown简明教程4-UML图
- 06-语言入门-06-素数距离问题
- 批处理设置IP
- 循环排座位问题------西方的约瑟夫环
- python脚本中的#!/usr/bin/python
- LeetCode - Search a 2D Matrix
- relational operator demo
- spring属性占位符
- 封装自己的控件库:iPhone静态库的应用