Advanced Mind Maps
Building on our custom chart collection, we’re introducing advanced capabilities for the <MindMap /> component.
1. Horizontal Layouts
Vertical trees are great, but sometimes a left-to-right flow is more natural, especially for deep hierarchies.
- Full Stack Developer
- Frontend
- HTML/CSS
- JavaScript
- Frameworks
- React
- Vue
- Svelte
-
-
- Backend
- Languages
- Node.js
- Python
- Go
-
- Databases
- SQL
- NoSQL
-
-
- DevOps
- Docker
- CI/CD
- Cloud (AWS/GCP)
-
-
Usage
Simply set direction="horizontal". Colors cascade down branches automatically!
<MindMap
direction="horizontal"
data={{ ... }}
/>2. Linear Algebra Syllabus
A complex, multi-colored example using the standard vertical tree layout.
- Linear Algebra
- Vectors
- Addition
- Dot Product
- Cross Product
-
- Matrices
- Multiplication
- Inverse
- Determinants
-
- Spaces
- Vector Space
- Null Space
- Column Space
-
- Eigen
- Eigenvalues
- Eigenvectors
-
-
3. Organic Variant
Use variant="organic" for a looser, more sketch-like feel (best with vertical layouts).
- Creative Process
- Inspiration
- Nature
- Art
-
- Drafting
- Sketch
- Outline
-
- Refining
-
