バーr……blog のようなもの

04 月 06 日 ( 日 )

思考整理のためのツールを考える Part 3

本日は思考整理ツールとして PlantUML の目的外使用方法例を説明していきます。どうして目的外使用になるのかかというと、昨日の日記でも触れたように PlantUML は本来 UML を描くためのソフトウェアだからです。

PlantUML に限りませんが、昨日からまとめ始めているテキストファイルから図を生み出す方法論の真髄は、よくあるテキストエディタでもってサクサクと図を描いたり修正したりという作業を効率よく行うことにあり、思考の整理はテキストエディタでテキストを編集しているときに頭の中で行なわれることにあります。

なのでこの方法論での主役は、テキストエディタや紹介しているソフトウェアでもなく、あなたの頭脳ということになります。この方法論では少くとも状況整理や問題解決のための情報整理に集中する思考形態が開発されやすくなるので、IT 系エンジニアでなくても取り組むことをお勧めします。

とはいえ利用するソフトウェアの使い方を知るのは非常に重要です。今回からは各ソフトウェアの使い方を説明していきます。まず始めに取り上げるのは PlantUML になります。

最初に PlantUML で思考を整理する際に活用できる部品を紹介します。以下のような部品を使うことができます。

クリックまたはタップすると新しいタブで表示され拡大等しやすくなる。図のソースファイルはここ。

これらの部品のことを PlantUML ではエレメントと呼ぶので以降はエレメントと呼ぶことにします。UML で使われるものばかりですが、UML を描くのではなく思考整理を目的に使うのですから自由に選んで使ってかまいません。使用頻度が最も高くなるのは rectangle かもしれません。その名の通り長方形が描かます。

上図のエレメントリストは以下のソースを PlantUML で変換すると生成されます。

@startuml
actor actor
actor/ "actor/"
agent agent
artifact artifact
boundary boundary
card card
circle circle
cloud cloud
collections collections
component component
control control
database database
entity entity
file file
folder folder
frame frame
hexagon hexagon
interface interface
label label
node node
package package
person person
queue queue
rectangle rectangle
stack stack
storage storage
usecase usecase
usecase/ "usecase/"
@enduml

ソースファイルでの各エレメントの書き方は以下のようになります。

rectangle "四角形その 1"

または

rectangle "四角形その 2" as r2

rectagnel はエレメントの形状を示し "" で囲まれた文字列はエレメント内もしくはエレメントのそばに表記される文字列になります。" as r2" は何かと言うとエレメントに r2 という別名をつけています。

なぜエレメントに別名をつけるのでしょうか。

下の例を見てください。

@staruml
rectangle "箱"
rectangle "箱"
@enduml

人の感覚としては長方形が 2 つ並ぶと直感的に感じてしまいますが結果は下図のようになります。

複数のエレメントに同じ文字列が書かれていると PlantUML はそれらを区別することができません。区別できないとどうなるかというと上図のようにそれらを同一のエレメントとして解釈します。そして図上で 1 つのエレメントとしてまとめてしまいます。つまり 1 つのエレメントのみが表示されるという結果になります。

表示される文字列は同一であっても、そのようなエレメントを複数使うというのは日常的によくあることです。むしろ同じ見た目の "箱" が複数描けないと困ることがほとんどですよね。

それでは同じ見た目の "箱" を複数描きたいときはどうすればいいのかというと、PlantUML ではそれぞれの "箱" に別名をつけることで解決します。

@staruml
rectangle "箱" as box1
rectangle "箱" as box2
@enduml

上のように複数の見た目が同じエレメントに別名をつけてやると PlantUML は下図のように複数の "箱" を描いてくれます。

また後で述べるリレーションをエレメント間に引く場合に、エレメントの別名を決めておくとパンチの量を減らすとができるというメリットもあります。エレメント内の文字列が長くなるというのはよくあることです。

たとえばレインボーマンの変身呪文などで

@staruml
rectangle "阿耨多羅三藐三菩提\n====\n阿耨多羅三藐三菩提" as charm
@enduml

などとした場合、後述するリレーションを引くときに下のように別名を指定して書くことができます。

@staruml
actor "ヤマトタケシ" as takeshi
rectangle "阿耨多羅三藐三菩提\n====\n阿耨多羅三藐三菩提" as charm
person "レインボーマン" as rainbow
takeshi -down-> charm
charm -down-> rainbow
@enduml

図が描かれる方向についても触れておきます。

上の図ではエレメントが横に並べられていますが、これは PlantUML の自動判別機能によりデプロイメント図が選択されていることによります (デプロイメント図という名前はここでは覚えなくてかまいません)。

