【免费下载链接】mermaid-rs-rendererA fast native Rust Mermaid diagram renderer. No browser required. 500-1000x faster than mermaid-cli.项目地址https://gitcode.com/gh_mirrors/me/mermaid-rs-renderer点击查看免费下载mermaid-rs-renderer命令名mmdr是一款纯 Rust 编写的 Mermaid 图表渲染器无需浏览器即可把.mmd文件直接渲染成 SVG/PNG速度比 mermaid-cli 快 500~1000 倍。本文带你使用它的themeVariables 主题变量定制功能一行命令切换内置主题或写一份配色 JSON让流程图、时序图、饼图完美匹配你文档的品牌色。为什么图表配色很重要默认主题的淡紫色节点放进企业蓝白配色的 Wiki 或幻灯片里会显得格格不入。定制主题变量可以一次性解决品牌统一节点填充、边框、连线、背景全部换成品牌色板深色模式一行命令输出暗色文档专用图表打印友好用灰度主题做黑白打印版全局生效一份配置文件覆盖整个项目的几十张图所有主题的源码实现在 src/theme.rsTheme结构体定义了从字体、主色到饼图 12 色调色板的完整变量集。三步上手安装并渲染第一张图表1. 安装任选其一# 从 crates.io 安装 cargo install mermaid-rs-renderer # 或克隆源码构建 git clone https://gitcode.com/gh_mirrors/me/mermaid-rs-renderer cd mermaid-rs-renderer cargo build --release2. 准备一个.mmd文件例如flowchart LR A[开始] -- B{判断} B --|是| C[处理] B --|否| D[结束]3. 一条命令出图mmdr -i diagram.mmd -o out.svg # 默认主题 mmdr -i diagram.mmd -o out.png -e png # 输出 PNG mmdr -i diagram.mmd -o out.svg -t dark # 直接切换深色主题--theme参数支持 5 个内置预设在 src/cli.rs 中定义主题名风格典型用途defaultMermaid 官方默认淡紫节点通用modern灰白 蓝灰线条Inter 字体技术文档、博客dark深灰背景#333333深色模式网站forest森林绿系环保、自然主题neutral纯灰度黑白打印内置主题的实现见 src/theme.rsmodern与dark预设。定制主题变量三种方式与优先级mmdr 支持三种定制入口按优先级从高到低排列合并逻辑在 src/config.rs 的merge_init_config中%%{init}%% 指令写在 .mmd 里 ← 最高逐图生效 config.json 的 themeVariables ← 其次项目级 --theme 命令行预设 ← 最低作为底也就是说--theme dark提供底色config.json 细化颜色而某张图想单独换个主色就在图里加 init 指令覆盖。方式一config.json 配置文件推荐mmdr -i diagram.mmd -o out.svg -c theme.json配置文件结构与官方 mermaid-cli 的 config 兼容README 中就有完整示例README.md。一份典型的项目级品牌配色{ theme: base, themeVariables: { fontFamily: Inter, Segoe UI, system-ui, sans-serif, fontSize: 13px, primaryColor: #F8FAFF, primaryTextColor: #1C2430, primaryBorderColor: #C7D2E5, lineColor: #7A8AA6, secondaryColor: #EEF2F8, tertiaryColor: #FFFFFF, edgeLabelBackground: #FFFFFF, clusterBkg: #F7FAFF, clusterBorder: #D7E0F0 } }仓库里还有一个可直接抄作业的现成样例docs/diagrams/mermaid-theme.json。方式二%%{init}%%指令单图定制直接写在.mmd文件顶部只影响当前这张图%%{init: {themeVariables: {primaryColor: #FFE5B4, lineColor: #B4690E}}}%% flowchart LR A[开始] -- B[结束]解析器对该指令的兼容处理见 src/parser.rs支持单引号 JSON5 写法。方式三--theme命令行预设mmdr -i diagram.mmd -o out.svg -t modern mmdr -i diagram.mmd -o out.svg -t forest适合快速试色。若预设名写错比如--theme blue会明确报错提示可选值。themeVariables 变量速查表themeVariables支持哪些键完整定义在 src/config.rs 的ThemeVariables结构体中全部字段可选、按需覆盖。最常用的几组通用变量影响所有图表变量控制什么默认值default 主题primaryColor节点/形状填充色#ECECFF淡紫primaryTextColor节点内文字#333333primaryBorderColor节点边框#7B88A8lineColor连线/箭头#2F3B4DsecondaryColor/tertiaryColor次级/三级填充#FFFFDE/ 自动派生edgeLabelBackground连线标签底色半透明白clusterBkg/clusterBordersubgraph 背景/边框#FFFFDE/#AAAA33background画布背景#FFFFFFfontFamily/fontSize字体族 / 字号Trebuchet MS / 16textColor全局文本色#333时序图专用变量变量控制什么actorBkg/actorBorder/actorLine参与者填充、边框、生命线noteBkg/noteBorderColor备注框底色、边框activationBkgColor/activationBorderColor激活条消息处理中的竖条gitGraph 分支配色变量gitGraph图表有 8 条分支各需一种颜色对应git0~git7分支线与gitInv0~gitInv7提交标签背景共 16 个变量另有commitLabelColor、commitLabelBackground、tagLabelColor、tagLabelBackground等。一个有趣的细节只覆盖primaryBorderColor时gitGraph 的标签边框tagLabelBorder会自动跟随保持视觉一致见 src/config.rs。饼图 12 色调色板pie图用pie1~pie12控制 12 个扇区颜色另有pieTitleTextColor、pieSectionTextColor、pieLegendTextColor三段文字色、pieStrokeColor/pieStrokeWidth扇区间描边、pieOpacity不透明度等。不显式指定时调色板按官方 mermaid 的算法从primaryColor等基色自动派生保证相邻扇区颜色不同派生逻辑见 src/theme.rs。{ themeVariables: { pie1: #FFC94D, pie2: #FF8A65, pie3: #7E57C2, pieOpacity: 0.85, pieTitleTextColor: #333333 } }实战把图表融入深色文档假设你的文档是深色底只需一份dark-theme.json{ theme: dark, themeVariables: { background: #1E1E2E, primaryColor: #313244, primaryTextColor: #CDD6F4, lineColor: #89B4FA, clusterBorder: rgba(255, 255, 255, 0.25) } }然后批量渲染整个docs/目录shell 脚本循环即可所有图表的底色、文字、连线自动适配深色背景。五个内置预设的完整色值都能在 src/theme.rs 中直接查到抄出来当起点最快。常见问题 FAQQfontSize可以带单位吗可以。13px或数字13都合法数值类型由NumberOrString兼容处理src/config.rs。Qconfig.json 里写了theme又加了--theme听谁的--theme命令行预设优先于配置文件中的theme名称但两者都被themeVariables逐项覆盖——预设是底变量是面加载顺序见 src/config.rs。Q颜色写错了会怎样解析不校验颜色值会原样写入 SVG渲染出来可能是透明/黑色。建议先用default/modern预设值做基准微调。QclassDef/style和 themeVariables 什么关系classDef、style、linkStyle是单节点/单连线级别的内联样式优先级更高themeVariables是全局主题级别。两者配合主题定基调内联样式突出重点节点。小结场景推荐做法快速切换风格mmdr -i a.mmd -o a.svg -t dark项目级品牌配色-c theme.jsonthemeVariables单图特殊配色.mmd顶部%%{init}%%指令只改一处颜色优先改primaryColor让派生色自动跟随核心就三句话预设打底、变量精调、init 指令单图覆盖。掌握这三个层次你的每一张 Mermaid 图表都能和文档浑然一体。更多图表类型class、sequence、state、ER 等 20 余种与配置项的完整说明可参考 README.md 的 Configuration 章节项目布局与渲染的架构文档在 docs/architecture.md。赞分享【免费下载链接】mermaid-rs-rendererA fast native Rust Mermaid diagram renderer. No browser required. 500-1000x faster than mermaid-cli.项目地址https://gitcode.com/gh_mirrors/me/mermaid-rs-renderer点击查看免费下载相关推荐Slidev Mermaid 图配置指南从 setup/mermaid.ts 主题定制到 themeVariables 实战Slidev Mermaid 图配置指南从 setup/mermaid.ts 主题定制到 themeVariables 实战 本篇指南围绕 Slidev 的前端开发工具如何用 mermaid-rs-renderer 批量渲染 Markdown 中的 Mermaid 图表CLI 实战指南如何用 mermaid rs renderer 批量渲染 Markdown 中的 Mermaid 图表CLI 实战指南 mermaid rs rendererMermaid 主题配置完全指南用 themeVariables 打造全局与单图自定义主题Mermaid 主题配置完全指南用 themeVariables 打造全局与单图自定义主题 主题配置决定了 Mermaid 图表整体配色、字体与可读性。自 8图表库前端数据可视化创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考