I couldn’t find any CSS snippet for mermaid to make nodes transparent (to make it feel more integrated with text), so I made one.
This one makes mermaid diagrams use only text color (outline only/monochrome style), and it adapts to theme and light/dark mode:
.theme-dark .mermaid > svg {
filter: none !important;
}
.mermaid {
background-color: transparent !important;
}
.mermaid rect,
.mermaid circle,
.mermaid ellipse,
.mermaid path,
.mermaid line,
.mermaid polygon,
.mermaid svg .node rect,
.mermaid svg .cluster rect
{
fill: transparent !important;
stroke: var(--text-normal) !important;
}
.mermaid circle.state-start,
.mermaid .statediagram-state path
{
fill: var(--text-normal) !important;
}
.mermaid .marker path,
.mermaid marker path,
.mermaid marker circle,
.mermaid .data-point circle,
.mermaid .commit-bullets circle,
.mermaid .commit-bullets rect,
.mermaid .plot rect
{
stroke: var(--text-normal) !important;
fill: var(--text-normal) !important;
}
.mermaid .marker,
.mermaid text,
.mermaid tspan
{
background: var(--background-primary) !important;
fill: var(--text-normal) !important;
}
.mermaid rect.task,
.mermaid .mindmapDiagram .node *,
.mermaid .timeline-node path
{
fill: var(--background-primary) !important;
stroke: var(--text-normal) !important;
}
.mermaid .mindmapDiagram .node-line-{
stroke-width: 1 !important;
}
.mermaid p,
.mermaid .venn-text-nodes span{
background: transparent !important;
color: var(--text-normal) !important;
}
/*
This following is for edge label readability
if it doesn't work with your theme then:
replace:
`background: var(--background-primary) !important;`
with:
`background: transparent !important;
*/
.mermaid .edgeLabel div{
background: var(--background-primary) !important;
}
Here’s an example how it looks like:
Dark mode:
Light Mode:
Terminal theme, dark mode:
Note, it’s not a complete solution but something what works well for my use case, and there are some limitations:
- some styling doesn’t work fine (
f-circnode, icons, oneToMany and zeroToMany in ERD, text outside task in Grantt chart, notes in Class Diagram, sequence number in Sequence Diagram) - it’s monochrome so pie chart, radar, journal and other diagrams that rely on colors don’t work well
- I set edge labels background color to make it more readable, but in some themes it doesn’t work well (see note in CSS)
I used this note for testing diagram styling: https://github.com/tad1/obsidian-mermaid-monochrome-adaptive/blob/owner/test_note.md
Project repository: https://github.com/tad1/obsidian-mermaid-monochrome-adaptive
Disclaimer
Is this snippet open source? Yes
Is this snippet completely free? Yes
Is this snippet vibe-coded beyond the author’s ability to comprehend how it works? No