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-svelte 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.

Previous Usage Next API Reference