Mindmap React Library: React Flow, Markmap or D3?

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

The best mindmap React library for most projects is React Flow (published as @xyflow/react): it gives you draggable nodes, edges, zoom and pan as React components, and you add the tree layout yourself. If you only need to render a Markdown outline as a read-only map, Markmap is lighter. If you want full control of every pixel, D3’s tree layout inside your own SVG component is the third route.

That answer holds because “mind map” is not one problem. It is a data shape (a tree), a layout (branches fanning out from a center), and an editor (add a child, rename, collapse). Almost no library gives you all three, so choosing well means deciding which part you are willing to write.

Below: what to compare, how the three main options differ, a worked example that builds a small roadmap map step by step, the pitfalls that eat a weekend, and when you should skip the library and make the map in an app instead.

What a mindmap React library actually has to do

Strip away the demos and a mind map component needs five things. Check each against any library before you commit:

• A tree model. Every node has exactly one parent, except the root. If the library thinks in free-form graphs, you enforce the tree rule yourself.
• Automatic layout. Placing children around a parent without overlap. This is the part people underestimate most.
• Editing. Add child, add sibling, rename, delete, drag to re-parent. Keyboard shortcuts matter more than they sound.
• Collapse and expand. A map with 80 nodes is unreadable unless branches fold away.
• Export. PNG, SVG or JSON. Users will ask for it the day after you ship.

Rendering is the easy part. Layout and editing are where the time goes, and where the libraries differ.

The three realistic options

React Flow: a node editor you teach to be a mind map

React Flow, documented at reactflow.dev, is a general node-and-edge editor. You pass it arrays of nodes and edges, and it handles dragging, selection, zoom, pan, a minimap and controls. Custom nodes are ordinary React components, so a node can hold an input field, a collapse button or a color picker.

What it does not do is decide where nodes go. You compute positions yourself, usually by running a layout library (dagre and ELK are the common choices) over your tree and writing the results back into node state. That is a real dependency and a real chunk of code, but it is also why the result can look exactly like you want.

Markmap: Markdown in, mind map out

Markmap turns a Markdown outline into an interactive, zoomable map, with D3 doing the drawing. Headings and list items become branches. It is the fastest path from nothing to a good-looking map, and the source of truth stays a plain text file you can diff in git.

The cost is editing. The map is a view of the Markdown, so changes happen in the text, not by clicking a node. For documentation sites and read-only previews that is a feature. For a product where users build maps by hand it is a wall.

D3 tree layout plus your own SVG: maximum control

D3’s hierarchy and tree functions compute node coordinates from nested data. You then render the result in a normal React component with <g> and <path> elements, letting React own the DOM and D3 only do the math. You get any style you can draw, and you also write every interaction yourself: pan, zoom, drag, hit-testing, undo.

Choose this when the map is the product and you have a designer. Skip it when the map is a feature on a settings page.

Walkthrough: a 3-branch roadmap map in React Flow

The scenario: a small team wants a planning view with a root called “Q1 Launch” and three branches — Product, Marketing, Support — with five children each. That is 19 nodes in total, small enough to read, big enough that hand-placing positions gets tedious.

1. Keep the data as a tree, not as nodes

Store one nested object: { id, label, children: [] }. Derive the flat nodes and edges arrays from it on every change. If you store React Flow’s arrays as the source of truth, collapsing a branch means filtering edges by hand and you will get orphan nodes.

2. Run the layout on the tree

Feed the tree to a layout library with a left-to-right direction, a horizontal gap of about 60 pixels, and a vertical gap of about 24. Write the returned coordinates onto each node’s position. For this 19-node map the layout is instant; recompute it only when the tree changes, not on every render.

3. Build one custom node

A single component with a label, a small chevron to collapse its children, and a plus button that appends a child. Register it as the only node type. Resist adding a second type until a real need appears.

4. Wire the keyboard

Tab adds a child, Enter adds a sibling, Delete removes the selected branch. This is about thirty lines and it is what makes the map feel like a mind map instead of a diagram tool.

5. Add export last

Serialize the tree to JSON first — it is trivial and covers saving. Image export needs more work, because you have to render the whole canvas rather than the visible viewport.

Realistically that is a day for a working prototype and several more for polish: undo, touch gestures, large-map performance. It is a good trade if the map lives inside your product. If you only needed the map for yourself, it is a poor one.

Pitfalls that cost a weekend

Layout thrash. Recomputing layout inside render makes dragging stutter. Compute it in a memo or an event handler, keyed on the tree.

Collapsed branches and selection. If the selected node is hidden by a collapse, keyboard shortcuts act on something the user cannot see. Move selection to the collapsed parent.

Text that does not fit. Node width has to be known before layout runs. Measure labels or cap them at a fixed width with wrapping; otherwise nodes overlap after the first long sentence.

Mobile. Pinch-zoom and drag fight each other on touch screens. Test on a real phone before you decide the library “works”.

When you do not need a library at all

Developers often start a React mind map because they want a map, not because they want to maintain one. If the goal is to get a topic, an article or a set of notes into a structured map, building an editor is the long way round.

That is the job MindMap AI does on iPhone, iPad and Mac: you paste a topic, text or a link and it lays out the map on an infinite canvas, with the AI features in Pro. Our guide to turning an article into a mind map shows the flow, and for planning use cases see mind mapping for project planning. You can prototype the structure of your own React map there first, then rebuild only what your product truly needs.

The rule of thumb: build when the map is a feature your users touch every day; use a finished app when the map is a tool for your own thinking. The app is on the MindMap AI page, free to download.

FAQ

What is the best React library for mind maps?

React Flow is the best general choice because it handles dragging, zoom, pan and custom node components, and your tree layout plugs into it. Markmap is better for read-only maps generated from Markdown. If you need a fully custom look, D3’s tree layout rendered through your own SVG components gives the most control at the highest cost.

Does React Flow lay out nodes automatically?

No. React Flow renders and edits nodes at positions you supply. To get an automatic tree, run a layout library such as dagre or ELK over your data and write the computed coordinates back to each node. Recompute only when the tree changes, so dragging stays smooth.

Can I render a Markdown outline as a mind map in React?

Yes. Markmap converts a Markdown outline into an interactive map, and you can mount its view inside a React component. Headings and list items become branches. The map is read-focused, so edits are made in the Markdown source rather than by clicking nodes.

Should I build my own mind map component or use an app?

Build one only if the map is a core part of your product. Layout, keyboard editing, collapse, touch gestures and export add up to days of work. For personal planning or study, an existing app gets you a usable map in minutes and costs nothing to try.

← All articles