Mermaid 是一个用于画流程图、状态图、时序图、甘特图的库，使用 JS 进行本地渲染，广泛集成于许多 Markdown 编辑器中。

Mermaid 作为一个使用 JS 渲染的库，生成的不是一个“图片”，而是一段 HTML 代码。

点击进入官网
点击进入Github 项目地址

1. mermaid 定义

流程图

2. 流程图

语法格式如下:

text
1 2 3 
graph LR; # 其中LR指的是方向
    A --> B # 不同的箭头表示
text
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 
    </foreignobject> 
   </g> 
  </g> 
  </g> 
  <g class="nodes"> 
  <g class="node default" id="flowchart-A-173" transform="translate(25.078125,37.5)" style="opacity: 1;"> 
   <rect rx="0" ry="0" x="-17.078125" y="-29.5" width="34.15625" height="59" class="label-container"></rect> 
   <g class="label" transform="translate(0,0)"> 
    <g transform="translate(-7.078125,-19.5)"> 
     <foreignobject width="14.15625" height="39"> 
     
       A 
      
     </foreignobject> 
    </g> 
   </g> 
  </g> 
  <g class="node default" style="opacity: 1;" id="flowchart-B-174" transform="translate(108.953125,37.5)"> 
   <rect rx="0" ry="0" x="-16.796875" y="-29.5" width="33.59375" height="59" class="label-container"></rect> 
   <g class="label" transform="translate(0,0)"> 
    <g transform="translate(-6.796875,-19.5)"> 
     <foreignobject width="13.59375" height="39"> 
     
       B 
      
     </foreignobject> 
    </g> 
   </g> 
  </g> 
  </g> 
 </g> 
</g>

a. 方向和箭头含义

用词 graph x; 含义 箭头 含义
TB 从上到下 > 添加尾部箭头
BT 从下到上 - 不添加尾部箭头
RL 从左到右 -- 单线
LR 从右到左 --text-- 单线加文字
== 粗线
==text== 粗线加文字
-.- 虚线
-.text.- 虚线加文字
nn## b. 节点含义
text
1 2 3 4 5 6 7 8 9 10 11 12 13 14 
   默认方形
   id1[方形]
   id2(圆边矩形)
   id3([体育场形])
   id4[[子程序形]]
   id5[(圆柱形)]
   id6((圆形))
    id1{菱形}
    id2{{六角形}}
    id3[/平行四边形/]
    id4[\反向平行四边形\]
    id5[/梯形\]
    id6[\反向梯形/]

c. 示例

text
1 2 3 4 5 6 7 
graph LR;
    A>"Ubuntu
(Linux)"] -.soft.-> C{TV}
    B["MAC"] ==> D((ARM64))
    D--> C
    A --> B
soft
text
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 
  </foreignobject> 
  </g> 
 </g> 
 <g class="edgeLabel" style="opacity: 1;" transform=""> 
  <g transform="translate(0,0)" class="label"> 
  <rect rx="0" ry="0" width="0" height="0"></rect> 
  <foreignobject width="0" height="0"> 
     
    
  </foreignobject> 
  </g> 
 </g> 
 <g class="edgeLabel" style="opacity: 1;" transform=""> 
  <g transform="translate(0,0)" class="label"> 
  <rect rx="0" ry="0" width="0" height="0"></rect> 
  <foreignobject width="0" height="0"> 
     
    
  </foreignobject> 
  </g> 
 </g> 
 <g class="edgeLabel" style="opacity: 1;" transform=""> 
  <g transform="translate(0,0)" class="label"> 
  <rect rx="0" ry="0" width="0" height="0"></rect> 
  <foreignobject width="0" height="0"> 
     
    
  </foreignobject> 
  </g> 
 </g> 
</g> 
<g class="nodes"> 
 <g class="node default" id="flowchart-A-183" transform="translate(81.390625,67.58203125)" style="opacity: 1;">
text
1 2 
     Ubuntu

(Linux)

