如何为Mermaid ER图的单个框设置自定义颜色？

Mermaid的ER图可以通过style指令单独为每个实体框配置自定义样式（包括背景色、边框色等），无需修改全局主题。以下是具体实现方法：

核心语法 #

使用style 实体名称 fill:#颜色值, stroke:#边框颜色, stroke-width:边框粗细指令，紧跟在实体定义之后，即可单独设置该实体的样式。

示例代码（匹配你想要的多色实体效果） #

erDiagram
    -- 定义实体
    USER {
        int user_id PK
        string username
        string email
    }
    ORDER {
        int order_id PK
        datetime create_time
        float total_amount
    }
    PRODUCT {
        int product_id PK
        string product_name
        float price
    }

    -- 单独设置每个实体的颜色样式
    style USER fill:#f8bbd0, stroke:#c2185b, stroke-width:2px
    style ORDER fill:#c8e6c9, stroke:#388e3c, stroke-width:2px
    style PRODUCT fill:#bbdefb, stroke:#1976d2, stroke-width:2px

    -- 定义实体关系
    USER ||--o{ ORDER : "下单"
    PRODUCT ||--o{ ORDER : "包含"

关键说明 #

• 实体名称必须与style指令中的名称完全一致（部分渲染环境区分大小写）
• 颜色支持十六进制色值（如#ffcccc）、RGB值（如rgb(255,204,204)）或预定义颜色名（如lightblue）
• 除了fill和stroke，还可以添加stroke-dasharray（虚线边框）等其他CSS样式属性

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