md文档进阶用法
一、mermaid
语法
1、mermaid
语法介绍
- 什么是
mermaid
语法- Mermaid是一种基于
Javascript
的绘图工具,使用类似于Markdown
的语法,使用户可以方便快捷地通过代码创建图表。 - 项目源码:https://github.com/mermaid-js/mermaid。
- Mermaid是一种基于
- 如何使用该语法
- 使用集成了Mermaid渲染功能的Markdown编辑器,如
Typora
。 - 使用特定的
Mermaid
渲染器。
- 使用集成了Mermaid渲染功能的Markdown编辑器,如
Mermaid
能绘制那些图- 饼状图
pie
- 流程图
graph
- 序列图
sequenceDiagram
- 甘特图
gantt
- 类图
classDiagram
- 状态图
stateDiagram
- 用户旅程图
journey
- 饼状图
- 注释语法为:
%%注释内容
2、详解
主要介绍饼状图和流程图,其他图几乎不用,有些还处于测试阶段暂不了解。
(1)饼状图:pie
- 会自动重新配比各个数值比例。
- 不能自定义颜色位置等。
1 | pie |
显示结果:
pie title 为什么学计算机 "嫌头发太多":20 "嫌寿命太长":50 "嫌晚上睡太早":50 "嫌皮肤太好":10
(2)流程图:graph
①定义方向:
位于开头,用来定义流程图连线方向(而不是布局方向)。
默认
graph
或graph TB
或graph TD
:从上到下。graph BT
:从下到上。(graph DT
无效!)graph LR
:从左到右。graph RL
:从右往左。
②定义结点:
1 | graph |
1 | graph |
显示结果分别为:
graph %%共有12种样式 默认方形 节点名1[方框形状] 节点名2(圆角矩形) 节点名3([腰圆键形]) 节点名4[[子程序形]] id5[(圆柱形)] id6((圆形))
graph %%共有12种样式 id7{菱形} id8 id9[/平行四边形/] id10[\反向平行四边形\] id11[/梯形\] id12[\反向梯形/]
注:
节点名不能有空格。
显示内容文本里的多个连续的空格只显示一个。
③定义连线:
线条样式:
普通直线
---
,加粗直线===
,虚线-.-
。增加一个相应字符即可延长线段(虚线是加
.
)。1
2graph LR
a----b===c-...-dgraph LR a----b===c-...-d
箭头样式
更改线条两端的字符即可添加箭头。
1
2graph LR
a-->b==>c-..->dgraph LR a-->b==>c-..->d
默认仅支持右箭头,将关键字
graph
改为floechart
即可使用其他样式箭头。1
2flowchart LR
a <--> b o==o c x-.-x dflowchart LR a <--> b o==o c x-.-x d
添加文本
直接加在箭头中间,或者用
|文本内容|
加在箭头后面。1
2graph LR
a--文本1-->b==>|文本2|c-.文本3.->dgraph LR a--文本1-->b==>|文本2|c-.文本3.->d
flowchart
格式图的文本显示在底层:1
2flowchart LR
a <--文本--> b o==文本==o c x-.文本.-x dflowchart LR a <--文本--> b o==文本==o c x-.文本.-x d
④多对多连接:
用&
字符连接结点即可:
1 | graph |
graph a & b --> c & d
实例:朱元璋家谱简图,圆圈代表皇帝。
1 | graph LR |
graph LR emperor((朱八八))-.子.->朱五四-.子.->朱四九-.子.->朱百六 朱雄英--长子-->朱标--长子-->emperor emperor2((朱允炆))--次子-->朱标 朱樉--次子-->emperor 朱棡--三子-->emperor emperor3((朱棣))--四子-->emperor emperor4((朱高炽))--长子-->emperor3
3、不知道叫什么名字
flowchart
语法:flowchart
语法只有两块内容——定义元素和连接元素。1
2
3
4
5
6
7
8
9sta=>start: 开始框:>https://bilibli.com
op=>operation: 处理框
cond=>condition: 条件语句/判断框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 输入输出框
e=>end: 结束框
sta->op->cond
cond(yes)->io->e
cond(no)->sub1(right)->op
4、序列图
1 | Title: 标题:复杂使用 |
二、其它补充
按钮样式
<kbd>显示文字</kbd>
和强制换行<br>
:1
<kbd>Win</kbd> + <kbd>Shift</kbd> + <kbd>s</kbd> :截<br>强制换行
显示效果:
Win + Shift + s :截
图和强制换行输入公式:
1
2
3
4
5
6
7
8
9
10$$
\begin{equation}
Fib(n)=
\left \{ \begin{aligned}
Fib(n-1)+Fib(n-2), n>1 \\
1, n=1 \\
0, n=0
\end{aligned} \right.
\end{equation}
$$显示效果:
$$
\begin{equation}
Fib(n)=
\left { \begin{aligned}
Fib(n-1)+Fib(n-2), n>1 \
1, n=1 \
0, n=0
\end{aligned} \right.
\end{equation}
$$