Markdown 中的 Mermaid 特效样例
OSI 网络七层模型
block-beta
columns 7
A_1["App_C"]:3 space A_2["App_S"]:3
space:7
B_1["表示层_C"]:3 space B_2["表示层_S"]:3
space:7
C_1["会话层_C"]:3 space C_2["会话层_S"]:3
space:7
D_1["传输层_C"]:3 space D_2["传输层_S"]:3
space:7
E_1["网络层_C"]:3 space E_2["网络层_S"]:3
space:7
F_1["链路层_C"]:3 space F_2["链路层_S"]:3
space:7
G_1["物理层_C"]:3 space G_2["物理层_S"]:3
A_1-->B_1
B_1-->C_1
C_1-->D_1
D_1-->E_1
E_1-->F_1
F_1-->G_1
G_1-->G_2
B_2-->A_2
C_2-->B_2
D_2-->C_2
E_2-->D_2
F_2-->E_2
G_2-->F_2
block-beta
columns 7
A_1["App_C"]:3 space A_2["App_S"]:3
space:7
B_1["表示层_C"]:3 space B_2["表示层_S"]:3
space:7
C_1["会话层_C"]:3 space C_2["会话层_S"]:3
space:7
D_1["传输层_C"]:3 space D_2["传输层_S"]:3
space:7
E_1["网络层_C"]:3 space E_2["网络层_S"]:3
space:7
F_1["链路层_C"]:3 space F_2["链路层_S"]:3
space:7
G_1["物理层_C"]:3 space G_2["物理层_S"]:3
A_1-->B_1
B_1-->C_1
C_1-->D_1
D_1-->E_1
E_1-->F_1
F_1-->G_1
G_1-->G_2
B_2-->A_2
C_2-->B_2
D_2-->C_2
E_2-->D_2
F_2-->E_2
G_2-->F_2
俄罗斯套娃, 颜色定制
flowchart LR
subgraph App_S
subgraph A
subgraph B
subgraph ...
subgraph X
subgraph Y
subgraph Z
F["fun () <br> {...}"]
end
end
end
end
end
end
end
classDef CS1 fill:#daeef8,stroke:#933,stroke-width:2px,color:#ff0000;
classDef CS2 fill:#daeef0,stroke:#933,stroke-width:2px;
classDef CS3 fill:#daeee8,stroke:#933,stroke-width:2px;
classDef CS4 fill:#daeee0,stroke:#933,stroke-width:2px;
classDef CS5 fill:#daeed8,stroke:#933,stroke-width:2px;
classDef CS6 fill:#daeed0,stroke:#933,stroke-width:2px;
classDef CS7 fill:#daeec8,stroke:#933,stroke-width:2px;
class App_S CS1;
class A CS2;
class B CS3;
class ... CS4;
class X CS5;
class Y CS6;
class Z CS7;
flowchart LR
subgraph App_S
subgraph A
subgraph B
subgraph ...
subgraph X
subgraph Y
subgraph Z
F["fun () <br> {...}"]
end
end
end
end
end
end
end
classDef CS1 fill:#daeef8,stroke:#933,stroke-width:2px,color:#ff0000;
classDef CS2 fill:#daeef0,stroke:#933,stroke-width:2px;
classDef CS3 fill:#daeee8,stroke:#933,stroke-width:2px;
classDef CS4 fill:#daeee0,stroke:#933,stroke-width:2px;
classDef CS5 fill:#daeed8,stroke:#933,stroke-width:2px;
classDef CS6 fill:#daeed0,stroke:#933,stroke-width:2px;
classDef CS7 fill:#daeec8,stroke:#933,stroke-width:2px;
class App_S CS1;
class A CS2;
class B CS3;
class ... CS4;
class X CS5;
class Y CS6;
class Z CS7;
并列套娃
flowchart LR
subgraph App
subgraph B["Service B"]
subgraph X1["X"]
F["fun () <br> {...}"]
end
end
subgraph A["Service A"]
subgraph X2["X"]
G["fun () <br> {...}"]
end
end
end
classDef CS1 fill:#faeef8,stroke:#933,stroke-width:2px;
classDef CS2 fill:#daeef0,stroke:#933,stroke-width:2px;
classDef CS3 fill:#e1cce8,stroke:#933,stroke-width:2px;
classDef CS6 fill:#3aeed0,stroke:#933,stroke-width:2px,color:#ff0000
classDef CS7 fill:#aaeec8,stroke:#933,stroke-width:2px;
class App CS1;
class A CS2;
class B CS3;
class F CS6;
class G CS6;
class X1 CS7;
class X2 CS7;
flowchart LR
subgraph App
subgraph B["Service B"]
subgraph X1["X"]
F["fun () <br> {...}"]
end
end
subgraph A["Service A"]
subgraph X2["X"]
G["fun () <br> {...}"]
end
end
end
classDef CS1 fill:#faeef8,stroke:#933,stroke-width:2px;
classDef CS2 fill:#daeef0,stroke:#933,stroke-width:2px;
classDef CS3 fill:#e1cce8,stroke:#933,stroke-width:2px;
classDef CS6 fill:#3aeed0,stroke:#933,stroke-width:2px,color:#ff0000
classDef CS7 fill:#aaeec8,stroke:#933,stroke-width:2px;
class App CS1;
class A CS2;
class B CS3;
class F CS6;
class G CS6;
class X1 CS7;
class X2 CS7;
指定方向, 避免乱排
flowchart LR
subgraph App
subgraph S["Service, 服务层"]
direction TB
subgraph B["中间层 B"]
subgraph X1["基础组件 X"]
F["fun () <br> {...}"]
end
end
subgraph A["中间层 A"]
subgraph X2["基础组件 X"]
G["fun () <br> {...}"]
end
end
end
end
classDef CS1 fill:#faeef8,stroke:#933,stroke-width:2px;color:#ff0
classDef CS2 fill:#daeef0,stroke:#933,stroke-width:2px;
classDef CS3 fill:#e1cce8,stroke:#933,stroke-width:2px;
classDef CS4 fill:#daeed0,stroke:#933,stroke-width:2px;
classDef CS6 fill:#3aeed0,stroke:#933,stroke-width:2px;
classDef CS7 fill:#aaeec8,stroke:#933,stroke-width:2px;
class App CS1;
class A CS2;
class B CS3;
class S CS4;
class F CS6;
class G CS6;
class Z1 CS7;
class Z2 CS7;
flowchart LR
subgraph App
subgraph S["Service, 服务层"]
direction TB
subgraph B["中间层 B"]
subgraph X1["基础组件 X"]
F["fun () <br> {...}"]
end
end
subgraph A["中间层 A"]
subgraph X2["基础组件 X"]
G["fun () <br> {...}"]
end
end
end
end
classDef CS1 fill:#faeef8,stroke:#933,stroke-width:2px;color:#ff0
classDef CS2 fill:#daeef0,stroke:#933,stroke-width:2px;
classDef CS3 fill:#e1cce8,stroke:#933,stroke-width:2px;
classDef CS4 fill:#daeed0,stroke:#933,stroke-width:2px;
classDef CS6 fill:#3aeed0,stroke:#933,stroke-width:2px;
classDef CS7 fill:#aaeec8,stroke:#933,stroke-width:2px;
class App CS1;
class A CS2;
class B CS3;
class S CS4;
class F CS6;
class G CS6;
class Z1 CS7;
class Z2 CS7;
如果不指定方向 (少了 direction TB 这一句), 让系统自动安排, 结果是这样
flowchart LR
subgraph App
subgraph S["Service, 服务层"]
subgraph B["中间层 B"]
subgraph X1["基础组件 X"]
F["fun () <br> {...}"]
end
end
subgraph A["中间层 A"]
subgraph X2["基础组件 X"]
G["fun () <br> {...}"]
end
end
end
end
classDef CS1 fill:#faeef8,stroke:#933,stroke-width:2px;color:#ff0
classDef CS2 fill:#daeef0,stroke:#933,stroke-width:2px;
classDef CS3 fill:#e1cce8,stroke:#933,stroke-width:2px;
classDef CS4 fill:#daeed0,stroke:#933,stroke-width:2px;
classDef CS6 fill:#3aeed0,stroke:#933,stroke-width:2px;
classDef CS7 fill:#aaeec8,stroke:#933,stroke-width:2px;
class App CS1;
class A CS2;
class B CS3;
class S CS4;
class F CS6;
class G CS6;
class Z1 CS7;
class Z2 CS7;
或者成这样
flowchart TB
subgraph App
subgraph S["Service, 服务层"]
subgraph B["中间层 B"]
subgraph X1["基础组件 X"]
F["fun () <br> {...}"]
end
end
subgraph A["中间层 A"]
subgraph X2["基础组件 X"]
G["fun () <br> {...}"]
end
end
end
end
classDef CS1 fill:#faeef8,stroke:#933,stroke-width:2px;color:#ff0
classDef CS2 fill:#daeef0,stroke:#933,stroke-width:2px;
classDef CS3 fill:#e1cce8,stroke:#933,stroke-width:2px;
classDef CS4 fill:#daeed0,stroke:#933,stroke-width:2px;
classDef CS6 fill:#3aeed0,stroke:#933,stroke-width:2px;
classDef CS7 fill:#aaeec8,stroke:#933,stroke-width:2px;
class App CS1;
class A CS2;
class B CS3;
class S CS4;
class F CS6;
class G CS6;
class Z1 CS7;
class Z2 CS7;
文字防截断 + 指定位置截断 + 指定颜色 + 左对齐
flowchart TB
START@{ shape: circ, label: "开始" }
A["<span style='white-space: nowrap;'>创建模型: model=SimpleNN ()</span>"]
START --> A
A --> B["<span style='white-space: nowrap;'>总数据量:48000, 每个批次:64, 总批次:750(750=(48000+64-1)/64)</span>"]
B --> C["大循环: 共 20 个轮次"]
C --> D["<span style='white-space: nowrap;'>打乱数据 - permutation 结合 花式索引</span>"]
D --> E["小循环, 总共 750 次"]
E --> F["<span style='white-space: nowrap;color:blue;'>每次取 64 组数据: x_batch 和 y_batch, 注:最后一次可能不足 64</span>"]
F --> G["<span style='white-space: nowrap;color:blue;'>前向传播: y_pred=model.forward (x_batch)</span>"]
G --> H["<span style='white-space: nowrap;color:blue;'>计算损失: batch_loss=model.compute_loss (y_pred, y_batch)</span>"]
H --> I["<span style='white-space: nowrap;color:blue;'>反向传播: dW, dB = model.backward (x_batch, y_pred, y_batch)</span>"]
I --> J["<span style='white-space: nowrap;color:blue;'>更新参数: model.update_para (dW, dB, config.LR)</span>"]
J --> K["<div style='white-space: nowrap;text-align: left;color:blue;'>统计:<br>epoch_loss += batch_size * 64<br>batch_accuracy = compute_accuracy (y_pred, y_batch)<br>epoch_correct += batch_accuracy * 64</div>"]
K --> L{{"小循环结束 ?"}}
L --> |"未结束"| E
L --> |"已结束"| M["<div style='white-space: nowrap;text-align: left;'>计算本 epoch 的平均指标:<br>avg_loss = epoch_loss / 48000<br>avg_accuracy = epoch_correct / 48000</div>"]
M --> N["<div style='white-space: nowrap;text-align: left;'>验证评估:<br>y_val_pred = model.forward (x_val)<br>val_loss = model.compute_loss (y_val_pred, y_val)<br>val_accuracy = compute_accuracy(y_val_pred, y_val)</div>"]
N --> P{{"大循环结束 ?"}}
P --> |"未结束"| C
P --> |"已结束"| Q["save model"]
END@{ shape: stadium, label: "结束" }
Q --> END
flowchart TB
START@{ shape: circ, label: "开始" }
A["<span style='white-space: nowrap;'>创建模型: model=SimpleNN ()</span>"]
START --> A
A --> B["<span style='white-space: nowrap;'>总数据量:48000, 每个批次:64, 总批次:750(750=(48000+64-1)/64)</span>"]
B --> C["大循环: 共 20 个轮次"]
C --> D["<span style='white-space: nowrap;'>打乱数据 - permutation 结合 花式索引</span>"]
D --> E["小循环, 总共 750 次"]
E --> F["<span style='white-space: nowrap;color:blue;'>每次取 64 组数据: x_batch 和 y_batch, 注:最后一次可能不足 64</span>"]
F --> G["<span style='white-space: nowrap;color:blue;'>前向传播: y_pred=model.forward (x_batch)</span>"]
G --> H["<span style='white-space: nowrap;color:blue;'>计算损失: batch_loss=model.compute_loss (y_pred, y_batch)</span>"]
H --> I["<span style='white-space: nowrap;color:blue;'>反向传播: dW, dB = model.backward (x_batch, y_pred, y_batch)</span>"]
I --> J["<span style='white-space: nowrap;color:blue;'>更新参数: model.update_para (dW, dB, config.LR)</span>"]
J --> K["<div style='white-space: nowrap;text-align: left;color:blue;'>统计:<br>epoch_loss += batch_size * 64<br>batch_accuracy = compute_accuracy (y_pred, y_batch)<br>epoch_correct += batch_accuracy * 64</div>"]
K --> L{{"小循环结束 ?"}}
L --> |"未结束"| E
L --> |"已结束"| M["<div style='white-space: nowrap;text-align: left;'>计算本 epoch 的平均指标:<br>avg_loss = epoch_loss / 48000<br>avg_accuracy = epoch_correct / 48000</div>"]
M --> N["<div style='white-space: nowrap;text-align: left;'>验证评估:<br>y_val_pred = model.forward (x_val)<br>val_loss = model.compute_loss (y_val_pred, y_val)<br>val_accuracy = compute_accuracy(y_val_pred, y_val)</div>"]
N --> P{{"大循环结束 ?"}}
P --> |"未结束"| C
P --> |"已结束"| Q["save model"]
END@{ shape: stadium, label: "结束" }
Q --> END
文字用数学公式
flowchart BT
To[上游]
style To stroke-dasharray: 5 5
SC2(("Softmax +<br>CrossEntropy"))
SC2 --> |"$$\frac{\partial L}{\partial Z}$$"| To
flowchart BT
To[上游]
style To stroke-dasharray: 5 5
SC2(("Softmax +<br>CrossEntropy"))
SC2 --> |"$$\frac{\partial L}{\partial Z}$$"| To
只显示箭头, 不需要节点 ?
flowchart 语法不支持单箭头, 必须带上节点 (矩形/圆形).
但有时候, 我们又希望只显示箭头.
我们可以把节点隐藏起来: 填充用 none, 边框也用 none, 背景色用透明
flowchart TD
A[起点]
B[ ]
style B fill:none, stroke:none, color:transparent
A --> B
注意, B [ ] 方括号中间的文字必须有内容, 不能减. 可以写空白, 或随便写 !
flowchart TD
A[起点]
B[ ]
style B fill:none, stroke:none, color:transparent
A --> B
浙公网安备 33010602011771号