# mindmapcn

mindmapcn is a free, open-source shadcn-style registry of ready-to-use React mind map components. It is built on Mind Elixir, styled with Tailwind CSS, and intended for projects that already use shadcn/ui. Optimized for presentation-first maps (org charts, knowledge maps, project plans); editing works but is secondary.

Website: https://mindmapcn.mind-elixir.com
Docs: https://mindmapcn.mind-elixir.com/docs
Registry index: https://mindmapcn.mind-elixir.com/mindmaps/registry.json
Source: https://github.com/SSShooter/mindmapcn

## Install the mind map component

Prerequisites: Tailwind CSS and shadcn/ui already set up in the project.

Run:

```bash
npx shadcn@latest add https://mindmapcn.mind-elixir.com/mindmaps/mindmap.json
```

This installs `mind-elixir`, `lucide-react`, and `@zumer/snapdom`, and copies the component to `components/ui/mindmap.tsx` by default.

Then import from `@/components/ui/mindmap`:

```tsx
"use client";

import { MindMap, MindMapControls } from "@/components/ui/mindmap";
import type { MindElixirData } from "mind-elixir";

const data: MindElixirData = {
  nodeData: {
    id: "root",
    topic: "Mind Map",
    children: [
      { id: "a", topic: "Topic A" },
      { id: "b", topic: "Topic B" },
    ],
  },
};

export function MyMindMap() {
  return (
    // Give the container an explicit height — the map fills 100% of its parent.
    <div className="h-[500px] w-full border rounded-lg overflow-hidden relative">
      <MindMap data={data} readonly>
        <MindMapControls />
      </MindMap>
    </div>
  );
}
```

## Usage guidance for agents

- Always wrap `<MindMap>` in a parent with an explicit height (for example `h-[500px]`). The map uses full width/height of its parent; a parent without height collapses to a blank area.
- In the Next.js App Router, the consuming file must be a Client Component (`"use client"`) because the map uses browser APIs.
- Prefer `readonly` for presentation, embedding, org charts, knowledge maps, and other view-only diagrams.
- Leave the map interactive only when the user explicitly needs in-canvas editing. This library is not a full mind-map editor UI (no built-in undo toolbar or inspector).
- Use `fit` (default `true`) so the map scales to the viewport on load.
- Use `compact` for denser layouts in cards or small viewports.
- Use `direction`: `0` left, `1` right, `2` both/side (default).
- Use `theme` only to force light/dark; omit it to follow the document / system theme (works with next-themes).
- Use `markdown` when node topics need rich text — pass a custom parser (for example marked); do not assume a built-in markdown engine.
- Use `imageProxy` only when export fails due to CORS on remote node images; it is not required for on-screen display.
- For the full instance API (methods, events, advanced options), use `useMindMap().mind` and see Mind Elixir docs: https://github.com/ssshooter/mind-elixir-core


## Components

Install once with `npx shadcn@latest add https://mindmapcn.mind-elixir.com/mindmaps/mindmap.json`, then import these APIs from `@/components/ui/mindmap`:

- [MindMap](/llm/mindmap) - Root Mind Elixir map component for presentation-first diagrams.
- [MindMapControls](/docs/api-reference) - Zoom, fit-to-view, and export controls.
- [useMindMap](/docs/api-reference) - Access the Mind Elixir instance and load state from child components.

## Documentation

- [Introduction](/docs) - Project overview and presentation-first philosophy
- [Installation](/docs/installation) - Install command and first example
- [Usage](/docs/usage) - Readonly, onChange, direction, theme, markdown, compact, imageProxy
- [Data Structure](/docs/data-structure) - Shape of `MindElixirData` / `nodeData`
- [API Reference](/docs/api-reference) - Component props and `useMindMap`

## Blocks

None yet.