Mermaid diagram sanky rendered without colors

Bug graveyard
,
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
12

Looks like the MermaidJS generated SVG style g>g>... as mentioned by @GLight gets hit by Obsidians sanitization or prettyHtml.

13

As Obisidian support CSS snippets, do you know any method with which one can remove a style which is generated automatically by Obsidian? In this case, if we can find a way to mute the styles causing the problem, prehapse, there could be a quick fix/workaround.

14

So, I revisited this topic and ended up on a slightly deeper dive. It seems like the way Obsidian initializes Mermaid is to force the styling to match the Obsidian theme, and sankey doesn’t get any overrides.

However, after a little bit of testing, you can change your sankey mermaid codeblocks to override it.

```mermaid
sankey-beta
%%{init: {'themeCSS':''}}%%

[... Diagram here ...]
```

Mileage may vary depending on your active Obsidian theme, but you should be getting colours and it should be readable.

End result comparison examples:

Minimal Theme - Flexoki Light

2024-05-12-185522004_752x1006_Obsidian
2024-05-12-185522004_752x1006_Obsidian752×1006 34.7 KB

Minimal Theme - Flexoki Dark

2024-05-12-185632730_745x1022_Obsidian
2024-05-12-185632730_745x1022_Obsidian745×1022 33.2 KB

4 Likes
15

It works!

Thank you!

On this workaround, I have another question:
this workaround is amazing, where can I find some instruction on how does%%{init: {'themeCSS':''}}%% work?

16

The workaround is great, thanks! Any word on whether Obsidian will simply fix this issue? It’s clearly a bug.

17

Thanks for the dive!
How does this fix actually work? I got erros while trying it out:

sankey-beta 
%%{init: {'themeCSS':''}}%%
---
config: 
  SANKEY:
    showValues: false 
--- 
sankey-beta

Einkommen A, Budget, 7500.00
Einkommen B, Budget, 7400.00

Budget, Kredit, 2700.00
Budget, Haushalt & Lebensmittel, 1000.00
Budget, Freizeit, 200.00
Budget, Auto, 100

Auto, Kraftstoff, 80
Auto, Wartung & Reparatur, 50

Error

Error parsing Mermaid diagram!

Parse error on line 1:
sankey-beta ---config:   SAN
-----------^
Expecting 'NEWLINE', got 'NON_ESCAPED_TEXT'
18

Be sure to place the %%{init: {'themeCSS':''}}%% line under sankey-beta (especifically the one under your config, delete the first one)

It should look like this.

---
config:
 sankey:
  securityLevel: 'loose'
---
sankey-beta
%%{init: {'themeCSS':''}}%%

[Your contents here]
19

I think currently, the most effective way is to add that line of code into one’s mermaid template/snippet.

20

Worked! Thank you very much!