从入门到好使——CSDN 上的 Markdown 练习手册
**说明：
- 本文档由CSDN 上的 Markdown编写，只负责展示，具体的Markdown怎么写的看附带链接。
- 经测试，常用工具对Markdown支持不相同，比如我用的有道云笔记和csdn上就不一样，具体自己慢慢发现，或者留言即可，在此就不赘述了**
- 欢迎点赞，附Markdown文本链接。
一、待办
待办事项和清单在日常工作、生活中经常被使用。
在Markdown中，你只需要在待办的事项文本或者清单文本前加上- [ ]、- [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（从左到右）
A
B
A
B
A
B
A
B
A
B
1
2
3
我是a矩形
我是b圆角
判断
结果是1
结果是2
结果是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并在中间加上文字描述
描述
描述
描述
描述
A
B
A
B
A
B
A
B
A
B
A
B
A
B
A
B
A
B
子流程图
格式
subgraph title
graph definition
end
three
two
one
c2
c1
b2
b1
a2
a1
自定义样式
语法：style id 具体样式
graph LR
id1(Start)-->id2(Stop)
style id1 fill:#f9f,stroke:#333,stroke-width:4px,fill-opacity:0.5
style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 10,5
demo
绘制一个流程图,找出 A、 B、 C 三个数中最大的一个数。
写法
YES
NO
YES
NO
YES
NO
开始
输入A,B,C
A是否大于B
A是否大于C
B是否大于C
输出A
输出C
输出B
结束
三、甘特图
我们在工作中用甘特图作计划进度表、项目进度表再合适不过了。
以如下甘特图为例说明，
甘1
与流程图一样，Markdown中，甘特图的语法也是以 “开头，以 “ 结尾。
在 “` 后另起一行，书写 gantt ，用以确定将要绘制的是甘特图。
标题的书写语法如下：
Mon 02 Mon 09 Mon 16 Mon 23 明确需求 跟进开发 走查测试 初期阶段 中期阶段 后期阶段 产品计划表
Mon 06 Mon 13 Mon 20 已完成的任务 正在进行的任务 待完成任务1 待完成任务2 任务1 使用mermaid语言定制甘特图
四、总结：就这样的模式，直接来实例
1、横向流程图源码格式：
a=1
a=2
方形
圆角
条件a
结果1
结果2
横向流程图
2、竖向流程图源码格式：
a=1
a=2
方形
圆角
条件a
结果1
结果2
竖向流程图
3、标准流程图源码格式：
Created with Raphaël 2.2.0 开始框 处理框 判断框(是或否?) 输入输出框 结束框 子流程 yes no
4、标准流程图源码格式（横向）：
Created with Raphaël 2.2.0 开始框 处理框 判断框(是或否?) 输入输出框 结束框 子流程 yes no
5、UML时序图源码样例：
对象A 对象B 对象B你好吗?（请求） 对象B的描述 对象A的描述(提示) 我很好(响应) 你真的好吗？ 对象A 对象B 标题：复杂使用
6、UML时序图源码复杂样例：
对象A 对象B 小三 C 对象B你好吗?（请求） 对象B的描述 对象A的描述(提示) 我很好(响应) 你好吗 对象B找我了 你真的好吗？ 我们是朋友 没人陪我玩 对象A 对象B 小三 C 标题：复杂使用
7、UML标准时序图样例：
%% 时序图例子,-> 直线，–>虚线，->>实线箭头
张三 李四 王五 王五你好吗？ 与疾病战斗 loop [健康检查] 合理 食物 看医生... 很好! 你怎么样? 很好! 张三 李四 王五 标题：复杂使用
8、甘特图样例：
%% 语法示例
Mon 06 Mon 13 Mon 20 需求 原型 UI设计 未来任务 学习准备理解需求 设计框架 开发 未来任务 耍 功能测试 压力测试 测试报告 设计 开发 测试 软件开发甘特图
五、基础
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));