mermaid.js 效果相册

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

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

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

使用它，可以轻松在各类 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

参考文献

技术笔记 > 通用技术
mermaid.js 效果相册
https://www.frytea.com/post/20221124223835.html
作者
Tianlun Song
发布于
2022年11月24日
更新于
2024年6月10日
许可协议