无框架依赖的思维导图内核 Mind Elixir 开源啦

[ssshooter]

Github 地址： https://github.com/ssshooter/mind-elixir-core

试用地址： https://mindelixir.ink/

Mind elixir 是一个免费开源的思维导图内核

立即试用

https://mindelixir.ink/#/

在项目中使用

安装

NPM

npm i mind-elixir -S

import MindElixir, { E } from 'mind-elixir'

script 标签引入

<script src="https://cdn.jsdelivr.net/npm/mind-elixir@0.6.1/dist/mind-elixir.js"></script>

HTML 结构

<div class="outer">
  <div id="map"></div>
</div>
<style>
  .outer {
    position: relative;
    margin: 50px;
  }
  #map {
    height: 500px;
    width: 100%;
    overflow: auto;
  }
</style>

初始化

let mind = new MindElixir({
  el: '#map',
  direction: MindElixir.LEFT,
  data: MindElixir.new('new topic'), // 也可以把 getDataAll 得到的数据初始化
  draggable: true, // 启用拖动 default true
  contextMenu: true, // 启用右键菜单 default true
  toolBar: true, // 启用工具栏 default true
  nodeMenu: true, // 启用节点菜单 default true
  keypress: true, // 启用快捷键 default true
})
mind.init()

// get a node
E('node-id')

Data Export

mind.getAllData()
// see src/example.js

使用提示

direction 选项

direction 选项可选 MindElixir.LEFT、MindElixir.RIGHT 和 MindElixir.SIDE。

HTML 结构

挂载的目标需要定宽高，可以是百分百；外层元素建议设置 position: relative;，否则菜单位置以视窗为标准分布。

E 函数

在使用节点操作方法时需要传入的参数可以借助 E 函数获得。

mind.insertSibling(E('bd4313fbac40284b'))

文档

https://inspiring-golick-3c01b9.netlify.com/

依赖

hotkeys-js

[ankazen]

非常棒，完成度很高

[azssjli]

试了下，发现触摸板移动，只能上下左右，不能左上左下，或任意角度移动，不算这个其他都挺好了，给个赞

[tt67wq]

我擦 以为是个 elixir 的项目，原来不是

[ssshooter]

@tt67wq 对不起是 JavaScript 项目😂
@azssjli 有可能是触摸板本身不能同时垂直水平移动？ macbook 的触摸板是可以左上左下的
@ankazen 感谢支持！

[kokdemo]

赞，我想想怎么做成 hugo 的插件

[ZiLong]

非常棒

[zaynex]

赞，专注模式很有意思!

[NUT]

如果导出可以搞成 Markdown 就好了。

[everettjf]

给力

[ssshooter]

@kokdemo 支持！！

@NUT 这个真的可以有，周末研究一下

@everettjf 头像给力😂

[viperasi]

好东西，码云上也来一份吧。

[jorneyr]

看上去很不错

[MonoBiao]

看起来不错，赞一个

[noli]

问个可能离题的问题，Elixir 是什么意思？

[ipwx]

It would be fantastic if you support MathJax/KaTeX.

[Mitt]

@ssshooter macbook 触控板也只能四相移动，只是 macbook 的触控板比较灵活感觉好像可以八相，但实际上移动是先平移后上移的

[ssshooter]

@noli 魔法药水 /灵丹妙药
@ipwx Thanks for your advice, this feature will be soon evaluated.

[jorneyr]

Mac Safari 不能编辑，Mac Chrome 可以编辑，但是编辑的体验很不好，编辑框和内容没有完全重叠。

[ssshooter]

@jorneyr 已修复 safari 不能编辑的 bug

[haozes]

思维导图的工具实在太多，而且好用的也不少。这方面没太多需求。但画流程图，像 https://www.processon.com/
这样的画流程图，代替 VISIO （ VISIO 不能跨平台）这种，很少而且收费，期待楼主考虑下这种