mermaid 是一款 javascript 库,能够轻而易举地通过文本代码绘图。 作为普通用户,将其理解为一种绘图的语言即可,集成它之后就可以在 markdown 的轻松插入特定语法编写的各类图

mermaid 是一款 javascript 库,能够轻而易举地通过文本代码绘图。

作为普通用户,将其理解为一种绘图的语言即可,集成它之后就可以在 markdown 的轻松插入特定语法编写的各类图示了,而且不需要像 plantuml 一样需要外部服务器,目前 notionobsidian 等都已原生支持该特性,许多博客主题也支持该语法。

使用它,可以轻松在各类 md 编辑器中绘图,方便修改和传播。

具体语法请查看 mermaid 官网,本文展示一些在互联网发现的比较优秀的示例:

网络拓扑图

graph TD
 linkStyle default interpolate basis
 wan1[
DSL 100/10 Mb

10.100.102.1
]---router{
EdgeRouter-X

10.20.30.1
} ip((

IP

))-.-router dns((

DNS

))-.-router wan2[
LTE 50/20 Mb

192.168.1.1
]---router router---|100Mb|ap[
RT-AC1200

10.20.30.3
] router---|1Gb|pc(
PC

10.20.30.190
) router---|1Gb|switch[
TL-SG105E

10.20.30.2
] subgraph red1 ap-.-cam1(
Camera

10.20.30.171
) ap-.-cam2(
Camera

10.20.30.172
) ap-.-phone(
Phone

10.20.30.191
) ap-.-ir(
IR

10.20.30.180
) end subgraph red2 switch---|100Mb|pi1(
RPi 3B

10.20.30.150
) switch---|1Gb|pi2(
RPi 3B+

10.20.30.151
) switch---|100Mb|nvr(
NVR

10.20.30.170
) switch---|1Gb|laptop(
Laptop

10.20.30.192
) end

参考文献