markdown基本使用和流程图、甘特图、UML图的用法

鹤九日

已于 2023-11-14 21:38:11 修改

阅读量2.1k

点赞数 5

分类专栏： Tool 文章标签：流程图

于 2022-01-01 18:27:02 首次发布

本文链接：https://blog.csdn.net/qq_24726043/article/details/122269564

版权

Tool 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

简介

MarkDown 是一种轻量级标记语言，在2004年由约翰·格鲁伯（英语：John Gruber）创建，生成的文件后缀是.md或.markdown。

它的应用很广泛，可以用于支持：

支持在GitHub、Gitee、GitLab等平台上用于编写Wiki、ReadMe等文档说明
支持在GitBook上撰写电子书
支持导出PDF、WORD、Html等不同格式文档

MarkDown 很强大，语法支持也很多有：

标题、文本格式、列表、图片、链接、目录
代码块、注释、类图
数学公式
甘特图、UML图、Mermaid流程图、Flow流程图、饼状图

注：不同平台对MarkDown的支持不同，流程图可能会无法正常显示

很多工具或平台支持编写：

有道云笔记，印象笔记
博客园，CSDN，简书等
Visual Studio Code 安装对应的markdown插件即可
Typora，使用Mermaid渲染功能的MarkDown编译器，推荐使用，下载
墨滴收费软件，支持多个平台发送markdown文章，我主要用于在微信公众号使用。

其他教程可参考：

线上工具:

本文使用的是Typora 1.2.4版本编写，可能有些语法不支持，但尽量保证将实现的效果给大家呈现出来。
如果您喜欢在更多的平台分享，推荐看下我的另一篇博客：
MarkDown编写公众号文章

基本语法

标题

标题可使用 # 来设置大小，支持6级标题，数目越多，标题越小

# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

不要忽略空格，效果如下：

一级标题

二级标题

三级标题

四级标题

五级标题

六级标题

文本样式

文本样式支持斜体、加粗、标记、删除、下划线，文字变色等

*斜体文本*
**加粗文本**
==标记文本==
~~删除文本~~
<u>下划线文本</u>

效果如下：

斜体文本
加粗文本
标记文本
~~删除文本~~

下划线文本

分割线

分割线使用使用 ***** 或 - 在3个以上即可

---- 					
***

在某些工具中，2级以下的标题会默认显示下划线，效果如下：

目录列表

目录列表有两种格式的显示：

配合Tab键使用，样式有：

- 项目
  * 项目
    + 项目

1. 项目1
2. 项目2
3. 项目3

- [ ] 计划任务
- [x] 完成任务

效果如下：

项目
- 项目
  - 项目

项目1
项目2
项目3

计划任务
完成任务

使用 > 表示

> 第1章：绪论
>
> > 1.1 MarkDown基本用法1
> >
> > 1.2 MarkDown的说明
>
> 第2章：开始
>
> > 2.1 内容
> >
> > > 2.1.1 内容拓展
>
> 第3章： 结束

效果如下：

第1章：绪论

1.1 MarkDown基本用法1

1.2 MarkDown的说明

第2章：开始

2.1 内容

2.1.1 内容拓展

第3章：结束

图片

如果在Typora中使用，可以直接将图片拖入到指定的位置，它会自动生成。

如果本地的图片放在网络中使用，必须先上传，它的主要格式：![name][本地路径或网络路径]

