Mind Elixir

https://github.com/ssshooter/mind-elixir-core
Admin
Mind Elixir is an open-source, framework-agnostic JavaScript mind map core library offering fluent...
Tokens:22,564
Snippets:166
Trust Score:9.9
License:MIT
Update:4 weeks ago
Show doc for...
Tokens:
Raw
### Install Integration Guide with npx skills add

Source: https://github.com/ssshooter/mind-elixir-core/blob/master/readme.md

Installs the integration guide for mind-elixir-core into your project. Run this command in your project directory to add the guide.

```bash
npx skills add ssshooter/mind-elixir-core
```

--------------------------------

### Install dependencies and run dev server

Source: https://github.com/ssshooter/mind-elixir-core/blob/master/readme.md

Install dependencies and start the development server for the Mind Elixir core project.

```bash
pnpm i
pnpm dev
```

--------------------------------

### Initialize MindElixir with data in v1.0.0

Source: https://github.com/ssshooter/mind-elixir-core/wiki/Breaking-Change

In version 1.0.0, data must be passed to init() instead of options. This example shows creating a new MindElixir instance, installing a plugin, and initializing with new data, an example, or data from getAllData().

```javascript
import MindElixir, { E } from 'mind-elixir'
import example from 'mind-elixir/dist/example1'

let mind = new MindElixir(options)

mind.install(plugin) // install your plugin

// create new map data
const data = MindElixir.new('new topic')
// or `example`
// or the data return from `.getAllData()`
mind.init(data) // <--- HERE
```

--------------------------------

### Initialize MindElixir with options and data

Source: https://github.com/ssshooter/mind-elixir-core/blob/master/readme.md

Initialize a MindElixir instance with options, install a plugin, create new map data, and initialize the mind map. The options include direction, toolbar, keypress, overflowHidden, mouseSelectionButton, context menu with locale and custom menu items, and a before hook for insertSibling. The example shows how to use MindElixir.new() to create data and MindElixir.E() to get a node.

```javascript
import MindElixir from 'mind-elixir'
import { en } from 'mind-elixir/i18n'
import 'mind-elixir/style.css'
import example from 'mind-elixir/dist/example1'

let options = {
  el: '#map', // or HTMLDivElement
  direction: MindElixir.LEFT,
  toolBar: true, // default true
  keypress: true, // default true
  overflowHidden: false, // default false
  mouseSelectionButton: 0, // 0 for left button, 2 for right button, default 0
  contextMenu: {
    locale: en, // [cn,zh_CN,zh_TW,en,ru,ja,pt,it,es,fr,ko,ro,da,fi,de,nl,nb,sv]
    focus: true,
    link: true,
    extend: [
      {
        name: 'Node edit',
        onclick: () => {
          alert('extend menu')
        },
      },
    ],
  }, // default true
  before: {
    insertSibling(type, obj) {
      return true
    },
  },
  // Custom markdown parser (optional)
  // markdown: (text) => customMarkdownParser(text), // provide your own markdown parser function
}

let mind = new MindElixir(options)

mind.install(plugin) // install your plugin

// create new map data
const data = MindElixir.new('new topic')
// or `example`
// or the data return from `.getData()`
mind.init(data)

// get a node
MindElixir.E('node-id')
```

--------------------------------

### Install mind-elixir with npm

Source: https://github.com/ssshooter/mind-elixir-core/blob/master/skills/streaming-mindmap/SKILL.md

Install the mind-elixir library using npm. This is the first step to set up the project.

```bash
npm install mind-elixir
```

--------------------------------

### Install marked library

Source: https://github.com/ssshooter/mind-elixir-core/blob/master/skills/customize-markdown/SKILL.md

Install the marked library via npm to enable full markdown support.

```bash
npm i marked
```

--------------------------------

### Install @mind-elixir/export-mindmap

Source: https://github.com/ssshooter/mind-elixir-core/blob/master/skills/export-mindmap-image/SKILL.md

Install the package as a dependency using npm.

```bash
npm install @mind-elixir/export-mindmap
```

--------------------------------

### Plaintext format syntax examples

Source: https://github.com/ssshooter/mind-elixir-core/blob/master/skills/plaintext-format/SKILL.md

Syntax examples for the plaintext format: node, node with ID, node with style, bidirectional link, forward link, summary (all), and summary (N nodes).

```plaintext
- My Node
```

```plaintext
- Node A [^id1]
```

```plaintext
- Node {"color": "#ff0000"}
```

```plaintext
> [^a] (10,20) <-connects-> (-10,-20) [^b]
```

```plaintext
> [^a] (10,20) >-leads to-> (-10,-20) [^b]
```

```plaintext
} Overview
```

```plaintext
}:3 Last three items
```

--------------------------------

### Integrate plaintext conversion with MindElixir initialization

Source: https://github.com/ssshooter/mind-elixir-core/blob/master/skills/plaintext-format/SKILL.md

Complete integration example: parses plaintext into MindElixirData, initializes a MindElixir instance with direction RIGHT, and renders the data with mind.init().

```javascript
import MindElixir from 'mind-elixir'
import { plaintextToMindElixir } from 'mind-elixir/plaintextConverter'

// 1. Parse plaintext
const plaintext = `
- My Mind Map
  - Topic 1
    - Subtopic 1.1
    - Subtopic 1.2
  - Topic 2
`

const data = plaintextToMindElixir(plaintext)

// 2. Initialize Mind Elixir
const mind = new MindElixir({
  el: '#map',
  direction: MindElixir.RIGHT,
})

mind.init(data)
```

