前言

一、序列图(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. pigeon 介绍

    https://github.com/dianping/pigeon Pigeon开发指南 Pigeon是一个分布式服务通信框架(RPC),在美团点评内部广泛使用,是美团点评最基础的底层框架之一. 主 ...

  2. Ubuntu16.04安装和卸载MySQL 5.7

    介绍: MySQL 是一种开源数据库管理系统,通常作为流行的LAMP(Linux,Apache,MySQL,PHP / Python / Perl)堆栈的一部分安装.它使用关系数据库和SQL(结构化查 ...

  3. jQuery判断元素是否显示 是否隐藏

    var node=$('#id'); 第一种写法 if(node.is(':hidden')){ //如果node是隐藏的则显示node元素,否则隐藏 node.show(); }else{ node ...

  4. 20135320赵瀚青LINUX第五章读书笔记

    第五章--系统调用 5.1 与内核通信 作用 1.为用户空间提供一种硬件的抽象接口 2.保证系统稳定和安全 3.除异常和陷入,是内核唯一的合法入口. API.POSIX和C库 关于Unix接口设计:提 ...

  5. 异常: error MSB8008: 指定的平台工具集(V120)未安装或无效

    打开项目属性->配置属性->常规,平台工作集,选为v100

  6. 解读:计数器Counter

    Counters: 44 File System Counters FILE: Number of bytes read=655771325 FILE: Number of bytes written ...

  7. Windows Server 2008驱动安装全攻略

    安装设备驱动程序原本是一件非常简单的事情,很多驱动程序在安装的时候我们只要不停单击“下一步”按钮,就能让驱动程序顺利地在对应计算机系统“落户”;不过,当身边的计算机系统升级为Windows Serve ...

  8. spring junit4 测试

    @Service @ContextConfiguration(locations = { "classpath:config/applicationContext.xml" }) ...

  9. 7.scala:继承

    版权申明:转载请注明出处. 文章来源:http://bigdataer.net/?p=315 排版乱?请移步原文获得更好的阅读体验 类似于java中的继承,在scala中同样有继承一说,而且在很多方面 ...

  10. python 类和对象的属性

    python类和对象的属性分为类属性和对象属性两大类,类属性属于类,而对象属性属于对象. 1. 父类的对象属性会被子类的对象继承. 2. 父类的类属性会被子类继承,还是作为类属性,如果父类改变了类属性 ...