How to style mermaid css (in editor and in obsidian publish)

[thor314]

Obsidian and Obsidian Publish’s default styling for mermaid sequence diagrams isn’t great.

I’ve been trying and failing to update the css for my local vault. I’ve successfully enabled the following css snippet:

.mermaid svg { 
    max-width: 100%; 
    height: auto;
}

but have not yet been successful at much else. Following the mermaid docs, I tried each of:

.note  {
  stroke: #aaaaaa;
  fill: #22222;
}
.mermaid .note  {
  stroke: #aaaaaa;
  fill: #22222;
}
.mermaid svg .note  {
  stroke: #aaaaaa;
  fill: #22222;
}
.mermaid .note  svg {
  stroke: #aaaaaa;
  fill: #22222;
}

though none have had any observable effect, though I have confirmed that they update the elements developer view page.

Is it possible to modify mermaid diagram css? And would it be possible to ask the Obsidian Publish maintainers to update the defaults for the Obsidian publish site, and/or customize site CSS?

[holroy]

Is it possible? Yes. Is it easy, don’t think so, but I got to change some stuff, and got some pointers as to how you could proceed trying to change your vitals. Here is my mermaid chart, with custom css:

And no, I didn’t say it was beautiful, but here is the css which produced this result:

.label > g > foreignObject  {
  color: red;
  background-color: blue;
}

.node > g > g > foreignObject > div {
  color: green;
  stroke: blue;
}
.mermaid svg .cluster rect {
    fill: pink !important;
    stroke: yellow !important;
}

.mermaid svg .node rect {
    fill: magenta !important;
    stroke: green !important;
}

To get the selectors I went into the Developer Tools, and navigated the DOM until I got the proper highlight of the box or thing I wanted to change color of. I then went over to see the computed styles, and copied the selector used for it (by following the arrow). Tried it, and if it failed, I added the !important designator in addition. That usually did the trick.

Finally, I changed into more generic selects, aka I replaced the ID’s provided with the more generic stuff like .mermaid .svg instead of #L-f-z or similar. Also note how sometimes you’ll need to change color/background-color, and sometimes you’ll need to change fill/stroke.

Hope this helps you on your quest to getting it to look better. Mine doesn’t look better, but I did change the colors.

[thor314]

Ok, so looking at a sequence diagram from the dev tools, I see a section:

<div class="mermaid" style>
<svg id= ... >
...
<g>
<rect x="50" y="75" fill="#EDF2AE" stroke="#666" width="352" height="35" rx="0" ry="0" class="note"></rect>
...

where the last box looks to be what I want to change; the #EDF2AE specifically. Let’s try to change it to #b3aef2:

Following along here, I would try this:

.mermaid svg .note rect {
  fill: #b3aef2 !important;
  stroke: #magenta !important;
}

That doesn’t appear to take effect, so switching to a flowchart type mermaid diagram and wandering back over to your example, I see that css selecting the rect looks like:

<div class="mermaid" style>
<svg id=...>
<g>
<g class="root">
<g class="nodes">
<g class="node default" ....>
<rect class="basic label-container" style="" rx="5" ry="5" x="-61.1484375" y="-19.5" width="122.296875" height="39"></rect>
...

can be successfully modified with the snippet:

.mermaid svg .node rect {
    fill: magenta !important;
    stroke: green !important;
}

But this is also suss that I’m not looking at the right component! I don’t see where the snippet fill/stroke info is loaded, except toward the bottom where my .css file is loaded under a header, <style type="text/css"> MY_SNIPPETS ...

It also doesn’t look like any > g is required to make edits to the node rect selector, which is nice, but I am stuck wondering what to try next again; it looks like I failed to select the rect with my snippet.

edit: just noting that I also tried

.mermaid svg .note rect {
  color: #b3aef2 !important;
  background-color: magenta !important;
}

[holroy]

Could you provide the mermaid code of the diagram, so we’re working on the same diagram, and I could try taking a look at which part to change.

It would also help to get the full selector for the one you’ve tried changing.

Have you been able to change any of these containers? In other words, are you sure that your css is applied, even though you might struggle to find the correct containers?

[holroy]

Hmm… I found a sequence diagram with that ugly light yellow color, #EDF2AE, and found that it responds to both rect.note, and .mermaid svg rect.note.

Do note that there is a big difference between doing .note rect and rect .note and rect.note. Here is my attempt at an explanation (might be slightly off:

• .note rect – Something at the outer level has the class note, and within this element there is a rect element
• rect .note – There is a rect element, which contains an element of the class .note
• rect.note– A rect element of the note class

Does the rect.note target the main element you wanted to change?

[thor314]

@thor314

.mermaid svg rect.note {
  fill: #b3aef2 !important;
  stroke: magenta !important;
}

Yeah that did it. Thanks for your help!