--------------------------------

### Export diagram as image with snapdom

Source: https://github.com/ssshooter/mind-elixir-core/blob/master/readme/es.md

Install @zumer/snapdom, then use snapdom to export the mind map as a JPG image.

```typescript
import { snapdom } from '@zumer/snapdom'

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

--------------------------------

### Install Mind Elixir with npm/pnpm/yarn

Source: https://github.com/ssshooter/mind-elixir-core/blob/master/skills/integrate-mind-elixir/SKILL.md

Install Mind Elixir using npm, pnpm, or yarn. The npm command uses the -S flag to save as a dependency.

```bash
npm i mind-elixir -S
# or
pnpm i mind-elixir
# or
yarn add mind-elixir
```

--------------------------------

### Integrate marked with MindElixir initialization

Source: https://github.com/ssshooter/mind-elixir-core/blob/master/skills/customize-markdown/SKILL.md

Use marked as the markdown renderer in MindElixir options. Requires installing marked and importing both marked and MindElixir.

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

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

--------------------------------

### Update documentation with api-extractor

Source: https://github.com/ssshooter/mind-elixir-core/blob/master/readme.md

Install api-extractor globally, maintain /src/docs.ts, and generate documentation with pnpm doc and pnpm doc:md.

```bash
# Install api-extractor
pnpm install -g @microsoft/api-extractor
# Maintain /src/docs.ts
# Generate docs
pnpm doc
pnpm doc:md
```

--------------------------------

### Plain Text Format Example for Streaming

Source: https://github.com/ssshooter/mind-elixir-core/blob/master/skills/streaming-mindmap/SKILL.md

Example of the plain text format that Mind Elixir can parse incrementally. It shows indentation-based hierarchy, summary markers (`}:2`, `}`), node IDs (`[^id]`), color attributes (`{color: "#e87a90"}`), and bidirectional/unidirectional link syntax. Use this format when streaming because it can be parsed before the full text is received.

```text
- Root Node
  - Child Node 1
    - Child Node 1-1
    - Child Node 1-2
    - Child Node 1-3
    - }:2 Summary of first two nodes
  - Child Node 2
    - Child Node 2-1 [^id1]
    - Child Node 2-2 [^id2]
    - Child Node 2-3 {color: "#e87a90"}
    - > [^id1] <-Bidirectional Link-> [^id2]
  - Child Node 3
    - Child Node 3-1 [^id3]
    - Child Node 3-2 [^id4]
    - Child Node 3-3 [^id5]
    - > [^id3] >-Unidirectional Link-> [^id4]
    - > [^id3] <-Unidirectional Link-< [^id5]
  - Child Node 4
    - Child Node 4-1 [^id6]
    - Child Node 4-2 [^id7]
    - Child Node 4-3 [^id8]
    - } Summary of all previous nodes
    - Child Node 4-4
  - > [^id1] <-Link position is not restricted, as long as the id can be found during rendering-> [^id8]
```

--------------------------------

### Export PNG using domToPng from @ssshooter/modern-screenshot

Source: https://github.com/ssshooter/mind-elixir-core/blob/master/readme/ko.md

Requires installing @ssshooter/modern-screenshot. Uses domToPng on mind.nodes with options for cloning, padding, and quality. Downloads the resulting data URL as a PNG.

```typescript
import { domToPng } from '@ssshooter/modern-screenshot'

const download = async () => {
  const dataUrl = await domToPng(mind.nodes, {
    onCloneNode: node => {
      const n = node as HTMLDivElement
      n.style.position = ''
      n.style.top = ''
      n.style.left = ''
      n.style.bottom = ''
      n.style.right = ''
    },
    padding: 300,
    quality: 1,
  })
  const link = document.createElement('a')
  link.download = 'screenshot.png'
  link.href = dataUrl
  link.click()
}
```

--------------------------------

### Export PNG using exportPng method

Source: https://github.com/ssshooter/mind-elixir-core/blob/master/readme/ko.md

Uses the mind.exportPng() method to get a Blob and triggers a download. Requires a Mind Elixir instance. Creates a temporary anchor element to download the file.

```typescript
const mind = {
  /** mind elixir instance */
}
const downloadPng = async () => {
  const blob = await mind.exportPng() // Get a Blob!
  if (!blob) return
  const url = URL.createObjectURL(blob)
  const a = document.createElement('a')
  a.href = url
  a.download = 'filename.png'
  a.click()
  URL.revokeObjectURL(url)
}
```

--------------------------------

### Complete Mind Elixir Plaintext Example

Source: https://github.com/ssshooter/mind-elixir-core/blob/master/skills/plaintext-format/SKILL.md

Combines all advanced features: custom IDs, inline styling, summary nodes, and both bidirectional and unidirectional links. Demonstrates a complete mind map in plaintext format with phases and cross-links.

```text
- Project Planning
  - Phase 1: Research [^phase1]
    - Market Analysis {"color": "#3298db"}
    - Competitor Study {"color": "#3298db"}
    - }:2 Research Summary
  - Phase 2: Development [^phase2]
    - Frontend {"color": "#2ecc71"}
    - Backend {"color": "#2ecc71"}
    - Testing {"color": "#f39c12"}
    - } Development Summary
  - Phase 3: Launch [^phase3]
    - Marketing
    - Deployment
  - > [^phase1] (50,0) >-Leads to-> (-50,0) [^phase2]
  - > [^phase2] >-Leads to-> [^phase3]
