Mermaid: Styling: classes aren't applied to elements.

[joostas]

Styling: classDef and classes aren't applied to elements.
Example:

graph TD
A-->B
C-->D
classDef def fill:#00f
class A def

Element A is green, but should be blue.

[amazing-gao]

I have the some issue.

[aaroncalderon]

It's weird, because the demo: Larger flowchart with some styling works, but it does not when I try the same thing on the live editor.

Any Ideas?

[marceloboeira]

@aaroncalderon same here...

[ghost]

Same here. I am being able to style each node individually:

But when I try doing it with classDef nothing happens:

Naming it default does nothing as well:

[cryodream]

I spent hours trying to get this to work in VS Code.
Hope it'll get fixed, because defining styles individually is a pita.

[calve]

Same here. Looking at the generated HTML, nodes do get classes attributes, but I cannot find any css rules matching the class, nor find any occurence of my classname in the generated document. I believe there is a bug preventing the CSS rules to be set.

This regression seems to appear between releases 7.0.14 and 7.0.15 which lead me to commit 72493b7a8b0edc45b53884b443d690a9e68d8e1a.

   graph TD

     hello --> world;
     classDef someclass fill:#f96;
     class hello someclass;

Please note that the ordering do matter. Also this is processed by sphinx-mermaid but this is not relevant here.

Before (7.0.14)

After (7.0.15)

@tylerlong would be glad if you could shed us some light on this ? :upside_down_face:

[tylerlong]

Hi guys, I am here. I will take a look tonight.

@calve thank you for figuring out the commit which brought this regression.

[tylerlong]

Fixed: https://github.com/knsv/mermaid/compare/a8e49a0d2d522d7fb880b31b86453560f41b5653...0d0f793f8147e473ce082c18eeced2d806725db1

[marceloboeira]

@tylerlong thanks!