この自動判定を off にする方法は少なくともこの日記が書かれた時点では存在しません。PlantUML は本来 UML を描くためのソフトウェアなので、@startuml と @enduml に囲まれたテキストがどのように書かれているかによって UML のどの図なのかを自動判別します。

PlantUML を使った思考整理ではこのデプロイメント図を、本来の目的とは異なりますが、流用することになります。もちろん他の図で適したものがあればそれを使ってもかまいません。UML を描くツールを使うのですが UML を描くわけではないのでツールは自由に使ってかまいません。

次に各エレメント間に引かれる線、リレーションについて説明していきます。

各エレメント間にリレーション、つまり矢印線を引くと図に方向が発生します。特に何も指定しなければデフォルトの方向は縦方向になります。

上図では図は上下に流れていますが、左右に方向を変更することもできます。左右に方向を変えるのに最も簡単な方法はソースに以下の行を加えることです。

left to right direction

下図で上記コードを最初の行に入れています。

図の配置をもう少し制御したいと願うのは人の自然な心の発露で自然な感情です。あまり自由度はないのですが、リレーションの方向を指定するとで、多少は次のエレメントをどの方向に置くのかを、ある程度コントロールすることができます。ただしあくまである程度ということにはなります。

ソースを見ればわかりますが、元のソースのリレーションに対して

-->

下のように right を加えただけです。

-right->

このリレーションの方向には up、down、left、right の 4 つを指定することができます。逆に言えばこの 4 つしか指定できません。

PlantUML で図を作成していく場合、エレメントの選択、リレーションの設定、デフォルト方向の設定、リレーションの方向を駆使して、図を作成していくことになります。とはいえレイアウトの自由度はほとんどありません。PlantUML がレイアウトのほぼ全てを決定します。

たとえばデフォルトレイアウトエンジンを使う場合リレーションが頻繁に曲線になりますが (というよりも直線になるのはまれです)、それをユーザが無理矢理直線にする方法は存在しません。

リレーションの装飾もなんとかならないかと思うのは人の情の常です。PlantUML を使う場合は UML で使われるリレーションの修飾や変更を適用することはできます。逆に言えばこれ以外の変更はできないということです。PlantUML 以外の他のツールも必要な所以ですし、他のツールでも事情は同様です。

図のレイアウトの制御はやはりニーズとして多く、Web の検索などで "plantuml layout" などを検索語として指定すると "PlantUML のレイアウト辛い" だとか "打倒！PlantUMLのなにこれレイアウト" などの悲鳴サイトがやたらとヒットします。気持がわかりすぎてつらいところです。

そのような中、地道にレイアウトをコントロールするためのノウハウをまとめている人もいます。PlantUML GraphViz Layout - mark.george/Wiki などが網羅とは言い難いのですが代表かもしれません。

もしかすると作成した図をプレゼンテーションなどに使いたいという人も多いかもしれません。そのような場合は上記のようなサイトの情報を駆使して頑張ることになります。

ただしこの連載でのソフトウェアの使用目的はあくまでも思考の整理と見える化、俯瞰、修正であって、図のレイアウトに腐心することでないことは繰返したいと思います。ツールをいじることに快感を見出して本来の目的を見失ってはいけません (お前が言うなとはよく言われます)。

とは言うものの出てきた図の見え方に思考は影響を受けますのでレイアウトに対してあまりに無頓着なのもあまりよくありません。そのあたりは各人自分自身の作業バランスと相談しながら良い落とし所を探ってください。試行錯誤こそが自分自身のバージョンアップに繋ります。

今日のまとめは以下のようなものになります。

エレメントの種類の紹介
エレメントには別名を与える
図が描かれる方向は初期設定ができる
リレーションを利用してエレメントの配置を大まかではあるが設定することがでる
リレーションも種類が少いものの変更を加えることができる
レイアウトの制御もある程度は可能だがほぼ不可能なのであまり時間を割くべきではない
思考の整理、見える化、俯瞰、修正に集中せよ <- これが一番大事

次回は PlantUML による Work Breakdown Structure の描きかたについて説明していきます。

Category :
#日記
#blog
#思考整理ツール
#ライフハック
#仕事からの応用
#PlantUML
#デプロイメント図

思考整理のためのツールを考える Part 4

さて今回は PlantUML による Work Breakdown Structure の描きかたについて説明します。とは言ってもあまり書くことがありません。それとそもそも Work Breakdown Structure は UML の図ではない、というような IT 系の話はここでは省略します。

Work Breakdown Structure には UML のデプロイメント図と違ってエレメントのような概念は存在しません。もともとそうなのか、それとも PlantUML 上でのみそうなのかは存じ上げません。Work Breakdown Structure は文字が書かれた長方形とそれらを結ぶ線で構成されます。