```

--------------------------------

### Download and export mind map as image

Source: https://github.com/ssshooter/mind-elixir-core/blob/master/skills/export-mindmap-image/SKILL.md

Use `downloadImage` to download the mind map as PNG, JPEG, or WEBP. Use `exportImage` to get a URL for preview or custom handling.

```typescript
import { downloadImage, exportImage } from '@mind-elixir/export-mindmap'
// Assuming `mind` is your MindElixir instance

// Download as PNG / JPEG / WEBP
await downloadImage(mind, 'png') // format: 'png' | 'jpeg' | 'webp'

// Or get the URL for preview / custom handling instead of downloading
const url = await exportImage(mind, 'png')
```

--------------------------------

### Change theme dynamically with changeTheme

Source: https://github.com/ssshooter/mind-elixir-core/blob/master/skills/integrate-mind-elixir/SKILL.md

Use the changeTheme method to update the theme at runtime. Provide a new theme object with name, palette, and cssVar. This example uses the 'Latte' theme.

```javascript
mind.changeTheme({
  name: 'Latte',
  palette: ['#dd7878', '#ea76cb', '#8839ef', '#e64553', '#fe640b', '#df8e1d', '#40a02b', '#209fb5', '#1e66f5', '#7287fd'],
  cssVar: {
    '--main-color': '#444446',
    '--main-bgcolor': '#ffffff',
    '--color': '#777777',
    '--bgcolor': '#f6f6f6',
  },
})
```

--------------------------------

### plaintextToMindElixir conversion example

Source: https://github.com/ssshooter/mind-elixir-core/blob/master/skills/mindmap-html-output/SKILL.md

Converts a plain indented bullet list into MindElixirData using the CDN module. Supports anchors, node styling, summaries, and arrows.

```javascript
import { plaintextToMindElixir } from 'https://cdn.jsdelivr.net/npm/mind-elixir@5/dist/PlaintextConverter.js'
const data = plaintextToMindElixir(`- 中心主题
  - 分支 1
    - 子节点
  - 分支 2`)
```

--------------------------------

### Get Data Methods

Source: https://github.com/ssshooter/mind-elixir-core/blob/master/skills/integrate-mind-elixir/SKILL.md

Retrieve the current mind map data as an object or a serialized string using getData() and getDataString().

```javascript
const data = mind.getData() // Returns the current data object
const dataString = mind.getDataString() // Returns serialized data string
```

--------------------------------

### Custom markdown parsing in MindElixir

Source: https://github.com/ssshooter/mind-elixir-core/blob/master/readme.md

Shows how to disable markdown (default), provide a custom markdown parser, or use a markdown library like marked. The custom parser example converts bold, italic, and inline code.

```javascript
// Disable markdown (default)
let mind = new MindElixir({
  // markdown option omitted - no markdown processing
})

// Use custom markdown parser
let mind = new MindElixir({
  markdown: text => {
    // Your custom markdown implementation
    return text
      .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
      .replace(/\*(.*?)\*/g, '<em>$1</em>')
      .replace(/`(.*?)`/g, '<code>$1</code>')
  },
})

// Use any markdown library (e.g., marked, markdown-it, etc.)
import { marked } from 'marked'
let mind = new MindElixir({
  markdown: text => marked(text),
})
```

--------------------------------

### Basic Mind Elixir Plaintext Structure

Source: https://github.com/ssshooter/mind-elixir-core/blob/master/skills/plaintext-format/SKILL.md

Shows the basic indentation-based structure of the Mind Elixir plaintext format: each line represents a node, with 2 spaces per level defining hierarchy. The root node starts with a dash followed by a space, and child nodes are indented relative to their parent.

```text
- Root Node
  - Child Node 1
    - Child Node 1-1
    - Child Node 1-2
  - Child Node 2
    - Child Node 2-1
```

--------------------------------

### Build and link for testing dev.dist.ts

Source: https://github.com/ssshooter/mind-elixir-core/blob/master/readme.md

Build the project and link it locally to test generated files with dev.dist.ts.

```bash
pnpm build
pnpm link ./
```

--------------------------------

### Initialize Mind Elixir with options and data

Source: https://github.com/ssshooter/mind-elixir-core/blob/master/skills/integrate-mind-elixir/SKILL.md

Initialize Mind Elixir: import the library, define options (el, direction, toolBar, keypress, overflowHidden, mouseSelectionButton, contextMenu, before), create an instance, and initialize with data. The contextMenu locale is set to English (en) and includes a custom 'Node edit' menu item. The before hook allows intercepting insertSibling operations. Use MindElixir.new('new topic') to create new data or pass existing data from a backend.

```javascript
import MindElixir from 'mind-elixir'
import { en } from 'mind-elixir/i18n'
import 'mind-elixir/style.css'

// 1. Define options
let options = {
  el: '#map', // or HTMLDivElement
  direction: MindElixir.LEFT,
  toolBar: true, // default true
  keypress: true, // default true
  overflowHidden: false, // default false
  mouseSelectionButton: 0, // 0 for left button, 2 for right button, default 0
  contextMenu: {
    locale: en, // [cn,zh_CN,zh_TW,en,ru,ja,pt,it,es,fr,ko,ro,da,fi,de,nl,nb,sv]
    focus: true,
    link: true,
    extend: [
      {
        name: 'Node edit',
        onclick: () => {
          alert('extend menu')
        },
      },
    ],
  }, // default true
  before: {
    insertSibling(type, obj) {
      return true
    },
  },
  // Custom markdown parser (optional)
  // markdown: (text) => customMarkdownParser(text), // provide your own markdown parser function
}

