インストールと使用

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つのノードを接続できます。

logo2mind-elixirWhat is Mind ElixirA mind map coreFreeOpen-SourceUse without JavaScript frameworkUse in your own projectimport MindElixir from 'mind-elixir'new MindElixir({...}).init(data)Easy to useUse it like other mind map applicationBasicstab - Create a child nodeenter - Create a sibling nodedel - Remove a nodeLeft menuNode distributionLeftRightBoth l & rLinkRight click and select LinkClick the target you want to linkModify link with control pointsNode styleFont SizeFont ColorBackground ColorAdd tags

Completed

Add icons😂

www

BolderHyper link🔗CautionOnly save manuallySave button in the top-right cornerctrl + SMind Elixir

Mind Map Core

Focus modeRight click and select Focus ModeRight click and select Cancel Focus ModeBottom menuFull screenReturn to CenterZoom inZoom outDraggableDrag a node to another node and the former one will become a child node of latter oneExport dataJSONHTMLSVGdangerouslySetInnerHTMLKatex

$$\left[\begin{array}{cc}x& y\end{array}\right]\left[\begin{array}{cc}a& c\\ b& d\end{array}\right]$$

Code Block

let message = 'Hello world'
alert(message)

Customized Div

Title

Hello world

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

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

const data = mind.getData()

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

mind.refresh(data)