본문으로 건너뛰기

설치와 사용

설치​

npm i mind-elixir -S

사용​

import MindElixir from 'mind-elixir'

let options = {
  el: '#map', // or HTMLDivElement
}

let mind = new MindElixir(options)

// create new map data
const data = MindElixir.new('new topic')
mind.init(data)

Mind Elixir Core를 사용하려면 options에 el(마인드맵이 마운트될 대상 DOM 요소)만 전달하면 됩니다. 더 많은 설정은 전체 옵션을 참고하세요.

경고

Mind Elixir Core는 컨테이너 높이의 100%로 마운트되므로, 표시 이상을 피하려면 반드시 컨테이너 높이를 지정하세요.

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

마인드맵 조작​

  • 조작 방식은 일반적인 마인드맵 애플리케이션과 비슷합니다
  • 단축키는 단축키 섹션에서 확인할 수 있습니다
  • 마우스 왼쪽 버튼으로 노드를 드래그하거나 여러 노드를 선택할 수 있습니다
  • 마우스 오른쪽 버튼으로 캔버스를 드래그할 수 있습니다
  • 마우스 오른쪽 버튼으로 "연결"을 선택한 뒤 다른 노드를 클릭하면 두 노드가 연결됩니다

데이터 내보내기와 갱신​

사용자가 마인드맵을 조작하면 데이터도 그에 따라 변경됩니다. getData 메서드로 최신 데이터를 얻을 수 있습니다. 데이터 형식은 데이터 내보내기를 참고하세요.

const data = mind.getData()

현재 마인드맵을 완전히 새로운 데이터로 갱신하려면 refresh 메서드를 사용하세요.

mind.refresh(data)

오른쪽에서 왼쪽으로 쓰는 언어​

아랍어, 히브리어, 페르시아어, 우르두어 콘텐츠에는 rtl: true를 전달하고 함께 제공되는 아랍어 로케일을 사용하세요:

import MindElixir from 'mind-elixir'
import { ar } from 'mind-elixir/i18n'

const mind = new MindElixir({
  el: '#map',
  rtl: true,
  contextMenu: { locale: ar },
})

rtl은 노드 주제, 편집기, 라벨, 컨텍스트 메뉴의 텍스트 방향만 바꾸며, 가지 레이아웃 축(direction)은 영향을 받지 않습니다. 더 많은 옵션은 v6 API 가이드를 참고하세요.