Mermaid CLI 教程
1. 项目介绍
Mermaid CLI 是一个命令行工具,它基于 Mermaid 库,用于将 Mermaid 语法定义的图表文件转换成静态图像(如 SVG, PNG 或 PDF)。这使得开发者能够在 Markdown 文件或任何支持纯文本的地方创建流程图、序列图等可视化元素,然后通过 Mermaid CLI 将它们编译成图形。
2. 项目快速启动
安装
全局安装
虽然不推荐全局安装,但如果你选择这样做:
npm install -g @mermaid-js/mermaid-cli
# 或者
yarn global add @mermaid-js/mermaid-cli
局部安装
建议使用局部安装来避免权限问题:
npm install --save-dev @mermaid-js/mermaid-cli
# 或者
yarn add --dev @mermaid-js/mermaid-cli
在局部安装后,你可以通过路径来运行 mmdc
命令:
./node_modules/.bin/mmdc -h
使用
创建一个名为 input.mmd
的 Mermaid 图表文件,然后将其转换为 SVG 图像:
mmdc -i input.mmd -o output.svg
你还可以选择其他输出格式,例如 PNG 和 PDF:
mmdc -i input.mmd -o output.png # 输出为 PNG
mmdc -i input.mmd -o output.pdf # 输出为 PDF
自定义配置
你可以使用 -t
参数指定主题,比如 dark
,并使用 -b
参数设置背景透明,如下所示:
mmdc -i input.mmd -o output.png -t dark -b transparent
3. 应用案例和最佳实践
- 在 Markdown 文档中插入动态生成的图表,使文档更新时图表也自动更新。
- 制作可自动生成的流程图和状态机表示软件设计。
- 创建带有自定义CSS的动画SVG,使用
--cssFile
指定CSS文件。
4. 典型生态项目
Mermaid 与其他工具结合广泛使用,包括但不限于:
- Jupyter Notebook - 通过扩展在 Jupyter 中直接渲染 Mermaid 语法。
- GitLab - 支持 Mermaid 语法的嵌入,在 MR 和 Wiki 页面上呈现图表。
- GatsbyJS - 作为静态站点构建器,可以集成 Mermaid 插件在博客或文档站点中展示图表。
了解更多关于 Mermaid CLI 的信息,访问其官方仓库:https://github.com/mermaid-js/mermaid-cli