美人鱼ER图造型

Question

我想和美人鱼一起画ER图。但我不知道如何设计盒子的样式以使其具有不同的颜色。

我知道可以设置主题颜色，但我不能对每个框都这样做。我尝试了不同的语法，并在官方文档上找到了一些信息，但我不知道如何使用它们。 我想做这样的：

Answer 1

这是一个示例（美人鱼直播链接）

注意，在实时链接中，我将 init 直接放在代码中而不是配置中。这是因为如果我想将其复制到其他地方会更容易。

%%{init: {
  "theme": "default",
  "themeCSS": [
    ".er.relationshipLabel { fill: black; }", 
    ".er.relationshipLabelBox { fill: white; }", 
    ".er.entityBox { fill: lightgray; }",
    "[id^=entity-some] .er.entityBox { fill: lightgreen;} ",
    "[id^=entity-mytable] .er.entityBox { fill: powderblue;} ",
    "[id^=entity-anothertable] .er.entityBox { fill: pink;} "
    ]
}}%%

前三个设置设置默认 css，后三个设置特定于使用模式的表格。

请注意，在 Mermaid Live 和其他一些实现中进行测试时，您需要在表名称/模式前添加

entity-

前缀，但在其他一些实现中（例如 Gitlab），您需要删除该前缀才能使其正常工作.

Answer 2

Mermaid 语法目前不支持没有自定义 CSS 的 ER 图的自定义颜色。

有一个关于此的开放问题，当您可以控制主题的图表源和CSS时，此评论提供了一个解决方案：https://github.com/mermaid-js/mermaid/issues/2673#issuecomment-1522470695

Answer 3

er图 顾客 { id INT PK 电子邮件 VARCHAR 密码 VARCHAR }

BUYER {
    id INT PK
}

BUSINESS_CLIENT {
    id INT PK
}

ADMINISTRATOR {
    id INT PK
}

PRODUCT {
    id INT PK
}

CART {
    id INT PK
    customer_id INT FK
}

ORDER {
    id INT PK
    customer_id INT FK
}

REVIEW {
    id INT PK
    buyer_id INT FK
    product_id INT FK
}

WISHLIST {
    id INT PK
    buyer_id INT FK
    product_id INT FK
}

SUPPORT_TICKET {
    id INT PK
    customer_id INT FK
}

USER_ACCOUNT {
    id INT PK
}

PRODUCT_CATALOG {
    id INT PK
}

PRODUCT_CATEGORY {
    id INT PK
}

SPECIFICATION {
    id INT PK
    product_id INT FK
}

ORDER_SHIPMENT {
    id INT PK
    business_client_id INT FK
}

DELIVERY_ADDRESS {
    id INT PK
    business_client_id INT FK
}

INVOICE {
    id INT PK
    business_client_id INT FK
}

ANALYTICS {
    id INT PK
    business_client_id INT FK
}

WEBSITE_TRAFFIC {
    id INT PK
}

USER_ACTIVITY {
    id INT PK
}

SALES_REPORT {
    id INT PK
}

CUSTOMER ||--|{ BUYER
CUSTOMER ||--|{ BUSINESS_CLIENT
CUSTOMER ||--|{ ADMINISTRATOR
CUSTOMER ||--|| CART
CUSTOMER ||--|| ORDER
CUSTOMER ||--|| SUPPORT_TICKET
CUSTOMER ||--|| USER_ACCOUNT

BUYER }|--|{ REVIEW
BUYER }|--|{ WISHLIST

BUSINESS_CLIENT ||--|| ORDER_SHIPMENT
BUSINESS_CLIENT ||--|| DELIVERY_ADDRESS
BUSINESS_CLIENT ||--|| INVOICE
BUSINESS_CLIENT ||--|| ANALYTICS

PRODUCT_CATALOG ||--|| PRODUCT
PRODUCT_CATEGORY ||--|| PRODUCT
PRODUCT ||--|| SPECIFICATION

ADMINISTRATOR ||--|| PRODUCT_CATALOG
ADMINISTRATOR ||--|| PRODUCT_CATEGORY
ADMINISTRATOR ||--|| SPECIFICATION
ADMINISTRATOR ||--|| ORDER
ADMINISTRATOR ||--|| SUPPORT_TICKET
ADMINISTRATOR ||--|| USER_ACCOUNT
ADMINISTRATOR ||--|| WEBSITE_TRAFFIC
ADMINISTRATOR ||--|| USER_ACTIVITY
ADMINISTRATOR ||--|| SALES_REPORT