Mermaid ER diagrams cardinality symbols are hard to see

[Jazzinghen]

Context

I am trying to add a couple of Mermaid ER diagrams into my documentation, however the relational cardinality symbols are very hard or impossible to see and if the theme is forced they show on top of the ER diagram node, instead of being half hidden behind each node.

Bug description

ER diagrams are not rendered properly in MKDocs using Material theme, this can be seen from this project's documentation:

While on the official Mermaid documentation the same diagram is rendered like this:

In my case, this is how my diagram is rendered:

While on the official online editor it's shown like this:

If the theme is forced to be dark then the issue is a bit different:

Related links

• MKDocs Material ER Diagrams
• Mermaid ER Diagrams

Reproduction

9.6.11-mermaid-er-broken-rendering.zip

Steps to reproduce

1. Create a MKDocs Material documentation project
2. Set it up to use Mermaid as per documentation
3. [Optional] Set some theme options
4. Create a page with a Mermaid ER diagram using relationship cardinalities

Browser

Firefox

Before submitting

• I have read and followed the bug reporting guidelines.
• I have attached links to the documentation, and possibly related issues and discussions.
• I assure that I have removed all customizations before submitting this bug report.
• I have attached a .zip file with a minimal reproduction using the built-in info plugin.

[squidfunk]

Thanks for reporting. The Mermaid.js source code changes all the time, and the rendering was definitely better some time ago, so it's something we're constantly chasing. I'm currently tight on time, so if you would like to propose a PR, it's appreciated!

[Jazzinghen]

Thanks for reporting. The Mermaid.js source code changes all the time, and the rendering was definitely better some time ago, so it's something we're constantly chasing. I'm currently tight on time, so if you would like to propose a PR, it's appreciated!

I'd love to propose a PR, however I wouldn't even know where to start, especially if it's something related to JS, haha.

However I will try to solve it locally. If I manage to do something I will open a PR.

[squidfunk]

Thanks for offering! For reference, here are some example PRs that we merged, fixing bugs on our Mermaid integration CSS:

• Fix embedded mermaid css to fix class diagram arrow heads #7969
• Add CSS variables for Mermaid sequence diagrams #5940
• override noteText color with mermaid default #4518

[amaline]

Had some time to investigate this in dev tools.

Setting the stroke on the marker element in dev tools helps with the marker not changing when the light/dark theme changes.

before:

#__mermaid_1 .marker {
    fill: none!important;
    stroke: #333333!important;
    stroke-width: 1;
}

after:

#__mermaid_1 .marker {
    fill: none!important;
    stroke: var(--md-mermaid-edge-color);
    stroke-width: 1;
}

And on the node, the fact that the fill is being set to a color that has transparency is allowing the marker to show through

before:

#__mermaid_1 .node circle, #__mermaid_1 .node ellipse, #__mermaid_1 .node path, #__mermaid_1 .node polygon, #__mermaid_1 .node rect {
    fill: var(--md-mermaid-node-bg-color);
    stroke: var(--md-mermaid-node-fg-color);
}

:root>* {
   --md-mermaid-node-bg-color: var(--md-accent-fg-color--transparent);
}

after (just had to remove the --transparent):

:root>* {
   --md-mermaid-node-bg-color: var(--md-accent-fg-color);
}

I assume that the following css in the src/templates/assets/javascripts/components/content/mermaid/index.css file is where the marker stroke is being set. But I don't understand the configuration on how it would be applied (and it doesn't seem to be being applied):

/* Entity relationship line markers */
defs #ZERO_OR_ONE_START *,
defs #ZERO_OR_ONE_END *,
defs #ZERO_OR_MORE_START *,
defs #ZERO_OR_MORE_END *,
defs #ONLY_ONE_START *,
defs #ONLY_ONE_END *,
defs #ONE_OR_MORE_START *,
defs #ONE_OR_MORE_END * {
  stroke: var(--md-mermaid-edge-color) !important;
}

Changing that CSS to the following seems to resolve the markers not displaying properly:

/* Entity relationship line markers */
defs .marker.onlyOne.er *,
defs .marker.zeroOrOne.er *,
defs .marker.oneOrMore.er *,
defs .marker.zeroOrMore.er * {
  stroke: var(--md-mermaid-edge-color) !important;
}

Removing the fill as follows seems to resolve the transparency issue and the rest of the mermaid diagrams on the examples page seem to still render correctly:

/* General node */
.node circle,
.node ellipse,
.node path,
.node polygon,
.node rect {
  /* fill: var(--md-mermaid-node-bg-color); */
  stroke: var(--md-mermaid-node-fg-color);
}

[squidfunk]

Removing the fill as follows seems to resolve the transparency issue and the rest of the mermaid diagrams on the examples page seem to still render correctly:

/* General node */
.node circle,
.node ellipse,
.node path,
.node polygon,
.node rect {
  /* fill: var(--md-mermaid-node-bg-color); */
  stroke: var(--md-mermaid-node-fg-color);
}

This changes all nodes to be non-transparent, right? It means that appearance changes for all diagrams, which is not what we want, since other users might not want that for other types of diagrams they are using. We need to find another way.

[amaline]

