Mermaid流程图节点样式如何自定义？

Question

**如何在Mermaid中自定义流程图节点的样式（如颜色、形状、边框）？** Mermaid默认提供的节点样式较为简单，但在实际使用中，我们常常需要根据项目风格或可视化需求来自定义节点的外观，比如修改背景颜色、边框颜色、形状、字体样式等。那么，在Mermaid中如何通过配置项或内联样式来自定义流程图节点的样式？是否支持CSS类定义？如何在不同类型的节点（如默认节点、开始/结束节点、子流程节点等）上应用不同的样式？是否存在兼容性或版本限制？掌握这些方法可以帮助开发者更灵活地控制流程图的视觉呈现。

Answer 1

一、Mermaid流程图样式自定义概述

Mermaid 是一个基于文本的图表生成工具，广泛应用于文档、Wiki、Markdown 和网页中。虽然它默认提供了一些基础的流程图节点样式，但在实际项目中，往往需要更丰富的视觉表现。Mermaid 支持通过内联样式、CSS 类定义以及全局配置来实现节点样式的自定义。

1.1 基本节点样式设置

Mermaid 的流程图节点可以通过内联样式进行简单定制，语法如下：

graph TD
    A[Default Node] --> B((Round Node))
    style A fill:#f00,stroke:#000,stroke-width:2px,color:#fff
    style B fill:#0f0,stroke:#000,stroke-width:2px

其中：

• fill: 设置背景颜色
• stroke: 设置边框颜色
• stroke-width: 设置边框宽度
• color: 设置字体颜色

1.2 使用CSS类定义样式

Mermaid 从版本 8.10 开始支持通过 CSS 类定义节点样式，适用于需要统一管理多个节点风格的场景。

classDef default fill:#f9f9f9,stroke:#333;
    classDef start fill:#0f0,stroke:#000;
    classDef end fill:#f00,stroke:#000;

    graph TD
    A[Start] --> B[Process] --> C[End]
    class A start
    class C end

通过 classDef 定义类样式，再通过 class 应用到指定节点上。这种方式更易于维护和复用。

二、不同节点类型的样式应用

Mermaid 支持多种节点类型，如默认节点、开始/结束节点、子流程节点等。我们可以为不同类型定义不同的样式。

2.1 默认节点

使用 style 或 class 指定默认节点样式。

2.2 开始/结束节点

开始/结束节点通常使用圆角矩形或双圆边框，例如：

graph TD
    A([Start]) --> B{Decision}
    B -->|Yes| C((End))
    style A fill:#0f0,stroke:#000
    style C fill:#f00,stroke:#000

2.3 子流程节点

子流程节点通常用双线边框表示：

graph TD
    A{{Sub Process}} --> B[Action]
    style A fill:#00f,stroke:#fff,stroke-width:2px

三、兼容性与版本限制

Mermaid 的样式定制功能在不同版本中支持程度不同：

功能	支持版本	备注
内联样式 style	v0.7.0+	所有版本基本支持
CSS 类定义 classDef	v8.10.0+	需检查文档版本兼容性
子流程节点	v8.0.0+	早期版本可能不支持

建议使用最新版本（如 v10.x 或更高）以获得最佳支持。

四、进阶技巧与最佳实践

为了提升图表的可维护性和可读性，推荐以下做法：

• 统一使用 classDef 定义项目中通用的样式类别
• 为不同业务模块定义不同的颜色主题
• 结合 Markdown 或 HTML 页面时，使用外部 CSS 文件统一管理样式
• 使用 Mermaid Live Editor 进行实时预览和调试

4.1 示例：多类型节点样式综合应用

classDef default fill:#f9f9f9,stroke:#333;
    classDef start fill:#0f0,stroke:#000;
    classDef process fill:#0ff,stroke:#000;
    classDef decision fill:#ff0,stroke:#000;
    classDef end fill:#f00,stroke:#000,color:#fff;

    graph TD
    A([Start]) --> B{Decision}
    B -->|Yes| C[Process]
    B -->|No| D[Abort]
    C --> E((End))
    D --> E

    class A start
    class B decision
    class C,E process
    class D end