Skip to content

feat(mindmap): add coloring by hierarchy depth - #1

Closed
jackroberts236 wants to merge 2 commits into
developfrom
feature/mindmap-depth-colors
Closed

jackroberts236 wants to merge 2 commits into
developfrom
feature/mindmap-depth-colors

Conversation

@jackroberts236

@jackroberts236 jackroberts236 commented Oct 5, 2026 •

Copy link
Copy Markdown
Owner

Summary

Adds a mindmap.colorBy option so mindmaps can be colored by hierarchy level instead of by branch.

  • branch (default): current behavior, so existing diagrams are unchanged.
  • depth: nodes at the same distance from the root share a color across all branches.
---
config:
  mindmap:
    colorBy: depth
---
mindmap
  Root
    Planning
      Tasks
    Delivery
      Releases
Loading

The same mindmap with branch (left) and depth (right), in the classic look with the default theme and the neo look with redux-color:

The same mindmap rendered with colorBy branch and colorBy depth, in classic and neo looks

This PR also fixes HTML labels in the neo look. SVG text switches color with the backgrounds a theme paints, but HTML labels kept the classic label colors. The root label was unreadable on dark and forest (1.2:1 and 1.4:1 contrast), and so were the labels of the second section on neutral (#F4F4F4 text on #eee). This affected branch coloring too, and depth coloring made it more visible. Section labels in redux-dark also change to match the neo text color, so its existing neo snapshot will differ slightly.

Resolves #2

Design decisions

  • Depth mode only changes which section each node is assigned to. The root keeps its own color, depths 1–11 use cScale1–cScale11, and deeper levels repeat. Styling reuses the existing section rules, so every theme and look treats depth colors the same way it treats branch colors, with no new theme variables.
  • Depth counts parent-child relationships, not indentation, so uneven indentation and indented roots color correctly.
  • Neo HTML labels (span) now use the same color as the neo SVG text rules, for section nodes and the root. A Playwright test checks label contrast on the repainted themes in both modes. As a result, the neo HTML root label now uses cScaleLabel0 instead of gitBranchLabel0. Palettes that set only gitBranchLabel0 should also set cScaleLabel0. With useGradient: false, the dark root label drops to 2.8:1, the same contrast its SVG text already had. I kept the SVG rule rather than picking the variable by background, because that would drop forest with useGradient: false from 10.7:1 to 2:1.
  • Open PR fix: preserve mindmap label colors in exports mermaid-js/mermaid#8263 also edits mindmap label styles: it adds a color to .mindmap-node-label. The current renderer doesn't emit that class, and this PR's rules target the label span directly, so the two don't interact and can merge in either order.

@jackroberts236
jackroberts236 force-pushed the feature/mindmap-depth-colors branch from f049054 to eff6be6 Compare October 5, 2026 12:36
@jackroberts236 jackroberts236 changed the title feat: add mindmap coloring by hierarchy depth feat(mindmap): add coloring by hierarchy depth Oct 5, 2026
@jackroberts236
jackroberts236 force-pushed the feature/mindmap-depth-colors branch 4 times, most recently from 8c619b3 to f9d1164 Compare October 6, 2026 11:23
Add `mindmap.colorBy: depth`, which assigns color sections by distance from the
root instead of by top-level branch. Depth follows parent-child relationships,
not indentation, and reuses the existing section styles. `branch` remains the
default.
@jackroberts236
jackroberts236 force-pushed the feature/mindmap-depth-colors branch from f9d1164 to ce983f8 Compare October 6, 2026 12:07
In the neo look, SVG text switches color with the backgrounds the theme
paints, but HTML labels kept the classic label colors. The root label was
unreadable on dark and forest, and so were the labels of neutral's second
section. Give span labels the same color as the neo SVG text, for section
and root nodes. Section labels in redux-dark also change to match the neo
text color.
@jackroberts236
jackroberts236 force-pushed the feature/mindmap-depth-colors branch from ce983f8 to cbf89ab Compare October 6, 2026 12:07
@jackroberts236
jackroberts236 deleted the feature/mindmap-depth-colors branch October 6, 2026 12:07
@jackroberts236

Copy link
Copy Markdown
Owner Author

Moved upstream: mermaid-js#8394

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Mindmap: option to color nodes by hierarchy depth

1 participant