Mind elixir 一個免費開源的思維導圖核心

Plain發表於2020-06-19

一個瀏覽器的思維導圖 JS 核心。下列是它的 github 入門文件

Mind elixir 是一個免費開源的思維導圖核心

立即試用

mindelixir.ink/#/

在專案中使用

安裝

NPM

npm i mind-elixir -S
import MindElixir, { E } from 'mind-elixir'

script 標籤引入

<script src="https://cdn.jsdelivr.net/npm/mind-elixir/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 得到的資料
  data: {...},
  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'))

文件

inspiring-golick-3c01b9.netlify.co...

依賴

hotkeys-js

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章