text
1 2 3 4 5 6 
   </foreignobject> 
  </g> 
  </g> 
 </g> 
 <g class="node default" style="opacity: 1;" id="flowchart-C-184" transform="translate(549.7890625,67.58203125)">
text
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 
     TV 
     
   </foreignobject> 
  </g> 
  </g> 
 </g> 
 <g class="node default" style="opacity: 1;" id="flowchart-B-185" transform="translate(237.546875,107.6640625)"> 
  <rect rx="0" ry="0" x="-32.765625" y="-29.5" width="65.53125" height="59" class="label-container"></rect> 
  <g class="label" transform="translate(0,0)"> 
  <g transform="translate(-22.765625,-19.5)"> 
   <foreignobject width="45.5390625" height="39"> 
    
     MAC 
     
   </foreignobject> 
  </g> 
  </g> 
 </g> 
 <g class="node default" style="opacity: 1;" id="flowchart-D-186" transform="translate(406.4609375,107.6640625)"> 
  <circle x="-45.1640625" y="-29.5" r="45.1640625" class="label-container"></circle> 
  <g class="label" transform="translate(0,0)"> 
  <g transform="translate(-35.1640625,-19.5)"> 
   <foreignobject width="70.3359375" height="39"> 
    
     ARM64 
     
   </foreignobject> 
  </g> 
  </g> 
 </g> 
</g>
text
1 2 3 4 5 6 7 8 9 
graph LR
    a---b
    b--文本1!---c
    c---|文本2|d
    d===e
    e==文本3===f
    f-.-g
    g-.文本.-h
text
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 
  </foreignobject> 
  </g> 
 </g> 
 <g class="edgeLabel" style="opacity: 1;" transform="translate(183.6796875,37.5)"> 
  <g transform="translate(-34.6953125,-19.5)" class="label"> 
  <rect rx="0" ry="0" width="69.390625" height="39"></rect> 
  <foreignobject width="69.3984375" height="39"> 
    文本1! 
    
  </foreignobject> 
  </g> 
 </g> 
 <g class="edgeLabel" style="opacity: 1;" transform="translate(330.5390625,37.5)"> 
  <g transform="translate(-30.2890625,-19.5)" class="label"> 
  <rect rx="0" ry="0" width="60.578125" height="39"></rect> 
  <foreignobject width="60.5859375" height="39"> 
    文本2 
    
  </foreignobject> 
  </g> 
 </g> 
 <g class="edgeLabel" style="opacity: 1;" transform=""> 
  <g transform="translate(0,0)" class="label"> 
  <rect rx="0" ry="0" width="0" height="0"></rect> 
  <foreignobject width="0" height="0"> 
     
    
  </foreignobject> 
  </g> 
 </g> 
 <g class="edgeLabel" style="opacity: 1;" transform="translate(557.5859375,37.5)"> 
  <g transform="translate(-30.2890625,-19.5)" class="label"> 
  <rect rx="0" ry="0" width="60.578125" height="39"></rect> 
  <foreignobject width="60.5859375" height="39"> 
    文本3 
    
  </foreignobject> 
  </g> 
 </g> 
 <g class="edgeLabel" style="opacity: 1;" transform=""> 
  <g transform="translate(0,0)" class="label"> 
  <rect rx="0" ry="0" width="0" height="0"></rect> 
  <foreignobject width="0" height="0"> 
     
    
  </foreignobject> 
  </g> 
 </g> 
 <g class="edgeLabel" style="opacity: 1;" transform="translate(772.796875,37.5)"> 
  <g transform="translate(-24,-19.5)" class="label"> 
  <rect rx="0" ry="0" width="48" height="39"></rect> 
  <foreignobject width="48" height="39"> 
    文本 
    
  </foreignobject> 
  </g> 
 </g> 
