Mermaid CSS

[tg-x]

Mermaid diagrams need additional styling.

1. By default diagrams do not fill the available page width, this needs to be fixed, otherwise some diagrams are too small to read.

2. Change the default subgraph & node colors to fit the page style from the yellow-purple scheme that is shipped as default.
   This offers a consistent default style, which can be overridden by authors using mermaid syntax if necessary.

Here are some CSS rules that implement the above, it needs to be inserted at the end of the page.

.language-mermaid {
  width: 100%;
}

.language-mermaid .cluster > rect {
  stroke: #caa !important;
  fill: #eee !important;
  fill-opacity: 50%;
}

.language-mermaid .node > :first-child,
.language-mermaid .node > :first-child * {
  stroke: #c33 !important;
  fill: #fee !important;
}