企业官网建设流程全解析

mermaid-rs-renderer（mmdr）是一个纯 Rust 编写的 Mermaid 图表渲染器：无需浏览器，即可将 23 种 Mermaid 图表类型直接渲染为 SVG 或 PNG，官方基准显示比 mermaid-cli 快 100–1400 倍。这篇文章给你一份"全类型支持清单 + 真实渲染效果"对照，5 分钟看懂它都能画什么、画得怎么样。

为什么值得换：告别浏览器启动的 2 秒等待 🚀

官方 mermaid-cli 每渲染一张图都要启动一次无头 Chromium 浏览器，固定有 2–3 秒开销。mmdr 则用原生管线直接解析 Mermaid 语法并输出 SVG（可再转 PNG），典型耗时：

更直观的场景对比：CI 流水线一次渲染 50 张图，mermaid-cli 约需 2 分钟，mmdr 不到 1 秒；实时编辑器预览从"不可用的卡顿"变成"即时"。

安装并跑通第一张 Mermaid 图表（3 步）

# 1. 一行安装（另支持 brew / scoop / AUR / nix） cargo install mermaid-rs-renderer # 2. 一条命令渲染 SVG echo 'flowchart LR; A-->B-->C' | mmdr -e svg # 3. 文件到文件，支持 SVG / PNG mmdr -i diagram.mmd -o output.png -e png

还支持-i README.md -o ./diagrams/ -e svg一次性提取并渲染 Markdown 里的全部图表；主题变量、--nodeSpacing、--preferredAspectRatio 16:9等布局参数详见 README.md 的 Configuration 一节。

23 种 Mermaid 图表类型支持清单

mmdr 完整覆盖 5 大类共 23 种图表类型，按用途速查如下：

每种类型的布局都有独立实现，例如 src/layout/ 下的 src/layout/flowchart/、src/layout/c4.rs、src/layout/sankey.rs，便于按类型定位与调优。

看真实渲染效果：五大类逐一打样 🎨

以下示例图均来自仓库内置的对比报告，左侧为 mermaid-cli 输出，右侧为 mermaid-rs-renderer 输出。

核心：流程图与序列图

流程图支持实线、虚线、粗线、双向箭头、无方向连线等 8 种边样式，以及 13 种节点形状：

序列图支持alt分支框、多泳道调用与虚线返回消息：

数据类：饼图、象限图与桑基图

饼图按百分比自动着色并附图例：

象限图适合做"高触达 / 高互动"式策略定位，四个象限独立标注：

桑基图用渐变带表达流量分配，适合能源、资金流向场景：

规划类：用户旅程图

旅程图按阶段打分，多参与者（Alice / Bob）评分一目了然，适合写体验复盘：

架构类：C4 上下文图

C4 图自动绘制人物图标、系统矩形与数据库圆柱，虚线 Boundary 划分系统边界：

其他：思维导图与雷达图

思维导图从根节点向多方向展开分支，分支颜色自动区分：

雷达图适合技术选型、能力评估等多维打分：

示例与对比数据都放在哪 📁

想动手验证或扩展示例，仓库里都有现成资料：

• 99 个官方 Mermaid 图表源文件（覆盖全部类型与变体）：docs/comparison_sources/
• 渲染结果 SVG 对照（mmdr vs mermaid-cli）：docs/comparisons/
• 逐类型 PNG 渲染对比报告（mmdc / rust / side / diff 四视图）：docs/conformance-report/
• 性能基准夹具，含 24 个扩展压测用例：benches/fixtures/、benches/fixtures/expanded/
• 布局代码（每种图表类型一个模块）：src/layout/
• 端到端对比脚本与视觉基准矩阵说明：scripts/bench_compare.py、docs/visual-benchmark-matrix.md
• 项目主文档：README.md

一句话总结

如果你受够了"画一张 Mermaid 图要等 2 秒"，cargo install mermaid-rs-renderer装上 mmdr，就能用同一种语法一次画满 23 种图表类型，秒级产出干净的 SVG/PNG——从流程图、序列图到甘特图、C4 架构图，全在一个命令行里。✅