How to apply ERD styles ?

[tomasvanrijsse]

In the docs there is a chapter on the styling of ERDs https://mermaid-js.github.io/mermaid/#/entityRelationshipDiagram?id=styling

There is no example however how to apply these styles and classes. This question on StackOverflow shows exactly what my personal attempts where. https://stackoverflow.com/questions/66299848/is-it-possible-to-style-an-entity-relation-diagram-with-mermaid-js-like-flowchar

I'd love to be able to change the stroke of certain ERD entities.

[tomasvanrijsse]

@72636c perhaps you know how this works, since you added the docs on the styling 😄

[72636c]

Hi @tomasvanrijsse, does https://mermaid-js.github.io/mermaid/#/Setup?id=configuration help?

If you're using the Node.js API, you can initialize Mermaid like so:

const config = {
  er: {
    diagramPadding: 1,
  },
  themeCSS: '',
};

mermaid.initialize(config);

If you're running mmdc, you can specify an equivalent JSON config file:

mmdc --configFile mermaid.config.json

[tomasvanrijsse]

Thanks for the reply!

I was hoping to be able to style a single entity different from others in the same diagram. Reading about the ERD styles, I hoped something would be possible like with flowcharts: https://mermaid-js.github.io/mermaid/#/flowchart?id=styling-a-node

And I'm using mermaidjs in Gitlab to render the documentation for projects.

ps. I see I pasted the wrong link to stackoverflow, I've put in the correct link now

[72636c]

Ah, thanks for the detail. There are IDs you can target in the same manner, but I'm guessing that the issue here is that the ERD parser doesn't currently support inline styling syntax.

Unfortunately I'm a bit swamped so I can't promise that I'll get around to this soon, but I hope someone else can help 🙏

[tomasvanrijsse]

My question was mainly about the documentation itself. I didn't mean to ask you to build this for me.

I meant to ask "if the feature of styling single nodes exists, how do I use it?" The documentation on the styles isn't clear on how to apply the styles.

Is the current documentation only referring to styles that can be changed using the config during initialization?

[chapati23]

@tomasvanrijsse did you ever figure this out? also bumped into the same issue, what i tried (all of which didn't work)

style PERSON fill:#f9f;

or

classDef className fill:#f9f; 
class PERSON className;

or

classDef default fill:#f9f;

[tomasvanrijsse]

I had to check my old project, but it seemed that I did not figure it out.

[chapati23]

Bummer, but thanks for checking 🤝

On 18. Feb 2022, at 22:50, Tomas van Rijsse @.***> wrote:

 I had to check my old project, but it seemed that I did not figure it out.

— Reply to this email directly, view it on GitHub, or unsubscribe. Triage notifications on the go with GitHub Mobile for iOS or Android. You are receiving this because you commented.

[st-trade]

After a quick review of the source code, it seems like this functionality isn't built, hence there is no support for inline styling syntax.

[yari-dewalt]

This will all be supported with updated documentation once #5965 is merged.