PlantUMLでマインドマップがかけるようになっていた件

本記事は[cloudpack あら便利カレンダー 2019](https://benri2019.cloudpack.jp/)の記事です

久しぶりに[PlantUMLのホームページ](http://plantuml.com/ja/)を見たらマインドマップが書けるようになっていた(β版)ので、試してみました。

そこまで機能充実というわけではないので、ほとんど公式ページそのままレベルになりますが、この書き方もできるのかな？と気になったところは追加しています

# 動作環境

Visual Studio Code にエクステンションを入れて確認しました

```bash
$ code --install-extension jebbs.plantuml
```

この辺りは自由ですが、PlantUMLサーバに処理を投げたかったので、dockerを使ってローカルにPlantUMLサーバを立てました

```yaml
version: '3.3'
services:
  plantuml:
    image: plantuml/plantuml-server
    ports:
      - 28080:8080
    tty: true
    restart: always
```

Visual Studio Codeの設定でこのサーバを参照するようにしておきます

```setting.json
{
    "plantuml.render": "PlantUMLServer",
    "plantuml.server": "http://localhost:28080",
}
```

# 使い方


とりあえずサンプルをそのまま拝借

EmacsのOrgモードの箇条書きの構文を利用しているようです。

```
@startmindmap
* Debian
** Ubuntu
*** Linux Mint
*** Kubuntu
*** Lubuntu
*** KDE Neon
** LMDE
** SolydXK
** SteamOS
** Raspbian with a very long name
*** 
Raspmbc
 => OSMC
*** 
Raspyfi
 => Volumio
@endmindmap
```

見た目は結構好きです

![test.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/330514/f2350ff5-984c-8cd3-db51-4b78208fe898.png)


## ノードの形状設定

現状はボックスのあるなしの変更のみのようですね。
`_`をつけることでボックスが消せます。

```
@startmindmap

* root
** box
**_ text

@endmindmap
```

![test-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/330514/0af54b52-0cfc-5bb1-ef78-7924fd3491a7.png)


## 枝のレンダリング方向の変更

`*`あるいは`+`を使った場合は右方向に枝が伸びていきます。
`-`を使った場合は左に伸びていきます。

```
@startmindmap

+ root
++ right
+++ right right
*** right2
-- left
--- left left
-- left2

@endmindmap
```

![test-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/330514/3cfe90e1-6c5a-ab93-f811-88d27742f71c.png)


あるいは`left side`というキーワードで切り替えることも可能のようです。

ただし、`+`の場合はこのキーワードを使っても右側に表示されるようです。

```
@startmindmap

+ root
++ right
+++ right right
*** right2

left side
** left
*** left left
++ left2

@endmindmap
```

![test-3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/330514/20adefc4-5996-cec0-cbc3-c06430673cdb.png)


# Markdown記法

一応Markdownでも書けるようです。一応という感じですが

```
@startmindmap
* root node
	* some first level node
		* second level node
		* another second level node
	* another first level node
 @endmindmap
```

![test-4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/330514/bd5b957d-7c04-468b-005f-caccfafae416.png)


## 注意点

### スペースだとエラーが出る

ネストはタブ(`\t`)でないとダメです。スペース４つではエラーが出てレンダリングされなかったです。
自分の設定(デフォルト？)ではVisual Studio Code でTABキーを押すとスペースが挿入されたのでエラーになったので注意です。

個人的にはここがネックかな？と思ったのでMarkdownでの利用はしないかな、と思いました

### 左方向へのレンダリング

orgモード記法の場合は`*`と`-`で分けていましたが、Markdown記法の場合はエラーが出ました。

こんな感じで行けるかと思ったんですが、ダメでした。

```
@startmindmap
* root node
	* some first level node
		* second level node
		* another second level node
	* another first level node
    - left side node
        - left left
 @endmindmap
```

![test-5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/330514/40b18779-38e7-4d12-105a-cdd125bed5d2.png)

こっちならいけました。`left side` を使えば良いみたいです

```
@startmindmap
* root node
	* some first level node
		* second level node
		* another second level node
	* another first level node
left side
	* left side node
		* left left
@endmindmap

```

![test-6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/330514/8a71c4b6-198e-5269-11f8-8a338aabbd7f.png)

# ネストの限界

どこまでネストできるかという記載は特に見当たらなかったので、とりあえず試してみました。
無限かどうかはわかりませんが、とりあえず困るレベルでは問題はなさそうですね

```
@startmindmap
title マインドマップ

* ネスト
** ネスト
*** ネスト
**** ネスト
***** ネスト
****** ネスト
******* ネスト
******** ネスト
********* ネスト
********** ネスト
*********** ネスト
************ ネスト
************* ネスト
************** ネスト
*************** ネスト
**************** ネスト


@endmindmap
```

![nest.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/330514/dc29375a-fadd-4474-df57-a904e353e02d.png)

# まとめ

マインドマップというほどいろんな方向に枝の伸びるわけでもなかったので、ロジックツリーに近い感じでした
個人的な頭の整理にはお手軽でちょうど良いので、使っていこうかなと思いました。
お仕事レベルで複数人共有とかを考え始めると微妙かもしれませんが

# 参考

[MindMap syntax and features](http://plantuml.com/ja/mindmap-diagram)
[PlantUMLでマインドマップを作成する - システムとモデリング](http://otepipi.hatenablog.com/entry/2019/04/23/201139)
[PlantUMLにマインドマップが追加 | Software Quality Topics.](http://swquality.jp/?p=957)