起点となる長方形から、まるで根のように線が伸び、枝分れし、それぞれの根に芋が生るように長方形がぶらさがるような形状になっています。この形状の変更は一切できません。

上の図のソースファイルは以下になります。

@startwbs
* Instant Karma
** Current Member
*** Takapii
**** Vocal
*** Syun
**** Guitar
*** Michee
**** Vocal
**** Keyboard
*** Tetsu
**** Vocal
**** Bass
*** Toku
**** Drums

** Past Member
*** Ken
**** Vocal
**** Guitar
**** Bass
**** Drums
*** OrzBruford
**** Drums
@endwbs

あくまで個人的なニーズなのですが、上記の例でいえば Current Member と Past Member が縦に並んでくれるとありがたいのですが、やはりそうはなりません。そういう図ではないということのようです。

ただ下のようにワンクッションおくと僅かに状況は変化します。

@startwbs
* Instant Karma
** Member
*** Current
**** Takapii
***** Vocal
**** Syun
***** Guitar
**** Michee
***** Vocal
***** Keyboard
**** Tetsu
***** Vocal
***** Bass
**** Toku
***** Drums

*** Past
**** Ken
***** Vocal
***** Guitar
***** Bass
***** Drums
**** OrzBruford
***** Drums
@endwbs

ルートの長方形のセンタリングが強制なので、若干不満は残りますが、使用目的を考えるなら妥協が必要なポイントだとも言えます。

Category :
#日記
#blog
#思考整理ツール
#ライフハック
#仕事からの応用
#PlantUML
#WorkBreakdownStructure

思考整理のためのツールを考える Part 5

今回は PlantUML のデプロイメント図と Work Breakdown Structure に他の図や画像を埋め込む方法を説明します。

難しい話にはなりません。ホームページを自分で書いたり、MarkDown のドキュメントに画像を埋め込むことが日常の人はここでもそれをすればいいだけです。ただ書式やルールが異るだけの話です。

@startwbs
* Jazz Unit
** Member
*** Sax\n<img src="fig2025040617.png">
*** Piano\n<img src="fig2025040615.png">
*** Electric Guitar\n<img src="fig2025040616.png">
*** Bass\n<img src="fig2025040614.png">
*** Drums\n<img src="fig2025040613.png">
@endwbs

注意点は、ソースを見るとまるで html の img 要素に見えます。でも書式が似ているだけで html ではありません。html では必須になっている width 属性や height 属性など、あるいは他の属性を記述するとエラーになり画像はインポートされません。

仮に画像のサイズを調整して表示させたい場合は、あらかじめ画像のサイズを編集して変更しておいてから PlantUML に取り込むことになるのがかなり残念仕様だと言えます。つまり現バージョンの PlantUML では画像変換のタイミングでインポート画像のリサイズは不可能だということになります。

以上 Work Breakdown Structure の場合について説明してきました。ここからはデプロイメント図での解説になります。デプロイメント図の場合は次のようになります。

@startuml
(<img src="fig2025040619.png">) as sns1
note right: 買収により消滅\nさようなら\n青い小鳥ちゃん
(<img src="fig2025040620.png">) as sns2
note right: こんにちは\nイーロンさん
sns2 --> sns1 : 　買収
@enduml

上のソースを PlantUML で画像にすると下図のようになります。

最後に注意点に触れておきます。Work Breakdown Structure には svg 画像も埋め込めますが、デプロイメント図に svg 画像を埋め込もうとするとエラーになります。図による統一性がみられないので混乱します。

Category :
#日記
#blog
#思考整理ツール
#ライフハック
#仕事からの応用
#PlantUML
#デプロイメント図
#WorkBreakdownStructure

思考整理のためのツールを考える Part 6

PlantUML の話はまだ続きます。今回は PlantUML がサポートするテーマ機能について書いていきます。PlantUML ではテーマというものを指定すると、図の見た目の雰囲気をがらりと変えることができます。

例えばこの連載で何度も登場している下の図ですが

spacelab-white というテーマを指定すると下図のように見た目が雑誌に載ってそうな感じに変わります。

テーマを設定するのは非常に簡単です。

!theme spacelab-white

という行をソースファイルの最初の方に追加するだけです。以前のバージョンのものと比べるとデフォルトのテーマもかなり美しくなりましたが、もし他のテーマを試したいならここにリストがありますので、参照して設定するのがいいでしょう。

Category :
#日記
#blog
#思考整理ツール
#ライフハック
#仕事からの応用
#PlantUML
#デプロイメント図

