mermaid: erDiagram styling does not seem to work

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"

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

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;}"
    ]
}

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

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

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.

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).

@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"

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?