// 2. Create instance
let mind = new MindElixir(options)

// 3. Initialize with data
// Create new data
const data = MindElixir.new('new topic')
// Or use existing data passed from backend
// const data = { ... }

mind.init(data)
```

--------------------------------

### Définir et changer un thème avec theme et changeTheme()

Source: https://github.com/ssshooter/mind-elixir-core/blob/master/readme/fr.md

Définit un thème personnalisé via l'option theme dans les options de Mind Elixir, puis change le thème dynamiquement avec mind.changeTheme(). Les thèmes incluent un nom, une palette de couleurs pour les lignes et des variables CSS à remplacer. Notez que Mind Elixir n'observe pas prefers-color-scheme ; le changement de thème doit être fait manuellement.

```javascript
const options = {
  // ...
  theme: {
    name: 'Dark',
    // palette de couleurs des lignes principales
    palette: ['#848FA0', '#748BE9', '#D2F9FE', '#4145A5', '#789AFA', '#706CF4', '#EF987F', '#775DD5', '#FCEECF', '#DA7FBC'],
    // remplacer les variables css
    cssVar: {
      '--main-color': '#ffffff',
      '--main-bgcolor': '#4c4f69',
      '--color': '#cccccc',
      '--bgcolor': '#252526',
      '--panel-color': '255, 255, 255',
      '--panel-bgcolor': '45, 55, 72',
    },
    // toutes les variables voir /src/index.less
  },
  // ...
}

// ...

mind.changeTheme({
  name: 'Latte',
  palette: ['#dd7878', '#ea76cb', '#8839ef', '#e64553', '#fe640b', '#df8e1d', '#40a02b', '#209fb5', '#1e66f5', '#7287fd'],
  cssVar: {
    '--main-color': '#444446',
    '--main-bgcolor': '#ffffff',
    '--color': '#777777',
    '--bgcolor': '#f6f6f6',
  },
})
```

--------------------------------

### Initialize with custom theme

Source: https://github.com/ssshooter/mind-elixir-core/blob/master/skills/integrate-mind-elixir/SKILL.md

Set the theme during initialization by passing a theme object with name, palette, and cssVar. The palette defines main line colors, and cssVar overrides CSS variables. All variables are listed in /src/index.less.

```javascript
const options = {
  // ...
  theme: {
    name: 'Dark',
    // main lines color palette
    palette: ['#848FA0', '#748BE9', '#D2F9FE', '#4145A5', '#789AFA', '#706CF4', '#EF987F', '#775DD5', '#FCEECF', '#DA7FBC'],
    // overwrite css variables
    cssVar: {
      '--main-color': '#ffffff',
      '--main-bgcolor': '#4c4f69',
      '--color': '#cccccc',
      '--bgcolor': '#252526',
      '--panel-color': '255, 255, 255',
      '--panel-bgcolor': '45, 55, 72',
    },
    // all variables see /src/index.less
  },
  // ...
}
```

--------------------------------

### Define and apply custom theme

Source: https://github.com/ssshooter/mind-elixir-core/blob/master/readme/ko.md

Shows how to set a theme in options and change it at runtime with mind.changeTheme. Includes palette and cssVar overrides. Mind Elixir does not observe prefers-color-scheme; change theme manually.

```javascript
const options = {
  // ...
  theme: {
    name: 'Dark',
    // main lines color palette
    palette: ['#848FA0', '#748BE9', '#D2F9FE', '#4145A5', '#789AFA', '#706CF4', '#EF987F', '#775DD5', '#FCEECF', '#DA7FBC'],
    // overwrite css variables
    cssVar: {
      '--main-color': '#ffffff',
      '--main-bgcolor': '#4c4f69',
      '--color': '#cccccc',
      '--bgcolor': '#252526',
      '--panel-color': '255, 255, 255',
      '--panel-bgcolor': '45, 55, 72',
    },
    // all variables see /src/index.less
  },
  // ...
}

// ...

