无框架依赖的思维导图内核 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/[email protected]/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

添加 i18n 支持（中英日）

[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 不能跨平台）这种，很少而且收费，期待楼主考虑下这种

[ssshooter]

@haozes emmm 其实也不是主推在线思维导图服务，而是希望这个项目能让前端开发者方便地在自己的项目使用思维导图

[netnr]

支持，顶顶顶

前面接触了 mxgraph 和百度脑图，集成的效果
//www.netnr.com/draw/discover

[ssshooter]

@netnr 哇这个功能真的丰富😂

[netnr]

但你造轮子，赞

[ssshooter]

@netnr 👌谢谢

[Jex]

我也以为是 Elixir 写的。。。