markdown 绘制流程图、时序图、甘特图

这些复杂图形的绘制都是使用代码块实现的，指定代码块的解析语言，按照响应的绘制语法即可实现。

流程图——指定 mermaid（样式流程图）或 flow （标准流程图）解析语言
时序图——指定 sequence（标准时序图）或 mermaid（样式时序图）解析语言
甘特图——指定 mermaid 解析语言

一、流程图

1. 样式流程图

基本语法：

graph 指定流程图方向：graph LR 横向，graph TD 纵向
元素的形状定义：
- id[描述] 以直角矩形绘制
- id(描述) 以圆角矩形绘制
- id{描述} 以菱形绘制
- id>描述] 以不对称矩形绘制
- id((描述)) 以圆形绘制
线条定义：
- A-->B 带箭头指向
- A---B 不带箭头连接
- A-.-B 虚线连接
- A-.->B 虚线指向
- A==>B 加粗箭头指向
- A--描述---B 不带箭头指向并在线段中间添加描述
- A--描述-->B 带描述的箭头指向
- A-.描述.->B 带描述的虚线连指向
- A==描述==>B 带描述的加粗箭头指向
子流程图定义：

subgraph titlegraph direction
end

示例：

```mermaid
graph LRA(开始) -->B(起床)B --天气不好--- C>干活]C ==> D{休息时间到了}D -.yes.-> E((休息))D -.no.-> CE --> F(吃饭)

样式流程图

2. 标准流程图

基本语法：

定义模块 id=>关键字: 描述 （“描述”的前面必须有空格，“=>” 两端不能有空格）
关键字：
- start 流程开始，以圆角矩形绘制
- opearation 操作，以直角矩形绘制
- condition 判断，以菱形绘制
- subroutine 子流程，以左右带空白框的矩形绘制
- inputoutput 输入输出，以平行四边形绘制
- end 流程结束，以圆角矩形绘制
定义模块间的流向：
- 模块1 id->模块2 id ：一般的箭头指向
- 条件模块id (描述)->模块id(direction) ：条件模块跳转到对应的执行模块，并指定对应分支的布局方向

示例：

```mermaid
flowchat
st=>start: 开始
ipt=>inputoutput: 输入一个x
op=>operation: 处理加工x+1
cond=>condition: 溢出（是或否？）
sub=>subroutine: 子流程
io=>inputoutput: 输出x
ed=>end: 结束

st->ipt->op->cond
cond(yes)->io->ed
cond(no)->sub->io->ed

标准流程图

二、时序图

1. 标准时序图

基本语法：

Title:标题 ：指定时序图的标题
Note direction of 对象:描述 ：在对象的某一侧添加描述，direction 可以为 right/left/over ， 对象 可以是多个对象，以 , 作为分隔符
participant 对象 ：创建一个对象
loop...end ：创建一个循环体
对象A->对象B:描述 ：绘制A与B之间的对话，以实线连接
- -> 实线实心箭头指向
- --> 虚线实心箭头指向
- ->> 实线小箭头指向
- -->> 虚线小箭头指向

示例：

```sequence
Title:时序图示例
客户端->服务端: 我想找你拿下数据 SYN
服务端-->客户端: 我收到你的请求啦 ACK+SYN
客户端->>服务端: 我收到你的确认啦，我们开始通信吧 ACK
Note right of 服务端: 我是一个服务端
Note left of 客户端: 我是一个客户端
Note over 服务端,客户端: TCP 三次握手
participant 观察者

标准时序图

2. 带样式时序图

基本语法同标准时序图，不同的是

需要使用 mermaid 解析，并在开头使用关键字 sequenceDiagram 指明
线段的样式遵循 mermaid 的解析方式
- -> ：实线连接
- --> ：虚线连接
- ->> ：实线箭头指向
- -->> ：虚线箭头指向

示例：

```mermaid
sequenceDiagram
对象A->对象B:中午吃什么？
对象B->>对象A: 随便
loop 思考对象A->对象A: 努力搜索
end
对象A-->>对象B: 火锅？
对象B->>对象A: 可以
Note left of 对象A: 我是一个对象A
Note right of 对象B: 我是一个对象B
participant 对象C
Note over 对象C: 我自己说了算

样式时序图

三、甘特图

基本语法：