mind.changeTheme({
  name: 'Latte',
  palette: ['#dd7878', '#ea76cb', '#8839ef', '#e64553', '#fe640b', '#df8e1d', '#40a02b', '#209fb5', '#1e66f5', '#7287fd'],
  cssVar: {
    '--main-color': '#444446',
    '--main-bgcolor': '#ffffff',
    '--color': '#777777',
    '--bgcolor': '#f6f6f6',
  },
})
```

--------------------------------

### Import MindElixir and styles

Source: https://github.com/ssshooter/mind-elixir-core/blob/master/readme.md

Import the MindElixir class and its default stylesheet.

```javascript
import MindElixir from 'mind-elixir'
import 'mind-elixir/style.css'
```

--------------------------------

### Mind Elixir initialization and export functions

Source: https://github.com/ssshooter/mind-elixir-core/blob/master/skills/mindmap-html-output/assets/template.html

Imports MindElixir from CDN, initializes the mind map with provided data, and defines export functions for PNG, SVG, JSON, and HTML. The HTML export rebuilds a standalone page with the current data.

```javascript
import MindElixir from 'https://cdn.jsdelivr.net/npm/mind-elixir@5/dist/MindElixir.js' // ============================================================ // 编辑这里：把 \_\_MINDMAP\_\_DATA\_\_ 换成你的 MindElixirData JSON // （由 AI 在生成时填入，无需你手动修改） // ============================================================ const mindmapData = \_\_MINDMAP\_\_DATA\_\_ // ============================================================ const options = { el: '#map', direction: MindElixir.RIGHT, // MindElixir.LEFT / RIGHT toolBar: true, contextMenu: true, keypress: true, // markdown: (text) => yourMarkdownParser(text), // 可选：支持话题内富文本 } const mind = new MindElixir(options) mind.init(mindmapData) // ---------- 导出工具 ---------- function download(blob, filename) { const url = URL.createObjectURL(blob) const a = document.createElement('a') a.href = url a.download = filename a.click() URL.revokeObjectURL(url) } document.getElementById('btn-png').onclick = async () => { const blob = await mind.exportPng() // 内置方法，无需额外依赖 if (blob) download(blob, 'mindmap.png') } document.getElementById('btn-svg').onclick = () => { const blob = mind.exportSvg() download(blob, 'mindmap.svg') } document.getElementById('btn-json').onclick = () => { const blob = new Blob([mind.getDataString()], { type: 'application/json' }) download(blob, 'mindmap.me.json') } // 用当前（可能被编辑过的）数据重建一个独立的 HTML 文件 document.getElementById('btn-html').onclick = () => { const dataJson = JSON.stringify(mind.getData(), null, 2) download(new Blob([buildHtml(dataJson)], { type: 'text/html' }), 'mindmap.html') } function buildHtml(dataJson) { return `<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Mind Map</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mind-elixir@5/dist/MindElixir.css" /> <style>html,body{margin:0;height:100%}#map{width:100vw;height:100vh}</style> </head> <body> <div id="map"></div> <script type="module"> import MindElixir from 'https://cdn.jsdelivr.net/npm/mind-elixir@5/dist/MindElixir.js' const mind = new MindElixir({ el: '#map', direction: MindElixir.RIGHT, toolBar: true, contextMenu: true, keypress: true }) mind.init(${dataJson}) <\/script> </body> </html>` }
```

--------------------------------

### Load mind map from file with fetch and plaintextToMindElixir

Source: https://github.com/ssshooter/mind-elixir-core/blob/master/skills/plaintext-format/SKILL.md

Loads a plaintext mind map from a .txt or .md file via fetch, converts it with plaintextToMindElixir, and initializes the mind map with mind.init().

```javascript
// Load from file
const response = await fetch('/mindmaps/project.txt')
const plaintext = await response.text()
const data = plaintextToMindElixir(plaintext)
mind.init(data)
```

--------------------------------

### Custom theme with palette and CSS variables

Source: https://github.com/ssshooter/mind-elixir-core/blob/master/readme/es.md

Define a theme object with a palette and CSS variables, then apply it using changeTheme.

```javascript
const options = {
  // ...
  theme: {
    name: 'Oscuro',
    // paleta de colores de las líneas principales
    palette: ['#848FA0', '#748BE9', '#D2F9FE', '#4145A5', '#789AFA', '#706CF4', '#EF987F', '#775DD5', '#FCEECF', '#DA7FBC'],
    // sobrescribir variables css
    cssVar: {
      '--main-color': '#ffffff',
      '--main-bgcolor': '#4c4f69',
      '--color': '#cccccc',
      '--bgcolor': '#252526',
      '--panel-color': '255, 255, 255',
      '--panel-bgcolor': '45, 55, 72',
    },
    // todas las variables ver /src/index.less
  },
  // ...
}

// ...

mind.changeTheme({
  name: 'Latte',
  palette: ['#dd7878', '#ea76cb', '#8839ef', '#e64553', '#fe640b', '#df8e1d', '#40a02b', '#209fb5', '#1e66f5', '#7287fd'],
  cssVar: {
    '--main-color': '#444446',
    '--main-bgcolor': '#ffffff',
    '--color': '#777777',
    '--bgcolor': '#f6f6f6',
  },
})
```

--------------------------------

### Summary Node for All Previous Siblings

Source: https://github.com/ssshooter/mind-elixir-core/blob/master/skills/plaintext-format/SKILL.md

Creates a summary node that visually groups all previous siblings. The format `} Summary text` summarizes all previous nodes at the same level.

```text
- Root
  - Node 1
  - Node 2
  - Node 3
  - } Summary of all above nodes
```

--------------------------------

### Exporter en PNG avec exportPng()

Source: https://github.com/ssshooter/mind-elixir-core/blob/master/readme/fr.md

Exporte la carte mentale en PNG en utilisant la méthode exportPng() de l'instance Mind Elixir. Récupère un Blob, crée une URL objet, déclenche le téléchargement via un lien temporaire, puis révoque l'URL. Nécessite une instance Mind Elixir existante.

```typescript
const mind = {
  /** instance mind elixir */
}
const downloadPng = async () => {
  const blob = await mind.exportPng() // Obtenez un Blob !
  if (!blob) return
  const url = URL.createObjectURL(blob)
  const a = document.createElement('a')
  a.href = url
  a.download = 'filename.png'
  a.click()
  URL.revokeObjectURL(url)
}
```

--------------------------------

### Generate AI mind maps with plaintext prompt and refresh

Source: https://github.com/ssshooter/mind-elixir-core/blob/master/skills/plaintext-format/SKILL.md

Shows how to generate mind maps with an AI by prompting for plaintext format, then parsing the AI response with plaintextToMindElixir and refreshing the mind map with mind.refresh().

```javascript
// Prompt example for AI
const prompt = `
Generate a mind map in plaintext format about "Web Development".
Use this format:
- Root Topic
  - Subtopic 1
    - Detail 1.1
  - Subtopic 2
`

