Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to apply ERD styles ? #1932

Open
tomasvanrijsse opened this issue Mar 8, 2021 · 10 comments
Open

How to apply ERD styles ? #1932

tomasvanrijsse opened this issue Mar 8, 2021 · 10 comments
Labels
Graph: Entity Relationship Status: Triage Needs to be verified, categorized, etc Type: Other Not an enhancement or a bug

Comments

@tomasvanrijsse
Copy link

tomasvanrijsse commented Mar 8, 2021

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 tomasvanrijsse added the Type: Other Not an enhancement or a bug label Mar 8, 2021
@tomasvanrijsse
Copy link
Author

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

@github-actions github-actions bot added the Status: Triage Needs to be verified, categorized, etc label Mar 8, 2021
@72636c
Copy link
Contributor

72636c commented Mar 8, 2021

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
Copy link
Author

tomasvanrijsse commented Mar 8, 2021

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
Copy link
Contributor

72636c commented Mar 8, 2021

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
Copy link
Author

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
Copy link

@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
Copy link
Author

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

@chapati23
Copy link

chapati23 commented Feb 19, 2022 via email

@st-trade
Copy link

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
Copy link
Collaborator

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Graph: Entity Relationship Status: Triage Needs to be verified, categorized, etc Type: Other Not an enhancement or a bug
Projects
None yet
Development

No branches or pull requests

6 participants