思考整理のためのツールを考える Part 7

PlantUML の最終回としてこれまで触れてこなかったレイアウトエンジンについて少しだけ触れたいと思います。

PlantUML はデフォルトのレイアウトエンジンとして GraphViz を利用しているとドキュメントの至るところにかかれています。ですがどうもそうは単純ではなく、現在の最新バージョンでは PlantUML 自身にレイアウトエンジンも含むようになっているだけではなく PlantUML の Layout Engines and Options というページを読むと複数のレイアウトエンジンを使うことができるようです。

PlantUML が複数のレイアウトエンジンを使うことができることを知ったのが、実はこの連載を書き始めてからのことになります。なので実際に動かして試したのが筆者が使いたいと思っていた ELK(Eclipse Layout Kernel) のみとなります。PlantUML で ELK のレイアウントエンジンを使えるようにするためのインストール方法は後述します。

レイアウトエンジンに ELK を指定するとどのように図が変化するのか例を示します。この連載で何度も登場している下図に ELK のレイアウトエンジンを使うことにします。

ELK レイアウトエンジンを使うと上図が下図のようになります。

全体的に図が四角く直線的になり、Nrf2 からミクログリア細胞の活性化に伸びるリレーションが、他のリレーションに交差することがなくなっています。このリレーションの交差を極力なくすようにレイアウトを自動調整してくれるのが ELK レイアウトエンジンの魅力です。

ただ見ての通り note (注釈) はかえって微妙な描き方になってしまっています。またこの角ばったレイアウトがマッチしない、あるいは気に入らないという場合もあるでしょう。その場合はデフォルトのレイアウトエンジンや他のレイアウトエンジンを選択するということになります。

レイアウトエンジンに ELK を使う場合のソースの変更点はというと以下の一行を "@startuml" の次の行に書き加えるだけです。

!pragma layout elk

さてレイアウトエンジンの変更方法ですが、実は少し面倒な作業になります。プログラマーであればプログラムの差し替えやインストールは日常ですからさほど苦労することもないかと思いますが非プログラマーでプログラムのインストール作業が非日常の人にとってはあまりやりたくない作業かと思います。

そのようなこともあり、ELK レイアウトエンジンに限って最も簡単と思える ELK レイアウントエンジンの PlantUML への導入方法を述べていきたいと思います。

レイアウトエンジンを変更するにあたり現時点で知っておく必要があるのが、PlantUML は Java というプログラミング言語で作られているということです。PlantUML の本体は plantuml.jar というファイルになります。この plantuml.jar というファイルを Java プログラムを動かすためのプログラム (ややこしいですね) である java が読み込んで実行します。

PlantUML のバージョンやパッケージによっては plantuml.jar に ELK レイアウトエンジンが含まれていないことがあります。そのような場合は ELK レイアウトエンジンを含んでいる plantuml.jar ファイルをダウンロードしてもともとの plantuml.jar ファイルを置き換えてやるか実行時に指定する jar ファイルを変更してやる必要があります。

ダウンロードは PlantUML の公式サイトからできます。

plantuml.jar をダウンロードするにあたり、気を付けることがあります。単に PlantUML を使うだけなら GPLv3 版をダウンロードしてください。ダウンロードのリストには単に GPL と書かれています。GPLv3 版のバージョン 1.2024.6 以降であれば jar ファイルに ELK レイアウトエンジンも含まれています。

ダウンロードリスト下の表を見ると ELP パッケージにしか ELK レイアウトエンジンが同梱されているようにしか見えません。しかし実際には 1.2024.6 以降のバージョンであれば GPLv3 版にも ELK レイアウトエンジンが同梱されています。

コマンドラインの例としては以下のようなものが考えられます。ソースファイルと plantuml-1.2025.2.jar が同じフォルダに入っているという前提のコマンドラインになります。

java -jar "plantuml-1.2025.2.jar" -tsvg ソースファイル名

上の例の -tsvg は svg 画像にするよう指示しています。png にしたいのであれば -tsvg ではなく -tpng を指定します。-t オプションを省略すると plantuml は出力を png にします。

plantuml-1.2025.2.jar がソースファイルと異なるフォルダにある場合、plantuml-1.2025.2.jar はフルパス又は相対パスで指定する必要があります。いちいちパンチしてられないという場合はバッチファイルやシェルスクリプトを書いたり、alias を設定するのがいいかと思います。

上の一文でわからない言葉がでてきたと思った人は、パソコンに詳しそうな身近な人に尋ねてください。もちろんネットで検索してもかまいません。

以上で思考整理のための PlantUML の基本的な使い方のお話は終ります。次回からは GraphViz を取り上げたいと思います。