// Then parse the AI response
const aiResponse = await callAI(prompt)
const data = plaintextToMindElixir(aiResponse)
mind.refresh(data)
```

--------------------------------

### CSS for full-screen mind map and toolbar

Source: https://github.com/ssshooter/mind-elixir-core/blob/master/skills/mindmap-html-output/assets/template.html

Styles the map container to fill the viewport and positions a fixed toolbar with buttons. The toolbar uses a semi-transparent background and hover effects.

```css
html, body { margin: 0; height: 100%; } #map { width: 100vw; height: 100vh; } .toolbar { position: fixed; top: 12px; right: 12px; z-index: 1000; display: flex; gap: 8px; background: rgba(255, 255, 255, .92); padding: 8px 10px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0, 0, 0, .15); font-family: system-ui, -apple-system, "Segoe UI", sans-serif; } .toolbar button { border: none; background: #4c6ef5; color: #fff; padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 13px; } .toolbar button.secondary { background: #868e96; } .toolbar button:hover { opacity: .9; }
```

--------------------------------

### Create mind map container

Source: https://github.com/ssshooter/mind-elixir-core/blob/master/skills/integrate-mind-elixir/SKILL.md

Create a container element for the mind map and style it with a fixed height and full width.

```html
<div id="map"></div>
<style>
  #map {
    height: 500px;
    width: 100%;
  }
</style>
```

--------------------------------

### MindElixirData JSON structure

Source: https://github.com/ssshooter/mind-elixir-core/blob/master/skills/mindmap-html-output/SKILL.md

Defines the required nodeData root and optional direction, theme, arrows, summaries, and compact fields. Use stable ids to avoid re-layout. Optional styling, tags, icons, hyperlinks, and images are commented out.

```json
{
  nodeData: {            // required: the root node
    topic: '中心主题',
    id: 'root',          // stable ids help avoid re-layout fl/jump
    expanded: true,
    // style: { fontSize: '20', color: '#d9434e', background: '#fff0f0' },
    // tags: ['重要'],
    // icons: ['⭐'],
    // hyperLink: 'https://example.com',
    // image: { url: 'https://.../logo.png', height: 80, width: 80 },
    children: [
      {
        topic: '分支 1',
        id: 'b1',
        expanded: true,
        children: [
          { topic: '子节点 1-1', id: 'b1-1' },
          { topic: '子节点 1-2', id: 'b1-2' },
        ],
      },
      { topic: '分支 2', id: 'b2' },
    ],
  },
  direction: 1,          // optional: 0|1|2|3 — 或设置 options.direction
  theme: {               // optional
    name: 'Latte',
    palette: ['#dd7878', '#ea76cb', '#8839ef', '#40a02b', '#209fb5', '#1e66f5'],
    cssVar: { '--main-color': '#444446', '--main-bgcolor': '#ffffff', '--color': '#777', '--bgcolor': '#f6f6f6' },
  },
  // arrows: [...], summaries: [...], compact: false
}
```

--------------------------------

### generateMainBranch function returning SVG path

Source: https://github.com/ssshooter/mind-elixir-core/wiki/Recipes

Creates an SVG path string for the main branch of a mind map. Adjusts x1 based on branch direction and uses quadratic Bezier curves for smooth transitions. Used when generating the root-level connector line.

```TypeScript
function generateMainBranch(this: MindElixirInstance, { x1, y1, x2, y2, direction }: MainLineParams) {
  const root = this.map.querySelector('me-root') as HTMLElement
  if (this.direction === SIDE) {
    if (direction === 'lhs') {
      x1 = x1 - root.offsetWidth / 8
    } else {
      x1 = x1 + root.offsetWidth / 8
    }
  }
  return `M ${x1} ${y1} V ${y2 > y1 ? y2 - 20 : y2 + 20} C ${x1} ${y2} ${x1} ${y2} ${x2 > x1 ? x1 + 20 : x1 - 20} ${y2} H ${x2}`
}
```

--------------------------------

### Load Mind Elixir via script tag

Source: https://github.com/ssshooter/mind-elixir-core/blob/master/skills/integrate-mind-elixir/SKILL.md

Load Mind Elixir via a script tag from the jsDelivr CDN. Use this when not using a package manager.

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

--------------------------------

### Import Mind Elixir CSS

Source: https://github.com/ssshooter/mind-elixir-core/blob/master/skills/integrate-mind-elixir/SKILL.md

Import the Mind Elixir CSS when using the script tag. Required for proper styling.

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

--------------------------------

### Diff mind map plaintext file with git diff

Source: https://github.com/ssshooter/mind-elixir-core/blob/master/skills/plaintext-format/SKILL.md

Shows how the plaintext format is merge-friendly for version control by using git diff on a mind map file.

```bash
# Easy to diff and merge in Git
git diff mindmap.txt
```

--------------------------------

### Node References with Custom IDs

Source: https://github.com/ssshooter/mind-elixir-core/blob/master/skills/plaintext-format/SKILL.md

Shows how to assign custom IDs to nodes using the syntax `[^customId]` at the end of the topic text. These IDs are used for cross-referencing in links.

```text
- Root
  - Node A [^id1]
  - Node B [^id2]
