Mermaid diagram sanky rendered without colors

Steps to reproduce

Create a mermaid diagram the usual way with the sankey diagram type. E.g. taken from the [mermaid manual]( Sankey diagram (v10.3.0+) | Mermaid):

sankey-beta

%% source,target,value
Electricity grid,Over generation / exports,104.453
Electricity grid,Heating and cooling - homes,113.726
Electricity grid,H2 conversion,27.14

Expected result

Actual result

Environment

macOS 14.2.1 (23C71)
Version 1.5.3 (Installer 1.4.16)


Additional information

Using the Developer Tools I was able to reveal the generated svg element. Deleting the nested style element will render the svg as expected.

3 Likes

I have the same issue.

Is it possible to fix this issue with some CSS snippet?

Update:

I found the following selector in the nested style element that makes the ribbon invisible:

g>g>circle, g>g>path{stroke:var(--background-accent);color:var(--text-normal);}

And the following selector makes the node invisible:

.node circle, .node ellipse, .node path, .node polygon, .node rect{fill:var(--background-secondary-alt);stroke:var(--background-modifier-border);stroke-width:1px;}
2 Likes

I think if obsidian does not generate those 2 lines of code, this issue can be fixed.

thanks

During the first two weeks of January this year, I developed a few Mermaid Sanke Charts in Obsidian and all was fine. Then, around 1/12, I think, it stopped working (as described above) and the problem has persisted.

-Phil

I am having the same problem (on 1.53) , would be great to have a few more documented examples of sankey diagrams as well.

Iā€™m on 1.53 and seeing this too:

sankey-beta

Referrals,Applications,3
Online,Applications,30

Applications,Recruiter Call,3
Applications,Rejected,17
Applications,Ghosted,4
Applications,Waiting,9

Recruiter Call,Manager Call,3

Manager Call,Panels,3

Panels,Rejected,2
Panels,Ghosted, 1

Still exists in 1.5.8