给 Mermaid 图表做 Light / Dark 双主题

基于主题变量的 Mermaid 渲染方案，让架构图在夜间模式下不发亮。

DigitalScope2026-08-28 发布1 min

mermaid css

☰ 本文目录（3 节）

技术文章离不开架构图。Mermaid 用代码画图很爽，但默认主题在暗色页面上就是一场灾难——白底图块亮得刺眼。这篇记录本博客的双主题方案。

问题#

Mermaid 默认输出按浅色主题渲染的 SVG：节点填充白色、线条深灰。放到暗色背景上，对比生硬且风格断裂。

方案：跟随主题重新渲染#

渲染时机交给客户端——页面挂载后按当前主题调用 mermaid.initialize，主题切换时对每个容器重新 render：

ts · mermaid-theme.ts

const THEMES = {  light: { theme: "default", themeVariables: { primaryColor: "#f2f2ef" } },  dark: { theme: "dark", themeVariables: { primaryColor: "#23252b" } },}async function renderAll(theme: "light" | "dark") {  mermaid.initialize({ startOnLoad: false, ...THEMES[theme] })  await Promise.all(    blocks.map(async (el) => {      const { svg } = await mermaid.render(`m-${id(el)}`, source(el))      el.innerHTML = svg    })  )}

效果#

流程图、时序图与 ER 图都以同一套变量驱动：

graph TD
    A[Markdown 源文] --> B{含 mermaid 围栏?}
    B -->|是| C[按主题渲染 SVG]
    B -->|否| D[Shiki 代码高亮]
    C --> E[暗色: theme=dark]
    C --> F[亮色: theme=default]

erDiagram
    POST ||--o{ SERIES_ITEM : "belongs to"
    POST }o--o{ TAG : "tagged"
    POST ||--|| CATEGORY : "classified"