Summary
The current mind map tutorial in React Flow is helpful as an introduction, but it feels quite minimal and does not reflect more advanced or production-style UX patterns (e.g., collapsible nodes, hierarchical abstraction).
I’d like to propose enhancing the documentation by adding an advanced mind map example that includes collapsible nodes and a more structured, notebook-style interaction model.
Problem
The existing tutorial:
- Demonstrates basic node/edge usage well
- But lacks:
- Collapsible node patterns
- Hierarchical abstraction
- Real-world UX patterns for large graphs
For more complex use cases (knowledge graphs, note systems, mind maps), it becomes hard to scale the current approach.
Proposed Improvement
Add a new example or documentation section, for example:
“Advanced Mind Maps”
Including:
- Collapsible nodes (expand/collapse children)
- Clear parent-child hierarchy
- State management for node visibility
- Optional animations for better UX
Example Concept
A mind map where:
- Nodes can be expanded/collapsed
- Collapsed nodes hide their children
- The structure behaves more like a notebook or knowledge tree
This is similar to how modern tools (e.g., Notebook-style knowledge maps) present hierarchical information.
Why this would help
- Improves real-world usability of React Flow
- Helps developers build scalable mind map / knowledge graph UIs
- Provides a reusable pattern instead of only low-level primitives
Contribution
I’ve already implemented a working version of this idea with:
- Collapsible nodes
- Structured hierarchy
- Cleaner UX for larger graphs
I’d be happy to:
- Adapt it to React Flow standards
- Add it as an example
- Improve documentation around it
Questions
- Would maintainers be open to adding an advanced mind map example?
- Should this live under:
- "examples/"
- or as an extension of the current tutorial?
Happy to align with preferred structure before opening a PR.
Additional Context
Implementation reference (WIP):
https://github.com/satadeep3927/aime-mindmap/blob/main/src/components/mind-map.tsx
Summary
The current mind map tutorial in React Flow is helpful as an introduction, but it feels quite minimal and does not reflect more advanced or production-style UX patterns (e.g., collapsible nodes, hierarchical abstraction).
I’d like to propose enhancing the documentation by adding an advanced mind map example that includes collapsible nodes and a more structured, notebook-style interaction model.
Problem
The existing tutorial:
For more complex use cases (knowledge graphs, note systems, mind maps), it becomes hard to scale the current approach.
Proposed Improvement
Add a new example or documentation section, for example:
“Advanced Mind Maps”
Including:
Example Concept
A mind map where:
This is similar to how modern tools (e.g., Notebook-style knowledge maps) present hierarchical information.
Why this would help
Contribution
I’ve already implemented a working version of this idea with:
I’d be happy to:
Questions
Happy to align with preferred structure before opening a PR.
Additional Context
Implementation reference (WIP):
https://github.com/satadeep3927/aime-mindmap/blob/main/src/components/mind-map.tsx