Mermaid diagrams with unreadable text color

[BenBGO]

Hi!

I am experiencing an unexpected behavior of mermaid’s Gantt chart functionality.

Using the example on mermaid’s GitHub page (under section “Gantt - [docs - live editor]”) using the following code in Obsidian:

gantt
section Section
Completed :done,    des1, 2014-01-06,2014-01-08
Active        :active,  des2, 2014-01-07, 3d
Parallel 1   :         des3, after des1, 1d
Parallel 2   :         des4, after des1, 1d
Parallel 3   :         des5, after des3, 1d
Parallel 4   :         des6, after des4, 1d

the output of the line with the parameter “active” does show a completely black box for this entry in the Gantt chart. Output should be, again according to mermaid’s GitHub page, a box with light blue background.

The attached figure shows my output in Obsidian.

Thanks!

[WhiteNoise]

This is either due to a bug in our theme for mermaid or an upstream mermaid bug.

[phibr0]

Steps to reproduce

Create a MermaidJS Class Diagram in Obsidian, for example like that:

classDiagram
	class Patient{
		-String name
		-Date waitingSince
		-InsuranceInfo insuranceInfo
		+Patient(name: String)
		+getName() String
		+getWaitingTime() Date
		+getInsuranceInfo() InsuranceInfo
	}
	class PQContent{
		-int priority
		+setPriority(priority: int)
		+getPriority() int
	}
	PQContent<|--Patient : Inheritance
	<<abstract>>PQContent

Expected result

The Diagram should be legible in both Color Schemes.

Actual result

You will see that the Class Diagrams background Color i dark in light Mode and light in Dark Mode.

Environment

• Operating system: Arch Linux and Windows 10

• Obsidian version: v0.10.7 (same as installer Version)

---

Additional information

[elwee]

I have the same issue. Also, possibly related, the rendering of user journeys diagrams looks kinda weird, in addition to having unreadable text color.

The example from the official documentation renders like this:

instead of

[htuy]

Steps to reproduce

Draw a class diagram with mermaid.

Expected result

Class diagrams show up in a more readable color scheme by default.

Actual result

Class diagrams show up in a color scheme with very low contrast and readability by default:

Environment

• Operating system: Linux

• Obsidian version: 0.9.3

[jmhill]

Hi, I just wanted to provide a quick note here for people who stumble onto this post about potential options for fixing the mermaid css.

As of when I wrote this reply, the default dark theme in Obsidian (v0.10.1) still has some inconsistent behavior when rendering mermaid diagrams. Graphs and Sequence Diagrams worked ok for me, but class diagrams were unreadable.

To get things working quickly, I borrowed the following CSS from the excellent Claire de Lune theme v1.4 (https://github.com/jamiebrynes7/clair-de-lune-obsidian-theme/releases):

.classGroup rect,
.classGroup line {
  fill: #2f334d !important;
  stroke: #444a73 !important;
}

path.relation {
  stroke: #444a73 !important;
}

.classLabel rect {
  fill: rgba(0, 0, 0, 0) !important;
}
.classLabel text {
  fill: #c8d3f5 !important;
}

Add that as a custom css snippet and enable in options to at least get the class diagrams readable, and tweak to get the colors the how you like them. See https://mermaid-js.github.io/mermaid/#/classDiagram?id=default-styles for more info on which CSS classes do what. Thanks.

[timeframe]

The same problem occurs with “journey” and “gantt” well. See the image attached.

The gantt can be fixed with the css code:

.active0, .active1, .active2, .active3{
fill: red!important;
} 

[Avdberg]

This fix doesn’t work for me, any other solutions?

State diagrams and user journey are also messed up unfortunately. I’m a bit of a noob with css