</g> 
<g class="nodes"> 
 <g class="node default" id="flowchart-a-205" transform="translate(24.3046875,37.5)" style="opacity: 1;"> 
  <rect rx="0" ry="0" x="-16.3046875" y="-29.5" width="32.609375" height="59" class="label-container"></rect> 
  <g class="label" transform="translate(0,0)"> 
  <g transform="translate(-6.3046875,-19.5)"> 
   <foreignobject width="12.609375" height="39"> 
    
     a 
     
   </foreignobject> 
  </g> 
  </g> 
 </g> 
 <g class="node default" style="opacity: 1;" id="flowchart-b-206" transform="translate(107.296875,37.5)"> 
  <rect rx="0" ry="0" x="-16.6875" y="-29.5" width="33.375" height="59" class="label-container"></rect> 
  <g class="label" transform="translate(0,0)"> 
  <g transform="translate(-6.6875,-19.5)"> 
   <foreignobject width="13.3828125" height="39"> 
    
     b 
     
   </foreignobject> 
  </g> 
  </g> 
 </g> 
 <g class="node default" style="opacity: 1;" id="flowchart-c-208" transform="translate(259.3125,37.5)"> 
  <rect rx="0" ry="0" x="-15.9375" y="-29.5" width="31.875" height="59" class="label-container"></rect> 
  <g class="label" transform="translate(0,0)"> 
  <g transform="translate(-5.9375,-19.5)"> 
   <foreignobject width="11.8828125" height="39"> 
    
     c 
     
   </foreignobject> 
  </g> 
  </g> 
 </g> 
 <g class="node default" style="opacity: 1;" id="flowchart-d-210" transform="translate(402.515625,37.5)"> 
  <rect rx="0" ry="0" x="-16.6875" y="-29.5" width="33.375" height="59" class="label-container"></rect> 
  <g class="label" transform="translate(0,0)"> 
  <g transform="translate(-6.6875,-19.5)"> 
   <foreignobject width="13.3828125" height="39"> 
    
     d 
     
   </foreignobject> 
  </g> 
  </g> 
 </g> 
 <g class="node default" style="opacity: 1;" id="flowchart-e-212" transform="translate(485.75,37.5)"> 
  <rect rx="0" ry="0" x="-16.546875" y="-29.5" width="33.09375" height="59" class="label-container"></rect> 
  <g class="label" transform="translate(0,0)"> 
  <g transform="translate(-6.546875,-19.5)"> 
   <foreignobject width="13.1015625" height="39"> 
    
     e 
     
   </foreignobject> 
  </g> 
  </g> 
 </g> 
 <g class="node default" style="opacity: 1;" id="flowchart-f-214" transform="translate(627.3125,37.5)"> 
  <rect rx="0" ry="0" x="-14.4375" y="-29.5" width="28.875" height="59" class="label-container"></rect> 
  <g class="label" transform="translate(0,0)"> 
  <g transform="translate(-4.4375,-19.5)"> 
   <foreignobject width="8.8828125" height="39"> 
    
     f 
     
   </foreignobject> 
  </g> 
  </g> 
 </g> 
 <g class="node default" style="opacity: 1;" id="flowchart-g-216" transform="translate(707.7734375,37.5)"> 
  <rect rx="0" ry="0" x="-16.0234375" y="-29.5" width="32.046875" height="59" class="label-container"></rect> 
  <g class="label" transform="translate(0,0)"> 
  <g transform="translate(-6.0234375,-19.5)"> 
   <foreignobject width="12.046875" height="39"> 
    
     g 
     
   </foreignobject> 
  </g> 
  </g> 
 </g> 
 <g class="node default" style="opacity: 1;" id="flowchart-h-218" transform="translate(838.359375,37.5)"> 
  <rect rx="0" ry="0" x="-16.5625" y="-29.5" width="33.125" height="59" class="label-container"></rect> 
  <g class="label" transform="translate(0,0)"> 
  <g transform="translate(-6.5625,-19.5)"> 
   <foreignobject width="13.125" height="39"> 
    
     h 
     
   </foreignobject> 
  </g> 
  </g> 
 </g> 
</g>
text
1 2 3 4 5 6 7 
flowchart LR
   A o--o B
   B <--> C
   C x--x D
   
   旧连线 --文本--> 也会不同
