erDiagram styling does not seem to work

[jiludvik]

erDiagrams are supposed to supposed two styling elements: color and stroke but documentation does not provide any examples of how to use these. I've tried to use the following ways to apply styling in mermaide.live:

erDiagram
        CUSTOMER }|..|{ DELIVERY-ADDRESS : has
classDef myclass fill:#f9f
class CUSTOMER myclass

erDiagram
        CUSTOMER }|..|{ DELIVERY-ADDRESS : has
style CUSTOMER fill:#f9f

I would expect that application of fill #f9f changes filling of CUSTOMER pink, but in botj cases the selected data entity remains black with blue edges. Use of indentation in the markdown does not seem to have any effect either.

[stefanocrosta]

I have also tried all possible ways and did not manage to style the erDiagram individual entities...

[tim-oritain]

Is it even possible to style erDiagrams? I can't figure out how to do it and the documentation is of no help...

[pcampr]

I didn't find any mention of stroke, fill or anything similar in the parser https://github.com/mermaid-js/mermaid/tree/develop/packages/mermaid/src/diagrams/er/parser , so I doubt this is doable now, although the doc clearly says it's possible

[Gregory-Lange]

It is possible to theme them. If you look at the source for the default themes it gives you the ins to do so. for example setting attributeBackgroundColorOdd will set the background color for odd items.

[pcampr]

It is possible to theme them. If you look at the source for the default themes...

Yes, if there is this possibility. If Mermaid is embedded into a product (Notion, GitHub) then there is no such option, we can only edit the source (mermaid markup) of the diagram.

[Gregory-Lange]

Wrong you make an inline custom theme and it will apply. Using the %%{init: {‘theme’:’base’, ‘themeVariables’:{ XXXXX }} }%% unless the live demo app is doing something that the usual is not.

[pcampr]

Wrong you make an inline custom theme and it will apply. Using the %%{init

this thread is about the ability to style each element separately (I guess), so that e.g. CUSTOMER entity can have a different color/fill than DELIVERY-ADDRESS

this init can change only the global style for all entities

[Gordonby]

I really need per entity background fill. The docs telling me it's possible is the ultimate fu. 😄

[FlorianCassayre]

It's extremely surprising to me that this diagram type doesn't support such a basic feature. Watching this issue.

[huynhicode]

Thanks, everyone for your input. The documentation for styling ER Diagrams is a bit confusing and we will work on making it clearer.

The two style attributes: fill and color can be used on the following CSS Class Selectors for ER Diagrams:

• .er.attributeBoxEven
• .er.attributeBoxOdd
• .er.entityBox
• .er.entityLabel
• .er.relationshipLabel
• .er.relationshipLabelBox
• .er.relationshipLine

To apply a fill or stroke to a CSS Class Selector:

.er.entityLabel {
     fill: blue;
}

To apply a fill or stroke to a specific entity:

[id*="entity-CUSTOMER"] .er.entityLabel {
     fill: blue;
}

In the example above, "CUSTOMER" refers to the NAME value of the entity.

Currently, these three CSS Class Selectors require a custom id in your html:

• .er.attributeBoxEven
• .er.attributeBoxOdd
• .er.entityBox

<div id="exampleErDiagram" class="mermaid">
     erDiagram
          ...
</div>

#exampleErDiagram .er.attributeBoxEven {
    fill: forestgreen;
}

(Will look into removing this as a requirement.)

Here is a CodePen example. It's not the prettiest ER Diagram 😅, but hopefully, it gives you a better idea of how to apply styling to ER Diagrams.

ER Diagrams Documentation

Also, a quick reminder to set your theme to base as it is the only modifiable theme (currently).

[pcampr]

Thank you. We use mermaid in Notion, where it supports the syntax, but not custom CSS. So to control color and fill, we'd need a support directly in mermaid markup.

[Hatch-Cody]

For anyone left wondering how to apply styles to individual attributes of the erDiagram on the live editor, here is a simple example.

Code:

erDiagram
  CUSTOMER ||--o{ ORDER : places
  CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
  ORDER ||--|{ LINE-ITEM : contains

Config:

{
  "theme": "dark",
  "themeCSS": [
    ".er.relationshipLabel { fill: red; }", 
    ".er.relationshipLabelBox { fill: purple; }", 
    ".er.entityBox { fill: blue; }",
    "[id*=entity-CUSTOMER] .er.entityBox { fill: orange;}"
    ]
}

[s-gambardella]

Thanks, everyone for your input. The documentation for styling ER Diagrams is a bit confusing and we will work on making it clearer.

The two style attributes: fill and color can be used on the following CSS Class Selectors for ER Diagrams:

• .er.attributeBoxEven
• .er.attributeBoxOdd
• .er.entityBox
• .er.entityLabel
• .er.relationshipLabel
• .er.relationshipLabelBox
• .er.relationshipLine

To apply a fill or stroke to a CSS Class Selector:

.er.entityLabel {
     fill: blue;
}

To apply a fill or stroke to a specific entity:

[id*="entity-CUSTOMER"] .er.entityLabel {
     fill: blue;
}

In the example above, "CUSTOMER" refers to the NAME value of the entity.

Currently, these three CSS Class Selectors require a custom id in your html:

• .er.attributeBoxEven
• .er.attributeBoxOdd
• .er.entityBox

<div id="exampleErDiagram" class="mermaid">
     erDiagram
          ...
</div>

#exampleErDiagram .er.attributeBoxEven {
  fill: forestgreen;
}

(Will look into removing this as a requirement.)

Here is a CodePen example. It's not the prettiest ER Diagram 😅, but hopefully, it gives you a better idea of how to apply styling to ER Diagrams.

ER Diagrams Documentation

Also, a quick reminder to set your theme to base as it is the only modifiable theme (currently).

I use vscode to create my ER diagrams using mermaid. Can you please provide a code example of how to use the css styling rather than in the mermaid live editor?

[AnilRh]

For the Notion users out there here's an example:

%%{init: {"theme": "forest", "themeCSS": ["[id*=entity-SHOES] .er.entityBox { fill: orange;}"]}}%%

erDiagram
  CUSTOMER ||--o{ SHOES : "has many"

[pcampr]

@AnilRh thank you, this works nicely in Notion!

[Yokozuna59]

@AnilRh Thanks for the code, but it's not specific to notion:

%%{init: {"theme": "forest", "themeCSS": ["[id*=entity-SHOES] .er.entityBox { fill: orange;}"]}}%%

erDiagram
  CUSTOMER ||--o{ SHOES : "has many"

[feinmann]

Is it possible to style the background of a specific attribute inside an entity? For example, only coloring the attribute "registrationNumber" inside the entity "CAR" in the following snippet:

erDiagram
    CAR ||--o{ NAMED-DRIVER : allows
    CAR {
        string registrationNumber
        string make
        string model
    }
    PERSON ||--o{ NAMED-DRIVER : is
    PERSON {
        string firstName
        string lastName
        int age
    }

With the method above I only find the possibility to color all even or odd attributes globally. Thanks for giving me a hint on this.

[k-allagbe]

%%{init: {
  "themeCSS": [
    "[id*=entity-Order] .er.entityBox { fill: lightgreen;} "
    ]
}}%%
erDiagram
    User 
    Order
    OrderItem

    User ||--o{ Order : "places"
    Order ||--o{ OrderItem : "contains"

How do I color only Order? Where can I read about the syntax?

%%{init: {
  "themeCSS": [
    "[id*=entity-Order] .er.entityBox { fill: lightgreen;} "
    ]
}}%%
erDiagram
    User 
    Order
    OrderItem

    User ||--o{ Order : "places"
    Order ||--o{ OrderItem : "contains"

[feinmann]

Is it possible to style the background of a specific attribute inside an entity? For example, only coloring the attribute "registrationNumber" inside the entity "CAR" in the following snippet:

erDiagram
    CAR ||--o{ NAMED-DRIVER : allows
    CAR {
        string registrationNumber
        string make
        string model
    }
    PERSON ||--o{ NAMED-DRIVER : is
    PERSON {
        string firstName
        string lastName
        int age
    }

With the method above I only find the possibility to color all even or odd attributes globally. Thanks for giving me a hint on this.

The answer here helped me: https://stackoverflow.com/questions/78870312/mermaid-style-color-fill-stroke-of-an-entity-or-attribute-in-er-diagram

This would bring me to this, to color only Order:

---
config:
  themeCSS: |
    [id|=entity-Order] rect { fill: yellow; }
---
erDiagram
    User 
    Order
    OrderItem

    User ||--o{ Order : "places"
    Order ||--o{ OrderItem : "contains"

Check it out here: https://www.mermaidchart.com/play#pako:eNpVj7EOwiAURX_lhp0fwDjp4uTQOIkDgddKQsFQEtNA_90WFtzuzTvnJi8zHQwxwTjn0uvgRzsJ6YH0ppkuwyBQjgo8rSln8smmld-jofhCJJ2QMVrnBFZyLnxP2KSvWxSvVk1RzU1_LBTRYrW7eEu0Qx1WCuchtyMEJPs4pWmRrJP-oGOhgvsDSVlfUbb9AFgJSE8

[yari-dewalt]

Styling elements as well as classDef and class statements are coming to ER diagrams in #5965. This includes updated documentation to accurately represent what all can be done and will bring it up to par with other diagram styling capabilities. Will keep this open for now as it isn't merged as of yet.