Skip to content

fix(ui): make mermaid diagrams readable in dark mode #772

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Anshumancanrock wants to merge 4 commits into
base: master
Choose a base branch
from
+155 −47
Open

fix(ui): make mermaid diagrams readable in dark mode #772

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ced895a
fix(ui): make mermaid diagrams readable in dark mode
Anshumancanrock Aug 13, 2026
6ecc579
fix(ui): keep mermaid colors in the zoom lightbox
Anshumancanrock Aug 19, 2026
de040a3
merge: sync master so volcano mermaid fills can be migrated
Anshumancanrock Aug 20, 2026
2a26995
fix(ui): migrate volcano mermaid fills and rename kai to accent
Anshumancanrock Aug 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 8 additions & 10 deletions blog/hami-core-adopted-by-nvidia-kai-scheduler/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,12 +68,10 @@ graph TD
POD --> SCHED --> INJECT --> WEBHOOK --> CONTAINER --> ENFORCE
DAEMON -. "loads libvgpu.so" .-> CONTAINER

style SCHED fill:#d9f99d,stroke:#4f7d00,stroke-width:2px,color:#1f2937
style INJECT fill:#d9f99d,stroke:#4f7d00,stroke-width:2px,color:#1f2937
style WEBHOOK fill:#dbeafe,stroke:#1a5fb4,stroke-width:2px,color:#1f2937
style DAEMON fill:#dbeafe,stroke:#1a5fb4,stroke-width:2px,color:#1f2937
style CONTAINER fill:#fef3c7,stroke:#b45309,stroke-width:2px,color:#1f2937
style ENFORCE fill:#dcfce7,stroke:#0b6b3c,stroke-width:2px,color:#1f2937
class SCHED,INJECT kai

@mesutoezdil mesutoezdil Sep 2, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the css only defines accent, info, run, ok and bad. there is no .kai rule, so these two nodes lose the green fill they had before. should this be accent?

class WEBHOOK,DAEMON info
class CONTAINER run
class ENFORCE ok
```

The workflow has four phases:
Expand All @@ -93,8 +91,8 @@ graph TD
B2 --> B3["Cannot oversubscribe<br/>hard isolation"]

A3 ~~~ B1
style A3 fill:#fee2e2,stroke:#b3261e,stroke-width:2px,color:#1f2937
style B3 fill:#dcfce7,stroke:#0b6b3c,stroke-width:2px,color:#1f2937
class A3 bad
class B3 ok
```

### Deploy
Expand Down Expand Up @@ -200,8 +198,8 @@ graph TD
HAMI --> Kueue
HAMI --> Koordinator

style HAMI fill:#dbeafe,stroke:#1a5fb4,stroke-width:2px,color:#1f2937
style KAI fill:#d9f99d,stroke:#4f7d00,stroke-width:2px,color:#1f2937
class HAMI info
class KAI accent
```

### It creates real value for users
Expand Down
10 changes: 4 additions & 6 deletions blog/kai-scheduler-hami-gpu-memory-hard-isolation/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,12 +41,10 @@ graph TD
LIB -. "provides libvgpu.so" .-> RUN
RUN -. "writes node-local cache" .-> MON

style KAI fill:#d9f99d,stroke:#4f7d00,stroke-width:2px,color:#1f2937
style WEBHOOK fill:#dbeafe,stroke:#1a5fb4,stroke-width:2px,color:#1f2937
style LIB fill:#dbeafe,stroke:#1a5fb4,stroke-width:2px,color:#1f2937
style RUN fill:#fef3c7,stroke:#b45309,stroke-width:2px,color:#1f2937
style ENF fill:#dcfce7,stroke:#0b6b3c,stroke-width:2px,color:#1f2937
style MON fill:#dbeafe,stroke:#1a5fb4,stroke-width:2px,color:#1f2937
class KAI accent
class WEBHOOK,LIB,MON info
class RUN run
class ENF ok
```

`CUDA_DEVICE_MEMORY_LIMIT` is the contract between scheduling and enforcement. KAI does not need to know how CUDA calls are intercepted, and HAMi-core does not need to know how the quota was calculated. KAI retains its own scheduling logic; it integrates with HAMi-core rather than replacing its scheduler with the full HAMi platform.
Expand Down
8 changes: 4 additions & 4 deletions blog/volcano-ascend-vnpu-soft-slicing/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,10 +124,10 @@ graph TD
VOL --> SCHD --> HOOK --> ENF
HOOK -. "shared-memory accounting" .-> MON

