Mermaid styling using a Theme (Blue Topaz)

Help
,
1

image
image425×615 7.3 KB

Hi all,
Im using obsidian for my dnd campaigns. I have recently gotten to know mermaid js through work and want to start using that for my vault.
Currently im using Blue Topaz and want to use mermaid js, but as you can see, the nodes themselves aren’t rendering at all, just the text.

I have checked and this seems to be an issue with the topaz-nord styling of the Blue Topaz.

Would anyone be able to help me out?

2

Here’s an example I ran across in my vault. It doesn’t solve your problem of changing the default style, but it might point in the direction to a possible solution…

```mermaid
graph LR;
A-->B[This is a box]
A-->C(This is round corners)
B-->D((Circle))
C-->D[/Bubba\]
D-->A(["`*Italic* **Bold**`"])
Z-->A
click Z "https://www.google.com"

style A fill:#000000, stroke:#FFFFFF, stroke-width:4px;

classDef light color:#000000, fill:#FFFFFF, stroke:#FF0000, stroke-width:4px;
class C,D light;
```

Screenshot_mermaid
Screenshot_mermaid1369×531 20.4 KB

3

Here is a simple CSS snippet that might help with your Mermaid themes. This is by no means comprehensive or pretty. Just save it as a file in your .obsidian/snippets folder with a name like mermaid.css and enable the CSS snippet in the settings. Adjust the colors as desired.

/* Mermaid */

body {
--mermaid-font-family: Segoe UI, "Microsoft YaHei", "Segoe UI Emoji", "trebuchet ms", verdana, Arial, cursive;
}

.mermaid .node:not([class*="id"]) rect,
.mermaid .node:not([class$="id"]) circle,
.mermaid .node:not([class$="id"]) ellipse,
.mermaid .node:not([class$="id"]) polygon,
.mermaid .node:not([class$="id"]) path {
  fill:   #000000   !important;
  stroke: #FFFFFF   !important;
  stroke-width: 2px !important;
}

.mermaid .edgePath .path,
.mermaid .flowchart-link {
  stroke: #888888 !important;
}

.mermaid .label {
    font-family: var(--mermaid-font-family) !important;
}

.marker {
  fill:   #555555 !important;
  stroke: #888888 !important;
}
1 Like
4

Hi FsOver!

Thanks, that did it! Based on this I should be able to figure out the rest of the styling. I’ve toned the specific colours down a bit and its looking great!

image
image473×611 11.1 KB

1 Like
5

I made a mistake when stealing the CSS from the Blue Topaz theme. I removed some :not([style*="fill"]):not([style*="stroke"]) blocks. This has the effect of breaking the ability to manually set the fill and stroke inside the mermaid markdown block. The below CSS code remedies this error.

/* Mermaid */

body {
--mermaid-font-family: Segoe UI, "Microsoft YaHei", "Segoe UI Emoji", "trebuchet ms", verdana, Arial, cursive;
}

.mermaid .node:not([class*="id"]) rect:not([style*="fill"]):not([style*="stroke"]),
.mermaid .node:not([class$="id"]) circle:not([style*="fill"]):not([style*="stroke"]),
.mermaid .node:not([class$="id"]) ellipse:not([style*="fill"]):not([style*="stroke"]),
.mermaid .node:not([class$="id"]) polygon:not([style*="fill"]):not([style*="stroke"]),
.mermaid .node:not([class$="id"]) path:not([style*="fill"]):not([style*="stroke"]) {
  fill:   #000000   !important;
  stroke: #FFFFFF   !important;
  stroke-width: 2px !important;
}

.mermaid .edgePath .path,
.mermaid .flowchart-link {
  stroke: #888888 !important;
}

.mermaid .label {
    font-family: var(--mermaid-font-family) !important;
}

.marker {
  fill:   #555555 !important;
  stroke: #888888 !important;
}