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

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

  •  
  •   ssshooter · 111 天前 · 2310 次点击
    这是一个创建于 111 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

    前面接触了 mxgraph 和百度脑图,集成的效果
    //www.netnr.com/draw/discover
        23
    ssshooter   110 天前
    @netnr 哇这个功能真的丰富😂
        24
    netnr   110 天前
    但你造轮子,赞
        25
    ssshooter   110 天前
    @netnr 👌谢谢
        26
    Jex   109 天前
    我也以为是 Elixir 写的。。。
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2494 人在线   最高记录 5043   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 25ms · UTC 14:36 · PVG 22:36 · LAX 06:36 · JFK 09:36
    ♥ Do have faith in what you're doing.