使用 mermaid 解析语言，在开头使用关键字 gantt 指明
deteFormat 格式 指明日期的显示格式
title 标题 设置图标的标题
section 描述 定义纵向上的一个环节
定义步骤：每个步骤有两种状态 done（已完成）/ active（执行中）
- 描述: 状态,id,开始日期,结束日期/持续时间
- 描述: 状态[,id],after id2,持续时间
- crit ：可用于标记该步骤需要被修正，将高亮显示
- 如果不指定具体的开始时间或在某个步骤之后，将默认依次顺序排列

示例：

```mermaid
ganttdateFormat  YYYY-MM-DDtitle 软件开发甘特图section 设计需求:done,des1, 2019-01-06,2019-01-08原型:active,des2, 2019-01-09, 3dUI设计:des3, after des2, 5d未来任务:des4, after des3, 5dsection 开发学习准备理解需求:crit, done, 2019-01-06,24h设计框架:crit, done, after des2, 2d开发:crit, active, 3d未来任务:crit, 5d休息时间:2dsection 测试功能测试:active, a1, after des3, 3d压力测试:after a1, 20h测试报告: 48h

甘特图

转载：https://www.jianshu.com/p/6dbcc3aff98b

markdown 绘制流程图、时序图、甘特图相关推荐

Markdown mermaid种草(4)_ 甘特图
Markdown mermaid种草(4)_ 甘特图文章目录 Markdown mermaid种草(4)_ 甘特图 1 甘特图简介 2 mermaid甘特图语法及参数 2.1 gantt图开始关键字 ...
Markdown绘制流程图的方法
Markdown绘制流程图的方法日期:2015/08/13 作者:Z.K. 用Markdown绘制流程图十分简单方便,下面以几个例子来介绍其使用方法 Example1闰年判断在编辑器中输入如下代码 ...
划时代的项目管理核心引擎——DynamicGantt 动态图甘特图
DynamicGantt是基于WEB浏览器的动态甘特图解决方案. 软件的web时代,真正实现web项目管理系统的核心引擎! DynamicGantt具备如下几大特性: 数据量支持:可以支持百万级数据量 ...
tableau可视化数据分析60讲（十七）-tableau常用可视化视图（凹凸图甘特图直方图）
前言凹凸图用于使用Measure值之一来比较两个尺寸.它们对于探索时间维度或地方维度或与分析相关的其他维度的值的变化非常有用.. 关于tableau的高级部分内容,大家可自行订阅专栏 tableau ...
使用PlantUML快速绘制流程图/时序图/类图/用例图…
一.前言教程:https://plantuml.com/zh/ 二.PlantUML语言编写环境常用的编译器eclipse,IDEA intelliJ都有对应的插件,同时还和Maven和JQuer ...
showdoc流程图（markdown绘制流程图）
文章目录 1.markdown常用的流程图元素 2.示例 3.可以使用left.right和bottom关键字来调整线条的位置使流程图更加清晰 4.状态标记(todo:暂时好像没有起作用,后面抽空看看 ...
markdown的甘特图耶
前言之所以想写这篇markdown的甘特图功能,是因为在参看一个大佬的时间管理系统时,有甘特图这个东东,然后原来这就是甘特图啊,于是乎,想起typora的markdown支持这个,就找了下相关资料, ...
latex 甘特图_[简004] 史上'最全最精简'Markdown语法-速览速用
< Markdown Syntax by Andy - Saturday, March 16, 2019> 目录: 一.Markdown 基础常用语法速览速用 1. 标题1-6(" ...
在线绘制流程图网站、思维导图网站总结
本篇博客总结了在线绘制流程图.思维导图的几个网站,欢迎留言补充 1.processsOn 免费在线作图.实时协作支持流程图.思维导图.原型图.UML.网络拓扑图.组织结构图等 2.爱莫流程图爱莫流 ...

markdown 绘制流程图、时序图、甘特图

一、流程图

1. 样式流程图

2. 标准流程图

二、时序图

1. 标准时序图

2. 带样式时序图

三、甘特图

markdown 绘制流程图、时序图、甘特图相关推荐

最新文章

热门文章

markdown 绘制流程图、时序图、甘特图

一、流程图

1. 样式流程图

2. 标准流程图

二、 时序图

1. 标准时序图

2. 带样式时序图

三、甘特图

markdown 绘制流程图、时序图、甘特图相关推荐

最新文章

热门文章

二、时序图