```

--------------------------------

### Listen to MindElixir events

Source: https://github.com/ssshooter/mind-elixir-core/blob/master/readme.md

Listen to MindElixir events: 'operation' for actions like insertSibling, addChild, removeNode, beginEdit, finishEdit, and moveNode; 'selectNodes' for selected nodes; 'expandNode' for node expansion.

```javascript
mind.bus.addListener('operation', operation => {
  console.log(operation)
  // return {
  //   name: action name,
  //   obj: target object
  // }

  // name: [insertSibling|addChild|removeNode|beginEdit|finishEdit]
  // obj: target

  // name: moveNode
  // obj: {from:target1,to:target2}
})

mind.bus.addListener('selectNodes', nodes => {
  console.log(nodes)
})

mind.bus.addListener('expandNode', node => {
  console.log('expandNode: ', node)
})
```

--------------------------------

### Operation Guards with before Hooks

Source: https://github.com/ssshooter/mind-elixir-core/blob/master/skills/integrate-mind-elixir/SKILL.md

Use before hooks to intercept and control user operations, supporting async functions for validation or saving data before changes.

```javascript
let mind = new MindElixir({
  // ... other options
  before: {
    // Return true to allow, false to prevent
    // Supports async functions
    async addChild(el, obj) {
      try {
        await saveDataToDb()
        return true
      } catch (err) {
        return false // Operation blocked
      }
    },
    // Other hooks: insertSibling, removeNode, moveNode, etc.
  },
})
```

--------------------------------

### Summary Node for Previous N Siblings

Source: https://github.com/ssshooter/mind-elixir-core/blob/master/skills/plaintext-format/SKILL.md

Creates a summary node that groups only the previous N siblings, using the format `}:N Summary text` (e.g., `}:2` for the last 2 nodes).

```text
- Root
  - Node 1
  - Node 2
  - Node 3
  - }:2 Summary of Node 2 and Node 3
```

--------------------------------

### Removed options in v3.0.0

Source: https://github.com/ssshooter/mind-elixir-core/wiki/Breaking-Change

In version 3.0.0, these options were removed. Instead, adjust the CSS style of `.map-container me-main > me-wrapper` to control node gaps.

```text
mainNodeVerticalGap: 15, // default 25
mainNodeHorizontalGap: 15, // default 65
```

--------------------------------

### HTML toolbar buttons for export actions

Source: https://github.com/ssshooter/mind-elixir-core/blob/master/skills/mindmap-html-output/assets/template.html

Provides buttons for exporting PNG, SVG, saving data (JSON), and exporting HTML. These buttons trigger the corresponding JavaScript functions.

```html
导出 PNG 导出 SVG 保存数据 导出 HTML
```

--------------------------------

### Use SCST directly to screenshot DOM elements

Source: https://github.com/ssshooter/mind-elixir-core/blob/master/skills/export-mindmap-image/SKILL.md

SCST functions `domToBlob`, `domToDataURL`, and `domToObjectURL` can screenshot any DOM element. `domToObjectURL` is most memory-efficient for downloads.

```typescript
import { domToBlob, domToDataURL, domToObjectURL } from '@mind-elixir/export-mindmap'

const blob = await domToBlob(element, 'png', options)
const dataUrl = await domToDataURL(element, 'jpeg', options)
const objectUrl = await domToObjectURL(element, 'webp', options) // most memory-efficient for downloads
```

--------------------------------

### MindElixir node data structure

Source: https://github.com/ssshooter/mind-elixir-core/blob/master/readme.md

Shows the complete node data structure used by MindElixir, including topic, id, style, expanded, parent, tags, icons, hyperLink, image (with required url, height, width), and children.

```javascript
// whole node data structure up to now
const nodeData = {
  topic: 'node topic',
  id: 'bd1c24420cd2c2f5',
  style: { fontSize: '32', color: '#3298db', background: '#ecf0f1' },
  expanded: true,
  parent: null,
  tags: ['Tag'],
  icons: ['😀'],
  hyperLink: 'https://github.com/ssshooter/mind-elixir-core',
  image: {
    url: 'https://raw.githubusercontent.com/ssshooter/mind-elixir-core/master/images/logo2.png', // required
    // you need to query the height and width of the image and calculate the appropriate value to display the image
    height: 90, // required
    width: 90, // required
  },
  children: [
    {
      topic: 'child',
      id: 'xxxx',
      // ...
    },
  ],
}
```

--------------------------------

### Operation guards with before hook

Source: https://github.com/ssshooter/mind-elixir-core/blob/master/readme.md

Use the before hook to guard operations like addChild. The async function can return true to allow the operation or false to block it, useful for validating or saving data before changes.

```javascript
let mind = new MindElixir({
  // ...
  before: {
    async addChild(el, obj) {
      try {
        await saveDataToDb()
        return true
      } catch (err) {
        return false
      }
    },
  },
})
```

--------------------------------

### Renamed options in v2.0.0

Source: https://github.com/ssshooter/mind-elixir-core/wiki/Breaking-Change

In version 2.0.0, these option names were renamed. Use the new names to configure the mind map's link style and node gaps.

```text
primaryLinkStyle => mainLinkStyle
primaryNodeVerticalGap => mainNodeVerticalGap 
primaryNodeHorizontalGap => mainNodeHorizontalGap
```

--------------------------------

### Bidirectional Node Link

Source: https://github.com/ssshooter/mind-elixir-core/blob/master/skills/plaintext-format/SKILL.md

Creates a bidirectional link between two nodes using the `>` prefix and arrow syntax. The format is `> [^sourceId] (delta1X,delta1Y) <-Label-> (delta2X,delta2Y) [^targetId]`; coordinates are optional and Mind Elixir will calculate balanced offsets automatically if omitted.

```text
- Root
  - Node A [^id1]
  - Node B [^id2]
  - > [^id1] (10,20) <-Link Label-> (-10,-20) [^id2]