text
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 
  </foreignobject> 
  </g> 
 </g> 
 <g class="edgeLabel"> 
  <g class="label" transform="translate(0, 0)"> 
  <foreignobject width="0" height="0"> 
     
    
  </foreignobject> 
  </g> 
 </g> 
 <g class="edgeLabel"> 
  <g class="label" transform="translate(0, 0)"> 
  <foreignobject width="0" height="0"> 
     
    
  </foreignobject> 
  </g> 
 </g> 
 <g class="edgeLabel" transform="translate(144, 139)"> 
  <g class="label" transform="translate(-24, -19.5)"> 
  <foreignobject width="48" height="39"> 
    文本 
    
  </foreignobject> 
  </g> 
 </g> 
</g> 
<g class="nodes"> 
 <g class="node default default" id="flowchart-A-227" transform="translate(51.5, 35)"> 
  <rect class="basic label-container" style="" rx="0" ry="0" x="-14.578125" y="-27" width="29.15625" height="54"></rect> 
  <g class="label" style="" transform="translate(-7.078125, -19.5)"> 
  <foreignobject width="14.15625" height="39"> 
    A 
    
  </foreignobject> 
  </g> 
 </g> 
 <g class="node default default" id="flowchart-B-228" transform="translate(248.5, 35)"> 
  <rect class="basic label-container" style="" rx="0" ry="0" x="-14.296875" y="-27" width="28.59375" height="54"></rect> 
  <g class="label" style="" transform="translate(-6.796875, -19.5)"> 
  <foreignobject width="13.59375" height="39"> 
    B 
    
  </foreignobject> 
  </g> 
 </g> 
 <g class="node default default" id="flowchart-C-230" transform="translate(368.68359375, 35)"> 
  <rect class="basic label-container" style="" rx="0" ry="0" x="-14.68359375" y="-27" width="29.3671875" height="54"></rect> 
  <g class="label" style="" transform="translate(-7.18359375, -19.5)"> 
  <foreignobject width="14.3671875" height="39"> 
    C 
    
  </foreignobject> 
  </g> 
 </g> 
 <g class="node default default" id="flowchart-D-232" transform="translate(448.2265625, 35)"> 
  <rect class="basic label-container" style="" rx="0" ry="0" x="-14.859375" y="-27" width="29.71875" height="54"></rect> 
  <g class="label" style="" transform="translate(-7.359375, -19.5)"> 
  <foreignobject width="14.71875" height="39"> 
    D 
    
  </foreignobject> 
  </g> 
 </g> 
 <g class="node default default" id="flowchart-旧连线-233" transform="translate(51.5, 139)"> 
  <rect class="basic label-container" style="" rx="0" ry="0" x="-43.5" y="-27" width="87" height="54"></rect> 
  <g class="label" style="" transform="translate(-36, -19.5)"> 
  <foreignobject width="72" height="39"> 
    旧连线 
    
  </foreignobject> 
  </g> 
 </g> 
 <g class="node default default" id="flowchart-也会不同-234" transform="translate(248.5, 139)"> 
  <rect class="basic label-container" style="" rx="0" ry="0" x="-55.5" y="-27" width="111" height="54"></rect> 
  <g class="label" style="" transform="translate(-48, -19.5)"> 
  <foreignobject width="96" height="39"> 
    也会不同 
    
  </foreignobject> 
  </g> 
 </g> 
</g>

延长连线：
增加相应字符即可，如下图中的B到E，连线中增加了一个 - 。字符可多次添加。

text
1 2 3 4 5 6 7 
graph LR
   A[Start] --> B{Is it?};
   B -->|Yes| C[OK];
   C --> D[Rethink];
   D --> B;
   B --->|No| E[End];

多重链

text
1 2 3 4 5 6 7 8 9 10 
graph LR
   a --> b & c--> d
   
   A & B--> C & D
   
   X --> M
   X --> N
   Y --> M
   Y --> N
