参阅cmd版官网:markdown
参考博文:Markdown语法介绍(详细)
1.标题
使用#符号包起来,符号和内容中间空格可省略,尾部#号可省略。依次1~6级标题,对应html中的h1~6标签
=会使上一行成为一级标题,-上一行二级标题,—若要设为分隔符,则要换行再—
# 一级标题1
一级标题2
===
## 二级标题1
二级标题2
---
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题
一级标题1
一级标题2
二级标题1
二级标题2
三级标题
四级标题
五级标题
六级标题
2.字体
*包起来为斜体,**加粗,==高亮(这里idea未生效),和内容之间都不能有空格。这些都是行内块元素,不自动换行。
*斜体***加粗**~~删除线~~[//]: # (注释:idea这里高亮未生效)
==高亮==<mark>高亮</mark><m>高亮</m>***加粗斜体***
斜体
加粗
删除线
高亮
高亮
高亮
加粗斜体
3.引用内容
以>开头的内容为引用,可嵌套
三个及以上***/===为分割线
``嵌套为单行代码,```代码```为多行代码,idea这里单行也能实现。\为转义字符用法同代码语法。、
第一行```后接编程语言名,可根据对应语言的语言显示不同颜色,编辑器也会验证其中语法
[//]: # (注释内容),idea Ctrl+/ 别的地方注释好像不是这个。
引用
代码hello world
//多行代码
if(true){//1
}else{//2
}
//这里使用的JavaScript语言
let n=1;
n++;
console.log(n);
4.列表
*或+或-开头接空格接内容的为无序列表,(n)(空格)开头的为有序列表,下一级列表在下一行多缩进即可。
- 一级有序列表1.1
- 一级有序列表1.2
- 二级有序列表2.1
- 二级有序列表2.2
- 三级有序列表
- 三级及以后序号为abc
5.链接
超链接,[显示内容](路径),有说路径可用[]括起来,idea和csdn无效,Typora有效
百度一下
[百度一下][http://www.baidu.com/]
链接也可跳转锚点,由于.md可使用html标签,标签id即可作为锚点,[显示内容](#id)
,直接#无法作为锚点
<span id="top">参阅cmd版官网:</span> /**顶部的内容*/
[回到顶部](#top) /**下面内容的代码*/
回到顶部
图片,idea可以正常用html语法,有width、height、src、title、alt属性
<img src="./test.png" alt="图片走丢">
*![title]*(路径)
,idea能用,但图片丢失时title为中文时无法显示
![hello](./test.png)
csdn找不到图片显示一长串,这里就不放出来了
[title]: 路径
在idea中无效
这里发现了一个问题,首先想在引用中显示英文中括号[],填入内容,则被判定为代码,于是使用[就会这样],转义字符无效。只好再**包起来。(后来发现别人都用``括起来)
由此发现:使用[变量名]:路径,相当于命名变量,在本文中任意地方使用*![变量名]* 即可显示该图片。
同理:*[变量名]*即可显示链接
*[abc]**![abc]*[abc]: http://www.baidu.com
abc
6.表格
|代表左右边框,左右外边框可略,idea会警告,仍能显示。
|—|—|区分表头表身,:代表当前列对齐方式,无tfoot,无法合并td。不可\t开头
| -----------标题 | 内容----------------- |
|----------------------------------:|:------------------------|
| 标题1 | 标题2 |
| 标题2 | 内容2 |
-----------标题
|
内容-----------------
|
标题1
|
标题2
|
标题2
|
内容2
|
7.表单
-[ ]
表示未选中勾选框
-[x]
表示选中勾选框
8.数学公式
这个要额外配置LaTeX之类的
cmd版本,\sum
代表∑
,^
后的内容接次幂,若∑则在其上,_后的内容为下标,~~
包起来内容为下标,若∑
则在其下,若式子则用{}
括起来
$
括起来在行内,行内块元素,$$
括起来则独占一行,行内元素
以下内容在idea无效,cmd、csdn都能显示公式
$$E=mc^2$$$$\sum_{i=1}^n a_i=0$$
E = m c 2 E=mc^2 E=mc2
∑ i = 1 n a i = 0 \sum_{i=1}^n a_i=0 i=1∑nai=0
9.html相关
每个版本md文件读取语法各不相同,基础的功能基本通用
html标签及其属性都能使用,md只是简化前端代码且文本更直观。
<p style="text-indent: 2em;margin: 0;padding: 0;color: red;font-size: 19px">p标签,内容设置样式,idea能正常显示样式,csdn没有样式,只是去掉了p标签</p>
p标签,内容设置样式,idea能正常显示样式,csdn没有样式,只是去掉了p标签
设置css样式,在idea中,文件>设置>语言和框架>markdown>自定义css,勾选加载自
选择引入css样式表,或者勾选css规则
在下面编写。图片为img标签,链接为a标签,标题为h1~6标签,等等,也可引入插件样式表,直接用类名。高亮对应mark或m标签。
idea可以直接复制图片后粘贴到md文件内指定位置,自动在md文件同路径下生成png图片,并生成代码。
10.流程图
流程图和数学公式一样,需要引入插件或者修改配置
csnd使用的是Mermaid
,参考文档
有的是使用flow
,参考文档
在idea中,```mermaid```即可出现下载图标,可下载mermaid。也可在设置中语言和框架下markdown里,Mermaid
或者PlanUML
安装后勾选上。即可使用
csdn显然简化了英文,使用箭头等符号代替,语法相近,单词/符号不完全互通。
流程图代码首行flowchart+缩写
或者graph+缩写
,下面使用id【显示内容】,默认方形,默认显示id,(((官网显示三层圆括号可以显示圆环,idea和csdn这里失效)))
idea 使用mermaid无法显示中文,暂未解决。
- TB - top to bottom
- TD - top-down/ same as top to bottom
- BT - bottom to top
- RL - right to left
- LR - left to right
%% 这是注释的方式
flowchart LRid1[id1] --> id2(id2)-->id3[(id3)]-->id4([id4])-->id5[[id5]]-->id6((id6))-->id7>id7]-->id8{id8}-->id9{{id9}}-->id10[/id10/]-->id11[\id11\]-->id12[/id12\]-->id13[\id13/]
#mermaid-svg-4fnATOlzSmLVE6Mq {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-4fnATOlzSmLVE6Mq .error-icon{fill:#552222;}#mermaid-svg-4fnATOlzSmLVE6Mq .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-4fnATOlzSmLVE6Mq .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-4fnATOlzSmLVE6Mq .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-4fnATOlzSmLVE6Mq .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-4fnATOlzSmLVE6Mq .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-4fnATOlzSmLVE6Mq .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-4fnATOlzSmLVE6Mq .marker{fill:#333333;stroke:#333333;}#mermaid-svg-4fnATOlzSmLVE6Mq .marker.cross{stroke:#333333;}#mermaid-svg-4fnATOlzSmLVE6Mq svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-4fnATOlzSmLVE6Mq .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-4fnATOlzSmLVE6Mq .cluster-label text{fill:#333;}#mermaid-svg-4fnATOlzSmLVE6Mq .cluster-label span{color:#333;}#mermaid-svg-4fnATOlzSmLVE6Mq .label text,#mermaid-svg-4fnATOlzSmLVE6Mq span{fill:#333;color:#333;}#mermaid-svg-4fnATOlzSmLVE6Mq .node rect,#mermaid-svg-4fnATOlzSmLVE6Mq .node circle,#mermaid-svg-4fnATOlzSmLVE6Mq .node ellipse,#mermaid-svg-4fnATOlzSmLVE6Mq .node polygon,#mermaid-svg-4fnATOlzSmLVE6Mq .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-4fnATOlzSmLVE6Mq .node .label{text-align:center;}#mermaid-svg-4fnATOlzSmLVE6Mq .node.clickable{cursor:pointer;}#mermaid-svg-4fnATOlzSmLVE6Mq .arrowheadPath{fill:#333333;}#mermaid-svg-4fnATOlzSmLVE6Mq .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-4fnATOlzSmLVE6Mq .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-4fnATOlzSmLVE6Mq .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-4fnATOlzSmLVE6Mq .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-4fnATOlzSmLVE6Mq .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-4fnATOlzSmLVE6Mq .cluster text{fill:#333;}#mermaid-svg-4fnATOlzSmLVE6Mq .cluster span{color:#333;}#mermaid-svg-4fnATOlzSmLVE6Mq div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-4fnATOlzSmLVE6Mq :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
id1
id2
id3
id4
id5
id6
id7
id8
id9
id10
id11
id12
id13
flowchart LR1-->2---3--text---4---|text|5-->|text|6--text-->7-.->8==>9 & 10-->11-->12 & 13-->14 & 15--o16A <--> B --o C o--o D x--xE
#mermaid-svg-pSnGGFFUzKGjVkRZ {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-pSnGGFFUzKGjVkRZ .error-icon{fill:#552222;}#mermaid-svg-pSnGGFFUzKGjVkRZ .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-pSnGGFFUzKGjVkRZ .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-pSnGGFFUzKGjVkRZ .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-pSnGGFFUzKGjVkRZ .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-pSnGGFFUzKGjVkRZ .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-pSnGGFFUzKGjVkRZ .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-pSnGGFFUzKGjVkRZ .marker{fill:#333333;stroke:#333333;}#mermaid-svg-pSnGGFFUzKGjVkRZ .marker.cross{stroke:#333333;}#mermaid-svg-pSnGGFFUzKGjVkRZ svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-pSnGGFFUzKGjVkRZ .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-pSnGGFFUzKGjVkRZ .cluster-label text{fill:#333;}#mermaid-svg-pSnGGFFUzKGjVkRZ .cluster-label span{color:#333;}#mermaid-svg-pSnGGFFUzKGjVkRZ .label text,#mermaid-svg-pSnGGFFUzKGjVkRZ span{fill:#333;color:#333;}#mermaid-svg-pSnGGFFUzKGjVkRZ .node rect,#mermaid-svg-pSnGGFFUzKGjVkRZ .node circle,#mermaid-svg-pSnGGFFUzKGjVkRZ .node ellipse,#mermaid-svg-pSnGGFFUzKGjVkRZ .node polygon,#mermaid-svg-pSnGGFFUzKGjVkRZ .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-pSnGGFFUzKGjVkRZ .node .label{text-align:center;}#mermaid-svg-pSnGGFFUzKGjVkRZ .node.clickable{cursor:pointer;}#mermaid-svg-pSnGGFFUzKGjVkRZ .arrowheadPath{fill:#333333;}#mermaid-svg-pSnGGFFUzKGjVkRZ .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-pSnGGFFUzKGjVkRZ .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-pSnGGFFUzKGjVkRZ .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-pSnGGFFUzKGjVkRZ .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-pSnGGFFUzKGjVkRZ .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-pSnGGFFUzKGjVkRZ .cluster text{fill:#333;}#mermaid-svg-pSnGGFFUzKGjVkRZ .cluster span{color:#333;}#mermaid-svg-pSnGGFFUzKGjVkRZ div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-pSnGGFFUzKGjVkRZ :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
text
text
text
text
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
A
B
C
D
E
subgraph 设置子流程名称,直到end
为止,不同流程间可以交叉,以代码顺序先后出现节点。子流程整体也可作为一个节点,子流程中可以嵌套其他子流程
flowchart TBa1--->b2c1--->b2subgraph Aa1 --- a2endsubgraph Bb1 ---> b2endc2-->b2
#mermaid-svg-lydAwopvxsx6OCsh {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-lydAwopvxsx6OCsh .error-icon{fill:#552222;}#mermaid-svg-lydAwopvxsx6OCsh .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-lydAwopvxsx6OCsh .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-lydAwopvxsx6OCsh .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-lydAwopvxsx6OCsh .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-lydAwopvxsx6OCsh .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-lydAwopvxsx6OCsh .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-lydAwopvxsx6OCsh .marker{fill:#333333;stroke:#333333;}#mermaid-svg-lydAwopvxsx6OCsh .marker.cross{stroke:#333333;}#mermaid-svg-lydAwopvxsx6OCsh svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-lydAwopvxsx6OCsh .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-lydAwopvxsx6OCsh .cluster-label text{fill:#333;}#mermaid-svg-lydAwopvxsx6OCsh .cluster-label span{color:#333;}#mermaid-svg-lydAwopvxsx6OCsh .label text,#mermaid-svg-lydAwopvxsx6OCsh span{fill:#333;color:#333;}#mermaid-svg-lydAwopvxsx6OCsh .node rect,#mermaid-svg-lydAwopvxsx6OCsh .node circle,#mermaid-svg-lydAwopvxsx6OCsh .node ellipse,#mermaid-svg-lydAwopvxsx6OCsh .node polygon,#mermaid-svg-lydAwopvxsx6OCsh .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-lydAwopvxsx6OCsh .node .label{text-align:center;}#mermaid-svg-lydAwopvxsx6OCsh .node.clickable{cursor:pointer;}#mermaid-svg-lydAwopvxsx6OCsh .arrowheadPath{fill:#333333;}#mermaid-svg-lydAwopvxsx6OCsh .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-lydAwopvxsx6OCsh .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-lydAwopvxsx6OCsh .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-lydAwopvxsx6OCsh .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-lydAwopvxsx6OCsh .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-lydAwopvxsx6OCsh .cluster text{fill:#333;}#mermaid-svg-lydAwopvxsx6OCsh .cluster span{color:#333;}#mermaid-svg-lydAwopvxsx6OCsh div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-lydAwopvxsx6OCsh :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
B
A
b2
b1
a2
a1
c1
c2
节点可绑定点击事件,可给链接
flowchart LR
A---B---C
%% callback为回调方法名,暂不知怎么声明
click A callback "等同注释?"
click B "http://ww.baidu.com" "msg"
click A call callback()
click B href "http://ww.baidu.com" "msg"
click C href "http://ww.baidu.com" "msg" _blank
#mermaid-svg-EUizllHCoadi6Wfd {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-EUizllHCoadi6Wfd .error-icon{fill:#552222;}#mermaid-svg-EUizllHCoadi6Wfd .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-EUizllHCoadi6Wfd .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-EUizllHCoadi6Wfd .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-EUizllHCoadi6Wfd .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-EUizllHCoadi6Wfd .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-EUizllHCoadi6Wfd .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-EUizllHCoadi6Wfd .marker{fill:#333333;stroke:#333333;}#mermaid-svg-EUizllHCoadi6Wfd .marker.cross{stroke:#333333;}#mermaid-svg-EUizllHCoadi6Wfd svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-EUizllHCoadi6Wfd .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-EUizllHCoadi6Wfd .cluster-label text{fill:#333;}#mermaid-svg-EUizllHCoadi6Wfd .cluster-label span{color:#333;}#mermaid-svg-EUizllHCoadi6Wfd .label text,#mermaid-svg-EUizllHCoadi6Wfd span{fill:#333;color:#333;}#mermaid-svg-EUizllHCoadi6Wfd .node rect,#mermaid-svg-EUizllHCoadi6Wfd .node circle,#mermaid-svg-EUizllHCoadi6Wfd .node ellipse,#mermaid-svg-EUizllHCoadi6Wfd .node polygon,#mermaid-svg-EUizllHCoadi6Wfd .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-EUizllHCoadi6Wfd .node .label{text-align:center;}#mermaid-svg-EUizllHCoadi6Wfd .node.clickable{cursor:pointer;}#mermaid-svg-EUizllHCoadi6Wfd .arrowheadPath{fill:#333333;}#mermaid-svg-EUizllHCoadi6Wfd .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-EUizllHCoadi6Wfd .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-EUizllHCoadi6Wfd .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-EUizllHCoadi6Wfd .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-EUizllHCoadi6Wfd .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-EUizllHCoadi6Wfd .cluster text{fill:#333;}#mermaid-svg-EUizllHCoadi6Wfd .cluster span{color:#333;}#mermaid-svg-EUizllHCoadi6Wfd div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-EUizllHCoadi6Wfd :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
A
B
C
style id 属性:值 即可设置对应节点样式
id(内容):::类名 对节点添加类名
class id名 类名 对节点添加类名
classDef 类名 属性:值,key2:value2 设置类名的样式
flowchart LRid1(Start):::class1-->id2(Stop)style id1 fill:#f9f,stroke:#333,stroke-width:4pxstyle id2 fill:#bbf,stroke:#111,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
%% style id key:value,key2,value2
%% fill:背景色,storke:边框颜色,stroke-width:边框宽度,color:字体颜色,stroke-dasharray:框线虚线小段长度 线段距离classDef class1 fill:pink
#mermaid-svg-aFLKpV0sQun0S5iB {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-aFLKpV0sQun0S5iB .error-icon{fill:#552222;}#mermaid-svg-aFLKpV0sQun0S5iB .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-aFLKpV0sQun0S5iB .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-aFLKpV0sQun0S5iB .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-aFLKpV0sQun0S5iB .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-aFLKpV0sQun0S5iB .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-aFLKpV0sQun0S5iB .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-aFLKpV0sQun0S5iB .marker{fill:#333333;stroke:#333333;}#mermaid-svg-aFLKpV0sQun0S5iB .marker.cross{stroke:#333333;}#mermaid-svg-aFLKpV0sQun0S5iB svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-aFLKpV0sQun0S5iB .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-aFLKpV0sQun0S5iB .cluster-label text{fill:#333;}#mermaid-svg-aFLKpV0sQun0S5iB .cluster-label span{color:#333;}#mermaid-svg-aFLKpV0sQun0S5iB .label text,#mermaid-svg-aFLKpV0sQun0S5iB span{fill:#333;color:#333;}#mermaid-svg-aFLKpV0sQun0S5iB .node rect,#mermaid-svg-aFLKpV0sQun0S5iB .node circle,#mermaid-svg-aFLKpV0sQun0S5iB .node ellipse,#mermaid-svg-aFLKpV0sQun0S5iB .node polygon,#mermaid-svg-aFLKpV0sQun0S5iB .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-aFLKpV0sQun0S5iB .node .label{text-align:center;}#mermaid-svg-aFLKpV0sQun0S5iB .node.clickable{cursor:pointer;}#mermaid-svg-aFLKpV0sQun0S5iB .arrowheadPath{fill:#333333;}#mermaid-svg-aFLKpV0sQun0S5iB .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-aFLKpV0sQun0S5iB .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-aFLKpV0sQun0S5iB .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-aFLKpV0sQun0S5iB .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-aFLKpV0sQun0S5iB .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-aFLKpV0sQun0S5iB .cluster text{fill:#333;}#mermaid-svg-aFLKpV0sQun0S5iB .cluster span{color:#333;}#mermaid-svg-aFLKpV0sQun0S5iB div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-aFLKpV0sQun0S5iB :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}#mermaid-svg-aFLKpV0sQun0S5iB .class1>*{fill:pink!important;}#mermaid-svg-aFLKpV0sQun0S5iB .class1 span{fill:pink!important;}
Start
Stop
内容中,不限引号,fa:className 内容,则会同时添加fa类和className类
flowchart TDB["fa:fa-twitter for peace"]B-->C[fa:fa-ban forbidden]B-->D(fa:fa-spinner);B-->E(A fa:fa-camera-retro perhaps?)
#mermaid-svg-bom09j60MQUKZN8e {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-bom09j60MQUKZN8e .error-icon{fill:#552222;}#mermaid-svg-bom09j60MQUKZN8e .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-bom09j60MQUKZN8e .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-bom09j60MQUKZN8e .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-bom09j60MQUKZN8e .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-bom09j60MQUKZN8e .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-bom09j60MQUKZN8e .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-bom09j60MQUKZN8e .marker{fill:#333333;stroke:#333333;}#mermaid-svg-bom09j60MQUKZN8e .marker.cross{stroke:#333333;}#mermaid-svg-bom09j60MQUKZN8e svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-bom09j60MQUKZN8e .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-bom09j60MQUKZN8e .cluster-label text{fill:#333;}#mermaid-svg-bom09j60MQUKZN8e .cluster-label span{color:#333;}#mermaid-svg-bom09j60MQUKZN8e .label text,#mermaid-svg-bom09j60MQUKZN8e span{fill:#333;color:#333;}#mermaid-svg-bom09j60MQUKZN8e .node rect,#mermaid-svg-bom09j60MQUKZN8e .node circle,#mermaid-svg-bom09j60MQUKZN8e .node ellipse,#mermaid-svg-bom09j60MQUKZN8e .node polygon,#mermaid-svg-bom09j60MQUKZN8e .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-bom09j60MQUKZN8e .node .label{text-align:center;}#mermaid-svg-bom09j60MQUKZN8e .node.clickable{cursor:pointer;}#mermaid-svg-bom09j60MQUKZN8e .arrowheadPath{fill:#333333;}#mermaid-svg-bom09j60MQUKZN8e .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-bom09j60MQUKZN8e .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-bom09j60MQUKZN8e .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-bom09j60MQUKZN8e .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-bom09j60MQUKZN8e .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-bom09j60MQUKZN8e .cluster text{fill:#333;}#mermaid-svg-bom09j60MQUKZN8e .cluster span{color:#333;}#mermaid-svg-bom09j60MQUKZN8e div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-bom09j60MQUKZN8e :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
for peace
forbidden
A perhaps?
除了流程图,还有时序图,甘特图,饼状图等,也是mermaid支持的内容,太杂,日后再研究。以下为官网目录,本文仅依据文档整理了第一个Flowchart
.md即markdown文件常用语法相关推荐
- Markdown教程常用语法随笔
文章目录 一.概述 1.简介 2.优点 3.不足 二.基础语法 1.标题 1.1 SeText 风格 1.2 Atx 风格 2.段落 2.1 分段 2.2 换行 2.3 缩进 2.4 字体 2.5 分 ...
- MarkDown的常用语法,写出好看的md文章
简介: 学习东西,一定要养成知识整理的习惯.再简单的知识,堆积多了,也可能会忘记.今天给大家推荐一个标记语言MarkDown,掌握简单的语法就能让你的笔记拥有美观的格式.希望能帮助到你.知识整理不易, ...
- MarkDown编辑器常用语法
分割线 三个或更多-_*,必须单独一行,可含空格,如---. ***. ___. 效果如下: 如果上面的符号是紧挨着上文的文字,就是细线,否则就是上面显示的粗线. 图片链接 ![图片的名称](图片的本 ...
- 机器人学 markdown数学公式常用语法
参考链接1 本文包含了markdown常用的数学公式,按照目录可查询选用 初始类 行内数学公式均用两个 符号包裹行间数学公式均用两个 符号包裹 行间数学公式均用两个 符号包裹行间数学公式均用两个符号包 ...
- Markdown的常用语法(个人总结)
文章目录 1 简介 2 强调 3 分割线 4 引用 5 列表 5.1 无序列表 5.2 有序列表 5.3 嵌套列表 6 表格 6.1 表格格式 7 文本 7.1 段落格式 7.2 文字格式 7.3 字 ...
- MarkDown表格常用语法积累
一.默认表格 MarkDown制作表格使用|来分隔不同的单元格,使用-来分隔表头和其他行. | 表头 | 表头 | | ---- | ---- | | 单元格 | 单元格 | | 单元格 | 单元格 ...
- Markdown的常用语法
https://www.jianshu.com/p/82e730892d42 转载于:https://www.cnblogs.com/answercard/p/8492738.html
- 使用Visual Studio Code编写markdown文件以及转成PDF格式和markdown常用语法
Markdown是一种轻量级标记语言,排版语法简洁,让人们更多地关注内容本身而非排版.它使用易读易写的纯文本格式编写文档,可与HTML混编,可导出 HTML.PDF 以及本身的 .md 格式的文件.因 ...
- md文件编写常用语法类型
一:建立一个.md文件,例如readme.md 开始编写,整理后常用语法如下 ***评价规则确认0911----确定版!***1. 根据后台配置,控制买家是否可以主动评价,以及关闭窗口时是否需要弹窗强 ...
最新文章
- 服务器崩溃日志 | 误删 OpenSSL 的那点事
- 惠普服务器吊牌位置,惠普防伪措施 | 惠普中国
- MFC中打开文件对话框:CFileDlg
- (Matlab问题解决)运行matlab程序后,工作区不能显示变量
- JeecgBoot单体升级微服务之一
- 为什么饿着饿着就不饿了
- JavaScript:gb2312转unicode -- 形式
- 网络GHOST使用方法
- 【暖*墟】#洛谷网课1.30# 树上问题
- iperf3使用方法说明
- 余贞侠C语言程序设计课后参考答案
- Let 's watch TV
- 手机注册短信验证码实现的全流程及代码
- 【颜纠日记】祛痘广告那么神?分享确切的祛痘方式。
- JWT 避坑指南:nbf 验签失效问题的解决
- 【关于memset和0x3f3f3f3f】
- 机器人 homework2
- 项目商业模式的设计与思考
- java图片旋转代码
- 遗传算法求函数最小值(多维)2
热门文章
- 摄影测量(三):单张像片解析基础
- 如何从点云创建深度图像,看这篇你就懂了(附详细代码)
- 弘辽科技:直通车一停,自然搜索就掉?直通车与权重的关系是?
- 计算机网络基础--IP地址与子网划分
- 《MFQPPDCS》学习心得--序
- windows server 几大实时同步软件比较
- 通过winscp软件实现windows与linux目录数据同步
- mix1 android n,因为一条评论引发的讨论——论MIX系列垮掉的第一代
- C#读取钉钉打卡记录(五)——获取打卡信息
- 企业发展理论(一):突变理论