メインコンテンツまでスキップ

インストールと使用

Mind Elixirのインストールと使用の簡単な紹介。

インストール​

npm i mind-elixir -S

使用​

import MindElixir from 'mind-elixir'

let options = {
  el: '#map', // または HTMLDivElement
}

let mind = new MindElixir(options)

// 新しいマップデータの作成
const data = MindElixir.new('新しいトピック')
mind.init(data)

他の設定については完全な設定を参照してください。

警告

Mind Elixirはマウントされるときにコンテナの高さが100％になるため、コンテナの高さを必ず設定してください。そうしないと表示が異常になります。

<div id="map"></div>
<style>
  #map {
    height: 500px;
    width: 100%;
  }
</style>

マインドマップの操作​

  • 操作は一般的なマインドマップアプリと基本的に同じです。
  • ショートカットはショートカットセクションで確認できます。
  • マウスの左クリックでノードをドラッグしたり、複数のノードを選択したりできます。
  • マウスの右クリックでキャンバスをドラッグできます。
  • "接続"を選択した後、別のノードをクリックすると、2つのノードを接続できます。

データのエクスポートと更新​

ユーザーがマインドマップを操作すると、データが変更されます。最新のデータを取得するには、getDataメソッドを呼び出すことができます。データの形式についてはデータのエクスポートを参照してください。

const data = mind.getData()

現在のマインドマップを新しいデータセット全体で更新する必要がある場合は、refreshメソッドを使用できます。

mind.refresh(data)