求助：如何为Mermaid实体关系图（ER图）应用样式？

实体样式自定义 #

直接在实体定义后使用style指令，可单独设置背景色、边框样式、文字颜色等属性：

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER {
      string name
      string custNumber
      string sector
    }
    style CUSTOMER fill:#f9f,stroke:#333,stroke-width:2px,color:#000
    style ORDER fill:#bbf,stroke:#f66,stroke-width:2px

常用属性说明：

• fill：实体背景色
• stroke：实体边框颜色
• stroke-width：边框宽度
• color：实体文字颜色

关系线样式调整 #

使用linkStyle指令，按关系定义的顺序（索引从0开始）为关系线设置样式：

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    linkStyle 0 stroke:#ff33cc,stroke-width:3px
    linkStyle 1 stroke:#33ccff,stroke-width:2px

如果需要给所有关系线设置统一样式，可使用linkStyle *：

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    linkStyle * stroke:#666,stroke-width:2px

全局样式复用 #

通过classDef定义样式类，再用class指令批量应用到多个实体，减少重复代码：

erDiagram
    classDef baseEntity fill:#f0f8ff,stroke:#2f4f4f,stroke-width:2px
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER {
      string name
      string custNumber
      string sector
    }
    ORDER {
      int orderNumber
      string deliveryAddress
    }
    class CUSTOMER, ORDER baseEntity

常见问题排查 #

• 样式不生效：确认style/linkStyle指令放在对应实体/关系定义之后，拼写无错误
• 颜色异常：支持十六进制、RGB、颜色名称三种格式，注意RGB格式需严格遵循rgb(数值,数值,数值)写法

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