WIP Reactflow interactive diagrams #2954
Draft
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Implement React Flow-based interactive diagrams for Docusaurus with the following features: Components: - MermaidReactFlow: Main component with BrowserOnly wrapper for SSG compatibility - NavigableDiagram: Manages navigation state and diagram loading - ClickableNode: Custom node with click handlers and visual indicators Features: - Click navigation: Blue nodes link to other diagrams - Back button: Navigate through history stack - Theme integration: Adapts to Docusaurus light/dark mode - Link metadata: Parse :::link:/path/to/diagram.mmd syntax - Keyboard accessible: Tab/Enter/Space navigation Dependencies: - reactflow@^11.11.4: Interactive node-based UI - dagre@^0.8.5: Graph layout algorithm Test artifacts: - 4 sample diagrams with navigation flow - Test MDX page at docs/test-interactive-diagrams.mdx Styling: - SCSS partial with theme variables - Responsive design - Accessibility features (high contrast, reduced motion)
- Add useSafeColorMode wrapper to handle missing context gracefully - Fallback to 'light' mode when ColorModeProvider is not available - Resolves: Hook useColorMode is called outside the <ColorModeProvider> - Fixes BrowserOnly component hydration issues in Docusaurus
- Make node text visible in dark mode using --ifm-font-color-base - Increase back button font weight to 600 for better visibility - Improve back button contrast in dark mode - Add explicit color rules for dark mode node content - Ensure consistent text colors across light/dark themes
- Remove <Background /> component from ReactFlow - Clean up unused imports (Background, MiniMap) - Provides cleaner diagram visualization without grid pattern
Implemented Framer Motion (motion package) to provide smooth 300ms crossfade transitions when navigating between diagrams. The AnimatePresence component with mode="wait" ensures the outgoing diagram fades out before the new one fades in, creating a polished user experience. Key changes: - Added motion package (v12.23.24) - Wrapped ReactFlow in motion.div with opacity animations - Used currentDiagram as key to trigger transitions on navigation - Set transition duration to 300ms with easeInOut easing Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
- Remove Controls import and usage from NavigableDiagram.tsx - Remove showControls prop from component and types interface - Update README.md to remove showControls from API documentation - Update test-interactive-diagrams.mdx to remove showControls prop usage
Changed from var(--ifm-global-radius) to 12px for more prominent rounded corners.
- Add layoutSubgraphs() for Phase 1: independent subgraph layouts - Add layoutMetaGraph() for Phase 2: meta-graph with containers - Add createReactFlowElements() for Phase 3: React Flow elements - Replace layoutGraph() to orchestrate three-phase approach - Implement shape-based color scheme using CSS variables - Support subgraph rendering with proper parent-child relationships
- Create minimal component to display subgraph title in header - Visual styling handled by CSS and inline styles from layout engine - No drag functionality needed for static documentation diagrams
- Import and register SubgraphNode as 'group' node type - Add fitViewOptions with 20% padding for better centering - Set min/max zoom bounds (0.5x to 1.5x) for better UX - Prevent including hidden nodes in viewport calculations
- Add CSS variables for 5 node shape colors (rect, diamond, circle, stadium, round) - Add CSS variables for 5 rotating subgraph colors - Implement dark mode support with reduced opacity - Add subgraph container styles with title header - Update text color handling for better contrast on colored backgrounds - Remove forced black color to support shape-based theming
- test-subgraph-simple.mmd: Basic subgraph with nodes and edges - test-subgraph-multiple.mmd: Multiple subgraphs (Frontend/Backend) - test-subgraph-shapes.mmd: Mixed node shapes in subgraph (rect, diamond, stadium, circle) - test-subgraph-navigation.mmd: Subgraph with clickable navigation node
- Remove Docusaurus built-in Mermaid block causing useColorMode SSR error - Keep only MermaidReactFlow component which handles SSR correctly
- Add subgraph support and shape-based coloring to features - Document subgraph syntax with examples - Add SubgraphNode.tsx to file structure - Document 5 node colors by shape (rect, diamond, circle, stadium, round) - Document 5 rotating subgraph container colors - Add supported Mermaid features section - Remove subgraph from future enhancements (now implemented) - Update dark mode documentation for transparency
- Add 5-color rotating palette for edges (blue, green, orange, purple, pink) - Match arrow marker colors to edge colors - Add styled edge labels with colored backgrounds and borders - Implement dark mode support for edge labels - Improve visual differentiation between multiple edges - Maintain edge type styling (solid, dashed, dotted, animated, heavy)
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
No description provided.