マインドマップ
Mind Map(内容を樹形図として編集する画面)は、入れ子の箇条書きを、線でつながったノードの図として開きます。図の上でノードを足したり動かしたりすると、その結果はそのまま元の Markdown ファイルに書き戻されます。考えを広げながら構成を決めたいときや、話の全体像を見渡したいときに使います。
実際の macOS アプリの図の部分を切り抜いています。読書会のアイデアを、話題ごとの枝に分けています。
ファイルのしくみ
Mind Map で開けるのは、frontmatter に type: mindmap と書かれた Markdown ファイルです。図として開くかどうかの境目はこの 1 行だけです。
#で始まる見出しが 1 つだけあり、それが中心のノードになります。中心以外のノードは、すべて
-で始まる箇条書きの行です。深さは半角スペース 2 つ分の字下げ 1 段につき 1 階層です。
箇条書きのあいだに空行を入れると、そこで図は終わりになります。
---
type: mindmap
title: 新しいサービスの企画
---
# 新しいサービスの企画
- 誰に届けるか
- 個人で書く人
- 小さなチーム
- 何を解決するか
- 書きかけが散らばる
- いつ出すか開き方
開き方は 2 通りあります。書きかけの note をそのまま図にしたいのか、決まったファイルをいつも開いておきたいのかで選びます。
書いている note を切り替える場合
いま開いている note で Mod+Shift+M を押すと、エディタの代わりに図が出ます。もう一度押すとエディタに戻ります。コマンドパレットの Mind Map View でも同じ切り替えができます。
切り替えられるのは、エディタが出ている Note Tray(note を一覧して切り替える画面)の note だけです。type: mindmap の無いファイルで切り替えると、代わりに書式の見本が表示されます。その見本をエディタに貼り付ければ、そのまま図になります。
専用の frame で開く場合
決まったファイルの図を、書きかけの note の横に出しておきたいときは、pin を作ります。pin を作るときの Initial board file でファイルを選んでおくと、その pin を押すたびに、同じファイルが Mind Map として開きます。手順はピンにまとめています。
空の frame から Mind Map を選ぶと、ファイルを用意する画面が開きます。New で新しいファイルを作るか、Existing で既存の Markdown ファイルを選びます。作成前に機能の説明と使いどころを確かめられます。
Mind Map の作り方
Command Palette(Mod+K で開く、コマンドの検索窓)の Mind Map Setup を実行すると、必要な書式をまとめて用意できます。
Title に中心のノードの名前を入れます。すでに箇条書きが書いてあるファイルでは、書いてある内容がそのまま使われるので、この欄は出ません。
Markdown to write に、実際に書き込まれる内容がそのまま表示されます。押す前にここで中身を確かめられます。
Enable Mind Map を押すと、ファイルが書き換わり、そのまま図の表示に切り替わります。
すでに Mind Map の書式になっているファイルで実行すると、ボタンは Update Mind Map に変わり、中心の名前を書き直せます。左下の Remove Mind Map を押すと、図としての印が取り除かれ、ふつうの箇条書きに戻ります。
すでに箇条書きで書いてあるファイルも、階層を保ったまま図に変えられます。ただし見出しの階層が飛んでいたり、箇条書きでない文章が混ざっていたり、# の見出しが 2 つ以上あったりすると、そのままでは変換できません。その場合は理由が表示され、ファイルは書き換えられずに残ります。
Mind Map Setup には最初キーが割り当てられていません。キーで開きたいときは Settings → Shortcuts で割り当ててください。
ノードの操作
図の上では、マウスとキーボードのどちらでも同じ操作ができます。
選ぶ
ノードをクリックすると、そのノードが選ばれます。
ModかShiftを押しながらクリックすると、そのノードを選択に足したり、選択から外したりできます。複数選んでおくと、並べ替えや削除がまとめて効きます。何も無いところをマウスやペンでドラッグすると四角い枠が出て、枠に重なったノードがまとめて選ばれます。この枠は Outline の表示では出ません。
Mod+Aですべてのノードを選べます。何も無いところをクリックすると選択が外れます。ただし文字を書いている途中にクリックしたときは、そのクリックでは書いていた内容が確定するだけで、選択は残ります。もう一度クリックすると外れます。
文字を書き直す
ノードを選んだ状態でそのまま文字を打つと、元の文字と入れ替わる形で書き直しが始まります。打ち始めた 1 文字目もそのまま入ります。日本語入力の変換中でも同じように始められます。
元の文字を見ながら直したいときは、
Mod+Enterを押すかダブルクリックします。元の文字が選ばれた状態になるので、そのまま打てば入れ替わり、矢印キーを押せば途中から直せます。書いているあいだは
Enterが確定、Tabが確定してそのまま子のノードを追加、Alt+Enterが改行です。Escapeを押すと、書いた内容を残したまま書き直しを終わります。Mod+Backspaceでそのノードを消します。文字を入れずに作ったノードは、空のノードとしてそのまま残ります。要らなければ
Backspaceで消してください。行の先頭や末尾の空白、途中の空の行も、書いたとおりにファイルへ書き込まれ、次に開いたときもそのままです。
足す・消す・動かす
Enterで、選んでいるノードのすぐ下に同じ並びのノードを足します。中心のノードで押したときは子になります。Alt+Enterならすぐ上に足します。Shift+Enterは、どこにいても中心から伸びる新しい枝を足します。新しい枝は左右のバランスを見て置かれます。Tabで子を足し、Alt+Tabで選んでいるノードの上に親を差し込みます。Backspace/Deleteで、選んでいるノードとその下をまとめて消します。Alt+Backspaceなら、下にぶら下がっていたノードを 1 段繰り上げて残し、選んでいるノードだけを消します。消したあとは、すぐ上の兄弟 → すぐ下の兄弟 → 親、の順に選ばれます。選んでいるノードの外側の縁には、小さな「+」が出ます。押すと子のノードが足されます。Free では枝が伸びている側、Vertical と Horizontal では右側に出ます。Outline では出ません。通常の位置がボードの表示範囲からはみ出す場合や、ノード・操作ボタンと重なる場合は、表示範囲内で押しやすい位置に移ります。
ノードを別のノードの上にドラッグすると、そのノードの子になります。兄弟どうしのあいだに落とすと、順番が変わります。落とす前に、どこに入るかの目安が表示されます。ドラッグで動かせるのは 1 つずつです。
ノードを右クリックすると、Add child、Add sibling、Edit、Fold(折りたたみ済みなら Unfold)、Delete のメニューが出ます。中心のノードは消せず、兄弟も足せないので、その 2 つは選べない状態になります。
折りたたんだ枝には、隠れているノードの数を示す小さな札が付きます。札を押すと開きます。
メニューから消すときは確認の Delete node? が出ます。Delete を選ぶと、そのノードと、その下にぶら下がっていたノードもまとめて消えます。
キーボード操作
図やアウトラインを一度クリックして操作の対象にすると、次のキーが使えます。
以前あった 1 文字だけのキー(J K H L O A D E F と単独の .)はもうありません。文字キーは、選んでいるノードの書き直しを始めるために使われます。
矢印キーで動く
矢印キーの効き方は、Settings の Placement と、Outline かどうかで変わります。
| キー | Free | Vertical | Horizontal | Outline |
|---|---|---|---|---|
← → | 中心に近づく向きは、折りたたまずに親へ移ります。遠ざかる向きは、縦に最も近い子へ移ります(折りたたまれていれば先に開きます)。中心のノードではその向きの最も近い子へ移ります | ← は開いていれば折りたたみ、閉じていれば親へ。→ は閉じていれば開き、開いていれば最初の子へ。中心の ← は何も起きません | 中心から伸びる枝では、左右の枝を行き来します。それより深いところは Vertical と同じです | Vertical と同じです |
↑ ↓ | 同じ側・同じ深さで、上下に最も近いノードへ移ります。親をまたいで移ります。見つからないときは、深さを問わず最も近いノードへ移ります | 画面に出ている順で 1 つ前・1 つ後ろへ移ります(親をまたぎます) | 中心では ↓ が最初の枝へ。枝の先頭では ↑ が中心、↓ が最初の子へ(折りたたまれていれば先に開きます)。それより深いところは、同じ枝の中で前後へ移ります | 画面に出ている行の 1 つ前・1 つ後ろへ移ります |
Shift + 矢印 | 上と同じ移動先に向かって、選択を広げたり狭めたりします | 同じ | 同じ | Shift+↑ Shift+↓ だけ |
Mod+↑ Mod+↓ | 同じ側の兄弟の中で、順番を入れ替えます | 兄弟の中で順番を入れ替えます | 中心から伸びる枝では、↑ は何も起きず、↓ は 1 つ前の枝の子になります。それより深いところは順番の入れ替えです | 順番を入れ替えます |
Mod+← Mod+→ | 中心に近づく向きで 1 段浅く、遠ざかる向きで 1 段深くなります(左側の枝では左右が逆になります)。中心から伸びる枝をさらに中心の方へ動かすと、その枝は反対側へ移ります | → で 1 段深く、← で 1 段浅くなります。中心から伸びる枝の ← は何も起きません | 中心から伸びる枝では、左右の並び順を入れ替えます。それより深いところは → で 1 段深く、← で 1 段浅くなります | → で 1 段深く、← で 1 段浅くなります |
Shift+Tab は、どの並べ方でも 1 段浅くします。
Mod と矢印キーの操作は、選んでいるノードすべてにまとめて効きます。並び順は保たれ、Mod+Z の取り消しは 1 回でまとめて戻ります。動かせないノードが 1 つでもあるときは、まとまり全体がその場で止まります。
Shift と矢印キーの組み合わせ(選択を広げる操作)だけは、キーボードの矢印キーそのものに決め打ちされていて、Settings → Shortcuts には項目がありません。Mod と矢印キーの組み合わせは Move Node Up / Move Node Down / Indent Node / Outdent Node として項目があり、移動用の矢印キーと同じように変えられます。
追加と書き直し
| キー | すること |
|---|---|
| 文字キー | 打った文字で、選んでいるノードの書き直しを始めます |
Mod+Enter | 元の文字が選ばれた状態で書き直します |
Enter | すぐ下に同じ並びのノードを足します(中心では子になります) |
Alt+Enter | すぐ上に同じ並びのノードを足します |
Shift+Enter | 中心から伸びる新しい枝を足します |
Tab | 子のノードを足します |
Alt+Tab | 選んでいるノードの上に親を差し込みます |
Backspace / Delete | 選んでいるノードとその下を消します |
Alt+Backspace | 下のノードを残して、選んでいるノードだけを消します |
Alt+. | 選んでいる枝を折りたたむか、開きます |
Mod+A | すべてのノードを選びます |
Escape | 選択を外します |
表示
| キー | すること |
|---|---|
Mod+F | 文字で探す入力欄を開きます |
Mod+Shift+F | 選んでいる枝以外を薄くします |
Mod+= / Mod+- | 拡大・縮小します |
Mod+0 | 等倍に戻します |
Mod+Shift+0 | 全体が収まる大きさにします |
Mod+Shift+8 | 選んでいるノードを中央に持ってきます |
Mod+Shift+1 / Mod+Shift+2 | 図とアウトラインを切り替えます |
拡大縮小のキーは、Mode が Mind map のときだけ働きます。Mod+Z で直前の操作を取り消し、Mod+Shift+Z でやり直せます。この 2 つは決まったキーで、割り当ては変えられません。ここに挙げた残りのキーは Settings → Shortcuts の Mind Map で変えられます。ただし 1 文字だけのキーは割り当てられません。Mod+Shift+M と Mind Map Setup は同じ画面の Editor にあります。割り当ての手順はキーボードショートカットにあります。
見た目を決める 3 つのボタン
図の右上には小さなボタンが 3 つ並んでいます。押すと、右側に設定の欄が開きます。画面が狭いときは全画面で開きます。
Theme — 図の配色を選びます。
Mode — Mind map(図の表示)と Outline(字下げした一覧の表示)を切り替えます。
Settings — 並べ方や文字の詰め方を決めます。中身は Mode の選び方で変わります。
Settings で決めた内容はファイルごとに覚えられるので、同じファイルを別の frame で開いても同じ見え方になります。
3 つの配置
Mode が Mind map のとき、Settings の Placement で並べ方を選べます。最初は Free です。
Free — 中心を真ん中に置き、そこから伸びる枝を左右に振り分けます。線は曲線になります。
Vertical — 中心を上に置き、下へ向かって階段状に並べます。深くなるほど右にずれ、線は直角に折れます。
Horizontal — 中心を左上に置き、最初の枝を横一列に並べます。その下に、それぞれの枝の続きが伸びます。
ノードの幅
同じく Settings の Node width で、ノードの横幅の決め方を選べます。
Free — 文字の長さに合わせて、いくらでも横に伸びます。長い見出しを 1 行のままにしたいときに向いています。
Max width — ここまでという上限を決めます。180 から 800 のあいだで、10 きざみに指定できます。最初は 260 です。
Fixed width — すべてのノードを同じ幅にそろえます。180 から 360 のあいだで指定でき、最初は 220 です。
Max width と Fixed width では、下に出るスライダーと数値の欄で幅を決めます。Free ではこの 2 つは出ません。
Outline
Mode で Outline を選ぶと、同じ内容が字下げした一覧として表示されます。並べ方に気を取られずに、構成だけを手早く直したいときに向いています。
このとき Settings の中身は次の 2 つに変わります。
Density — 行の詰め方を Comfortable と Compact から選びます。最初は Comfortable です。
Structure guides — 階層を示す縦線を出すかどうかです。最初から入っています。
動かす・拡大と縮小
図の上でマウスホイールを回すか、トラックパッドを 2 本指でなぞると、図全体が上下左右に動きます。マウスの中ボタンでのドラッグでも同じように動かせます。
拡大・縮小は、Ctrl か Mod を押しながらのホイール操作か、トラックパッドのピンチです。どちらもポインタの位置に向かって拡大・縮小します。右下には現在の倍率と、全体を収める Fit、等倍に戻す 100% のボタンがあります。
何も無いところをマウスやペンでドラッグしたときは、図が動くのではなく、ノードを囲んで選ぶための枠が出ます。タッチでの操作はこれまでどおりで、1 本指でなぞると図が動き、2 本指でつまむと拡大・縮小します。
ホイール 1 回でどれだけ拡大・縮小するかは Settings → Mind Map の Wheel Zoom Sensitivity で変えられます。0.1× から 2.0× のあいだで、最初は 1.0× です。小さくすると穏やかに、大きくすると素早く動きます。変わるのは Ctrl や Mod を押しながらのホイール操作だけで、キーによる拡大縮小と Fit / 100% の効き方はそのままです。この設定は設定項目リファレンスにもまとめています。
検索と表示の絞り込み
Mod+F を押すと、上部に入力欄が出ます。文字を入れると当てはまるノードが目立つようになり、右側の矢印で次と前を行き来できます。折りたたんだ中にあるノードに移るときは、その枝が自動的に開きます。Escape で閉じます。
Mod+Shift+F を押すと、選んでいるノードとその下だけを残して、ほかが薄くなります。左下の Focus ボタンでも同じことができます。この表示はその場かぎりのもので、ファイルの中身も、次に開いたときの見え方も変えません。
Mindmap Theme Creator
Command Palette の Open Mindmap Theme Creator を実行すると、図の配色を作る画面が開きます。この機能には最初キーが割り当てられていないので、キーで開きたいときは Settings → Shortcuts で割り当ててください。
画面の左側には見本の図が出ていて、右側の項目を変えると、その場で見た目が変わります。
用意されている配色をそのまま使うときは、上の Theme から選びます。選んだ時点で図に反映されます。この状態では細かい項目は変えられません。
自分で作るときは、Theme の中の Create new theme… を選びます。いま選んでいた配色を下敷きにした、書き換えられる配色ができます。
変えられるのは、枝の色 4 色(Branch color 1 から Branch color 4)と中心の色(Root node color)、ノードの角の丸み(Root、Depth 1、Depth 2+)、ノードの塗りの濃さ(Node fill)、線の太さ(Edge width scale)、図の背景(Background)です。
Theme name に名前を入れて Save を押し、確認の画面で Save を選ぶと保存され、そのまま適用されます。作った配色は My themes に並びます。
要らなくなった配色は、ごみ箱のボタンから消せます。消したのが使っていた配色だった場合は Default に戻ります。
Default は、アプリ全体の配色をそのまま使う設定です。
選んだ配色は、開いているすべての Mind Map に共通で使われます。図の右上の Theme からも同じ一覧を開けるので、細かい調整をしないのであればそちらだけで足ります。ここで作った配色は Mind Map 専用で、アプリ全体の配色とは別に扱われます。アプリ全体の配色はテーマで扱います。
開く内容がないとき
ファイルが未選択のときや、専用の書式がないときは、図と説明が表示されます。表示される作成やファイル選択のボタンから進めます。Manual はこの機能の詳しい説明を開きます。
