Markdown（Typora）でMindmapを描く！

Typoraは優れたMarkdownエディターで、Mac、Windows、Linuxで使えます。有料アプリですが、$14.99（約2,000円）を払う価値のあるMarkdownエディターです。

Mermaidは、Markdown形式のテキストで図を描くことができるオープンソースのJavaScriptツールですが、Typoraは、Mermaidの機能を組み込んでいるので、Mermaidのコードを書くと図形描画ができます。

Mermaidでは、シンプルなテキストを使って複雑なフローチャート、シーケンス図、ガントチャート、クラス図、そしてマインドマップなどを作成することができます。

マインドマップ自体が、階層構造になっているので、Mermaidでの構文もとても簡単です。

Mermaidを使ってマインドマップを作成する

```mermaidでMermaidのコードが書けるようになります。

```mermaid

最初の行にmindmapと書いて、次の行からがマインドマップの構文になります。

mindmap

マインドマップの各ノードを描く

マインドマップは中心のトピックから放射状にアイデアが階層構造で配置されている図です。Mermaid でマインドマップを描くときも、階層構造で記載するので。マインドマップをイメージしながら書くことができます。

下記はrootから3つのメインブランチ（a1, a2, a3）があるマインドマップの例です。階層構造で示せば下記のようになります。

• Root
• a1
• a2
• a3

mermaid でも同じようにRootから1階層下げてa1, b1, c1 と記載します。

mindmap
	root
		a1
		b1
		c1

下記のように描画されます。

次にa1の下にサブブランチを2つ、a2_1とa2_2を追加します。a1から1階層下げてa2_1, a2_2を記載します。

mindmap
	root
		a1
			a2_1
			a2_2
		b1
		c1

下記のように描画されます。

上記のマインドマップに、a2_1の下にサブブランチ、a3を追加します。

mindmap
	root
		a1
			a2_1
				a3
			a2_2
		b1
		c1

下記のように描写されますが、root --> a1 --> a2_1 --> a3 と階層が下がるとブランチが段々と細くなっていきます。

各ノードの形を変える

各ノードに使える形状には、

• cloud（雲吹き出し）
  ) ( で括る
• bang（爆弾吹き出し）
  )) (( で括る
• circle（円形）
  (( ))で括る
• round square（角丸四角形）
  ( )で括る
• square（四角形 ）
  [ ] で括る
• default（デフォルト）

の6種類がありますが、デフォルトは何も指定しない場合です。<br/>は改行です。

mindmap
	)cloud<br/>雲吹き出し(
	))bang<br>星吹き出し((
	((Circle<br>円形))
	(rounded square<br>角丸四角形)
	[square<br>四角形]
	default shap<br>デフォルト

描画すると下記のようになります。squareとdefaulとの違いはよく見るとデフォルトは下に線が入っています。

アイコンを使う

ノードの中にアイコンを記載することもできます。Font Awesomrのアイコンが使用でき、class名を指定します。

Font Awesomrのclass名は、Font Awesome4.7フォント一覧で調べられます。

アイコンを記載したノードの下に同じ階層で

::icon(fa class名)

という形式で指定します。

a1に音符、b1に封筒、c1にユーザのアイコンをそれぞれ指定する場合には下記のように記載します。

mindmap
	)Root(
		music
		::icon(fa fa-music)
		envelope
		::icon(fa fa-envelope-o)
		user
		::icon(fa fa-user)

こんな感じです。Font Awesomrのclass名で記載するので少々面倒ですが、アイコンを使うとマインドマップらしくなります。

色の指定と配置はできない

ブランチの色を変更することはできません。またブランチの配置を変更することもできません。しかし、マインドマップ描画ソフトを使わなくてもMarkdownでマインドマップが簡単に描けるのは便利です。

円グラフを書く（おまけ）

最後に Mermaid を使った円グラフの描き方です。こちらも簡単に描けます。

```mermaid コードを記載します。

• 1行目：pie円グラフの宣言
• 2行目：titletitleの後が円グラフの表題
• 3行目以降：円グラフの要素
  ”グラフの項目名”：比率

下記がサンプルコードです。

pie
	title pie chart
	"50%" : 50
	"30%" : 30
	"20%" : 20

下記が、Mermaidで描いた円グラフになります。

bar chart（棒グラフ）もMermaidで描けるともっと便利になるのですが、、、。