React Flow Mind Map: How to Build One, and When Not To

Published November 12, 2026 · Updated November 12, 2026 · 7 min read · by the Sakura5 team

To build a React Flow mind map, render your ideas as nodes and edges with the React Flow library, store the tree in state, and add the two things React Flow doesn’t give you out of the box: an automatic layout and a fast way to add a child node. It’s a good fit if you want a mind map inside your own web app. It’s a poor fit if you just want a mind map for yourself.

React Flow is a node-based UI library, not a mind mapping tool. It handles dragging, zooming, selecting and connecting boxes on a canvas. Everything that makes a map feel like a mind map — a central idea, branches that fan out, new nodes appearing in the right place — is code you write.

This guide covers what React Flow does and doesn’t do, the build in five steps, a worked example with real numbers, the traps that slow people down, and when you’re better off skipping the build entirely.

What React Flow gives you, and what it leaves out

React Flow (published as @xyflow/react) gives you a pannable, zoomable canvas, draggable nodes, edges that follow them, handles to connect things, a minimap and controls. Nodes and edges are plain arrays of objects, which makes the data easy to save as JSON.

It does not give you a mind map data model. There’s no concept of a root, no parent-child rules, no keyboard shortcut for “add a sibling,” and no layout. If you drop twelve nodes on the canvas without positions, they stack on top of each other at the origin. The library’s own examples include a mind map, which is a useful starting point, but treat it as a demo of the pieces rather than a finished editor.

That split is the whole decision. If you need a mind map as a feature of a product — embedded, themed, saved to your own database — React Flow saves you months of canvas work. If you need a mind map as a thinking tool, the canvas was never the hard part.

How to build a React Flow mind map in five steps

Budget an afternoon for a working prototype and a few days for something you’d let other people use.

1. Model the map as a tree, not a graph

A mind map is a tree: one root, every other node has exactly one parent. Keep that rule in your data. Store each node with an id, a parent id and a label, and derive React Flow’s edges from the parent ids. If you store edges separately, they drift out of sync with the tree the first time someone deletes a node.

2. Write one custom node

Register a custom node type through the nodeTypes prop. It should render an editable label and two handles: a target on one side and a source on the other. Make the label edit in place on double-click. Define the nodeTypes object outside your component, or memoize it — otherwise React Flow re-creates every node on each render and your inputs lose focus while you type.

3. Add child and sibling shortcuts

Mind mapping is fast because you never leave the keyboard. Bind Tab to “add child to the selected node” and Enter to “add sibling.” Each shortcut appends one object to your tree, selects the new node and puts its label into edit mode. Without this, people give up after ten nodes.

4. Run an automatic layout

React Flow doesn’t place nodes for you. For a left-to-right tree, feed your nodes and edges into a layout library such as dagre or ELK, or use d3-hierarchy for a classic radial look, then write the computed x and y back into your nodes. Measure real node sizes first; layout run against guessed sizes gives overlapping boxes as soon as a label wraps.

5. Persist and export

Save the tree, not the rendered nodes. A flat array of id, parent and label rows round-trips cleanly to JSON or a database. Export to an image or PDF is a separate job — React Flow renders to the DOM, so you’ll typically capture it with a DOM-to-image library.

A worked example: a 30-node launch plan

Say you’re building a planning page for a small team, and the first test map is a product launch with one root, five branches — Product, Marketing, Support, Legal, Metrics — and about five leaves each. That’s 31 nodes in total.

Data. You write 31 rows: one root with no parent, five rows pointing at the root, 25 pointing at their branch. Edges are generated, giving 30 of them. Total code for the model is a few lines.

First render. With no layout, all 31 nodes sit at position 0,0 and look like a single box. This is the moment most people think React Flow is broken. It isn’t; it’s waiting for positions.

Layout. After a dagre pass with roughly 50px between ranks, you get a left-to-right tree. Then you notice two Legal leaves with long labels overlapping their neighbours, because the layout assumed a fixed 150px width. You switch to measured widths and the overlap disappears.

Editing. Add Tab and Enter shortcuts and the map becomes usable. The thing you find on the first real session is that every new node triggers a full re-layout, and the whole tree jumps. The fix is to animate position changes, or to lay out only the affected subtree.

Total effort for this prototype: a day, give or take. For comparison, the same 31-node map in a finished tool takes a couple of minutes, which is the honest trade-off to weigh before you start.

Traps that cost the most time

Re-render storms. Putting the whole tree in one React state object and updating it on every drag makes large maps stutter. Keep position state in React Flow’s own node state and only write to your tree on drag end.

Collapsing branches. Users expect to fold a branch. Hide descendants by setting the hidden flag on those nodes and their edges, and re-run layout so the gap closes.

Undo. There isn’t any by default. Snapshot the tree on each committed change and keep a short stack.

Mobile. Touch dragging, tiny handles and an on-screen keyboard fighting the canvas make phone use awkward. If phones matter, test early.

When you shouldn’t build it

Building makes sense when the map is part of your product. If you only want to organise your own thinking, the code is the wrong place to spend time. Our comparison of online mind map makers covers what to look for in a ready-made one, and if you’re unsure whether you want a map or a list at all, read mind map vs outline first.

For the common case — you have notes, an article or a PDF and want a structure out of it — Mindmap AI on iPhone, iPad and Mac does it without a build: paste the text or a link, get a first map back, and flip it to an outline to check the structure. If you do go the React Flow route for your own product, mapping your content in Mindmap AI first is a cheap way to settle the branches before you write a line of layout code.

FAQ

Can React Flow make a mind map?

Yes, but it supplies only the canvas. React Flow handles nodes, edges, zooming and dragging. You add the tree data model, a custom node with editable labels, keyboard shortcuts for adding children and an automatic layout such as dagre or d3-hierarchy. Its examples include a mind map to start from.

How do I lay out a React Flow mind map automatically?

React Flow doesn’t lay nodes out itself. Pass your nodes and edges to a layout library such as dagre, ELK or d3-hierarchy, measure the real node sizes first, then write the returned x and y coordinates back into your nodes. Re-run the layout after adding, deleting or collapsing a node.

Is React Flow free to use?

The core library is open source, so you can build a mind map with it without paying. The maintainers also sell an optional Pro tier with extra examples and support. Check the current terms on the React Flow site before relying on any specific plan or feature in a commercial product.

Do I need React Flow if I only want to make a mind map?

No. React Flow is for developers adding diagrams to their own apps. If you want a finished map of your notes or a document, use a mind mapping app. You’ll get a usable map in minutes rather than a prototype after a day of layout and state code.

← All articles