Adjusting Mermaid mindmap colors

Share & showcase
1

Hi all!

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:

image

Here is a CSS snippet I use to adjust the colors so that they’re more readable for me in the light theme:

/* Make mindmap colors readable */
.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; 
}

This is what the same diagram looks like with the snippet enabled:

image

Hope this is helpful to someone else.

Craig