Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ssshooter/mind-elixir-core
⚗ Mind Elixir is a JavaScript, framework-agnostic mind map core.
https://github.com/ssshooter/mind-elixir-core
graph mind-map mind-mapping mindmap tool visualization
Last synced: 3 days ago
JSON representation
⚗ Mind Elixir is a JavaScript, framework-agnostic mind map core.
- Host: GitHub
- URL: https://github.com/ssshooter/mind-elixir-core
- Owner: SSShooter
- License: mit
- Created: 2019-08-01T01:04:36.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-10-25T10:20:05.000Z (about 2 months ago)
- Last Synced: 2024-10-29T15:34:39.321Z (about 1 month ago)
- Topics: graph, mind-map, mind-mapping, mindmap, tool, visualization
- Language: TypeScript
- Homepage: https://docs.mind-elixir.com/
- Size: 3.87 MB
- Stars: 1,955
- Watchers: 27
- Forks: 292
- Open Issues: 17
-
Metadata Files:
- Readme: readme.cn.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome-starred - ssshooter/mind-elixir-core - ⚗ Mind-elixir is a framework agnostic mind map core. (others)
README
Mind elixir 是一个无框架依赖的思维导图内核
[English](https://github.com/ssshooter/mind-elixir-core/blob/master/readme.md)
## 立即尝试
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
## 如何使用
### 安装
#### NPM
```bash
npm i mind-elixir -S
```
```javascript
import MindElixir, { E } from 'mind-elixir'
```
#### Script 标签
```html
```
### HTML 结构
```html
#map {
height: 500px;
width: 100%;
}
```
### 初始化
```javascript
import MindElixir, { E } from 'mind-elixir'
import { exportSvg, exportPng } from '../dist/painter'
import example from '../dist/example1'
let options = {
el: '#map',
direction: MindElixir.LEFT,
// create new map data
data: MindElixir.new('new topic') or example,
// the data return from `.getData()`
draggable: true, // default true
contextMenu: true, // default true
toolBar: true, // default true
nodeMenu: true, // default true
keypress: true, // default true
locale: 'en', // [zh_CN,zh_TW,en,ja,pt] waiting for PRs
overflowHidden: false, // default false
mainLinkStyle: 2, // [1,2] default 1
contextMenuOption: {
focus: true,
link: true,
extend: [
{
name: 'Node edit',
onclick: () => {
alert('extend menu')
},
},
],
},
allowUndo: false,
before: {
insertSibling(el, obj) {
return true
},
async addChild(el, obj) {
await sleep()
return true
},
},
}
let mind = new MindElixir(options)
mind.init()
// get a node
E('node-id')
```
### 数据结构
```javascript
// whole node data structure up to now
{
topic: 'node topic',
id: 'bd1c24420cd2c2f5',
style: { fontSize: '32', color: '#3298db', background: '#ecf0f1' },
parent: null,
tags: ['Tag'],
icons: ['😀'],
hyperLink: 'https://github.com/ssshooter/mind-elixir-core',
}
```
### 事件处理
```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('selectNode', node => {
console.log(node)
})
mind.bus.addListener('expandNode', node => {
console.log('expandNode: ', node)
})
```
### 数据导出
```javascript
mind.getData() // javascript object, see src/example.js
mind.getDataString() // stringify object
mind.getDataMd() // markdown
```
### 输出图片
**WIP**
```javascript
import painter from 'mind-elixir/dist/painter'
painter.exportSvg()
painter.exportPng()
```
### 操作拦截
```javascript
let mind = new MindElixir({
...
before: {
insertSibling(el, obj) {
console.log(el, obj)
if (this.currentNode.nodeObj.parent.root) {
return false
}
return true
},
async addChild(el, obj) {
await sleep()
if (this.currentNode.nodeObj.parent.root) {
return false
}
return true
},
},
})
```
## 文档
https://docs.mind-elixir.com/zh-Hans/