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

[andrioid]

I ran into this as well. It would be wonderful if Obsidian diagrams would look nice with every theme.

I have this snippet in my CSS snippet folder. It uses the theme CSS variables, so it should work with most themes. I’m not going for gorgeous, just readable.

/** Gantt **/

.mermaid rect.task {

  fill: var(--background-secondary) !important;

}

.mermaid text.taskText {

  fill: var(--text-normal) !important;

}

/** ER **/

.mermaid rect.er {

  fill: var(--background-secondary) !important;

}

/** Class **/

.mermaid .classGroup line,

.mermaid .classGroup path {

  stroke: var(--text-muted) !important;

  fill: var(--text-muted) !important;

}

.mermaid .classGroup text {

  fill: var(--text-normal) !important;

}

.mermaid .classGroup rect {

  fill: var(--background-secondary) !important;

}

.mermaid .classLabel .label {

  fill: var(--text-normal) !important;

}

[akaalias]

Steps to reproduce

When I enter a user journey using mermaid

journey
	title Research Process
	section Discover a missing answer
		Create a learning plan: 5: Alexis, Courtney, Client

Expected result

Mermaid live editor result

Actual result

Text-labels are missing:

Environment

• Operating system: MacOS Big Sur
• Obsidian version: v0.11.10

[Thecookiemomma]

I have issues with this too. Theme doesn’t seem to fix / change it.
Windows 10, Obsidian 0.11.9

Tested it in my workbench just to see what it would do now, and thus

journey
 title Test 
 Section This section
  Test: 5: Me
  Don't test: 2: Me 

result:

[Moonbase59]

Same here. Linux Mint 20.1/Cinnamon, Obsidian/AppImage 0.11.13, Installer 0.10.11, no theme selected:

journey
    title My working day
    section Go to work
      Make tea: 5: Me
      Go upstairs: 3: Me
      Do work: 1: Me, Cat
    section Go home
      Go downstairs: 5: Me
      Sit down: 5: Me

renders as:

Should be:

[iforwms]

Hi, any updates on this issue, or any work arounds?

[Moonbase59]

Not here …

[WhiteNoise]

Will be fixed in 0.12.5.

If you have problems after 0.12.5 open a new Bug report.