style VOL fill:#d9f99d,stroke:#4f7d00,stroke-width:2px,color:#1f2937
style HOOK fill:#fef3c7,stroke:#b45309,stroke-width:2px,color:#1f2937
style ENF fill:#dcfce7,stroke:#0b6b3c,stroke-width:2px,color:#1f2937
style MON fill:#dbeafe,stroke:#1a5fb4,stroke-width:2px,color:#1f2937
class VOL accent
class HOOK run
class ENF ok
class MON info
```

The Pod contract is minimal: `schedulerName: volcano`, `runtimeClassName: ascend`, the annotation `huawei.com/vnpu-mode: hami-core`, and limits on the two extended resources. Without the annotation, the Pod falls back to the template-based path and can stay Pending on a soft-slicing node.
Expand Down
3 changes: 3 additions & 0 deletions docusaurus.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -290,6 +290,9 @@ module.exports = {
defaultMode: "dark",
respectPrefersColorScheme: false,
},
mermaid: {
Comment thread
Anshumancanrock marked this conversation as resolved.
theme: { light: "default", dark: "dark" },
},
announcementBar,
navbar: {
title: "HAMi",
Expand Down
18 changes: 8 additions & 10 deletions ...cusaurus-plugin-content-blog/hami-core-adopted-by-nvidia-kai-scheduler/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,12 +67,10 @@ graph TD
POD --> SCHED --> INJECT --> WEBHOOK --> CONTAINER --> ENFORCE
DAEMON -. "加载 libvgpu.so" .-> CONTAINER

style SCHED fill:#d9f99d,stroke:#4f7d00,stroke-width:2px,color:#1f2937
style INJECT fill:#d9f99d,stroke:#4f7d00,stroke-width:2px,color:#1f2937
style WEBHOOK fill:#dbeafe,stroke:#1a5fb4,stroke-width:2px,color:#1f2937
style DAEMON fill:#dbeafe,stroke:#1a5fb4,stroke-width:2px,color:#1f2937
style CONTAINER fill:#fef3c7,stroke:#b45309,stroke-width:2px,color:#1f2937
style ENFORCE fill:#dcfce7,stroke:#0b6b3c,stroke-width:2px,color:#1f2937
class SCHED,INJECT kai

@mesutoezdil mesutoezdil Sep 2, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same here, kai is not one of the five classes defined in custom.css.

class WEBHOOK,DAEMON info
class CONTAINER run
class ENFORCE ok
```

工作流程分为四个阶段：
Expand All @@ -92,8 +90,8 @@ graph TD
B2 --> B3["无法超额<br/>硬隔离"]

A3 ~~~ B1
style A3 fill:#fee2e2,stroke:#b3261e,stroke-width:2px,color:#1f2937
style B3 fill:#dcfce7,stroke:#0b6b3c,stroke-width:2px,color:#1f2937
class A3 bad
class B3 ok
```

### 部署方式
Expand Down Expand Up @@ -199,8 +197,8 @@ graph TD
HAMI --> Kueue
HAMI --> Koordinator

style HAMI fill:#dbeafe,stroke:#1a5fb4,stroke-width:2px,color:#1f2937
style KAI fill:#d9f99d,stroke:#4f7d00,stroke-width:2px,color:#1f2937
class HAMI info
class KAI accent
```

### 为用户创造实际价值
Expand Down
10 changes: 4 additions & 6 deletions ...aurus-plugin-content-blog/kai-scheduler-hami-gpu-memory-hard-isolation/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,12 +41,10 @@ graph TD
LIB -. "提供 libvgpu.so" .-> RUN
RUN -. "写入节点本地缓存" .-> MON

style KAI fill:#d9f99d,stroke:#4f7d00,stroke-width:2px,color:#1f2937
style WEBHOOK fill:#dbeafe,stroke:#1a5fb4,stroke-width:2px,color:#1f2937
style LIB fill:#dbeafe,stroke:#1a5fb4,stroke-width:2px,color:#1f2937
style RUN fill:#fef3c7,stroke:#b45309,stroke-width:2px,color:#1f2937
style ENF fill:#dcfce7,stroke:#0b6b3c,stroke-width:2px,color:#1f2937
style MON fill:#dbeafe,stroke:#1a5fb4,stroke-width:2px,color:#1f2937
class KAI accent
class WEBHOOK,LIB,MON info
class RUN run
class ENF ok
```

`CUDA_DEVICE_MEMORY_LIMIT` 是调度层与隔离层之间的契约。KAI 不需要知道 CUDA 调用如何被拦截，HAMi-core 也不需要知道配额如何计算。KAI 保留自己的调度逻辑；它集成的是 HAMi-core，而不是用完整的 HAMi 平台替换自身调度器。
Expand Down
8 changes: 4 additions & 4 deletions i18n/zh/docusaurus-plugin-content-blog/volcano-ascend-vnpu-soft-slicing/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,10 +124,10 @@ graph TD
VOL --> SCHD --> HOOK --> ENF
HOOK -. "共享内存记账" .-> MON

style VOL fill:#d9f99d,stroke:#4f7d00,stroke-width:2px,color:#1f2937
style HOOK fill:#fef3c7,stroke:#b45309,stroke-width:2px,color:#1f2937
style ENF fill:#dcfce7,stroke:#0b6b3c,stroke-width:2px,color:#1f2937
style MON fill:#dbeafe,stroke:#1a5fb4,stroke-width:2px,color:#1f2937
class VOL accent
class HOOK run
class ENF ok
class MON info
```

