Mermaid diagram sanky rendered without colors

Bug graveyard
,
21

Apologies for the delayed answer, I realise it’s been 15 days already, but I’ve been AFK.

So, using the information I gathered from the Obsidian javascript, along with the MermaidJS configuration docs (Configuration | Mermaid), I figured I could override the themeCSS property which Obsidian crudely forces into the config (Theme Configuration | Mermaid). By clearing out the forced CSS that Obsidian initialises MermaidJS with, MermaidJS will only generate the CSS needed as it would with the base theme, instead of hard coding every single CSS attribute for every single Mermaid diagram.

There’s a caveat to all of this though; it’s not future-proof. Directives (Directives | Mermaid), which is the method used to clear the themeCSS property, is deprecated as of MermaidJS version 10.5.0.
Obsidian v1.5.12 (current public version at the time of writing this) uses MermaidJS v10.6.1, so there’s a chance the workaround eventually stop working when Obsidian decides to update the library to a version that no longer support Directives configuration (probably a major release, i.e., v11.0.0).

That’s why I’m now dumping a revised workaround, which uses the newer frontmatter configuration (Configuration | Mermaid), which will remain the preferred way of doing this:

```mermaid
---
config:
  themeCSS: ""
---
sankey-beta

[... Diagram here ...]
```
1 Like
22

I’m not sure I would call it a “bug”, per se. It still works “as intended”.
Obsidian forces CSS upon MermaidJS initalisation, as kind of a “catch-all, theme agnostic” kind of setup.

It works nice for most older diagrams, but Obsidian uses a version where sankey is in beta (technically, sankey diagrams are still in beta/experimental as of MermaidJS 10.9.1).
However, it breaks for diagrams like sankey, simply because of how the diagrams are structured in the SVG compared to the other diagrams.

So, not a “bug”, per se, but also not entirely feature-friendly; it’s implemented in a quick and dirty roundabout way, making the other (older) diagram types look like they belong in any theme without having to add lots of stuff into the stylesheet.

With that said, I doubt the Obsidian team will do anything about this for as long as sankey is still “experimental”.

23

thanks!

24

We will change the way we handle mermaid styling in v1.8.

It should solve/ameliorate this issue.

4 Likes
25

Now it is working!
Thank you.

image
image998×720 58.6 KB

image
image998×720 63.3 KB

Using as example:

```mermaid
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
```

My environment:

SYSTEM INFO:
	Obsidian version: v1.8.0
	Installer version: v1.7.7
	Operating system: Windows 11 Pro 10.0.26100
	Login status: logged in
	Language: en
	Catalyst license: insider
	Insider build toggle: on
	Live preview: on
	Base theme: dark
	Community theme: none
	Snippets enabled: 4
	Restricted mode: off
	Plugins installed: 17
	Plugins enabled: 16
26

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.