Data Structure

Shape of the data you pass to MindMap via the data prop.

Pass a MindElixirData object to data. The type comes from mind-elixir; mindmapcn does not invent a separate schema.

Minimal example

At minimum you need a root nodeData with id, topic, and optional children.

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" },
    ],
  },
};

Node fields

Common fields for presentation-oriented maps:

  • id, topic — required identity and label
  • children — nested nodes
  • tags, icons — labels and emoji
  • image — { url, width, height, fit? }
  • hyperLink — clickable URL on the node
  • style, branchColor — visual tweaks
  • expanded — initial collapse state

Map-level fields

Optional fields on the root data object:

  • direction — layout side (0 left / 1 right / 2 both)
  • arrows — cross-node links
  • summaries — group brackets over sibling ranges
  • theme — full Mind Elixir theme object (overrides prop theme)
  • compact, meta — layout density and custom metadata

Richer example

import type { MindElixirData } from "mind-elixir";

const data: MindElixirData = {
  nodeData: {
    id: "root",
    topic: "Product",
    children: [
      {
        id: "design",
        topic: "Design",
        icons: ["🎨"],
        tags: ["UI"],
        children: [
          {
            id: "tokens",
            topic: "Tokens",
            // Optional per-node styling
            style: { fontWeight: "bold" },
            branchColor: "#3b82f6",
          },
          {
            id: "logo",
            topic: "Logo",
            image: {
              url: "https://example.com/logo.png",
              width: 64,
              height: 64,
              fit: "contain",
            },
          },
        ],
      },
      {
        id: "docs",
        topic: "Docs",
        hyperLink: "https://example.com/docs",
        expanded: true,
        children: [{ id: "api", topic: "API" }],
      },
    ],
  },
  // Optional map-level fields:
  // direction: 2,
  // arrows: [{ id: "a1", from: "tokens", to: "api", label: "refs" }],
  // summaries: [{ id: "s1", parent: "design", start: 0, end: 1, label: "Scope" }],
};

Learn more

For the complete schema and advanced fields, see Mind Elixir Core.

PreviousUsageNextAPI Reference