Variable DIAGRAM_CSSConst
DIAGRAM_CSS: "\n.mjd{--bg:var(--mj-bg-surface,#fff);--ink:var(--mj-text-primary,#1f2328);--muted:var(--mj-text-muted,#59636e);--line:var(--mj-border-strong,#8c959f);--grid:var(--mj-border-default,#d1d9e0);--node:var(--mj-bg-surface,#fff);--stroke:var(--mj-border-strong,#8c959f);--lane:var(--mj-bg-surface-card,#f6f8fa);--lane-alt:var(--mj-bg-surface-sunken,#eff2f5);--lane-exc:var(--mj-status-error-bg,#fff5f4);--lane-wait:var(--mj-status-warning-bg,#fffbeb);--accent:var(--mj-brand-primary,#0969da);--accent-tint:color-mix(in srgb,var(--accent) 12%,var(--bg));--success:var(--mj-status-success,#1a7f37);--success-tint:var(--mj-status-success-bg,#dafbe1);--warn:var(--mj-status-warning,#9a6700);--warn-tint:var(--mj-status-warning-bg,#fff8c5);--error:var(--mj-status-error,#cf222e);--error-tint:var(--mj-status-error-bg,#ffebe9);font-family:system-ui,-apple-system,Segoe UI,sans-serif}\n.mjd .bg{fill:var(--bg)}\n.mjd .title{fill:var(--ink);font-size:18px;font-weight:650}\n.mjd .subtitle{fill:var(--muted);font-size:13px}\n.mjd .lane rect{fill:var(--lane);stroke:var(--grid)}\n.mjd .lane.alt rect{fill:var(--lane-alt)}\n.mjd .lane[data-lane-role=exceptions] rect,.mjd .lane[data-lane-role=terminal] rect{fill:var(--lane-exc)}\n.mjd .lane[data-lane-role=waiting] rect{fill:var(--lane-wait)}\n.mjd .lane line{stroke:var(--grid)}\n.mjd .lane text{fill:var(--muted);font-size:11.5px;font-weight:650;letter-spacing:.05em;text-transform:uppercase}\n.mjd .lifeline{stroke:var(--grid);stroke-width:1.5;stroke-dasharray:5 5}\n.mjd .seq-dot{fill:var(--accent);stroke:var(--bg);stroke-width:1.5}\n.mjd .node rect,.mjd .node polygon{fill:var(--node);stroke:var(--stroke);stroke-width:1.25}\n.mjd .node[data-main-path] rect,.mjd .node[data-main-path] polygon{fill:var(--accent-tint);stroke:var(--accent);stroke-width:2}\n.mjd .node[data-node-kind=success] rect{fill:var(--success-tint);stroke:var(--success);stroke-width:1.75}\n.mjd .node[data-node-kind=waiting] rect{fill:var(--warn-tint);stroke:var(--warn);stroke-width:1.75}\n.mjd .node[data-node-kind=error] rect{fill:var(--error-tint);stroke:var(--error);stroke-width:1.75}\n.mjd .node rect.step-pill,.mjd .node[data-main-path] rect.step-pill,.mjd .node[data-node-kind] rect.step-pill{fill:var(--accent);stroke:none}\n.mjd .node .step-txt{fill:var(--bg);font-size:10px;font-weight:700}\n.mjd .node .lbl{fill:var(--ink);font-size:13.5px;font-weight:600}\n.mjd .node .sub{fill:var(--muted);font-size:11.5px}\n.mjd .edge path{fill:none;stroke:var(--line);stroke-width:1.5}\n.mjd .edge[data-edge-role=error] path{stroke:var(--error);stroke-dasharray:5 4}\n.mjd .edge[data-edge-role=return] path,.mjd .edge[data-edge-role=conditional] path{stroke:var(--line);stroke-dasharray:5 4}\n.mjd .edge[data-main-path] path{stroke:var(--accent);stroke-width:2.5}\n.mjd .edge[data-edge-role=return][data-main-path] path{stroke:var(--line);stroke-width:1.75;stroke-dasharray:5 4}\n.mjd .edge text{fill:var(--muted);font-size:11.5px;paint-order:stroke;stroke:var(--bg);stroke-width:4px;stroke-linejoin:round}\n.mjd .mk-line{fill:var(--line)} .mjd .mk-accent{fill:var(--accent)} .mjd .mk-error{fill:var(--error)}\n.mjd .card rect{fill:var(--node);stroke:var(--grid)}\n.mjd .card .bar{fill:var(--accent);stroke:none}\n.mjd .card[data-card-tone=success] .bar{fill:var(--success)}\n.mjd .card[data-card-tone=warning] .bar{fill:var(--warn)}\n.mjd .card[data-card-tone=error] .bar{fill:var(--error)}\n.mjd .card .ct{fill:var(--ink);font-size:13px;font-weight:600}\n.mjd .card .cb{fill:var(--muted);font-size:12px}\n.mjd .legend text{fill:var(--muted);font-size:11.5px}\n" = ...
Shared base CSS for
<svg class="mjd" data-mj-diagram="1">. Embedded inside the SVG's own<style>for standalone rendering and injected into the host document / shadow root byDiagramVieweras a fallback.