// 图片
![Alt](https://i-blog.csdnimg.cn/blog_migrate/8f1b213356ed81d5a706d52c6ab7cb6d.png)
// 带尺寸的图片
![Alt](https://i-blog.csdnimg.cn/blog_migrate/8f1b213356ed81d5a706d52c6ab7cb6d.png =60x60)
// 宽度确定高度等比例的图片
![Alt](https://i-blog.csdnimg.cn/blog_migrate/8f1b213356ed81d5a706d52c6ab7cb6d.png =60x)
// 高度确定宽度等比例的图片
![Alt](https://i-blog.csdnimg.cn/blog_migrate/8f1b213356ed81d5a706d52c6ab7cb6d.png =x60)
// 居中的图片
![Alt](https://i-blog.csdnimg.cn/blog_migrate/8f1b213356ed81d5a706d52c6ab7cb6d.png#pic_center)
// 居中并且带尺寸的图片
![Alt](https://i-blog.csdnimg.cn/blog_migrate/8f1b213356ed81d5a706d52c6ab7cb6d.png#pic_center =60x60)
// 居右的图片
![Alt](https://i-blog.csdnimg.cn/blog_migrate/8f1b213356ed81d5a706d52c6ab7cb6d.png#pic_right)

感谢CSDN，第一张效果如下：

Alt

链接

链接的使用跟图片类似，区别就是没有前面的 ! 号

[我的CSDN博客](https://blog.csdn.net/qq_24726043?type=blog)

效果如下：

我的CSDN博客

注：如果您想分享一个链接，恰好使用MarkDown，推荐这种方式

表格

制作表格使用 | 来分割不同单元格，使用 - 来分割表头和其他行。

如果使用 Typora的话，可以直接快捷生成，然后可设置行列的大小，甚至排列等

项目     | Value
-------- | -----
电脑  | $1600
手机  | $12
导管  | $1

| Column 1 | Column 2      |
|:--------:| -------------:|
| centered 文本居中 | right-aligned 文本居右 |

效果如下：

项目	Value
电脑	$1600
手机	$12
导管	$1

Column 1	Column 2
centered 文本居中	right-aligned 文本居右

代码

代码相关主要有两种：

标记方法或函数相关，使用单反引号(`)
标记代码段相关，使用多反引号(```)，代码段支持C/C++、Java、TypeScript、Python、Lua等等
代码块相关，是支持查看不同的，使用主要标记是diff

注：在CSDN平台中，不支持用于C++语言，因类似可使用C来代替

// 方法相关
`AssetManager`
`getName()`
// 代码相关
```lua
local setNum = function(num)
	num = num + 1
end
```
// diff相关
```diff
function addTwoNumbers (num1, num2) {
-  return 1 + 2
+  return num1 + num2
}
```

效果如下：
AssetManager
getName()

local setNum = function(num)
	num = num + 1
end

function addTwoNumbers (num1, num2) {
-  return 1 + 2
+  return num1 + num2
}

HTML

MarkDown是支持HTML语法的，在上面的下划线文字效果中有用到。这里罗列下常用的语法：

# 使用h1~h6设置标题
<h3>三级标题</h3>
# 使用<br/>强制换行
<br/>
# 使用<strong></strong>粗体文本
I just love <strong>bold text</strong>
# 使用<code></code>表示代码块
At the command prompt, type <code>nano</code>.
# 使用<font>设置字体颜色</font>
<font color = "#FF00AA">变色的文本</font>

效果如下：

三级标题

I just love bold text

At the command prompt, type nano.

变色的文本

总结

基础语法的使用绝大多数都是可嵌套的，但嵌套过多可能会导致得不到想要的效果。

数学公式

MarkDown主要通过 KaTeX 或者 MathJax 来渲染数学表达式。

KaTeX 拥有比 MathJax 更快的性能，但是它却少了很多 MathJax 拥有的特性。

公式使用的分割符主要是：

$...$ 或者 $...$ 中的数学表达式将会在行内显示。
$$...$$ 或者 \[...\] 或者 ````math` 中的数学表达式将会在块内显示。

# 示例1
$$
\Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,.
$$
# 示例2
$$
\begin{Bmatrix}
   a & b \\
   c & d
\end{Bmatrix}
$$
# 示例3
$$
\begin{CD}
   A @>a>> B \\
@VbVV @AAcA \\
   C @= D
\end{CD}
$$

效果如下：
$\Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,.$

$\begin{Bmatrix} a & b \\ c & d \end{Bmatrix}$

$\begin{CD} A @>a>> B \\ @VbVV @AAcA \\ C @= D \end{CD}$

Mermaid流程图

Mermaid流程图支持多种显示，主要有：

饼状图，使用pie关键字
流程图，使用graph关键字
序列图，使用sequenceDiagram关键字
甘特图，使用gantt关键字
类图，使用classDiagram关键字
状态图，使用stateDiagram关键字
用户旅程图，使用journey关键字

更多内容可参考Mermaid Docs

注：注释使用 %%

基本用法

流程图方向 开头声明，默认从上到下

%% 有L(左) R(右) T(上) B(下) 四种, 常用用法：
%% 从上到下 graph TB
%% 从下到上 graph BT
%% 从左到右 graph LR
%% 从右到左 graph RL

图形形状一，默认方形

%% id表示节点名，用于连接；括号没有存在表示方形，存在下的名字表示图形内文字显示
```mermaid
graph
默认方形
id1[方形]
id2(圆角矩形)
id3([椭圆形])
id4[[子程序形]]
id5[(圆柱形)]
id6((圆形))
```

图形形状二

```mermaid
graph
id7{菱形}
id8{{六角形}}
id9[/平行四边形/]
id10[\反向平行四边形\]
id11[/梯形\]
id12[\反向梯形/]
```

连线样式，主要通过节点名连接不同的图形

%% 无文本短虚线箭头 -.->
%% 无文本短实线箭头 -->
%% 无文本实线箭头,"-"越多,箭头越长 --->
%% 无文本粗实线箭头，"="越多，箭头越长 ==>, ===> 

%% 有文本虚线箭头 -.文本.->
%% 有文本实线箭头 --文本-->
%% 有文本粗实线箭头 ==文本==>

%% 无文本虚线 -.-
%% 有文本虚线 -.文本.-
%% 无文本实线,至少3个 ---
%% 有文本实线 ---文本---
%% 粗线,至少3个 ===

```mermaid
graph LR
id1 -.-> id2
id2 --> id3
id3 ---> id4
id4 ==> id5
id6 -.文本.-> id7 --文本--> id8 ==文本==> id9
a -.- b --- c 
A -.文本.- B ---文本--- C
AA === BB ==文本=== CC
```

连接支持一对一、递推和一对多，后者使用符号**&**

```mermaid
graph
%% 一对一
a --> b
%% 递推
A --> B --> C
%% 一对多
a1 --> b1 & c1 --> d
a2 & b2 --> c2 & d2
```

mermaid基础示例

```mermaid
graph LR
%% 设置样式
style A fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 10,5

A[正方形] --> B(圆角)
B -.-> C{条件A}
C -.a==1.-> D[结果1]
C --a==2--> E[结果2]
```

效果如下：

mermaid时序图

时序图的关键词是sequenceDiagram

```mermaid
sequenceDiagram
	participant 张三
	participant 李四
	张三->>王五: 王五你好吗？
  loop 健康检查
  王五->>王五: 与疾病战斗
  end
  Note right of 王五: 合理 食物 <br/>看医生...
  李四-->>张三: 很好!
  王五->>李四: 你怎么样?
  李四-->>王五: 很好!
```

效果如下：

flowchart流程图

关键词是flowchart，更多内容参考：flowchart

%% 竖向
```mermaid
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
```

%% 横向
```mermaid
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
```

竖向效果如下：

竖向

flowchart
st=>start: 开始框
op=>operation: 处理框
cond=>condition: 判断框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 输入输出框
e=>end: 结束框
st->op->cond
cond(yes)->io->e
cond(no)->sub1(right)->op

横向

甘特图

关键词是gantt，更多内容参考： GitHub mermaid

```mermaid
gantt
    section Section
    Completed :done,    des1, 2014-01-06,2014-01-08
    Active        :active,  des2, 2014-01-07, 3d
    Parallel 1   :         des3, after des1, 1d
    Parallel 2   :         des4, after des1, 1d
    Parallel 3   :         des5, after des3, 1d
    Parallel 4   :         des6, after des4, 1d
```

效果如下：

类图

关键词是: classDiagram，更多内容参考： GitHub mermaid

```mermaid
classDiagram
Class01 <|-- AveryLongClass : Cool
<<Interface>> Class01
Class09 --> C2 : Where am I?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
class Class10 {
  <<service>>
  int id
  size()
}
```

效果如下：

### 饼图

主要关键词是: pie

```mermaid
pie title 失业了怎么办
    "努力提升" : 386
    "需求新方向" : 85
    "新探索": 100
    "躺平" : 15
```

效果如下：

至此结束，祝大家学习生活愉快!

鹤九日

关注

5
点赞
踩
18

收藏

觉得还不错? 一键收藏
打赏
0
评论
markdown基本使用和流程图、甘特图、UML图的用法

Markdown的基本用法使用和mermaid、Flowchart、甘特图、饼图的用法
复制链接

扫一扫

专栏目录

markdown基本使用和流程图、甘特图、UML图的用法

简介

基本语法

标题

一级标题

二级标题

三级标题

四级标题

五级标题

六级标题

文本样式

分割线

目录列表

图片

链接

表格

代码

HTML

三级标题

总结

数学公式

Mermaid流程图

基本用法

mermaid基础示例

mermaid时序图

flowchart流程图

甘特图

类图

“相关推荐”对你有帮助么？