Zenn
🌎

Nuxt.js プロジェクトでマインドマップを作成する

2020/12/13に公開
Nuxt
Vue.js
tech

はじめに

マインドマップを作るアプリケーションを作ってみたいと思い，とりあえずサンプルを使えるところまで実施してみた．

前提

下のように yarn create nuxt-app <project name> で作成した pages ディレクトリに map.vue を追加して，そこにマインドマップを表示する形で実装しています．

<project_name>
    ┗pages
        ┗index.vue
        ┗map.vue

やったこと

やったことの概要は次の通り

  • プロジェクトに vue-mindmap をインストールする
  • map.vue にライブラリの読み込み
  • マインドマップのデータを記載する

手順

プロジェクトに vue-mindmap をインストールする

次のコマンドをプロジェクトのルートディレクトリで実行して，vue-mindmap をインストールする．

yarn add vue-mindmap

package.json に "vue-mindmap": "^0.0.4" などが表示されていたら成功．

map.vue にライブラリの読み込み

map.vue に次のコードを記載し，ライブラリを読み込む

  <template>
    <mindmap :nodes="nodes" :connections="connections" :editable="true" />
  </template>
  <script>
  import Vue from "vue";
  import VueMindmap from "vue-mindmap";
  import "vue-mindmap/dist/vue-mindmap.css";
  Vue.use(VueMindmap); 
  </script>

マインドマップ生成用のコードを記載する

上で記載した inport の下に以下のJSONを記載する．

export default {
   name: "MindmapTest",
   data() {
     return {
       nodes: [
         { text: "テスト1", fx: 100, fy: 100 },
         { text: "テスト2", fx: 200, fy: 200 },
         { text: "テスト3", fx: 300, fy: 300 },
       ],
       connections: [
         {
           source: "テスト3",
           target: "テスト2",
           curve: {
             x: 10,
             y: 10,
           },
         },
         {
           source: "テスト3",
           target: "テスト1",
           curve: {
             x: 10,
             y: 10,
           },
         },
       ],
     };
   },
};

yarn dev コマンドで起動し，http://localhost:3000/map で下のようなマインドマップが表示されたら成功．

property の簡単な説明

nodes : マインドマップの要素を表す配列．各要素は連想配列になっていて，text, fx, fy, URL などの値を設定できる．

connections : マインドマップの各要素をつなぐ部分を作るための要素．source, target でそれぞれ node 要素を指定することで紐づきを作ることができる．curve の x, y に適宜値を入れるといい感じに曲がった線になる．
下のように書くことで，テスト1，テスト2の要素が紐づく．

nodes: [
  { text: "テスト1", fx: 100, fy: 100 },
  { text: "テスト2", fx: 200, fy: 200 },
],
connections: [
  {
    source: "テスト2",
    target: "テスト1",
    curve: {
      x: 10,
      y: 10,
    },

subnodes : ある要素の子要素を作りたい時には，nodes 内の各要素に再帰的に nodes を記載することで子要素を作ることができる．
下はテスト1ノードにテストサブノードが表示される例．

nodes: [
  { text: "テスト1", fx: 100, fy: 100 ,nodes:[{text:'テストサブ'}]},
],

困ったころ

公式リポジトリには npm でのインストール方法しか書いていなかったので yarn でどうすればいいのか，そもそも yarn でインストールできるのかなどがわからずちょっと困った．
また, Nuxt.js で vue-mindmap を利用している記事がなかったので，どこに何をどうすれば良いのかが手探りで，ここが一番詰まった．（本来は Vue.js をやって Nuxt.js をやって，その後使いたいライブラリを使っていくからこういうことは起きないのだろうけど，色々すっ飛ばしたツケが来た感）

参考

Discussion