Commit 9c3cdc6
feat: fix Mermaid diagrams for light mode and overhaul DependencyGraph UI
Mermaid Diagram Fixes:
- Fix light mode rendering: diagrams now get white background in light mode
instead of broken dark/black background. Enforced at 3 levels (inline SVG
postProcessSvg, CSS .mermaid-diagram-container rules, Mermaid themeCSS)
- Harden theme detection to check both class="dark" and data-theme="dark"
- Auto re-render on theme switch via MutationObserver
- Increase node spacing (50→80), rank spacing (50→70) for readability
- Disable useMaxWidth so diagrams fill their container width
- New postProcessSvg() sets dynamic min-height (300-800px) from viewBox
- Container height bumped to 700px with 500px minimum
- Node labels now 14px font with better padding
- Zoom tooltip made larger and more visible
- FullScreenModal background now matches active theme
DependencyGraph UI Overhaul:
- Replace tiny circles with readable rounded rectangle nodes (180x44px)
- Add 9 color-coded categories (Component, Page, API, Utility, Config,
Data/Model, Hook/State, Test, General) with separate light/dark palettes
- Add 3 switchable layout modes: force-directed, hierarchical tree, radial
- Curved bezier edges with directional arrow markers
- Hover highlights connected nodes/edges, fades unrelated to 15% opacity
- Click to focus and center on a node, click again to navigate
- Rich tooltips with category label and interaction hints
- Legend panel with frosted glass effect showing active categories
- Dot-grid background pattern for spatial reference
- Drop shadow filters for depth perception
- Smooth zoom controls (+, -, fit-to-view) in toolbar
Research:
- Add DIAGRAM_VISION_RESEARCH.md with comprehensive product strategy for
next-gen diagram-based code understanding (Visual Explorer, tech logos,
animated diagrams, commit diffs, AI interaction, 3D exploration)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>1 parent 77d0b2e commit 9c3cdc6
4 files changed
Lines changed: 2114 additions & 285 deletions
0 commit comments