Pod 侧的契约很简洁：`schedulerName: volcano`、`runtimeClassName: ascend`、注解 `huawei.com/vnpu-mode: hami-core`，以及对两个扩展资源的 limits。少了这个注解，Pod 会退回模板路径，在纯软切分节点上可能一直 Pending。
Expand Down
115 changes: 110 additions & 5 deletions src/css/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,6 +145,23 @@
rgba(241, 246, 250, 0.95)
);
--hami-diagram-outcome-bg: rgba(255, 255, 255, 0.62);

/* mermaid class roles: accent, info, run, ok, bad */
--hami-mermaid-accent-fill: #d9f99d;
--hami-mermaid-accent-stroke: #4f7d00;
--hami-mermaid-accent-text: #1f2937;
--hami-mermaid-info-fill: #dbeafe;
--hami-mermaid-info-stroke: #1a5fb4;
--hami-mermaid-info-text: #1f2937;
--hami-mermaid-run-fill: #fef3c7;
--hami-mermaid-run-stroke: #b45309;
--hami-mermaid-run-text: #1f2937;
--hami-mermaid-ok-fill: #dcfce7;
--hami-mermaid-ok-stroke: #0b6b3c;
--hami-mermaid-ok-text: #1f2937;
--hami-mermaid-bad-fill: #fee2e2;
--hami-mermaid-bad-stroke: #b3261e;
--hami-mermaid-bad-text: #1f2937;
}

:root[data-theme="dark"] {
Expand Down Expand Up @@ -247,6 +264,22 @@
);
--hami-diagram-outcome-bg: rgba(255, 255, 255, 0.04);

--hami-mermaid-accent-fill: #365314;
--hami-mermaid-accent-stroke: #a3e635;
--hami-mermaid-accent-text: #ecfccb;
--hami-mermaid-info-fill: #1e3a5f;
--hami-mermaid-info-stroke: #60a5fa;
--hami-mermaid-info-text: #dbeafe;
--hami-mermaid-run-fill: #78350f;
--hami-mermaid-run-stroke: #fbbf24;
--hami-mermaid-run-text: #fef3c7;
--hami-mermaid-ok-fill: #14532d;
--hami-mermaid-ok-stroke: #4ade80;
--hami-mermaid-ok-text: #dcfce7;
--hami-mermaid-bad-fill: #7f1d1d;
--hami-mermaid-bad-stroke: #f87171;
--hami-mermaid-bad-text: #fee2e2;

--ifm-navbar-search-input-icon: url("data:image/svg+xml;utf8,<svg fill='rgba(255,255,255,0.5)' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' height='16px' width='16px'><path d='M6.02945,10.20327a4.17382,4.17382,0,1,1,4.17382-4.17382A4.15609,4.15609,0,0,1,6.02945,10.20327Zm9.69195,4.2199L10.8989,9.59979A5.88021,5.88021,0,0,0,12.058,6.02856,6.00467,6.00467,0,1,0,9.59979,10.8989l4.82338,4.82338a.89729.89729,0,0,0,1.29912,0,.89749.89749,0,0,0-.00087-1.29909Z'/></svg>");
}

Expand Down Expand Up @@ -408,24 +441,96 @@ body.hami-lightbox-open {
align-items: center;
justify-content: center;
overflow: hidden;
background: #ffffff;
background: var(--ifm-background-color);
border-radius: 12px;
box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
padding: 16px;
cursor: zoom-out;
}

