Mermaid diagrams placement and background colors

[olrenso]

These bugs are also present in the default theme. However, they seem to be quite fast-forward to fix.

Placement

When the graphs are wider than text width they are shifted to the right.

It's easy to fix with something like that:

.statediagram{
  max-width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

Background colors on dark themes

On the dark variation of the themes, the boxes' background colors seem to be broken:

This issue's a little more tricky. You can easily change the fill color with:

.statediagram-cluster.statediagram-cluster .inner{
  fill: var(--background-secondary) !important;
}
.statediagram-cluster.statediagram-cluster-alt .inner{
  fill: var(--background-secondary-alt) !important;
}

but as you can see you need to use !important. I didn't find a way to avoid it.