Mermaid: Changing graph nodes text color

[nfroidure]

Hi! Thanks for this useful library.

I'd like to be able to change the text color in my graphs. I naively trie:

  classDef controller fill:#890620,color:#ebd4cb,stroke:#ebd4cb,stroke-width:1px;

But it doesn't work unfortunately.

I tried to look for similar issues but not sure there are. Those looks similar but no example were provided so i'm not sure it is the same need:

• https://github.com/knsv/mermaid/issues/381
• https://github.com/knsv/mermaid/issues/50

I really need this feature so i would PR the project if anyone point me out where I can change it since the codebase is huge and I did not found were the styling things takes place.

[marceloboeira]

Also doesn't work for me...

[tylerlong]

Please create a sample in https://mermaidjs.github.io/mermaid-live-editor/ to reproduce the bug. Thanks.

[DropkickSteve]

This is no bug I think, according to documentation there is no "color" setting for the text color of the node.
I think you have to fork the project and change the css on your own. You are looking for class .label where the default color is set to #333

[scribu]

I think Mermaid should allow changing the text color on a per-node basis.

In the example below, the diagram would look a lot better if the MySQL text was white:

graph LR
MyApp --> DB(fa:fa-database MySQL)

style DB fill:#00758f

[w4nderlust]

This feature request is a deal breaker for me, I'm including mermaid in a dark background website and not being able to change the color of the fonts means i can't use mermaid at all.

[mullinmax]

I too would really like to have this feature. I can't use dark colors for my nodes so the diversity of colors I can use is significantly reduced.

[jgahn-i4vine]

I used HTML tag for font color of node. For example,

graph LR
MyApp --> DB(<font color=white>fa:fa-database MySQL)
style DB fill:#00758f

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[marceloboeira]

It is still an issue...

[dazraf]

Please can we have something more powerful for inline styles? Similar to PlantUML. Stylesheets don't really cut it - specially for services like Gitlab!

[BobMilli]

Text color style would definitively be a great feature !

[eduo]

Why is the current functionality not enough?

I understand it's not as straightforward as defining in the diagram code itself, but some of the comments point to problems that today are already solved.

Styling of boxes, backgrounds, text and lines is possible using CSS. Also by extension things like hover, visited and animaction (marching ants, for example).

I'm currently using mermaid for a petri net workflow application and the style that will be applied to each step is defined by the type of step. So far the only thing that isn't easily stylable is the type of arrow (because such a thing doesn't exist in CSS). I'm attaching a few screenshots. The one with black dotted line is actually animated marching ants and the red one just outlines selection (clicking adds a class)

I might be missing what the specific miss is here, to be able to help.

[Logerfo]

At least for me, the problem is for websites that support mermaid within itself, like GitLab. Users cannot edit mermaid settings or apply any CSS.

[marceloboeira]

It also doesn’t work for the CLI, which is my main use of mermaid. It seems like a terrible idea to have a CLI for svg generation distributed in a interpreted language,
I’ve considered writing my own but I have no time these days.

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. If you are still interested in it, and it is still relevant, you can comment or remove the label to revive it.

[Logerfo]

I'm interested.

[stale[bot]]

This issue has been been automatically closed due to a lack of activity. This is done to maintain a clean list of issues that the community is interested in developing.

[knsv]

Hmm, the bots are rising. We have a rebellion on our hands.

[jpetro416]

I want this feature... I hate that there is such a lack of dynamic manipulation in this package. Compare this to Go.js and it's almost day and night. Not sure why we can't just reference a node like an array element mermaid.changeNodeColor("ID", "CSS COLOR");

[tastevens]

This seems like a such a basic thing to have :/

[IOrlandoni]

@jpetro416 @tastevens We're always welcoming new contributors. If you'd like to help out, feel free to check our "collaborators wanted" issue, read our contribution guidelines, and join us in slack!

[etimau]

Sorry if I didn't understand the question but, for me, color in a classDef is working...
(with named color, #rrggbb or #rgb)
See online editor

[GDFaber]

I'm going to work on a PR for this as it can improve the visualisation when htmlLabels are disabled (setting color does not work with html labels disabled).

[sappjw]

It would be nice to have other CSS text attributes available too (i.e., text-decoration).

[GDFaber]

Hi @sappjw, I agree but would like to leave this issue to setting the text color only. Feel free to open another issue for the settings you consider most preferable.

[GDFaber]

The SVG attribute for text color is also fill which is already used to style the node itself. As color is already used as a workaround, I would like to keep it that way and use the color settings for disabled htmlLabels as well (it is then turned into fill for the text objects in the node). I'm going to submit a PR during the week.