text
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 
  </foreignobject> 
  </g> 
 </g> 
 <g class="edgeLabel" style="opacity: 1;" transform=""> 
  <g transform="translate(0,0)" class="label"> 
  <rect rx="0" ry="0" width="0" height="0"></rect> 
  <foreignobject width="0" height="0"> 
     
    
  </foreignobject> 
  </g> 
 </g> 
 <g class="edgeLabel" style="opacity: 1;" transform=""> 
  <g transform="translate(0,0)" class="label"> 
  <rect rx="0" ry="0" width="0" height="0"></rect> 
  <foreignobject width="0" height="0"> 
     
    
  </foreignobject> 
  </g> 
 </g> 
 <g class="edgeLabel" style="opacity: 1;" transform=""> 
  <g transform="translate(0,0)" class="label"> 
  <rect rx="0" ry="0" width="0" height="0"></rect> 
  <foreignobject width="0" height="0"> 
     
    
  </foreignobject> 
  </g> 
 </g> 
 <g class="edgeLabel" style="opacity: 1;" transform=""> 
  <g transform="translate(0,0)" class="label"> 
  <rect rx="0" ry="0" width="0" height="0"></rect> 
  <foreignobject width="0" height="0"> 
     
    
  </foreignobject> 
  </g> 
 </g> 
 <g class="edgeLabel" style="opacity: 1;" transform=""> 
  <g transform="translate(0,0)" class="label"> 
  <rect rx="0" ry="0" width="0" height="0"></rect> 
  <foreignobject width="0" height="0"> 
     
    
  </foreignobject> 
  </g> 
 </g> 
 <g class="edgeLabel" style="opacity: 1;" transform=""> 
  <g transform="translate(0,0)" class="label"> 
  <rect rx="0" ry="0" width="0" height="0"></rect> 
  <foreignobject width="0" height="0"> 
     
    
  </foreignobject> 
  </g> 
 </g> 
 <g class="edgeLabel" style="opacity: 1;" transform=""> 
  <g transform="translate(0,0)" class="label"> 
  <rect rx="0" ry="0" width="0" height="0"></rect> 
  <foreignobject width="0" height="0"> 
     
    
  </foreignobject> 
  </g> 
 </g> 
 <g class="edgeLabel" style="opacity: 1;" transform=""> 
  <g transform="translate(0,0)" class="label"> 
  <rect rx="0" ry="0" width="0" height="0"></rect> 
  <foreignobject width="0" height="0"> 
     
    
  </foreignobject> 
  </g> 
 </g> 
 <g class="edgeLabel" style="opacity: 1;" transform=""> 
  <g transform="translate(0,0)" class="label"> 
  <rect rx="0" ry="0" width="0" height="0"></rect> 
  <foreignobject width="0" height="0"> 
     
    
  </foreignobject> 
  </g> 
 </g> 
 <g class="edgeLabel" style="opacity: 1;" transform=""> 
  <g transform="translate(0,0)" class="label"> 
  <rect rx="0" ry="0" width="0" height="0"></rect> 
  <foreignobject width="0" height="0"> 
     
    
  </foreignobject> 
  </g> 
 </g> 
 <g class="edgeLabel" style="opacity: 1;" transform=""> 
  <g transform="translate(0,0)" class="label"> 
  <rect rx="0" ry="0" width="0" height="0"></rect> 
  <foreignobject width="0" height="0"> 
     
    
  </foreignobject> 
  </g> 
 </g> 
