前言

一、序列图(Sequence)

序列图由 js-sequence提供支持,可以将代码块转成序列图

示例如下:

```sequence
Title: Here is a title
A->B: Normal line
B-->C: Dashed line
C->>D: Open arrow
D-->>A: Dashed open arrow

效果如下: ```sequence
Title: Here is a title
A->B: Normal line
B-->C: Dashed line
C->>D: Open arrow
D-->>A: Dashed open arrow

二、流程图(Flowchart)

序列图由flowchart.js提供支持,可以将代码块转成序列图

示例如下:

​```flow
st=>start: Start
op=>operation: Your Operation
cond=>condition: Yes or No?
e=>end st->op->cond
cond(yes)->e
cond(no)->op
​```

效果如下:

st=>start: Start
op=>operation: Your Operation
cond=>condition: Yes or No?
e=>end st->op->cond
cond(yes)->e
cond(no)->op

三、Mermaid

Mermaid 支持生成序列图、流程图、甘特图

详细用法参见官方文档 : https://mermaidjs.github.io/

1.Sequence

示例如下:

​```mermaid
%% Example of sequence diagram
sequenceDiagram
Alice->>Bob: Hello Bob, how are you?
alt is sick
Bob->>Alice: Not so good :(
else is well
Bob->>Alice: Feeling fresh like a daisy
end
opt Extra response
Bob->>Alice: Thanks for asking
end
​```

效果如下:

%% Example of sequence diagram
sequenceDiagram
Alice->>Bob: Hello Bob, how are you?
alt is sick
Bob->>Alice: Not so good :(
else is well
Bob->>Alice: Feeling fresh like a daisy
end
opt Extra response
Bob->>Alice: Thanks for asking
end

2.Flowchart

示例如下:

​```mermaid
graph LR
A[Hard edge] -->B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
​```

效果如下:

graph LR
A[Hard edge] -->B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]

3.Gantt

```mermaid
%% Example with selection of syntaxes
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d section Critical tasks
Completed task in the critical line :crit, done, 2014-01-06,24h
Implement parser and jison :crit, done, after des1, 2d
Create tests for parser :crit, active, 3d
Future task in critical line :crit, 5d
Create tests for renderer :2d
Add to mermaid :1d section Documentation
Describe gantt syntax :active, a1, after des1, 3d
Add gantt diagram to demo page :after a1 , 20h
Add another diagram to demo page :doc1, after a1 , 48h section Last section
Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page : 20h
Add another diagram to demo page : 48h
```

效果如下:

%% Example with selection of syntaxes
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid

section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d

section Critical tasks
Completed task in the critical line :crit, done, 2014-01-06,24h
Implement parser and jison :crit, done, after des1, 2d
Create tests for parser :crit, active, 3d
Future task in critical line :crit, 5d
Create tests for renderer :2d
Add to mermaid :1d

section Documentation
Describe gantt syntax :active, a1, after des1, 3d
Add gantt diagram to demo page :after a1 , 20h
Add another diagram to demo page :doc1, after a1 , 48h

section Last section
Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page : 20h
Add another diagram to demo page : 48h

参考资料

  1. https://support.typora.io/Draw-Diagrams-With-Markdown/
  2. https://github.com/adrai/flowchart.js
  3. Markdown绘制流程图的方法
  4. Markdown中使用mermaid画流程图

