Mermaid diagram sanky rendered without colors

Bug reports
,
1

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

image
image1246×850 62.6 KB

Actual result

image
image1252×814 12.6 KB

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.

5 Likes
2

I have the same issue.

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

3

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;}
3 Likes
4

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

5

thanks

6

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

7

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

8

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

image
image1320×846 81.5 KB

1 Like
9

Still exists in 1.5.8

2 Likes
10

Is there a solution for that?
Would love to use Sankey in Obsidian

3 Likes
11

I haven’t found any solution for version 1.5.12.
Does anyone have any ideas or workaround?

SYSTEM INFO:
	Obsidian version: v1.5.12
	Installer version: v1.5.12
	Operating system: Windows 10 Pro 10.0.22631
	Login status: logged in
	Catalyst license: insider
	Insider build toggle: on
	Live preview: on
	Base theme: adapt to system
	Community theme: none
	Snippets enabled: 0
	Restricted mode: on

RECOMMENDATIONS:
	none
1 Like