我用 Mermaid 挺多：设计文档里画流程图，README 里画时序图，偶尔来张 ER 图。图表即代码确实香：能进 Git、能 diff、不用拿鼠标拖框线。唯一不行的，是图渲染出来的样子。
内置主题不是不能用，但配色总透着股过时感。Mermaid 其实有完整的主题系统——theme 设成 'base'，再用 themeVariables 逐项覆盖——难的是过程：改 frontmatter，重新渲染，盯着图琢磨，在 70 多个变量里猜哪个管你想改的那块，不对就再来。
压垮我的那张图是个时序图。我改了 primaryColor，结果 actor 框的颜色跟着变了——查了才知道那归 actorBkg 管。一个颜色折腾十分钟，大半时间在猜，因为变量名几乎不告诉你它到底刷的是哪块。
我想要的很简单：改一个变量，马上看到效果。
于是有了 mermaid.design：左边写 Mermaid 代码，中间实时出图，右边调主题。每改一处，图表立刻原地重渲染，调一次的时间从几分钟变成几秒钟。
这是表面。真正省时间的是下面这些模块。
模板画廊：一次看遍所有图型
调主题最麻烦的一点是：同一个变量，在不同类型图表里的表现并不一样。画廊页（/templates）把 84 个模板——流程图、时序图、类图、状态图、ER 图等等——全部用你当前的主题实时渲染。改一个变量，滑到画廊页，所有图型的效果一览无余，不用自己一个个切图型去试。省的就是这种来回切换的时间。
主题变量：默认值和继承关系都摆在明面上
73 个变量，每个都标出了 base 主题的默认值。没有显式设置的变量会带一个 AUTO 标记，显示 mermaid 实时推导出来的值，以及这个值是从哪来的：
mainBkg跟随primaryColorprimaryBorderColor是由primaryColor计算出的边框色secondaryTextColor是secondaryColor的反色（保证对比度）actorBkg跟随mainBkg——这就解释了前面那个坑：改primaryColor为什么会动到 actor 框，因为存在primaryColor→mainBkg→actorBkg这么一条继承链
看懂了这条链，改颜色就不再是猜谜。
预设：官方的、设计师的，还会有更多
21 套预设，看上哪套点哪套：11 套 Mermaid 官方主题（default、neutral、dark、forest、base，以及 v12 新增的 redux、neo 系列），加 10 套我手工调校的设计师预设。每套都带实时小预览，后续还会持续增加。
生成：一个主色，推一整套配色
只定一个 primary 种子色，生成器就围着它的色相在 HSL 空间里拉一条 8 级明度渐变，推导出完整的主题配色，深色模式也一并生成。想让图表贴合品牌色，这是最快的路。
渲染配置：颜色之外还能调这些
颜色只是一半。mermaid 还有 438 个影响渲染的配置项，按图表类型分成 34 组，举几个例子：
- 全局：
fontFamily、fontSize、wrap（文字自动换行）、look（classic 或 handDrawn 手绘风） - 流程图：
flowchart.curve（连线曲线样式）、flowchart.nodeSpacing/flowchart.rankSpacing（节点/层级间距）、flowchart.diagramPadding（图边距） - 时序图：
sequence.actorMargin（参与者间距）、sequence.messageMargin（消息间距）、sequence.showSequenceNumbers（消息序号）、sequence.mirrorActors（底部镜像参与者） - 饼图：
pie.textPosition、pie.donutHole（甜甜圈孔径）、pie.legendPosition（图例位置）
当前图表类型对应的那一组会自动展开，不用自己翻。
ASCII 模式：图也是文本
同一张图可以渲染成 ASCII 字符画，一键复制，贴进代码注释、commit message 或纯文本文档都很合适。目前支持 5 种图型：流程图、时序图、类图、状态图和 ER 图；字符集可以选 Unicode 制表符或纯 ASCII。
总结
做 mermaid.design 的初衷很简单：官方主题配色不好看，手动调 themeVariables 又太花时间，我想要一个改完立刻能看到效果的地方。现在它有了带着默认值和继承关系的实时主题变量、一次看遍所有图型的画廊、官方和设计师预设、一个主色生成整套配色的生成器、438 项渲染配置，还有能把图变成文本的 ASCII 模式。
如果你也经常跟 Mermaid 的主题较劲，来试试。