LoginSignup
35
34

More than 3 years have passed since last update.

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

Posted at

本記事はcloudpack あら便利カレンダー 2019の記事です

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

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

動作環境

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

$ code --install-extension jebbs.plantuml

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

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
*** <s>Raspmbc</s> => OSMC
*** <s>Raspyfi</s> => Volumio
@endmindmap

見た目は結構好きです

test.png

ノードの形状設定

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

@startmindmap

* root
** box
**_ text

@endmindmap

test-1.png

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

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

@startmindmap

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

@endmindmap

test-2.png

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

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

@startmindmap

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

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

@endmindmap

test-3.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

注意点

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

ネストはタブ(\t)でないとダメです。スペース4つではエラーが出てレンダリングされなかったです。
自分の設定(デフォルト?)では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

こっちならいけました。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

ネストの限界

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

@startmindmap
title マインドマップ

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


@endmindmap

nest.png

まとめ

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

参考

MindMap syntax and features
PlantUMLでマインドマップを作成する - システムとモデリング
PlantUMLにマインドマップが追加 | Software Quality Topics.

35
34
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
35
34