mermaid.config.json

{
  "$schema": "https://mermaid.js.org/schemas/config.schema.json",
  "themeCSS": ".actor, .labelBox { fill: #0500e1 !important; ry: 6; rx: 6;}.note { fill: #0500e1 !important; stroke-width: 1px !important; stroke: black !important;}.noteText tspan, .actor tspan, .labelText { fill: white !important;}.messageText { paint-order: stroke !important; stroke: white !important; stroke-width: 6px !important;}.loopText, .loopText tspan { fill: #0500e1 !important;}.actor-line { stroke: #0500e1 !important; stroke-width: 1px;}.messageText, .loopText, .labelText, .noteText { font-size: 15px !important; background: white !important;}.messageText { paint-order: stroke !important; stroke: white !important; stroke-width: 6px !important;}.edgeLabel p { background-color: #DAE8FC !important; border-radius: 6px;}span.edgeLabel[style*=\"color:#ffffff\"] p { background-color: white !important;}.loopLine, line { stroke: #333 !important; stroke-width: 1px; fill: none !important;}.activation0,.activation1{ fill: #CCE5FF; stroke: none;}rect.note,.node rect,.cluster rect{ ry: 6; rx: 6;}.cluster rect { fill:#DAE8FC; stroke:#0500e1;}.labelBkg { background-color: transparent;}.highlightNodes p{ color: white!important;}.edgePaths path{ stroke: #1b1b1d !important;}.marker path,.arrowheadPath { fill: #1b1b1d !important; stroke: #1b1b1d !important;}.nodeLabel p{ color: #1b1b1d;}.highlightNodes rect,.highlightNodes circle,.highlightNodes path{ fill: #0500e1!important; stroke: #1b1b1d!important;}.endpointNode rect{ fill: #ffffff!important; stroke: #1b1b1d!important;}[fill=\"rgba(999,999,999,0)\"] { /* Acts as selector to override background color as details.alert--info */ stroke: none;}@media (prefers-color-scheme: dark) { & { /* mermaid converts to #my-svg { background-color: ..; } */ background-color: #1b1b1d !important; } #arrowhead path{ fill:white !important; stroke:white !important; } .actor, .labelBox { stroke: #00ffff !important; stroke-width: 1.5px !important; fill: #1b1b1d !important; } .note { fill: #00ffff !important; stroke-width: 1px !important; } rect.note{ stroke: #00ffff !important; fill: #1b1b1d !important; } .noteText tspan, .actor tspan, .labelText { fill: white !important; } .actor-line { stroke: #00ffff !important; stroke-width: 1px; } .messageLine0, line { stroke: white !important; } .messageText, .labelText, .noteText { font-size: 15px !important; fill: white !important; } .messageText { paint-order: stroke !important; stroke: #1b1b1d !important; stroke-width: 6px !important; } .loopText, .loopText tspan { font-size: 15px !important; fill: #00ffff !important; } .loopLine, line { stroke: white !important; stroke-width: 1px; } .edgeLabel p { background-color: #001933 !important; color: white!important; border: none!important; } .cluster rect { fill: #001933!important; stroke: #00ffff!important; } .edgePaths path{ stroke: white !important; } .nodeLabel p{ color: white!important; } .marker path, .arrowheadPath { fill: white !important; stroke: white !important; } .activation0, .activation1{ fill: #001933; stroke: white; } .highlightNodes rect, .highlightNodes circle, .highlightNodes path{ fill: #00ffff!important; stroke: #ffffff!important; } .highlightNodes p{ color: #1b1b1d!important; } .endpointNode rect{ fill: #1b1b1d!important; stroke: #ffffff!important; } &:has([fill=\"rgba(999,999,999,0)\"]) { /* Acts as selector to override background color as details.alert--info */ background-color: #193c47 !important; /* var(--ifm-alert-background-color); */ .messageText { stroke: #193c47 !important; } }}",
  "deterministicIds": true,
  "themeVariables": {
    "// background": "bug. ignored. we use --backgroundColor transparent in cli instead, and override in themeCSS"
  },
  "fontFamily": "Tahoma, Verdana, Segoe, sans-serif",
  "actorFontFamily": "Tahoma, Verdana, Segoe, sans-serif",
  "noteFontFamily": "Tahoma, Verdana, Segoe, sans-serif",
  "messageFontFamily": "Tahoma, Verdana, Segoe, sans-serif",
  "personFontFamily": "Tahoma, Verdana, Segoe, sans-serif"
}