如何为Mermaid节点中部分文本单独设置背景色

直接在Mermaid流程图节点文本中嵌入HTML <span> 加样式的方法不可行——Mermaid的流程图语法不支持在节点文本中解析带样式的HTML标签，这类标签会被当作普通文本输出。

以下是几种可行的替代方案：

方案1：子图拼接无框节点（你提到的临时方案） #

通过创建空标题的子图，将需要不同样式的文本拆分为多个无边框节点，模拟同一行的视觉效果：

graph TB
    subgraph block[" "]
        C[text1]
        D[text2]
        style C fill:blue,stroke-width:0px
        style D fill:yellow,stroke-width:0px
    end

• 子图设置空标题避免额外干扰
• 给每个子节点设置stroke-width:0px移除边框，再自定义填充色实现不同背景
• 若需要横向排列，可调整子图内的节点布局逻辑

方案2：classDef+多节点串联 #

用classDef定义统一样式类，将不同样式的文本拆分为独立节点，用无箭头连线拼接：

graph TD
    class blueFill fill:blue,stroke-width:0px
    class yellowFill fill:yellow,stroke-width:0px
    A[Let]:::blueFill --- B[me]:::yellowFill --- C[think]:::blueFill

• classDef可以复用样式，适合多个节点需要相同样式的场景
• ---无箭头连线可以让节点紧密排列，模拟连续文本的效果

方案3：有限富文本支持（仅文字格式） #

如果仅需要文字格式（如粗体、斜体）而非背景色，Mermaid v10+的部分支持环境支持基础富文本：

graph TD
    B --> C{Let **me** think}

但这类方式无法实现背景色自定义，背景样式仍需依赖前两种拼接方案。

内容的提问来源于stack exchange，提问作者kirill_igum