Mind-elixir

Framework agnostic library to build mind maps

Charting
ssshooter/mind-elixir-coremind-elixir.commind-elixir

README

mindelixir logo

version license code quality dependency-count dependency-count


中文 README

Mind elixir is a free open source mind map core.

- High performance
- Lightweight
- Framework agnostic
- Pluginable
- Build-in drag and drop / node edit plugin

Doc


https://doc.mind-elixir.com/

Try now


mindelixir

https://mind-elixir.com/#/

Playground


https://codepen.io/ssshooter/pen/GVQRYK

with React https://codesandbox.io/s/mind-elixir-react-9sisb

with Vue https://codesandbox.io/s/mind-elixir-vue-nqjjl

Usage


Install


NPM


  1. ```bash
  2. npm i mind-elixir -S
  3. ```

  1. ```javascript
  2. import MindElixir, { E } from 'mind-elixir'
  3. ```

Script tag


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

HTML structure


  1. ```html
  2. <div id="map"></div>
  3. <style>
  4.   #map {
  5.     height: 500px;
  6.     width: 100%;
  7.   }
  8. </style>
  9. ```

Init


Breaking Change since 1.0.0, data should be passed to init(), not options.

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

  5. let options = {
  6.   el: '#map', // or HTMLDivElement
  7.   direction: MindElixir.LEFT,
  8.   draggable: true, // default true
  9.   contextMenu: true, // default true
  10.   toolBar: true, // default true
  11.   nodeMenu: true, // default true
  12.   keypress: true, // default true
  13.   locale: 'en', // [zh_CN,zh_TW,en,ja,pt] waiting for PRs
  14.   overflowHidden: false, // default false
  15.   primaryLinkStyle: 2, // [1,2] default 1
  16.   primaryNodeVerticalGap: 15, // default 25
  17.   primaryNodeHorizontalGap: 15, // default 65
  18.   contextMenuOption: {
  19.     focus: true,
  20.     link: true,
  21.     extend: [
  22.       {
  23.         name: 'Node edit',
  24.         onclick: () => {
  25.           alert('extend menu')
  26.         },
  27.       },
  28.     ],
  29.   },
  30.   allowUndo: false,
  31.   before: {
  32.     insertSibling(el, obj) {
  33.       return true
  34.     },
  35.     async addChild(el, obj) {
  36.       await sleep()
  37.       return true
  38.     },
  39.   },
  40. }

  42. let mind = new MindElixir(options)

  44. mind.install(plugin) // install your plugin

  46. // create new map data
  47. const data = MindElixir.new('new topic')
  48. // or `example`
  49. // or the data return from `.getAllData()`
  50. mind.init(data)

  52. // get a node
  53. E('node-id')
  54. ```

Data Structure


  1. ```javascript
  2. // whole node data structure up to now
  3. nodeData = {
  4.   topic: 'node topic',
  5.   id: 'bd1c24420cd2c2f5',
  6.   style: { fontSize: '32', color: '#3298db', background: '#ecf0f1' },
  7.   parent: null,
  8.   tags: ['Tag'],
  9.   icons: ['😀'],
  10.   hyperLink: 'https://github.com/ssshooter/mind-elixir-core',
  11.   children: [
  12.     {
  13.       topic: 'child',
  14.       id: 'xxxx',
  15.       // ...
  16.     },
  17.   ],
  18. }
  19. ```

Event Handling


  1. ```javascript
  2. mind.bus.addListener('operation', operation => {
  3.   console.log(operation)
  4.   // return {
  5.   //   name: action name,
  6.   //   obj: target object
  7.   // }

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

  12.   // name: moveNode
  13.   // obj: {from:target1,to:target2}
  14. })

  16. mind.bus.addListener('selectNode', node => {
  17.   console.log(node)
  18. })

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

Data Export


  1. ```javascript
  2. mind.getAllData() // javascript object, see src/example.js
  3. mind.getAllDataString() // stringify object
  4. mind.getAllDataMd() // markdown
  5. ```

Operation Guards


  1. ```javascript
  2. let mind = new MindElixir({
  3.   // ...
  4.   before: {
  5.     insertSibling(el, obj) {
  6.       console.log(el, obj)
  7.       if (this.currentNode.nodeObj.parent.root) {
  8.         return false
  9.       }
  10.       return true
  11.     },
  12.     async addChild(el, obj) {
  13.       await sleep()
  14.       if (this.currentNode.nodeObj.parent.root) {
  15.         return false
  16.       }
  17.       return true
  18.     },
  19.   },
  20. })
  21. ```

Not only core


- @mind-elixir/export-xmind
- @mind-elixir/export-image (WIP🚧)