V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
ssshooter
V2EX  ›  分享创造

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

  •  
  •   ssshooter ·
    ssshooter · 2019-08-01 09:27:01 +08:00 · 5680 次点击
    这是一个创建于 1940 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

    mindelixir logo

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

    立即试用

    mindelixir

    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.LEFTMindElixir.RIGHTMindElixir.SIDE

    HTML 结构

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

    E 函数

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

    mind.insertSibling(E('bd4313fbac40284b'))
    

    文档

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

    依赖

    hotkeys-js

    第 1 条附言  ·  2019-08-03 10:41:21 +08:00
    添加 i18n 支持(中英日)
    26 条回复    2019-08-03 14:35:19 +08:00
    ankazen
        1
    ankazen  
       2019-08-01 09:43:20 +08:00
    非常棒,完成度很高
    azssjli
        2
    azssjli  
       2019-08-01 10:00:35 +08:00
    试了下,发现触摸板移动,只能上下左右,不能左上左下,或任意角度移动,不算这个其他都挺好了,给个赞
    tt67wq
        3
    tt67wq  
       2019-08-01 10:22:19 +08:00   ❤️ 1
    我擦 以为是个 elixir 的项目,原来不是
    ssshooter
        4
    ssshooter  
    OP
       2019-08-01 10:56:03 +08:00
    @tt67wq 对不起是 JavaScript 项目😂
    @azssjli 有可能是触摸板本身不能同时垂直水平移动? macbook 的触摸板是可以左上左下的
    @ankazen 感谢支持!
    kokdemo
        5
    kokdemo  
       2019-08-01 11:14:22 +08:00
    赞,我想想怎么做成 hugo 的插件
    ZiLong
        6
    ZiLong  
       2019-08-01 11:55:13 +08:00
    非常棒
    zaynex
        7
    zaynex  
       2019-08-01 13:01:28 +08:00
    赞,专注模式很有意思!
    NUT
        8
    NUT  
       2019-08-01 14:04:05 +08:00
    如果导出可以搞成 Markdown 就好了。
    everettjf
        9
    everettjf  
       2019-08-01 14:47:48 +08:00
    给力
    ssshooter
        10
    ssshooter  
    OP
       2019-08-01 15:23:10 +08:00
    @kokdemo 支持!!

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

    @everettjf 头像给力😂
    viperasi
        11
    viperasi  
       2019-08-01 15:53:01 +08:00
    好东西,码云上也来一份吧。
    jorneyr
        12
    jorneyr  
       2019-08-01 17:38:44 +08:00
    看上去很不错
    MonoBiao
        13
    MonoBiao  
       2019-08-01 17:49:41 +08:00
    看起来不错,赞一个
    noli
        14
    noli  
       2019-08-01 18:23:03 +08:00
    问个可能离题的问题,Elixir 是什么意思?
    ipwx
        15
    ipwx  
       2019-08-01 18:27:48 +08:00
    It would be fantastic if you support MathJax/KaTeX.
    Mitt
        16
    Mitt  
       2019-08-01 18:43:44 +08:00
    @ssshooter macbook 触控板也只能四相移动,只是 macbook 的触控板比较灵活感觉好像可以八相,但实际上移动是先平移后上移的
    ssshooter
        17
    ssshooter  
    OP
       2019-08-01 21:02:43 +08:00   ❤️ 1
    @noli 魔法药水 /灵丹妙药
    @ipwx Thanks for your advice, this feature will be soon evaluated.
    jorneyr
        18
    jorneyr  
       2019-08-01 21:27:18 +08:00
    Mac Safari 不能编辑,Mac Chrome 可以编辑,但是编辑的体验很不好,编辑框和内容没有完全重叠。
    ssshooter
        19
    ssshooter  
    OP
       2019-08-02 09:02:34 +08:00
    @jorneyr 已修复 safari 不能编辑的 bug
    haozes
        20
    haozes  
       2019-08-02 11:31:40 +08:00
    思维导图的工具实在太多,而且好用的也不少。这方面没太多需求。但画流程图,像 https://www.processon.com/
    这样的画流程图,代替 VISIO ( VISIO 不能跨平台)这种,很少而且收费,期待楼主考虑下这种
    ssshooter
        21
    ssshooter  
    OP
       2019-08-02 12:41:19 +08:00
    @haozes emmm 其实也不是主推在线思维导图服务,而是希望这个项目能让前端开发者方便地在自己的项目使用思维导图
    netnr
        22
    netnr  
       2019-08-02 14:17:23 +08:00
    支持,顶顶顶

    前面接触了 mxgraph 和百度脑图,集成的效果
    //www.netnr.com/draw/discover
    ssshooter
        23
    ssshooter  
    OP
       2019-08-02 15:10:52 +08:00
    @netnr 哇这个功能真的丰富😂
    netnr
        24
    netnr  
       2019-08-02 15:57:00 +08:00
    但你造轮子,赞
    ssshooter
        25
    ssshooter  
    OP
       2019-08-02 21:41:34 +08:00
    @netnr 👌谢谢
    Jex
        26
    Jex  
       2019-08-03 14:35:19 +08:00
    我也以为是 Elixir 写的。。。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5263 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 517ms · UTC 06:01 · PVG 14:01 · LAX 22:01 · JFK 01:01
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.