Mermaid CLI 教程

Mermaid CLI 教程

mermaid.cliDevelopment has been moved to https://github.com/mermaid-js/mermaid-cli项目地址:https://gitcode.com/gh_mirrors/me/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

mermaid.cliDevelopment has been moved to https://github.com/mermaid-js/mermaid-cli项目地址:https://gitcode.com/gh_mirrors/me/mermaid.cli