Visual Mind Map Builder for Brainstorming & Planning Create visual mind maps with branching nodes for brainstorming, planning, and idea organization.

Under the hood, the tool relies on a tree data structure composed of nodes, each containing an id, text, children array, and color. This data structure is recursively traversed and rendered as a hierarchical layout using React's JSX syntax. The rendering function, implemented as the `renderNode` method, utilizes CSS flexbox to achieve a radial layout where child nodes are indented and displayed below their parent node. When adding a child node, the tool pushes the new node onto the parent's children array, triggering a re-render of the affected subtree.

The tool also leverages React hooks such as `useState`, `useCallback`, and `useRef` to manage state and optimize performance. For instance, `useState` is used to store the root node and selected node id, while `useCallback` memoizes functions like `findNode` and `updateNode` to prevent unnecessary re-renders. The `useRef` hook is employed to create a reference to the canvas element, allowing for efficient rendering of the mind map.

Browser APIs are also used, specifically the `navigator.clipboard` API, which enables users to copy the mind map as text with a single click. This feature relies on the `exportText` function, which recursively traverses the tree data structure and generates a plain text representation of the mind map using indentation to denote node hierarchy.

In terms of file formats, the tool does not explicitly support any specific format for importing or exporting mind maps. However, it can export the mind map as plain text, allowing users to easily share or import their diagrams into other applications that support text-based input. The color-coded system used by the tool relies on a predefined palette of eight colors, implemented using CSS variables and hex codes.

The recursive component rendering approach enables efficient handling of unlimited branching depth, making it possible for users to create complex mind maps with multiple levels of nested nodes. This is achieved through the `renderNode` method, which recursively calls itself for each child node, allowing the tool to render deeply nested trees without performance degradation.