</g> 
<g class="nodes"> 
 <g class="node default" id="flowchart-a-251" transform="translate(25.078125,92)" style="opacity: 1;"> 
  <rect rx="0" ry="0" x="-16.3046875" y="-29.5" width="32.609375" height="59" class="label-container"></rect> 
  <g class="label" transform="translate(0,0)"> 
  <g transform="translate(-6.3046875,-19.5)"> 
   <foreignobject width="12.609375" height="39"> 
    
     a 
     
   </foreignobject> 
  </g> 
  </g> 
 </g> 
 <g class="node default" style="opacity: 1;" id="flowchart-b-252" transform="translate(110.671875,37.5)"> 
  <rect rx="0" ry="0" x="-16.6875" y="-29.5" width="33.375" height="59" class="label-container"></rect> 
  <g class="label" transform="translate(0,0)"> 
  <g transform="translate(-6.6875,-19.5)"> 
   <foreignobject width="13.3828125" height="39"> 
    
     b 
     
   </foreignobject> 
  </g> 
  </g> 
 </g> 
 <g class="node default" style="opacity: 1;" id="flowchart-c-253" transform="translate(110.671875,146.5)"> 
  <rect rx="0" ry="0" x="-15.9375" y="-29.5" width="31.875" height="59" class="label-container"></rect> 
  <g class="label" transform="translate(0,0)"> 
  <g transform="translate(-5.9375,-19.5)"> 
   <foreignobject width="11.8828125" height="39"> 
    
     c 
     
   </foreignobject> 
  </g> 
  </g> 
 </g> 
 <g class="node default" style="opacity: 1;" id="flowchart-d-254" transform="translate(195.875,92)"> 
  <rect rx="0" ry="0" x="-16.6875" y="-29.5" width="33.375" height="59" class="label-container"></rect> 
  <g class="label" transform="translate(0,0)"> 
  <g transform="translate(-6.6875,-19.5)"> 
   <foreignobject width="13.3828125" height="39"> 
    
     d 
     
   </foreignobject> 
  </g> 
  </g> 
 </g> 
 <g class="node default" style="opacity: 1;" id="flowchart-A-255" transform="translate(25.078125,265.5)"> 
  <rect rx="0" ry="0" x="-17.078125" y="-29.5" width="34.15625" height="59" class="label-container"></rect> 
  <g class="label" transform="translate(0,0)"> 
  <g transform="translate(-7.078125,-19.5)"> 
   <foreignobject width="14.15625" height="39"> 
    
     A 
     
   </foreignobject> 
  </g> 
  </g> 
 </g> 
 <g class="node default" style="opacity: 1;" id="flowchart-B-256" transform="translate(25.078125,374.5)"> 
  <rect rx="0" ry="0" x="-16.796875" y="-29.5" width="33.59375" height="59" class="label-container"></rect> 
  <g class="label" transform="translate(0,0)"> 
  <g transform="translate(-6.796875,-19.5)"> 
   <foreignobject width="13.59375" height="39"> 
    
     B 
     
   </foreignobject> 
  </g> 
  </g> 
 </g> 
 <g class="node default" style="opacity: 1;" id="flowchart-C-257" transform="translate(110.671875,255.5)"> 
  <rect rx="0" ry="0" x="-17.1796875" y="-29.5" width="34.359375" height="59" class="label-container"></rect> 
  <g class="label" transform="translate(0,0)"> 
  <g transform="translate(-7.1796875,-19.5)"> 
   <foreignobject width="14.3671875" height="39"> 
    
     C 
     
   </foreignobject> 
  </g> 
  </g> 
 </g> 
 <g class="node default" style="opacity: 1;" id="flowchart-D-258" transform="translate(110.671875,384.5)"> 
  <rect rx="0" ry="0" x="-17.359375" y="-29.5" width="34.71875" height="59" class="label-container"></rect> 
  <g class="label" transform="translate(0,0)"> 
  <g transform="translate(-7.359375,-19.5)"> 
   <foreignobject width="14.71875" height="39"> 
    
     D 
     
   </foreignobject> 
  </g> 
  </g> 
 </g> 
 <g class="node default" style="opacity: 1;" id="flowchart-X-259" transform="translate(25.078125,503.5)"> 
  <rect rx="0" ry="0" x="-16.6796875" y="-29.5" width="33.359375" height="59" class="label-container"></rect> 
  <g class="label" transform="translate(0,0)"> 
  <g transform="translate(-6.6796875,-19.5)"> 
   <foreignobject width="13.359375" height="39"> 
    
     X 
     
   </foreignobject> 
  </g> 
  </g> 
 </g> 
 <g class="node default" style="opacity: 1;" id="flowchart-M-260" transform="translate(110.671875,493.5)"> 
  <rect rx="0" ry="0" x="-18.515625" y="-29.5" width="37.03125" height="59" class="label-container"></rect> 
  <g class="label" transform="translate(0,0)"> 
  <g transform="translate(-8.515625,-19.5)"> 
   <foreignobject width="17.0390625" height="39"> 
    
     M 
     
   </foreignobject> 
  </g> 
  </g> 
 </g> 
 <g class="node default" style="opacity: 1;" id="flowchart-N-262" transform="translate(110.671875,622.5)"> 
  <rect rx="0" ry="0" x="-17.6640625" y="-29.5" width="35.328125" height="59" class="label-container"></rect> 
  <g class="label" transform="translate(0,0)"> 
  <g transform="translate(-7.6640625,-19.5)"> 
   <foreignobject width="15.328125" height="39"> 
    
     N 
     
   </foreignobject> 
  </g> 
  </g> 
 </g> 
 <g class="node default" style="opacity: 1;" id="flowchart-Y-263" transform="translate(25.078125,612.5)"> 
  <rect rx="0" ry="0" x="-16.84375" y="-29.5" width="33.6875" height="59" class="label-container"></rect> 
  <g class="label" transform="translate(0,0)"> 
  <g transform="translate(-6.84375,-19.5)"> 
   <foreignobject width="13.6875" height="39"> 
    
     Y 
     
   </foreignobject> 
  </g> 
  </g> 
 </g> 