Markdown_02_作图的更多相关文章

  1. excel 作图中次横坐标及次纵坐标的调试,以及excel自定义轴标签的步骤方法

    在工作中除了要做一些常用的图表之外,不时还会有一切奇怪图表的制作需求. 今天的内容主要记录的是如何对excle图表的次横坐标及次纵坐标进行调试,以及如何自定义调整轴标签 首先看下如何做次纵坐标,工作中 ...

  2. 如何让你的UWP应用程序无缝调用几何作图

    有时候需要编辑一些几何图形,如三角形,圆锥曲线等,在UWP应用中加入这些几何作图功能是件费时间又很难做好的事.其实Windows 10 应用商店中已有一些专业的几何作图工具了,那么能借来一用吗?答案是 ...

  3. MFC学习-第4课 消息机制和MFC作图

    转自: 1.http://blog.sina.com.cn/s/blog_6b5180bf01012kbz.html 2.http://blog.csdn.net/happyhhb/article/d ...

  4. 轻量级SaaS在线作图工具(继之前介绍后完整介绍)

    俗话说“一图胜千言”,在办公应用领域,流程图是一个非常好的表现企业业务流程或工作岗位规范等内容的展现形式,比如去给客户做调研,回来后都要描述出客户的关键业务流程,谁.什么时候.在什么地方.负责什么事情 ...

  5. 轻量级SaaS在线作图工具ProcessOn

    俗话说“一图胜千言”,在办公应用领域,流程图是一个非常好的表现企业业务流程或工作岗位规范等内容的展现形式,比如去给客户做调研,回来后都要描述出客户的关键业务流程,谁.什么时候.在什么地方.负责什么事情 ...

  6. Todd's Matlab讲义第1讲:向量,函数和作图

    向量 Matlab 中最基本的对象是矩阵,向量是特殊的矩阵.行向量是\(1\times n\)矩阵,列向量是\(m\times 1\)矩阵.输入如下行向量: >> v=[0 1 2 3] ...

  7. 支持多人协作的在线免费作图工具:ProcessOn

    之前朋友给我推荐一款作图工具ProcessOn,出于好奇我就研究了一下它,今天我就给大家简单介绍一下这款免费的在线作图工具:ProcessOn 首先使用ProcessOn我们需要有一个帐号,这样每次操 ...

  8. 推荐一款作图神器:ProcessOn

    本人近日发现一款作图神器:ProcessOn 它是一款在线的作图工具,完全国产,前台是用HTML5  Canvas加javascript做绘图,后台用java实现数据处理和图片生成, 整站UI基本类似 ...

  9. ProcessOn:功能强大的在线作图工具(HTML5)

    ProcessOn是一款专业作图人员的社交网络,这里汇聚很多业界专家.学者,同时他们分享的作品又形成一个庞大的知识图库,你在学习专业知识的同时还可以结交一些志同道合的新朋友. ProcessOn核心设 ...

随机推荐

  1. javascript 理解对象--- 属性类型

    ECMA-262 把对象定义为:无序属性的集合,其属性可以包含基本值.对象或者函数: var Person = { name:"wsc", age :"25", ...

  2. 【转】html之file标签 --- 图片上传前预览 -- FileReader

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

  3. Postman 把response的值自动放到变量里

    @ 1里面定义个变量2 3这里加上postman.setEnvironmentVariable("MatchID",JSON.parse(responseBody)); 这样rep ...

  4. 多媒体文件格式分析 MP3文件结构及编解码流程

    多媒体文件格式分析 http://blog.csdn.net/taniya001/article/details/7962864 多媒体文件格式分析 MP3文件结构及编解码流程 http://www. ...

  5. [NOI2014]起床困难综合症(二进制+贪心)

    题目 [NOI2014]起床困难综合症 做法 先用全\(0\)和全\(1\)去运行一下,再在满足\(m\)的限制下,贪心地从高位到低位选择即可

  6. React绑定this的三种方式

    React可以使用React.createClass.ES6 classes.纯函数3种方式构建组件.使用React.createClass会自动绑定每个方法的this到当前组件,但使用ES6 cla ...

  7. 【前端】jQuery实现锚点向下平滑滚动特效

    jQuery实现锚点向下平滑滚动特效 实现效果: 实现原理: 使用jQuery animate()方法实现页面平滑滚动特效 $('html, body').animate({scrollTop: $( ...

  8. ubuntu 18.04 64bit下如何安装python开发工具jupyter

    1.执行一下命令进行安装 sudo apt-get install python3-distutils wget https://bootstrap.pypa.io/get-pip.py sudo p ...

  9. [BZOJ2599]Race

    Description 给一棵树,每条边有权.求一条简单路径,权值和等于K,且边的数量最小.N <= 200000, K <= 1000000 Input 第一行 两个整数 n, k 第二 ...

  10. UVA 1393 Highways(数学思想)

    题意:给你n.m(n,m<=200),问你有多少条非水平.非垂直的直线有多少条经过至少两个点 题解:我们需要枚举的是只画一条线的矩形,对于大小a*b的矩形必须保证gcd(a,b)=1才能不重复 ...