mkdocs/docs/assets/stylesheets/mermaid.css

:root {
  --mermaid-text-color: #494949;
  --mermaid-background-color: #F5F5F5;
  --mermaid-stroke-color: #494949;
}

g.node rect {
    fill: var(--mermaid-background-color) !important;
    stroke: var(--mermaid-stroke-color) !important;
}

g.classGroup rect {
	fill: var(--mermaid-background-color) !important;
	stroke: var(--mermaid-stroke-color) !important;
}

g.classGroup text {
	fill: var(--mermaid-text-color) !important;
	font-family: "Roboto","Helvetica Neue",Helvetica,Arial,sans-serif !important;
}

g.classGroup line {
	stroke: var(--mermaid-stroke-color) !important;
}

g.classLabel rect {
	fill: var(--mermaid-background-color) !important;
}

g.classLabel text {
	fill: var(--mermaid-text-color) !important;
	font-family: "Roboto","Helvetica Neue",Helvetica,Arial,sans-serif !important;
}

.relation {
	stroke: var(--mermaid-stroke-color) !important;
}

#extensionStart {
	fill: var(--mermaid-background-color) !important;
	stroke: var(--mermaid-stroke-color) !important;
}

#extensionEnd {
	fill: var(--mermaid-background-color) !important;
	stroke: var(--mermaid-stroke-color) !important;
}

#compositionStart {
    fill: var(--mermaid-stroke-color) !important;
    stroke: var(--mermaid-stroke-color) !important;
}

#compositionEnd {
    fill: var(--mermaid-stroke-color) !important;
    stroke: var(--mermaid-stroke-color) !important;
}

/*For mermaid diagrams*/
.mermaid-100 svg {
    width:100% !important;
    height:auto !important;
}

.mermaid-90 svg {
    width:90% !important;
    height:auto !important;
}

.mermaid-80 svg {
    width:80% !important;
    height:auto !important;
}

.mermaid-70 svg {
    width:70% !important;
    height:auto !important;
}

.mermaid-60 svg {
    width:60% !important;
    height:auto !important;
}

.mermaid-50 svg {
    width:50% !important;
    height:auto !important;
}

.mermaid-40 svg {
    width:40% !important;
    height:auto !important;
}

.mermaid-30 svg {
    width:30% !important;
    height:auto !important;
}