</g>

注释 %%这是一条注释，在渲染图中不可见 子图

text
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 
%%这是一条注释，在渲染图中不可见
flowchart TB
   c1-->a2
   subgraph one
   a1-->a2
   end
   subgraph two
   b1-->b2
   end
   subgraph three
   c1-->c2
   end
   one --> two
   three --> two
   two --> c2
three
text
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 
  </foreignobject> 
  </g> 
 </g> 
 <g class="cluster default" id="one"> 
  <rect style="" rx="0" ry="0" x="8" y="8" width="110.1953125" height="208"></rect> 
  <g class="cluster-label" transform="translate(43.55078125, 13)"> 
  <foreignobject width="39.09375" height="39"> 
    one 
    
  </foreignobject> 
  </g> 
 </g> 
</g> 
<g class="edgePaths">
text
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 
  </foreignobject> 
  </g> 
 </g> 
 <g class="edgeLabel"> 
  <g class="label" transform="translate(0, 0)"> 
  <foreignobject width="0" height="0"> 
     
    
  </foreignobject> 
  </g> 
 </g> 
 <g class="edgeLabel"> 
  <g class="label" transform="translate(0, 0)"> 
  <foreignobject width="0" height="0"> 
     
    
  </foreignobject> 
  </g> 
 </g> 
 <g class="edgeLabel"> 
  <g class="label" transform="translate(0, 0)"> 
  <foreignobject width="0" height="0"> 
     
    
  </foreignobject> 
  </g> 
 </g> 
 <g class="edgeLabel"> 
  <g class="label" transform="translate(0, 0)"> 
  <foreignobject width="0" height="0"> 
     
    
  </foreignobject> 
  </g> 
 </g> 
 <g class="edgeLabel"> 
  <g class="label" transform="translate(0, 0)"> 
  <foreignobject width="0" height="0"> 
     
    
  </foreignobject> 
  </g> 
 </g> 
</g> 
<g class="nodes"> 
 <g class="node default default" id="flowchart-c2-288" transform="translate(205.5625, 164)"> 
  <rect class="basic label-container" style="" rx="0" ry="0" x="-19.734375" y="-27" width="39.46875" height="54"></rect> 
  <g class="label" style="" transform="translate(-12.234375, -19.5)"> 
  <foreignobject width="24.46875" height="39"> 
    c2 
    
  </foreignobject> 
  </g> 
 </g> 
 <g class="node default default" id="flowchart-c1-281" transform="translate(195.5625, 60)"> 
  <rect class="basic label-container" style="" rx="0" ry="0" x="-19.734375" y="-27" width="39.46875" height="54"></rect> 
  <g class="label" style="" transform="translate(-12.234375, -19.5)"> 
  <foreignobject width="24.46875" height="39"> 
    c1 
    
  </foreignobject> 
  </g> 
 </g> 
 <g class="root" transform="translate(89.7265625, 258)"> 
  <g class="clusters"> 
  <g class="cluster default" id="two"> 
   <rect style="" rx="0" ry="0" x="8" y="8" width="181.9375" height="124"></rect> 
   <g class="cluster-label" transform="translate(78.8359375, 13)"> 
    <foreignobject width="40.265625" height="39"> 
     two 
     
    </foreignobject> 
   </g> 
  </g> 
  </g> 
  <g class="edgePaths">
