目录
说明
经测试，常用工具对Markdown支持不相同，比如我用的有道云笔记和csdn上就不一样，具体自己慢慢发掘，在此就不赘述了
学习使用方法：保存此md文件，找个Markdown环境，粘贴直接看
① 将本文档保存到你的有道云笔记，点击文章内的右上角：编辑！！即可
如图：
② 打开链接，直接保存到本地，找个Markdown环境，复制进去查看
写的文件如下。很不幸，博客园不支持我在有道云写的Markdown文本，但是万变不离其宗，我就不改语法了，按照上边的学习即可。
一、待办
待办事项和清单在日常工作、生活中经常被使用。
在Markdown中，你只需要在待办的事项文本或者清单文本前加上- [ ]、- [x]即可。
- [ ] 表示未完成，- [x] 表示已完成。
注：键入字符与字符之间都要保留一个字符的空格。
- [x] 应该是这么回事
- [ ] 应该是这么回事
二、流程图
在Markdown中，一段流程图语法以 “` 开头，以 “` 结尾。
在 “` 后另起一行，书写graph XX，用以确定将要绘制的流程图及其类型（XX表示流程图类型）。
流程图分为竖向和横向两大类，竖向包括自上而下和自下而上两种顺序，
横向包括从右到左和从左到右两种顺序。
其对应语法分别为：graph TB/graph BT/graph RL/graph LR。
TB - top bottom（自上而下）
BT - bottom top（自下而上）
RL - right left（从右到左）
LR - left right（从左到右）
graph TB
A-->B
graph BT
A-->B
graph RL
A-->B
graph LR
A-->B
graph TD
A-->B
graph TD
A[我是a矩形] --> B(我是b圆角)
B --> C{判断}
C --> |1| D[结果是1]
C --> |2| E[结果是2]
C --> |3| F[结果是3]
基本图形
- id + [文字描述]矩形
- id + (文字描述)圆角矩形
- id + >文字描述]不对称的矩形
- id + {文字描述}菱形
- id + ((文字描述))圆形
graph TD
id[带文本的矩形]
id4(带文本的圆角矩形)
id3>带文本的不对称的矩形]
id1{带文本的菱形}
id2((带文本的圆形))
节点之间的连接
- A --> B A带箭头指向B
- A --- B A不带箭头指向B
- A -.- B A用虚线指向B
- A -.-> B A用带箭头的虚线指向B
- A ==> B A用加粗的箭头指向B
- A -- 描述 --- B A不带箭头指向B并在中间加上文字描述
- A -- 描述 --> B A带箭头指向B并在中间加上文字描述
- A -. 描述 .-> B A用带箭头的虚线指向B并在中间加上文字描述
- A == 描述 ==> B A用加粗的箭头指向B并在中间加上文字描述
graph LR
A[A] --> B[B]
A1[A] --- B1[B]
A4[A] -.- B4[B]
A5[A] -.-> B5[B]
A7[A] ==> B7[B]
A2[A] -- 描述 --- B2[B]
A3[A] -- 描述 --> B3[B]
A6[A] -. 描述 .-> B6[B]
A8[A] == 描述 ==> B8[B]
子流程图
格式
subgraph title
graph definition
end
graph TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
自定义样式
语法：style id 具体样式
graph LR
id1(Start)-->id2(Stop)
style id1 fill:#f9f,stroke:#333,stroke-4px,fill-opacity:0.5
style id2 fill:#ccf,stroke:#f66,stroke-2px,stroke-dasharray: 10,5
demo
绘制一个流程图,找出 A、 B、 C 三个数中最大的一个数。
写法
graph LR
start[开始] --> input[输入A,B,C]
input --> conditionA{A是否大于B}
conditionA -- YES --> conditionC{A是否大于C}
conditionA -- NO --> conditionB{B是否大于C}
conditionC -- YES --> printA[输出A]
conditionC -- NO --> printC[输出C]
conditionB -- YES --> printB[输出B]
conditionB -- NO --> printC[输出C]
printA --> stop[结束]
printC --> stop
printB --> stop
三、甘特图
我们在工作中用甘特图作计划进度表、项目进度表再合适不过了。
以如下甘特图为例说明，
甘1
与流程图一样，Markdown中，甘特图的语法也是以 “ 开头，以 “ 结尾。
在 “` 后另起一行，书写 gantt ，用以确定将要绘制的是甘特图。
标题的书写语法如下：
gantt
dateFormat YYYY-MM-DD
title 产品计划表
section 初期阶段
明确需求: 2020-03-01, 10d
section 中期阶段
跟进开发: 2020-03-11, 15d
section 后期阶段
走查测试: 2020-03-20, 9d
gantt
dateFormat YYYY-MM-DD
title 使用mermaid语言定制甘特图
section 任务1
已完成的任务:done,des1,2014-01-06,2014-01-08
正在进行的任务:active,des2,2014-01-09,3d
待完成任务1:des3, after des2, 5d
待完成任务2:des4, after des3, 5d
===================================================
实例效果图如下：
1、横向流程图源码格式：
graph LR
A[方形] -->B(圆角)
B --> C{条件a}
C -->|a=1| D[结果1]
C -->|a=2| E[结果2]
F[横向流程图]
2、竖向流程图源码格式：
graph TD
A[方形] --> B(圆角)
B --> C{条件a}
C --> |a=1| D[结果1]
C --> |a=2| E[结果2]
F[竖向流程图]
3、标准流程图源码格式：（有道云好像不支持，可以换别的编辑器环境试试）
st=>start: 开始框
op=>operation: 处理框
cond=>condition: 判断框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 输入输出框
e=>end: 结束框
st->op->cond
cond(yes)->io->e
cond(no)->sub1(right)->op
4、标准流程图源码格式（横向）：（有道云好像不支持，可以换别的编辑器环境试试）
st=>start: 开始框
op=>operation: 处理框
cond=>condition: 判断框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 输入输出框
e=>end: 结束框
st(right)->op(right)->cond
cond(yes)->io(bottom)->e
cond(no)->sub1(right)->op
5、UML时序图源码样例：
sequenceDiagram
对象A->对象B: 对象B你好吗?（请求）
Note right of 对象B: 对象B的描述
Note left of 对象A: 对象A的描述(提示)
对象B-->对象A: 我很好(响应)
对象A->对象B: 你真的好吗？
6、UML时序图源码复杂样例：（有道云好像不支持，可以换别的编辑器环境试试）
Title: 标题：复杂使用
对象A->对象B: 对象B你好吗?（请求）
Note right of 对象B: 对象B的描述
Note left of 对象A: 对象A的描述(提示)
对象B-->对象A: 我很好(响应)
对象B->小三: 你好吗
小三-->>对象A: 对象B找我了
对象A->对象B: 你真的好吗？
Note over 小三,对象B: 我们是朋友
participant C
Note right of C: 没人陪我玩
7、UML标准时序图样例：
%% 时序图例子,-> 直线，-->虚线，->>实线箭头
sequenceDiagram
participant 张三
participant 李四
张三->王五: 王五你好吗？
loop 健康检查
王五->王五: 与疾病战斗
end
Note right of 王五: 合理 食物 <br/>看医生...
李四-->>张三: 很好!
王五->李四: 你怎么样?
李四-->王五: 很好!
8、甘特图样例：
%% 语法示例
gantt
dateFormat YYYY-MM-DD
title 软件开发甘特图
section 设计
需求 :done, des1, 2014-01-06,2014-01-08
原型 :active, des2, 2014-01-09, 3d
UI设计 : des3, after des2, 5d
未来任务 : des4, after des3, 5d
section 开发
学习准备理解需求 :crit, done, 2014-01-06,24h
设计框架 :crit, done, after des2, 2d
开发 :crit, active, 3d
未来任务 :crit, 5d
耍 :2d
section 测试
功能测试 :active, a1, after des3, 3d
压力测试 :after a1 , 20h
测试报告 : 48h
四、总结：就这样的模式，直接来实例
有些环境需要注明```mermaid
1、横向流程图源码格式：
graph LR
A[方形] -->B(圆角)
B --> C{条件a}
C -->|a=1| D[结果1]
C -->|a=2| E[结果2]
F[横向流程图]
2、竖向流程图源码格式：
graph TD
A[方形] --> B(圆角)
B --> C{条件a}
C --> |a=1| D[结果1]
C --> |a=2| E[结果2]
F[竖向流程图]
3、标准流程图源码格式：
flowchat
st=>start: 开始框
op=>operation: 处理框
cond=>condition: 判断框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 输入输出框
e=>end: 结束框
st->op->cond
cond(yes)->io->e
cond(no)->sub1(right)->op
4、标准流程图源码格式（横向）：
flowchat
st=>start: 开始框
op=>operation: 处理框
cond=>condition: 判断框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 输入输出框
e=>end: 结束框
st(right)->op(right)->cond
cond(yes)->io(bottom)->e
cond(no)->sub1(right)->op
5、UML时序图源码样例：
sequenceDiagram
对象A->>对象B: 对象B你好吗?（请求）
Note right of 对象B: 对象B的描述
Note left of 对象A: 对象A的描述(提示)
对象B-->>对象A: 我很好(响应)
对象A->>对象B: 你真的好吗？
6、UML时序图源码复杂样例：
sequenceDiagram
Title: 标题：复杂使用
对象A->>对象B: 对象B你好吗?（请求）
Note right of 对象B: 对象B的描述
Note left of 对象A: 对象A的描述(提示)
对象B-->>对象A: 我很好(响应)
对象B->>小三: 你好吗
小三-->>对象A: 对象B找我了
对象A->>对象B: 你真的好吗？
Note over 小三,对象B: 我们是朋友
participant C
Note right of C: 没人陪我玩
7、UML标准时序图样例：
%% 时序图例子,-> 直线，-->虚线，->>实线箭头
%% 时序图例子,-> 直线，-->虚线，->>实线箭头
sequenceDiagram
participant 张三
participant 李四
张三->王五: 王五你好吗？
loop 健康检查
王五->王五: 与疾病战斗
end
Note right of 王五: 合理 食物 <br/>看医生...
李四-->>张三: 很好!
王五->李四: 你怎么样?
李四-->王五: 很好!
8、甘特图样例：
%% 语法示例
gantt
dateFormat YYYY-MM-DD
title 软件开发甘特图
section 设计
需求 :done, des1, 2014-01-06,2014-01-08
原型 :active, des2, 2014-01-09, 3d
UI设计 : des3, after des2, 5d
未来任务 : des4, after des3, 5d
section 开发
学习准备理解需求 :crit, done, 2014-01-06,24h
设计框架 :crit, done, after des2, 2d
开发 :crit, active, 3d
未来任务 :crit, 5d
耍 :2d
section 测试
功能测试 :active, a1, after des3, 3d
压力测试 :after a1 , 20h
测试报告 : 48h
五、基础
h1 标题
h2 标题
h3 标题
h4 标题
h5 标题
h6 标题
水平线
文本样式
This is bold text
This is bold text
This is italic text
This is italic text
Strikethrough
列表
无序
- Create a list by starting a line with
+,-, or* - Sub-lists are made by indenting 2 spaces:
- Marker character change forces new list start:
- Ac tristique libero volutpat at
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Marker character change forces new list start:
- Very easy!
有序
-
Lorem ipsum dolor sit amet
-
Consectetur adipiscing elit
-
Integer molestie lorem at massa
-
You can use sequential numbers...
-
...or keep all the numbers as
1.
Start numbering with offset:
- foo
- bar
代码
Inline code
Indented code
// Some comments
line 1 of code
line 2 of code
line 3 of code
Block code "fences"
Sample text here...
Syntax highlighting
var foo = function (bar) {
return bar++;
};
console.log(foo(5));