Markdown绘图mermaid实用教程
2024-06-30 06:21:51
Mermaid 是一个用于画流程图、状态图、时序图、甘特图的库，使用 JS 进行本地渲染，广泛集成于许多 Markdown 编辑器中。
Mermaid 作为一个使用 JS 渲染的库，生成的不是一个“图片”，而是一段 HTML 代码。
点击进入官网
点击进入Github 项目地址
1. mermaid 定义
2. 流程图
语法格式如下:
graph LR; # 其中LR指的是方向A --> B # 不同的箭头表示#mermaid-svg-LsKz3HTXqmitmVqh {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-LsKz3HTXqmitmVqh .error-icon{fill:#552222;}#mermaid-svg-LsKz3HTXqmitmVqh .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-LsKz3HTXqmitmVqh .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-LsKz3HTXqmitmVqh .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-LsKz3HTXqmitmVqh .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-LsKz3HTXqmitmVqh .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-LsKz3HTXqmitmVqh .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-LsKz3HTXqmitmVqh .marker{fill:#333333;stroke:#333333;}#mermaid-svg-LsKz3HTXqmitmVqh .marker.cross{stroke:#333333;}#mermaid-svg-LsKz3HTXqmitmVqh svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-LsKz3HTXqmitmVqh .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-LsKz3HTXqmitmVqh .cluster-label text{fill:#333;}#mermaid-svg-LsKz3HTXqmitmVqh .cluster-label span{color:#333;}#mermaid-svg-LsKz3HTXqmitmVqh .label text,#mermaid-svg-LsKz3HTXqmitmVqh span{fill:#333;color:#333;}#mermaid-svg-LsKz3HTXqmitmVqh .node rect,#mermaid-svg-LsKz3HTXqmitmVqh .node circle,#mermaid-svg-LsKz3HTXqmitmVqh .node ellipse,#mermaid-svg-LsKz3HTXqmitmVqh .node polygon,#mermaid-svg-LsKz3HTXqmitmVqh .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-LsKz3HTXqmitmVqh .node .label{text-align:center;}#mermaid-svg-LsKz3HTXqmitmVqh .node.clickable{cursor:pointer;}#mermaid-svg-LsKz3HTXqmitmVqh .arrowheadPath{fill:#333333;}#mermaid-svg-LsKz3HTXqmitmVqh .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-LsKz3HTXqmitmVqh .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-LsKz3HTXqmitmVqh .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-LsKz3HTXqmitmVqh .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-LsKz3HTXqmitmVqh .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-LsKz3HTXqmitmVqh .cluster text{fill:#333;}#mermaid-svg-LsKz3HTXqmitmVqh .cluster span{color:#333;}#mermaid-svg-LsKz3HTXqmitmVqh 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-LsKz3HTXqmitmVqh :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}AB
a. 方向和箭头含义
| 用词 graph x; | 含义 | 箭头 | 含义 |
|---|---|---|---|
TB
|
从上到下 |
>
|
添加尾部箭头 |
BT
|
从下到上 |
-
|
不添加尾部箭头 |
RL
|
从左到右 |
--
|
单线 |
LR
|
从右到左 |
--text--
|
单线加文字 |
==
|
粗线 | ||
==text==
|
粗线加文字 | ||
-.-
|
虚线 | ||
-.text.-
|
虚线加文字 |
b. 节点含义
默认方形id1[方形]id2(圆边矩形)id3([体育场形])id4[[子程序形]]id5[(圆柱形)]id6((圆形))id1{菱形}id2{{六角形}}id3[/平行四边形/]id4[\反向平行四边形\]id5[/梯形\]id6[\反向梯形/]
c. 示例
graph LR;A>"Ubuntu<br>(Linux)"] -.soft.-> C{TV}B["MAC"] ==> D((ARM64))D--> CA --> B
#mermaid-svg-VuvK1tyJzB8ulzep {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-VuvK1tyJzB8ulzep .error-icon{fill:#552222;}#mermaid-svg-VuvK1tyJzB8ulzep .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-VuvK1tyJzB8ulzep .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-VuvK1tyJzB8ulzep .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-VuvK1tyJzB8ulzep .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-VuvK1tyJzB8ulzep .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-VuvK1tyJzB8ulzep .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-VuvK1tyJzB8ulzep .marker{fill:#333333;stroke:#333333;}#mermaid-svg-VuvK1tyJzB8ulzep .marker.cross{stroke:#333333;}#mermaid-svg-VuvK1tyJzB8ulzep svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-VuvK1tyJzB8ulzep .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-VuvK1tyJzB8ulzep .cluster-label text{fill:#333;}#mermaid-svg-VuvK1tyJzB8ulzep .cluster-label span{color:#333;}#mermaid-svg-VuvK1tyJzB8ulzep .label text,#mermaid-svg-VuvK1tyJzB8ulzep span{fill:#333;color:#333;}#mermaid-svg-VuvK1tyJzB8ulzep .node rect,#mermaid-svg-VuvK1tyJzB8ulzep .node circle,#mermaid-svg-VuvK1tyJzB8ulzep .node ellipse,#mermaid-svg-VuvK1tyJzB8ulzep .node polygon,#mermaid-svg-VuvK1tyJzB8ulzep .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-VuvK1tyJzB8ulzep .node .label{text-align:center;}#mermaid-svg-VuvK1tyJzB8ulzep .node.clickable{cursor:pointer;}#mermaid-svg-VuvK1tyJzB8ulzep .arrowheadPath{fill:#333333;}#mermaid-svg-VuvK1tyJzB8ulzep .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-VuvK1tyJzB8ulzep .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-VuvK1tyJzB8ulzep .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-VuvK1tyJzB8ulzep .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-VuvK1tyJzB8ulzep .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-VuvK1tyJzB8ulzep .cluster text{fill:#333;}#mermaid-svg-VuvK1tyJzB8ulzep .cluster span{color:#333;}#mermaid-svg-VuvK1tyJzB8ulzep 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-VuvK1tyJzB8ulzep :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
soft
Ubuntu
(Linux)
(Linux)
TV
MAC
ARM64
graph LRa---bb--文本1!---cc---|文本2|dd===ee==文本3===ff-.-gg-.文本.-h
#mermaid-svg-JdrBLs4GXAO1gwKK {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-JdrBLs4GXAO1gwKK .error-icon{fill:#552222;}#mermaid-svg-JdrBLs4GXAO1gwKK .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-JdrBLs4GXAO1gwKK .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-JdrBLs4GXAO1gwKK .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-JdrBLs4GXAO1gwKK .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-JdrBLs4GXAO1gwKK .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-JdrBLs4GXAO1gwKK .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-JdrBLs4GXAO1gwKK .marker{fill:#333333;stroke:#333333;}#mermaid-svg-JdrBLs4GXAO1gwKK .marker.cross{stroke:#333333;}#mermaid-svg-JdrBLs4GXAO1gwKK svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-JdrBLs4GXAO1gwKK .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-JdrBLs4GXAO1gwKK .cluster-label text{fill:#333;}#mermaid-svg-JdrBLs4GXAO1gwKK .cluster-label span{color:#333;}#mermaid-svg-JdrBLs4GXAO1gwKK .label text,#mermaid-svg-JdrBLs4GXAO1gwKK span{fill:#333;color:#333;}#mermaid-svg-JdrBLs4GXAO1gwKK .node rect,#mermaid-svg-JdrBLs4GXAO1gwKK .node circle,#mermaid-svg-JdrBLs4GXAO1gwKK .node ellipse,#mermaid-svg-JdrBLs4GXAO1gwKK .node polygon,#mermaid-svg-JdrBLs4GXAO1gwKK .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-JdrBLs4GXAO1gwKK .node .label{text-align:center;}#mermaid-svg-JdrBLs4GXAO1gwKK .node.clickable{cursor:pointer;}#mermaid-svg-JdrBLs4GXAO1gwKK .arrowheadPath{fill:#333333;}#mermaid-svg-JdrBLs4GXAO1gwKK .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-JdrBLs4GXAO1gwKK .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-JdrBLs4GXAO1gwKK .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-JdrBLs4GXAO1gwKK .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-JdrBLs4GXAO1gwKK .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-JdrBLs4GXAO1gwKK .cluster text{fill:#333;}#mermaid-svg-JdrBLs4GXAO1gwKK .cluster span{color:#333;}#mermaid-svg-JdrBLs4GXAO1gwKK 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-JdrBLs4GXAO1gwKK :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
文本1!
文本2
文本3
文本
a
b
c
d
e
f
g
h
flowchart LRA o--o BB <--> CC x--x D旧连线 --文本--> 也会不同
#mermaid-svg-APrtRKdpJPO0VFTv {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-APrtRKdpJPO0VFTv .error-icon{fill:#552222;}#mermaid-svg-APrtRKdpJPO0VFTv .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-APrtRKdpJPO0VFTv .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-APrtRKdpJPO0VFTv .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-APrtRKdpJPO0VFTv .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-APrtRKdpJPO0VFTv .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-APrtRKdpJPO0VFTv .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-APrtRKdpJPO0VFTv .marker{fill:#333333;stroke:#333333;}#mermaid-svg-APrtRKdpJPO0VFTv .marker.cross{stroke:#333333;}#mermaid-svg-APrtRKdpJPO0VFTv svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-APrtRKdpJPO0VFTv .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-APrtRKdpJPO0VFTv .cluster-label text{fill:#333;}#mermaid-svg-APrtRKdpJPO0VFTv .cluster-label span{color:#333;}#mermaid-svg-APrtRKdpJPO0VFTv .label text,#mermaid-svg-APrtRKdpJPO0VFTv span{fill:#333;color:#333;}#mermaid-svg-APrtRKdpJPO0VFTv .node rect,#mermaid-svg-APrtRKdpJPO0VFTv .node circle,#mermaid-svg-APrtRKdpJPO0VFTv .node ellipse,#mermaid-svg-APrtRKdpJPO0VFTv .node polygon,#mermaid-svg-APrtRKdpJPO0VFTv .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-APrtRKdpJPO0VFTv .node .label{text-align:center;}#mermaid-svg-APrtRKdpJPO0VFTv .node.clickable{cursor:pointer;}#mermaid-svg-APrtRKdpJPO0VFTv .arrowheadPath{fill:#333333;}#mermaid-svg-APrtRKdpJPO0VFTv .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-APrtRKdpJPO0VFTv .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-APrtRKdpJPO0VFTv .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-APrtRKdpJPO0VFTv .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-APrtRKdpJPO0VFTv .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-APrtRKdpJPO0VFTv .cluster text{fill:#333;}#mermaid-svg-APrtRKdpJPO0VFTv .cluster span{color:#333;}#mermaid-svg-APrtRKdpJPO0VFTv 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-APrtRKdpJPO0VFTv :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
文本
A
B
C
D
旧连线
也会不同
- 延长连线：
增加相应字符即可，如下图中的B到E，连线中增加了一个-。字符可多次添加。
graph LRA[Start] --> B{Is it?};B -->|Yes| C[OK];C --> D[Rethink];D --> B;B --->|No| E[End];
- 多重链
graph LRa --> b & c--> dA & B--> C & DX --> MX --> NY --> MY --> N
#mermaid-svg-ssl6vkrlbc3SgB40 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-ssl6vkrlbc3SgB40 .error-icon{fill:#552222;}#mermaid-svg-ssl6vkrlbc3SgB40 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-ssl6vkrlbc3SgB40 .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-ssl6vkrlbc3SgB40 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-ssl6vkrlbc3SgB40 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-ssl6vkrlbc3SgB40 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-ssl6vkrlbc3SgB40 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-ssl6vkrlbc3SgB40 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-ssl6vkrlbc3SgB40 .marker.cross{stroke:#333333;}#mermaid-svg-ssl6vkrlbc3SgB40 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-ssl6vkrlbc3SgB40 .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-ssl6vkrlbc3SgB40 .cluster-label text{fill:#333;}#mermaid-svg-ssl6vkrlbc3SgB40 .cluster-label span{color:#333;}#mermaid-svg-ssl6vkrlbc3SgB40 .label text,#mermaid-svg-ssl6vkrlbc3SgB40 span{fill:#333;color:#333;}#mermaid-svg-ssl6vkrlbc3SgB40 .node rect,#mermaid-svg-ssl6vkrlbc3SgB40 .node circle,#mermaid-svg-ssl6vkrlbc3SgB40 .node ellipse,#mermaid-svg-ssl6vkrlbc3SgB40 .node polygon,#mermaid-svg-ssl6vkrlbc3SgB40 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-ssl6vkrlbc3SgB40 .node .label{text-align:center;}#mermaid-svg-ssl6vkrlbc3SgB40 .node.clickable{cursor:pointer;}#mermaid-svg-ssl6vkrlbc3SgB40 .arrowheadPath{fill:#333333;}#mermaid-svg-ssl6vkrlbc3SgB40 .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-ssl6vkrlbc3SgB40 .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-ssl6vkrlbc3SgB40 .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-ssl6vkrlbc3SgB40 .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-ssl6vkrlbc3SgB40 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-ssl6vkrlbc3SgB40 .cluster text{fill:#333;}#mermaid-svg-ssl6vkrlbc3SgB40 .cluster span{color:#333;}#mermaid-svg-ssl6vkrlbc3SgB40 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-ssl6vkrlbc3SgB40 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
a
b
c
d
A
B
C
D
X
M
N
Y
- 注释
%%这是一条注释，在渲染图中不可见 - 子图
%%这是一条注释，在渲染图中不可见
flowchart TBc1-->a2subgraph onea1-->a2endsubgraph twob1-->b2endsubgraph threec1-->c2endone --> twothree --> twotwo --> c2
#mermaid-svg-EWAxEwuGR5oa3OhE {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-EWAxEwuGR5oa3OhE .error-icon{fill:#552222;}#mermaid-svg-EWAxEwuGR5oa3OhE .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-EWAxEwuGR5oa3OhE .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-EWAxEwuGR5oa3OhE .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-EWAxEwuGR5oa3OhE .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-EWAxEwuGR5oa3OhE .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-EWAxEwuGR5oa3OhE .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-EWAxEwuGR5oa3OhE .marker{fill:#333333;stroke:#333333;}#mermaid-svg-EWAxEwuGR5oa3OhE .marker.cross{stroke:#333333;}#mermaid-svg-EWAxEwuGR5oa3OhE svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-EWAxEwuGR5oa3OhE .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-EWAxEwuGR5oa3OhE .cluster-label text{fill:#333;}#mermaid-svg-EWAxEwuGR5oa3OhE .cluster-label span{color:#333;}#mermaid-svg-EWAxEwuGR5oa3OhE .label text,#mermaid-svg-EWAxEwuGR5oa3OhE span{fill:#333;color:#333;}#mermaid-svg-EWAxEwuGR5oa3OhE .node rect,#mermaid-svg-EWAxEwuGR5oa3OhE .node circle,#mermaid-svg-EWAxEwuGR5oa3OhE .node ellipse,#mermaid-svg-EWAxEwuGR5oa3OhE .node polygon,#mermaid-svg-EWAxEwuGR5oa3OhE .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-EWAxEwuGR5oa3OhE .node .label{text-align:center;}#mermaid-svg-EWAxEwuGR5oa3OhE .node.clickable{cursor:pointer;}#mermaid-svg-EWAxEwuGR5oa3OhE .arrowheadPath{fill:#333333;}#mermaid-svg-EWAxEwuGR5oa3OhE .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-EWAxEwuGR5oa3OhE .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-EWAxEwuGR5oa3OhE .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-EWAxEwuGR5oa3OhE .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-EWAxEwuGR5oa3OhE .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-EWAxEwuGR5oa3OhE .cluster text{fill:#333;}#mermaid-svg-EWAxEwuGR5oa3OhE .cluster span{color:#333;}#mermaid-svg-EWAxEwuGR5oa3OhE 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-EWAxEwuGR5oa3OhE :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
three
one
c2
c1
two
b2
b1
a2
a1
Markdown绘图mermaid实用教程相关推荐
- MarkDownPad2实用教程及MarkDown常用语法
MarkDownPad2实用教程 前言: 为什么使用MarkDown来写文章呢?已经在使用的人应该知道答案,对于我个人来说,是因为它可以减少我的重复工作.因为我拥有自己的个人博客和CSDN博客,还有自 ...
- Markdown 里 mermaid 流程图(flowchart)教程
作者: Jintao 日期:2021-7-12 简介: 未完待续 Markdown 里 mermaid 流程图flowchart教程 前言: 1.0 流程图的方向 TD LR BT RL 2.0 节点 ...
- 《AutoCAD 2014中文版实用教程》一一2.2 圆类命令
本节书摘来自异步社区出版社<AutoCAD 2014中文版实用教程>一书中的第2章,第2.2节,作者:槐创锋 , 许玢更多章节内容可以访问云栖社区"异步社区"公众号查看 ...
- r语言 xueyi_R语言实用教程
<R语言实用教程> 第 1章 R语言入门 1 1.1 R语言简介1 1.1.1 R软件的下载与安装 1 1.1.2初识 R 2 1.1.3下拉式菜单与快捷方式 4 1.2向量 15 1.2 ...
- 《AutoCAD 2014中文版实用教程》导读
前言 AutoCAD 2014中文版实用教程 AutoCAD是美国Autodesk公司推出的,集二维绘图.三维设计.渲染.通用数据库管理和互联网通信功能为一体的计算机辅助绘图软件,自1982年推出以来 ...
- 《AutoCAD 2014中文版实用教程》一一1.2 标题栏
本节书摘来自异步社区出版社<AutoCAD 2014中文版实用教程>一书中的第1章,第1.2节,作者:槐创锋 , 许玢更多章节内容可以访问云栖社区"异步社区"公众号查看 ...
- CSDN官方Markdown编辑器的使用教程
CSDN官方Markdown编辑器的使用教程 欢迎使用Markdown编辑器 新的改变 功能快捷键 合理的创建标题,有助于目录的生成 如何改变文本的样式 插入链接与图片 如何插入一段漂亮的代码片 生成 ...
- Markdown绘制甘特图教程
日常工作中多个项目并行推进时,很难描述清楚每个任务的进度,以及当前状态.之前也想过用甘特图来管理项目进度,但是绘制甘特图的成本太高,而且不容易掌握.很难在团队中推广普及. 最近在使用Markdown排 ...
- 【Halcon】Halcon语法 与 《halcon工业应用实用教程》
http://blog.sina.com.cn/s/blog_61cc743001018gny.html 好久没有写篇文章了.写一篇总结吧. 1.Halcon的自我描述 Program Logic Ø ...
最新文章
- 12 c for. oracle rac,【案例】Oracle RAC FOR AIX搭建执行root.sh时两次报错的解决办法
- python！！！！惊了，这世上居然还有这么神奇的东西存在
- 重构 改善既有代码的设计：代码的坏
- webrtc自动增益
- 浏览器兼容性问题-JSDOM（转)
- 备用计算机机房管理制度,计算机机房管理规定
- HDOJ HDU Today 2112【最短路Dijkstra+字符串处理】
- 学习 opencv 自带示例 stereo_calib（立体相机标定）
- 如何申请注册Tom企业邮箱，教程详解来袭
- C++的future，promise，packaged_task
- 真真正正解决VScode不能安装插件问题、无法连接到应用商城问题
- Excel应用技巧：单元格文字的拆分与合并
- 使用cmake搭建一个跨平台游戏服务器
- 【MQTT基础篇（五）】发布、订阅和取消订阅
- Single Scale Retinex 增强 matlab 实现
- 《你的善良必须有点锋芒》-慕言歌
- Selenium测试报错 Other element would receive the click 问题
- 分享一套响应式自适应公司网站官网源码，带文字搭建教程
- 乔治亚理工提出基于GAN的强化学习算法用于推荐系统
- 手机一连上Android Studio，Logcat不断输出信息