Mermaid 是一个常用的文本画图(Diagrams as Code)工具,与之类似的产品还有 PlantUML 等。

一、基于在线网页使用 Mermaid

Mermaid 官方网页 mermaid.live / mermaid.ai 支持在线实时编辑与预览 Mermaid 。

其它可选的 Mermaid 在线网页还有:

二、基于客户端工具使用 Mermaid

以下软件已内置或通过插件支持 Mermaid

工具支持方式
Obsidian内置
Typora内置
VSCodeMarkdown Preview Mermaid Support插件
Jetbrains IDEAMermaid插件(默认启用)

三、基于命令行工具使用 Mermaid

(一)安装 mermaid-cli

npm install -g @mermaid-js/mermaid-cli

(二)使用 mermaid-cli

(1)新建 Mermaid 文件

cat > 1.mmd << 'EOF'
graph
   A-->B
EOF

(2)生成 Mermaid 图

mmdc -i 1.mmd -o 1.png

如果遇到Error: Could not find chrome-headless-shell问题,可尝试配置PUPPETEER_EXECUTABLE_PATH环境变量:

cat >> ~/.zshrc << 'EOF'
export PUPPETEER_EXECUTABLE_PATH=$(which chromium)
EOF

(3)查看 Mermaid 图

chromium 1.png
graph
   A-->B