Mermaid: subgraph labels are sometimes too dark

[pawamoy]

In some Mermaid diagrams, the labels in subgraphs are too dark when using the slate theme ("openshift" and "service"):

But it's weird because in other graphs it's not ("local"):

Any idea on what is going on 😕 ?

I don't load mermaid.js myself. I don't have any CSS rules touching diagrams.

mkdocs==1.2.3
mkdocs-exclude-search==0.6.4
mkdocs-material==8.2.1
mkdocs-material-extensions==1.0.3
mkdocs-spellcheck==0.2.0

Here's the code if you want to try it:

```mermaid
flowchart LR

%% nodes ----------------------------------------------------------
client["client"]
load_balancer["load balancer"]
api1["API (replica 1)"]
api2["API (replica 2)"]
apin["API (replica N)"]

%% edges ----------------------------------------------------------
client --- load_balancer
subgraph openshift
    subgraph service
        api1 --- api2 --- apin
    end
    load_balancer --- service
end

%% style ----------------------------------------------------------
linkStyle 1 opacity:0
linkStyle 2 opacity:0
```

[facelessuser]

For comparison, can you post the other diagram source as well?

[facelessuser]

Personally, the "working" example looks like it should be a cluster-label like in the non-working example. Not sure why it's not. Probably just a Mermaid quirk. I wasn't aware of the gray bubble issue either. Not sure what makes one gray and the others not 🤷🏻 .

[facelessuser]

Oh, one is a graph TD and one is flowchart LR. That's why they get constructed differently. they are different diagram types.

[pawamoy]

By grey bubbles you mean the "git clone" one for example? It's styled using Mermaid's style options: classDef grey fill:#999,stroke:black;. This one I have under control, so it's my responsibility only if it doesn't display well 🙂 But the clusters labels, I was not even able to "override" the CSS 😅

[pawamoy]

Oh yes, good catch.

[facelessuser]

You may be able to control it with:

.cluster text {
    fill: /*my color*/;
}

I use the themeCSS config to do such things. I don't think I've used classDef before. I'm not sure if Material lets you directly change the config or not...again, I'm using my own custom solution.

[squidfunk]

Mermaid.js support is pretty new in the community edition, and as it's now available to many more users, I expect that we'll find cases where we need to add some missing styles. I've explored several diagram types and tried to add styles for all cases I could enumerate, but this is clearly a moving target. Furthermore, new versions of Mermaid.js might induce necessary adjustments.

I'm happy to merge PRs. Styles are defined here.

[pawamoy]

Thanks @squidfunk! I believe we can simply copy the first flowchart rule into a new "graph" section?

/* ----------------------------------------------------------------------------
 * Rules: graphs
 * ------------------------------------------------------------------------- */

/* Graph cluster label */
.cluster-label {
  color: var(--md-mermaid-label-fg-color);
  font-family: var(--md-mermaid-font-family);
}

I'll see if I can setup the project locally to test it. Or maybe it's possible to patch the asset in my own project?

[squidfunk]

The style sheets need to be inlined and set via themeCSS, so I'm afraid you'll have to set up the theme development process.