Mind Elixir Core Documentation

Mind Elixir uses a Snapshot pattern for undo/redo functionality. Instead of calculating diffs or patches, the system saves a complete data snapshot (MindElixirData) for every operation.

Key Architecture Components:

• history: A stack of History entries.
• currentIndex: A pointer tracking the current position in history (-1 indicates the initial state).
• current: The current data snapshot.
• currentSelectedNodes: The context of currently selected nodes used to restore state.

Important Note on Memory: Because it uses full snapshots rather than diffs, memory usage grows linearly with the number of operations.

The Mind Elixir ecosystem includes several specialized packages for extending functionality, such as node menus, XMind export, HTML export, and React integration.

Available packages:

• @mind-elixir/node-menu: Node menu functionality.
• @mind-elixir/node-menu-neo: Neo version of node menus.
• @mind-elixir/export-xmind: Export mind maps to XMind format.
• @mind-elixir/export-html: Export mind maps to HTML.
• mind-elixir-react: React component wrapper for Mind Elixir.

By default, Mind Elixir does not parse markdown. To enable markdown rendering in nodes, you must provide a markdown function in the MindElixir constructor options. This function receives the node text as input and must return the HTML string to be rendered.

let mind = new MindElixir({
  // ... other options
  markdown: text => {
    // Return HTML string here
    return text;
  },
})

For comprehensive markdown support, integrate a third-party library like marked.

1. Install the library:

npm i marked

2. Pass the library's parsing function to the markdown option during initialization.

import { marked } from 'marked'
import MindElixir from 'mind-elixir'

let mind = new MindElixir({
  // ... other options
  markdown: text => marked(text),
})

To export the mind map as an image (JPG, PNG, etc.), use the @zumer/snapdom library.

Note: The mind.exportSvg() method is deprecated and will be removed in future versions. Use snapdom instead.

1. Install @zumer/snapdom.
2. Pass mind.nodes to snapdom().
3. Call .download() on the result.

import { snapdom } from '@zumer/snapdom'

const download = async () => {
  const result = await snapdom(mind.nodes)
  await result.download({ format: 'jpg', filename: 'my-capture' })
}

You can install Mind Elixir as a dependency using npm or include it directly in your HTML via a script tag.

NPM Installation:

npm i mind-elixir -S

Script Tag (CDN): Include the module script in your HTML:

<script type="module" src="https://cdn.jsdelivr.net/npm/mind-elixir/dist/MindElixir.js"></script>

CSS Requirement: If using the script tag, you must also import the styles in your CSS file:

@import 'https://cdn.jsdelivr.net/npm/mind-elixir/dist/style.css';

Undo and Redo operations are bound to keyboard events on the mei.container element:

• Undo: Ctrl+Z
• Redo: Ctrl+Shift+Z or Ctrl+Y

To test the generated files locally using dev.dist.ts, build the project and then link the current directory.

pnpm build
pnpm link ./

To set up the development environment for mind-elixir-core, use pnpm to install dependencies and start the development server.

pnpm i
pnpm dev

Use the snapdom function from @zumer/snapdom to capture the mind map nodes from your Mind Elixir instance (mind.nodes). You can then call .download() on the result to save the image.

Note: The built-in mind.exportSvg() method is deprecated. Use this @zumer/snapdom approach for new projects.

import { snapdom } from '@zumer/snapdom'
// Assuming `mind` is your MindElixir instance

const downloadImage = async () => {
  // 1. Capture the nodes
  const result = await snapdom(mind.nodes)

  // 2. Download as JPG or PNG
  await result.download({
    format: 'jpg', // or 'png'
    filename: 'mind-map-export',
  })
}