First off, big kudos to the Obsidian dev team for updating the Mermaid plugin, which now includes support for mind maps! I’ve really enjoyed using it to quickly brainstorm and visualize ideas.
I noticed that at least on my machine, the default mindmap node colors colors can sometimes make the black text hard to read. (This might be light-theme specific.) Here’s what it looks like for me:
Here is a CSS snippet I use to adjust the colors so that they’re more readable for me in the light theme:
Thanks for your note. I think you have two issues to solve:
Using CSS Snippets
First, CSS snippets don’t go in the note, they are individual files in a special folder in your vault. I recommend you read the Obsidian docs on CSS files, but here’s a summary:
Put the CSS code into a text file in the special directory .obsidian/snippets under your vault folder, for example /home/mzee/Vault/.obsidian/snippets/mermaid.css.
Under Obsidian settings → Appearance → CSS Snippets, make sure the file you just added is selected. For example:
Once you’ve done that, you should see the effects of the CSS being applied.
Light Mode vs. Dark Mode
Second, the CSS snippet I pasted above is for light mode. I expect the colors will not work well in dark mode. I don’t use dark mode much myself, but you can perhaps try these instead as a starting place:
/* Make mindmap colors readable (Light mode) */
.theme-light .mermaid {
--color-red: #ff7777;
--color-orange: #ffbb99;
--color-yellow: #ffeeaa;
--color-green: #bbffbb;
--color-cyan: #bbffee;
--color-blue: #aaccff;
--color-purple: #ddbbff;
--color-pink: #ffcccc;
}
/* Make mindmap colors readable (Dark mode) */
.theme-dark .mermaid {
--color-red: #933;
--color-orange: #963;
--color-yellow: #993;
--color-green: #393;
--color-cyan: #399;
--color-blue: #339;
--color-purple: #639;
--color-pink: #966;
}
/* Override root text color in mermaid
* so that it's the same color as regular node text */
.mermaid .section-root text {
fill: inherit !important;
}
This is what they look like in my vault in dark mode:
I hope this helps. Please let us know how you make out.
Hey @Craig , I’m unable to replicate what you did, here’s screenshots of what I have set up– a mermaid.css file with your classes, enabled in my vault, but the mermaid output on mindmap is still the default coloring. do I have to override each node in the map with `–color-<color_name>` ?
Your setup looks fine. Unfortunately the way Mermaid mind map colors work in Obsidian have changed since that post in 2023, so the old CSS doesn’t work anymore. It took me a little while to figure out how to set the colors again. New CSS at the bottom of this post.
By default, the Mermaid mind map colors look kind of garish to me:
It looks like you’re using dark mode. I don’t use dark mode in Obsidian, so I had to guess at what might look OK in a dark theme. You’ll probably want to adjust the colors to your taste, but beware: there is some transformation being applied to the colors that I don’t understand, so making them “lighter” seems to make them “darker” instead. (Actual CSS devs can tell you what’s really going on, I’m sure. )
In the new CSS paradigm, the root and each branch (called “section” in the CSS) must have their colors explicitly set and overriden using !important. I’m not a CSS expert, so this is very much a brute-force approach, but it does work.
I styled branches (sections) 0-6, since I rarely have more branches than that, but you can of course style more if you like, following the pattern in the CSS.
Below is the CSS I use to style my Mermaid diagrams. I hope it’s helpful for you.
Thanks @Craig ! Really appreciate you looking into this after so much time. To be honest I completely forgot Obsidian is an Electron app and realize I could have inspected the css classes on the mindmap to see where it gets its default styling.
)