/* Mermaid renders a dark-theme variant in dark mode (light text, dark
fills), so the zoom card must follow the color mode or contrast breaks. */
html[data-theme="dark"] .hami-lightbox__svg {
background: var(--ifm-background-surface-color);
.hami-lightbox__svg .docusaurus-mermaid-container {
width: 100%;
height: 100%;
cursor: zoom-out;
}

.docusaurus-mermaid-container {
cursor: zoom-in;
text-align: center;
}

.docusaurus-mermaid-container svg {
background: transparent !important;

@mesutoezdil mesutoezdil Sep 2, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nothing stops a new diagram from using an unknown class name and silently getting no fill. would a classDef in the diagram, or a lint rule, catch that earlier?

}

/* mermaid leaves subgraph titles / edge labels dark even on the dark theme */

@mesutoezdil mesutoezdil Sep 2, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

checked the targets: docusaurus-mermaid-container is theme-mermaid's own wrapper and nodeLabel, cluster-label, edgeLabel and labelBkg all exist in the mermaid bundle, so these selectors are real.

.docusaurus-mermaid-container .cluster-label,
.docusaurus-mermaid-container .cluster-label span,
.docusaurus-mermaid-container .cluster span,
.docusaurus-mermaid-container .edgeLabel,
.docusaurus-mermaid-container .edgeLabel span,
.docusaurus-mermaid-container .edgeLabel p {
color: var(--ifm-font-color-base) !important;
}

.docusaurus-mermaid-container .cluster-label text,
.docusaurus-mermaid-container .edgeLabel text {
fill: var(--ifm-font-color-base) !important;
}

.docusaurus-mermaid-container .edgeLabel,
.docusaurus-mermaid-container .edgeLabel p,
.docusaurus-mermaid-container .labelBkg {
background-color: var(--ifm-background-color) !important;
}

.docusaurus-mermaid-container .edgeLabel rect {
background-color: var(--ifm-background-color) !important;
fill: var(--ifm-background-color) !important;
}

.docusaurus-mermaid-container .accent {
--hami-mermaid-node-fill: var(--hami-mermaid-accent-fill);
--hami-mermaid-node-stroke: var(--hami-mermaid-accent-stroke);
--hami-mermaid-node-text: var(--hami-mermaid-accent-text);
}

.docusaurus-mermaid-container .info {
--hami-mermaid-node-fill: var(--hami-mermaid-info-fill);
--hami-mermaid-node-stroke: var(--hami-mermaid-info-stroke);
--hami-mermaid-node-text: var(--hami-mermaid-info-text);
}

.docusaurus-mermaid-container .run {
--hami-mermaid-node-fill: var(--hami-mermaid-run-fill);
--hami-mermaid-node-stroke: var(--hami-mermaid-run-stroke);
--hami-mermaid-node-text: var(--hami-mermaid-run-text);
}

.docusaurus-mermaid-container .ok {
--hami-mermaid-node-fill: var(--hami-mermaid-ok-fill);
--hami-mermaid-node-stroke: var(--hami-mermaid-ok-stroke);

@mesutoezdil mesutoezdil Sep 2, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the child combinator needs the shape to sit directly under the classed g. the site is on mermaid 11.17, where some shapes gain an extra wrapper g. did you check this on every shape the diagrams use, or only the default rect?

--hami-mermaid-node-text: var(--hami-mermaid-ok-text);
}

.docusaurus-mermaid-container .bad {
--hami-mermaid-node-fill: var(--hami-mermaid-bad-fill);
--hami-mermaid-node-stroke: var(--hami-mermaid-bad-stroke);
--hami-mermaid-node-text: var(--hami-mermaid-bad-text);
}

.docusaurus-mermaid-container
:is(.accent, .info, .run, .ok, .bad)
> :is(rect, polygon, circle, ellipse, path) {
fill: var(--hami-mermaid-node-fill) !important;
stroke: var(--hami-mermaid-node-stroke) !important;
stroke-width: 2px !important;
}

.docusaurus-mermaid-container :is(.accent, .info, .run, .ok, .bad) :is(.nodeLabel, span) {
color: var(--hami-mermaid-node-text) !important;
}

.mermaid-figure {
margin: 0 0 1.5rem;
text-align: center;
Expand Down
12 changes: 10 additions & 2 deletions src/theme/utils/useImageLightbox.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,13 +116,21 @@ function ensureLightbox() {
const clone = svg.cloneNode(true);
// Mermaid caps the inline SVG at its rendered size; lift the cap and let
// it scale to fit the lightbox box in both dimensions (the viewBox keeps
// the aspect ratio), so the whole diagram is visible without scrolling.
// the aspect ratio), so the whole diagram is always visible without scrolling.
clone.style.maxWidth = "none";
clone.style.width = "100%";
clone.style.height = "100%";
clone.removeAttribute("height");
clone.removeAttribute("width");
svgHost.replaceChildren(clone);

// Node colors are CSS under .docusaurus-mermaid-container. Keep the clone
// in that same host so the zoomed view matches the page.
const wrap = document.createElement("div");
const source = svg.closest(MERMAID_CONTAINER);
wrap.className = source?.className || "docusaurus-mermaid-container";
wrap.appendChild(clone);

svgHost.replaceChildren(wrap);
svgHost.hidden = false;
lightboxImage.hidden = true;
lightboxImage.removeAttribute("src");
Expand Down