```

--------------------------------

### Node Styling with Inline JSON

Source: https://github.com/ssshooter/mind-elixir-core/blob/master/skills/plaintext-format/SKILL.md

Applies inline styling to nodes using a JSON-like object at the end of the topic text. Supported properties include `color` (hex code), `background` (hex code), and `fontSize` (number as string, e.g., "16").

```text
- Root
  - Styled Node {"color": "#e87a90"}
  - Another Node {"color": "#3298db", "background": "#ecf0f1"}
```

--------------------------------

### Event Listeners

Source: https://github.com/ssshooter/mind-elixir-core/blob/master/skills/integrate-mind-elixir/SKILL.md

Listen to various events using mind.bus, including 'operation', 'selectNodes', and 'expandNode'.

```javascript
// Listen to all operations
mind.bus.addListener('operation', operation => {
  console.log(operation)
  // operation: { name: 'action_name', obj: target_object }
})

// Listen to node selection
mind.bus.addListener('selectNodes', nodes => {
  console.log(nodes)
})

// Listen to node expansion
mind.bus.addListener('expandNode', node => {
  console.log('expandNode: ', node)
})
```

--------------------------------

### Export and import MindElixir data

Source: https://github.com/ssshooter/mind-elixir-core/blob/master/readme.md

Export mind map data as a JavaScript object or string, and import data by initializing a new MindElixir instance or refreshing an existing one.

```javascript
// data export
const data = mind.getData() // javascript object, see src/example.js
mind.getDataString() // stringify object

// data import
// initiate
let mind = new MindElixir(options)
mind.init(data)
// data update
mind.refresh(data)
```

--------------------------------

### Custom markdown parsing function in MindElixir options

Source: https://github.com/ssshooter/mind-elixir-core/blob/master/skills/customize-markdown/SKILL.md

Provide a markdown option function to enable basic formatting (bold, italic, code) using regex replacements. Works when creating a new MindElixir instance.

```javascript
let mind = new MindElixir({
  // ... other options
  markdown: text => {
    // Simple regex replacements
    return text
      .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
      .replace(/\*(.*?)\*/g, '<em>$1</em>')
      .replace(/`(.*?)`/g, '<code>$1</code>')
  },
})
```

--------------------------------

### Dark theme configuration

Source: https://github.com/ssshooter/mind-elixir-core/wiki/Themes

Defines a dark theme configuration object for mind-elixir-core. The palette provides 10 colors and cssVar overrides CSS variables for main color, background, text, and background color.

```javascript
  {
    name: 'Dark',
    palette: ['#dd7878', '#ea76cb', '#8839ef', '#e64553', '#fe640b', '#df8e1d', '#40a02b', '#209fb5', '#1e66f5', '#7287fd'],
    cssVar: {
      '--main-color': '#ffffff',
      '--main-bgcolor': '#4c4f69',
      '--color': '#cccccc',
      '--bgcolor': '#252526',
    },
  }
```

--------------------------------

### Import CSS via CDN in v5.0.0

Source: https://github.com/ssshooter/mind-elixir-core/wiki/Breaking-Change

In version 5.0.0, the CSS file is separated from the JS file. If using a CDN, add this @import to your CSS file to load the styles.

```css
@import "https://cdn.jsdelivr.net/npm/mind-elixir@^5.0.0/dist/style.css";
```

--------------------------------

### Import CSS with bundler in v5.0.0

Source: https://github.com/ssshooter/mind-elixir-core/wiki/Breaking-Change

In version 5.0.0, the CSS file is separated from the JS file. If using a bundler with CSS support, import the style.css file manually.

```css
import "mind-elixir/style.css";
```

--------------------------------

### Safe parse with try-catch and fallback

Source: https://github.com/ssshooter/mind-elixir-core/blob/master/skills/plaintext-format/SKILL.md

Wrap plaintextToMindElixir in a try-catch to handle parse errors gracefully. On failure, logs the error and returns a fallback MindElixirData object with a root node titled 'Parse Error'.

```typescript
function safeParse(plaintext: string): MindElixirData | null {
  try {
    return plaintextToMindElixir(plaintext)
  } catch (error) {
    console.error('Parse error:', error)
    // Return fallback data
    return {
      nodeData: {
        id: 'root',
        topic: 'Parse Error',
        children: []
      }
    }
  }
}
```

--------------------------------

### Deprecated mind.exportSvg() method

Source: https://github.com/ssshooter/mind-elixir-core/blob/master/readme.md

Deprecated API: mind.exportSvg() is deprecated and will be removed in a future version. Do not use in new projects.

```typescript
// DEPRECATED - Do not use in new projects
const svgData = await mind.exportSvg()
```

--------------------------------

### Migrate linkData to arrows in v4.0.0

Source: https://github.com/ssshooter/mind-elixir-core/wiki/Breaking-Change

In version 4.0.0, migrate data by converting `linkData` to an `arrows` array. This MongoDB script iterates over documents, transforms the content, and updates each one.

```javascript
db.maps.find({}).forEach((doc) => {
  if (doc.content.linkData) {
    doc.content.arrows = []
    for (let key in doc.content.linkData) {
      const item = doc.content.linkData[key]
      doc.content.arrows.push(item)
    }
    delete doc.content.linkData
    db.maps.updateOne({ _id: doc._id }, { $set: { content: doc.content } })
  }
})
```
Tokens:
Raw