This isn't very pretty, but works for the example and won't interfere with non-ER diagrams. I don't have high confidence without testing against larger/more complicated ERDs:

/* Entity relationship line markers */
defs .marker.onlyOne.er *,
defs .marker.zeroOrOne.er *,
defs .marker.oneOrMore.er *,
defs .marker.zeroOrMore.er * {
  stroke: var(--md-mermaid-edge-color) !important;
}

g[id^="entity-"].node.default > rect {
  fill: var(--md-primary-fg-color); 
}


g[id^="entity-"].node.default > g[style] > path:first-child {
  fill: var(--md-primary-fg-color); 
}

g[id^="entity-"].node.default span.nodeLabel p {
  color: var(--md-primary-bg-color); 
}

note - this didn't work well for entities with more attributes

[amaline]

Seems like most of the classes that the original ER CSS used are no longer valid so I commented them out. This is looking promising but seems like overly complicated CSS:

/* ----------------------------------------------------------------------------
 * Rules: entity-relationship diagrams
 * ------------------------------------------------------------------------- */

/* Entity-relationship diagram title */
/* .entityTitleText {
  fill: var(--md-mermaid-label-fg-color);
} */

/* Attribute box */
/* .attributeBoxEven,
.attributeBoxOdd {
  fill: var(--md-mermaid-node-bg-color);
  stroke: var(--md-mermaid-node-fg-color);
} */

/* Entity node */
/* .entityBox {
  fill: var(--md-mermaid-label-bg-color);
  stroke: var(--md-mermaid-node-fg-color);
} */

/* Entity node label */
/* .entityLabel {
  font-family: var(--md-mermaid-font-family);
  fill: var(--md-mermaid-label-fg-color);
} */

/* Entity relationship label container */
/* .relationshipLabelBox {
  background-color: var(--md-mermaid-label-bg-color);
  opacity: 1;
  fill: var(--md-mermaid-label-bg-color);
  fill-opacity: 1;
} */

/* Entity relationship label */
/* .relationshipLabel {
  fill: var(--md-mermaid-label-fg-color);
} */

/* Entity relationship line { */
.relationshipLine {
  stroke: var(--md-mermaid-edge-color);
}

/* Entity relationship line markers */
defs .marker.onlyOne.er *,
defs .marker.zeroOrOne.er *,
defs .marker.oneOrMore.er *,
defs .marker.zeroOrMore.er * {
  stroke: var(--md-mermaid-edge-color) !important;
}

/* Entity rectangles with no Attributes */
g[id^="entity-"].node.default > rect {
  fill: var(--md-primary-fg-color); 
}

/* Entity rectagles with Attributes */
g[id^="entity-"].node.default > g[style]:first-child > path:first-child {
  fill: var(--md-primary-fg-color); 
}

g[id^="entity-"].node.default > g.row-rect-odd[style]  path:first-child {
  fill:unset;
}

:nth-last-child(1 of g[id^="entity-"].node.default > g.row-rect-even)   path:first-child {
  fill: unset;
}

g[id^="entity-"].node.default span.nodeLabel p {
  color: var(--md-primary-bg-color); 
}

/* Entity relationship line markers */
/* defs #ZERO_OR_MORE_START circle,
defs #ZERO_OR_MORE_END circle {
  fill: var(--md-mermaid-label-bg-color);
} */

ugh - not quite working when an entity has an even number of attributes

[amaline]

OK, stopped going down a rabbit whole of complexity and revisited my initial simple approach except instead of impacting all diagram types just targeted .erDiagram. So in the 'Rules: general' section:

/* General node */
.node circle:not(.erDiagram *),
.node ellipse:not(.erDiagram *),
.node path:not(.erDiagram *),
.node polygon:not(.erDiagram *),
.node rect:not(.erDiagram *) {
  fill: var(--md-mermaid-node-bg-color);
  stroke: var(--md-mermaid-node-fg-color);
}

and the 'Rules: entity-relationship diagrams' section:

/* ----------------------------------------------------------------------------
 * Rules: entity-relationship diagrams
 * ------------------------------------------------------------------------- */

/* Entity relationship line { */
.relationshipLine {
  stroke: var(--md-mermaid-edge-color);
}

/* Entity relationship line markers */
defs .marker.onlyOne.er *,
defs .marker.zeroOrOne.er *,
defs .marker.oneOrMore.er *,
defs .marker.zeroOrMore.er * {
  stroke: var(--md-mermaid-edge-color) !important;
}


g[id^="entity-"].node.default span.nodeLabel p {
  color: black; 
} 

doesn't format in alignment with the the theme but does render correctly and the attributes alternate backgrounds appropriately and I couldn't identity a color variable for the labels that worked with light and dark settings so just set it to 'black'

[squidfunk]

I've invested some time and think I reached a solution, albeit we'll lose the semi transparent nodes. There's absolutely no way to do it with transparencies, as the markers will always shine through. It worked before, but now that the markup has completely changed again, there's no way to keep the styling without changing the SVG, which we can't.

Potential fix that should be general enough in 67081cc. Feedback appreciated:

• Mermaid ER diagrams cardinality symbols are hard to see #8153