Usage

The MindMap component initializes the mind map canvas, handles theming, and provides context for child components. It is designed for presentation-first maps; use readonly when viewers should not edit nodes.

Use the onChange callback to respond to user interactions with the mind map. This callback receives the updated data whenever a node is added, edited, moved, or deleted.

Create a view-only mind map by disabling editing features. This is perfect for displaying organizational charts, knowledge bases, or any static content that shouldn't be modified by users.

Pass a markdown function to render rich text in node topics. Bring your own parser (for example marked or markdown-it), or use a small custom implementation for bold, italic, and code as shown below.

Enable compact for tighter spacing. Useful when embedding dense knowledge maps or fitting more nodes into a card-sized viewport.

When nodes include remote images, exporting the map to a file can fail because of cross-origin restrictions. Pass imageProxy to rewrite those image URLs through a same-origin or CORS-friendly proxy so the export can capture them. This is only needed for image generation / export — not for normal on-screen viewing.

Control how the mind map branches expand by setting the direction prop. Choose between left (0), right (1), or both sides (2) to match your content structure and visual preferences.

The MindMap component supports multiple languages for its built-in menus and prompts. Set the locale prop to match your application's language or user preferences.

By default, the mind map automatically adapts to your document's theme. You can override this behavior by explicitly setting the theme prop to force a specific appearance.