Topic on Extension talk:Mermaid/Flow

MW 1.39, Mermaid 3.1.0

I have the following mermaid code in my wiki:

{{#mermaid: stateDiagram-v2
   state "My Organization" as myorg
   state "Alice" as myorg
}}

and I would like to style the state. According to: https://mermaid.js.org/syntax/stateDiagram.html I should be able to add:

classDef style1 fill:#f00

and

class myorg mystyle1

..and that should change the background of my state, however, when I try it as:

{{#mermaid: stateDiagram-v2
   state "My Organization" as myorg
   state "Alice" as myorg

   classDef style1 fill:#f00

   class myorg mystyle1
}}

..it causes the mermaid parser function to fail.

Is styling a mermaid stateDiagram-v2 diagram possible?

There's a small error in your class definition (class myorg style1 vs. class myorg mystyle1), you can see a working example here. I haven't checked this using the MW extension though.

@Bryandamon - Hi Bryan. The typo is only related to my attempt to make the example I posted generic.. My actual code is all work themed and I didn't want to post it here. So the class and classDef methods truly don't work for me.

Regardless, I was able to style them by adding the following CSS in the page (using Extension:CSS)

{{#css:
.node rect { stroke: #000!important; }

line.divider { stroke: #000!important; }

.statediagram-state > .label > foreignObject:first-child > div { width: 250px!important; }

.statediagram-state > .label > foreignObject:first-child > div > .nodeLabel { color: #fff!important; }

.statediagram-state > .label > foreignObject:not(:first-child) > div > .nodeLabel { text-align: left!important; }
}}

That actually works well!