Mermaid-cli使用安装及命令

---

前言

Mermaid 是一种使用文本生成流程图、饼状图、甘特图等图表的描述语言，它可以帮助用户以简单、直观的方式创建各种类型的图表，包括流程图、时序图、甘特图等。

Mermaid-cli是一个命令行工具，它基于 Mermaid 库，用于将 Mermaid 语法定义的图表文件转换成静态图像（如 SVG, PNG 或 PDF）。这使得开发者能够在 Markdown 文件或任何支持纯文本的地方创建流程图、序列图等可视化元素，然后通过 Mermaid CLI 将它们编译成图形。

项目地址：https://github.com/mermaid-js/mermaid-cli
官网地址：http://mermaid.js.org/

一、mermaid-cli安装

安装之前请先去项目地址查看node要求的版本

1.全局安装

npm install -g @mermaid-js/mermaid-cli
# 或者
yarn global add @mermaid-js/mermaid-cli

安装后输入mmdc -V查看版本校验是否安装成功

mmdc -V
11.2.1

2.局部安装

npm install --save-dev @mermaid-js/mermaid-cli
# 或者
yarn add --dev @mermaid-js/mermaid-cli

在局部安装后，你可以通过路径来运行 mmdc 命令：

./node_modules/.bin/mmdc -h

3.使用docker安装

docker pull minlag/mermaid-cli

容器在/data中查找输入文件。因此，例如，如果您在系统中定义了图表/path/to/diagrams/diagram.mmd，您可以使用容器生成如下SVG文件：

docker run --rm -u `id -u`:`id -g` -v /path/to/diagrams:/data minlag/mermaid-cli -i diagram.mmd

二、mermaid-cli命令及使用

1.命令

• -V，–version（版本）：输出版本号。
• -t，–theme [主题]：图表的主题（可选值：“default”（默认）、“forest”（森林）、“dark”（黑暗）、“neutral”（中性），默认值为 “default”）。
• -w，–width [宽度]：页面的宽度（默认值：800）。
• -H，–height [高度]：页面的高度（默认值：600）。
• -i，–input <输入文件>：输入的Mermaid文件。以.md 结尾的文件将被视作 Markdown 文件，其中所有图表（例如mermaid (…)或:::mermaid (…)::: 形式的）都将被提取并生成。使用 “-” 可从标准输入读取。
  -o，–output [输出文件]：输出文件。其格式应为 md、svg、png、pdf，或者使用 “-” 输出到标准输出。可选参数，默认值为输入文件名加上 “.svg”。
• -e，–outputFormat [格式]：生成图像的输出格式。（可选值：“svg”、“png”、“pdf”，默认值：根据输出文件扩展名加载）。
• -b，–backgroundColor [背景颜色]：png 或 svg（非 pdf）的背景颜色。例如：透明、红色、“#F0F0F0”。（默认值：“white”（白色））。
• -c，–configFile [配置文件]：用于Mermaid的 JSON 配置文件。
• -C，–cssFile [CSS 文件]：页面的 CSS 文件。
• -I，–svgId [SVG 元素的 ID]：要渲染的 SVG 元素的 id 属性。
• -s，–scale [缩放比例]：Puppeteer 缩放因子（默认值：1）。
• -f，–pdfFit：缩放 PDF 以适配图表。
• -q，–quiet：禁止日志输出。
• -p --puppeteerConfigFile [Puppeteer 配置文件]：用于 Puppeteer 的 JSON 配置文件。
• -h，–help：显示命令的帮助信息。

2.使用

将一个名为 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

三、mermaid语法

这里只展示一部分，更多语法查看官方文档：http://mermaid.js.org/intro/

1.流程图（Flowchart）

要创建一个简单的流程图，可以使用以下语法：

flowchart LR
    Start --> Stop

2.序列图（Sequence Diagram）

要创建一个简单的序列图，可以使用以下语法：

sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
    Alice-)John: See you later!

在上面的示例中，sequenceDiagram 关键字用于定义一个序列图。然后，我们定义了两个对象 A 和 B，并使用 ->> 和 -->> 符号连接它们，表示对象之间的消息传递顺序。消息文本可以放在冒号后面。

3.甘特图（Gantt Chart）

要创建一个简单的甘特图，可以使用以下语法：

gantt
    title A Gantt Diagram
    dateFormat YYYY-MM-DD
    section Section
        A task          :a1, 2014-01-01, 30d
        Another task    :after a1, 20d
    section Another
        Task in Another :2014-01-12, 12d
        another task    :24d

4.饼状图（Pie Chart）

要创建一个简单的饼状图，可以使用以下语法：

pie title Pets adopted by volunteers
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 15

XY 图表（XY Chart）

xychart-beta
    title "Sales Revenue"
    x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
    y-axis "Revenue (in $)" 4000 --> 11000
    bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
    line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]