mermaid.cli是什么Mermaid命令行图表渲染工具完全指南从认识工具到画出第一张SVG【免费下载链接】mermaid.cliDevelopment has been moved to https://github.com/mermaid-js/mermaid-cli项目地址: https://gitcode.com/gh_mirrors/me/mermaid.climermaid.cli是一款开源的Mermaid 命令行图表渲染工具CLI 工具只需一个.mmd文本文件作为输入就能一键生成SVG、PNG、PDF三种格式的图表文件。它把 Mermaid 的文字画图能力从浏览器搬到了终端非常适合新手快速上手也适合自动化文档生产。一、mermaid.cli 能做什么Mermaid 是一种用纯文本描述图表的开源工具流程图、时序图、甘特图等都可以用几行文字写出来无需手动拖拽节点。而 mermaid.cli 的核心使命只有一个输入一个 Mermaid 定义文件 → 输出一张可使用的图片文件它的命令行入口叫mmdc最基础的用法就是mmdc -i input.mmd -o output.svg三个输出格式全覆盖各有所长格式命令示例适用场景️ SVGmmdc -i input.mmd -o out.svg网页嵌入、无限放大不失真 PNGmmdc -i input.mmd -o out.png邮件、PPT、社交平台 PDFmmdc -i input.mmd -o out.pdf打印、正式文档归档工具本体由三个核心文件构成index.js—— 命令行参数解析与渲染主流程入口脚本index.html—— 内置的渲染页面供无头浏览器加载package.json—— 依赖声明核心依赖为puppeteer无头 Chrome二、如何安装 mermaid.cli1. 本地安装官方推荐 ✅全局安装可能因权限问题失败官方在 README 中明确建议优先本地安装yarn add mermaid.cli ./node_modules/.bin/mmdc -h或使用 npmnpm install mermaid.cli ./node_modules/.bin/mmdc -h2. 全局安装❗️官方不推荐npm install -g mermaid.cli 安装完成后运行mmdc -h即可查看全部可用参数。三、画出第一张 SVG完整实战步骤项目自带了现成的示例文件跟着做 3 步即可。第 1 步准备输入文件打开仓库中的 test/flowchart.mmd内容是一段简洁的流程图定义圣诞节购物流程graph TD A[Christmas] --|Get money| B(Go shopping) B -- C{Let me think} C --|One| D[Laptop] C --|Two| E[iPhone] C --|Three| F[Car]第 2 步执行渲染命令mmdc -i test/flowchart.mmd -o output.svg第 3 步打开output.svg—— 恭喜你的第一张 Mermaid 流程图已经画好了小技巧-o参数可省略默认会在输入文件名后追加.svg后缀见 index.js 中的默认值逻辑。时序图同理仓库里的test/sequence.mmd就是一个完整的业务时序示例同样一条命令即可渲染。四、mermaid.cli 常用参数速查表这些参数在 index.js 中通过commander库注册是日常使用频率最高的长尾工具参数说明默认值-i, --input输入文件必填—-o, --output输出文件须为 svg/png/pdf输入文件名 .svg-t, --theme主题default / forest / dark / neutraldefault-w, --width页面宽度800-H, --height页面高度600-b, --backgroundColor背景色支持transparent、颜色名或色值white-c, --configFileMermaid 的 JSON 配置文件—-C, --cssFile自定义 CSS 文件—-p, --puppeteerConfigFilePuppeteer 的 JSON 配置文件—高频命令示例# 指定尺寸 森林主题 mmdc -i input.mmd -o output.svg -w 1024 -H 768 -t forest # 透明背景 PNG适合叠在其他设计稿上 mmdc -i input.mmd -o output.png -b transparent五、进阶技巧配置文件与样式定制1. 用 JSON 配置文件统一控制图表风格仓库中附带了一份现成的配置样例test/config.json包含主题、流程图宽宽策略、自定义 CSS 等{ startOnLoad: true, flowchart: { useMaxWidth: false, htmlLabels: true }, sequence: { height: 40, actorMargin: 80 }, theme: forest, themeCSS: .node rect { fill: red; } }配合-c参数即可整体换肤不必每次手写参数。2. 用 CSS 文件深度定制外观test/index.css是项目内置的样式文件示例通过-C test/index.css传入后会在渲染时动态注入页面index.js 中的myCSS逻辑让你像写网页一样精修图表样式。六、Linux 下常见问题Chrome 沙箱报错怎么办这是新手最常踩的坑。当看到Failed to launch chrome!或No usable sandbox!报错时官方给出的标准解法创建puppeteer-config.json{ args: [--no-sandbox] }渲染时加上-p参数引用它mmdc -p puppeteer-config.json -i input.mmd -o out.svg⚠️ 官方更建议升级 Linux 内核、避免以 root 身份运行。--no-sandbox属于临时应急方案。七、项目结构与工作原理一图看懂mermaid.cli/ ├── index.js # 主程序解析参数 → 启动无头浏览器 → 截图/导出 ├── index.html # 渲染页面加载 mermaid.min.js 与字体图标 ├── copy_modules.sh # 构建脚本复制 mermaid 与 FontAwesome 资源 ├── test/ # 示例与手工测试素材 │ ├── flowchart.mmd # 流程图示例4 个版本 │ ├── sequence.mmd # 时序图示例 │ ├── config.json # Mermaid 配置示例 │ └── index.css # 自定义样式示例 └── package.json # 依赖commander / chalk / puppeteer工作原理通俗版mmdc启动一个无头 Chrome 浏览器 → 打开内置的index.html页面 → 把.mmd文本注入页面交给 Mermaid 渲染成 SVG → 根据输出格式收割结果SVG 直接抓取标签、PNG 截图裁剪、PDF 走打印管线最后关闭浏览器。整个过程无需手动打开任何网页全自动完成。八、重要提醒项目迁移说明 请注意本仓库已停止活跃开发README.md 顶部明确标注了迁移公告——官方开发已转移到 mermaid-js 组织下的新仓库。对应的 npm 包mermaid.cli不再更新且版本较旧新项目建议直接使用mermaid-js/mermaid-cli包。理解本文的工具原理后迁移到新包几乎零成本命令名、参数、用法一脉相承你只需把包名替换即可。总结3 步上手 mermaid.cli步骤动作一句话①安装npm install mermaid.cli②写图用文字描述图表保存为.mmd文件③渲染mmdc -i 输入.mmd -o 输出.svg掌握这 3 步你就能在终端里快速生成流程图、时序图等各类图表把文字变成图让文档从此自带图解 【免费下载链接】mermaid.cliDevelopment has been moved to https://github.com/mermaid-js/mermaid-cli项目地址: https://gitcode.com/gh_mirrors/me/mermaid.cli创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 mermaid.cli是什么：Mermaid命令行图表渲染工具完全指南（从认识工具到画出第一张SVG）
mermaid.cli是什么Mermaid命令行图表渲染工具完全指南从认识工具到画出第一张SVG【免费下载链接】mermaid.cliDevelopment has been moved to https://github.com/mermaid-js/mermaid-cli项目地址: https://gitcode.com/gh_mirrors/me/mermaid.climermaid.cli是一款开源的Mermaid 命令行图表渲染工具CLI 工具只需一个.mmd文本文件作为输入就能一键生成SVG、PNG、PDF三种格式的图表文件。它把 Mermaid 的文字画图能力从浏览器搬到了终端非常适合新手快速上手也适合自动化文档生产。一、mermaid.cli 能做什么Mermaid 是一种用纯文本描述图表的开源工具流程图、时序图、甘特图等都可以用几行文字写出来无需手动拖拽节点。而 mermaid.cli 的核心使命只有一个输入一个 Mermaid 定义文件 → 输出一张可使用的图片文件它的命令行入口叫mmdc最基础的用法就是mmdc -i input.mmd -o output.svg三个输出格式全覆盖各有所长格式命令示例适用场景️ SVGmmdc -i input.mmd -o out.svg网页嵌入、无限放大不失真 PNGmmdc -i input.mmd -o out.png邮件、PPT、社交平台 PDFmmdc -i input.mmd -o out.pdf打印、正式文档归档工具本体由三个核心文件构成index.js—— 命令行参数解析与渲染主流程入口脚本index.html—— 内置的渲染页面供无头浏览器加载package.json—— 依赖声明核心依赖为puppeteer无头 Chrome二、如何安装 mermaid.cli1. 本地安装官方推荐 ✅全局安装可能因权限问题失败官方在 README 中明确建议优先本地安装yarn add mermaid.cli ./node_modules/.bin/mmdc -h或使用 npmnpm install mermaid.cli ./node_modules/.bin/mmdc -h2. 全局安装❗️官方不推荐npm install -g mermaid.cli 安装完成后运行mmdc -h即可查看全部可用参数。三、画出第一张 SVG完整实战步骤项目自带了现成的示例文件跟着做 3 步即可。第 1 步准备输入文件打开仓库中的 test/flowchart.mmd内容是一段简洁的流程图定义圣诞节购物流程graph TD A[Christmas] --|Get money| B(Go shopping) B -- C{Let me think} C --|One| D[Laptop] C --|Two| E[iPhone] C --|Three| F[Car]第 2 步执行渲染命令mmdc -i test/flowchart.mmd -o output.svg第 3 步打开output.svg—— 恭喜你的第一张 Mermaid 流程图已经画好了小技巧-o参数可省略默认会在输入文件名后追加.svg后缀见 index.js 中的默认值逻辑。时序图同理仓库里的test/sequence.mmd就是一个完整的业务时序示例同样一条命令即可渲染。四、mermaid.cli 常用参数速查表这些参数在 index.js 中通过commander库注册是日常使用频率最高的长尾工具参数说明默认值-i, --input输入文件必填—-o, --output输出文件须为 svg/png/pdf输入文件名 .svg-t, --theme主题default / forest / dark / neutraldefault-w, --width页面宽度800-H, --height页面高度600-b, --backgroundColor背景色支持transparent、颜色名或色值white-c, --configFileMermaid 的 JSON 配置文件—-C, --cssFile自定义 CSS 文件—-p, --puppeteerConfigFilePuppeteer 的 JSON 配置文件—高频命令示例# 指定尺寸 森林主题 mmdc -i input.mmd -o output.svg -w 1024 -H 768 -t forest # 透明背景 PNG适合叠在其他设计稿上 mmdc -i input.mmd -o output.png -b transparent五、进阶技巧配置文件与样式定制1. 用 JSON 配置文件统一控制图表风格仓库中附带了一份现成的配置样例test/config.json包含主题、流程图宽宽策略、自定义 CSS 等{ startOnLoad: true, flowchart: { useMaxWidth: false, htmlLabels: true }, sequence: { height: 40, actorMargin: 80 }, theme: forest, themeCSS: .node rect { fill: red; } }配合-c参数即可整体换肤不必每次手写参数。2. 用 CSS 文件深度定制外观test/index.css是项目内置的样式文件示例通过-C test/index.css传入后会在渲染时动态注入页面index.js 中的myCSS逻辑让你像写网页一样精修图表样式。六、Linux 下常见问题Chrome 沙箱报错怎么办这是新手最常踩的坑。当看到Failed to launch chrome!或No usable sandbox!报错时官方给出的标准解法创建puppeteer-config.json{ args: [--no-sandbox] }渲染时加上-p参数引用它mmdc -p puppeteer-config.json -i input.mmd -o out.svg⚠️ 官方更建议升级 Linux 内核、避免以 root 身份运行。--no-sandbox属于临时应急方案。七、项目结构与工作原理一图看懂mermaid.cli/ ├── index.js # 主程序解析参数 → 启动无头浏览器 → 截图/导出 ├── index.html # 渲染页面加载 mermaid.min.js 与字体图标 ├── copy_modules.sh # 构建脚本复制 mermaid 与 FontAwesome 资源 ├── test/ # 示例与手工测试素材 │ ├── flowchart.mmd # 流程图示例4 个版本 │ ├── sequence.mmd # 时序图示例 │ ├── config.json # Mermaid 配置示例 │ └── index.css # 自定义样式示例 └── package.json # 依赖commander / chalk / puppeteer工作原理通俗版mmdc启动一个无头 Chrome 浏览器 → 打开内置的index.html页面 → 把.mmd文本注入页面交给 Mermaid 渲染成 SVG → 根据输出格式收割结果SVG 直接抓取标签、PNG 截图裁剪、PDF 走打印管线最后关闭浏览器。整个过程无需手动打开任何网页全自动完成。八、重要提醒项目迁移说明 请注意本仓库已停止活跃开发README.md 顶部明确标注了迁移公告——官方开发已转移到 mermaid-js 组织下的新仓库。对应的 npm 包mermaid.cli不再更新且版本较旧新项目建议直接使用mermaid-js/mermaid-cli包。理解本文的工具原理后迁移到新包几乎零成本命令名、参数、用法一脉相承你只需把包名替换即可。总结3 步上手 mermaid.cli步骤动作一句话①安装npm install mermaid.cli②写图用文字描述图表保存为.mmd文件③渲染mmdc -i 输入.mmd -o 输出.svg掌握这 3 步你就能在终端里快速生成流程图、时序图等各类图表把文字变成图让文档从此自带图解 【免费下载链接】mermaid.cliDevelopment has been moved to https://github.com/mermaid-js/mermaid-cli项目地址: https://gitcode.com/gh_mirrors/me/mermaid.cli创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考