text
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 
    </foreignobject> 
   </g> 
  </g> 
  </g> 
  <g class="nodes"> 
  <g class="node default default" id="flowchart-b2-286" transform="translate(144.453125, 70)"> 
   <rect class="basic label-container" style="" rx="0" ry="0" x="-20.484375" y="-27" width="40.96875" height="54"></rect> 
   <g class="label" style="" transform="translate(-12.984375, -19.5)"> 
    <foreignobject width="25.96875" height="39"> 
     b2 
     
    </foreignobject> 
   </g> 
  </g> 
  <g class="node default default" id="flowchart-b1-285" transform="translate(53.484375, 70)"> 
   <rect class="basic label-container" style="" rx="0" ry="0" x="-20.484375" y="-27" width="40.96875" height="54"></rect> 
   <g class="label" style="" transform="translate(-12.984375, -19.5)"> 
    <foreignobject width="25.96875" height="39"> 
     b1 
     
    </foreignobject> 
   </g> 
  </g> 
  </g> 
 </g> 
 <g class="node default default" id="flowchart-a2-282" transform="translate(63.09765625, 164)"> 
  <rect class="basic label-container" style="" rx="0" ry="0" x="-20.09765625" y="-27" width="40.1953125" height="54"></rect> 
  <g class="label" style="" transform="translate(-12.59765625, -19.5)"> 
  <foreignobject width="25.1953125" height="39"> 
    a2 
    
  </foreignobject> 
  </g> 
 </g> 
 <g class="node default default" id="flowchart-a1-283" transform="translate(63.09765625, 60)"> 
  <rect class="basic label-container" style="" rx="0" ry="0" x="-20.09765625" y="-27" width="40.1953125" height="54"></rect> 
  <g class="label" style="" transform="translate(-12.59765625, -19.5)"> 
  <foreignobject width="25.1953125" height="39"> 
    a1 
    
  </foreignobject> 
  </g> 
 </g> 
</g>

原文地址：https://blog.csdn.net/qq_32460819/article/details/121574296?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522168905673016800227434001%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=168905673016800227434001&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v1~rank_v31_ecpm-27-121574296-null-null.142^v88^control_2,239^v2^insert_chatgpt&utm_term=markdown

本文章网址: https://www.sjxi.cn/detil/3a80897b26a1485f91b4a9bebee155ca

打赏作者

本站为非盈利网站，如果您喜欢这篇文章，欢迎支持我们继续运营！

推荐阅读

【分享】必应浏览器25.5 🔥纯净版想的到想不到的都能做

【分享】必应浏览器25.5 🔥纯净版想的到想不到的都能做

活动线报侠 2024-11-05
QQXML 卡片菜单代码分享

QQXML 卡片菜单代码分享

花生哦 2021-12-13
【iapp】手电筒源码

【iapp】手电筒源码

活动线报侠 2024-04-29
【分享】🔥测量大师🔥测量身高🔥内置众多功能

【分享】🔥测量大师🔥测量身高🔥内置众多功能

活动线报侠 2024-09-24

评论

暂无评论

关于本站

花生博客专注于技术分享与生活记录。部分内容来源于网络整理，如涉及版权问题请第一时间联系我： abcdsjx@126.com ，我们会在 24 小时内处理。

© 2025 HuaShen Blog
湘ICP备2021009447号

推荐阅读

赞助支持

微信
微信
支付宝
支付宝