ATOM エディタを使った作図（PlantUML 編）

前回で ATOM エディタの掃除も終わったので，以前から気になっていた「PlantUML を使った作図」について調べてみた。 ええ，分かってますとも。 前回に引き続き「現実逃避」というやつです。

• Open-source tool that uses simple textual descriptions to draw UML diagrams.

ATOM に PlantUML 関連パッケージを導入する

PlantUML 自体は UML (Unified Modeling Language; 統一モデリング言語) を記述するための DSL (Domain-Specific Language; ドメイン特化言語) と考えてよい（実際には UML 以外のものも記述可能）。 UML の構文（に相当するもの）は図形で表されるが，それをテキストで記述できるようにしたのが PlantUML である。 「UML って何？」って方もおられるだろうが，それは後ほど説明する。

直前に述べたように PlantUML 自体はテキストで記述するが，最終的には図（diagram）に落とし込むため Graphviz と Java の実行環境が必要となる¹。 これらをあらかじめ導入しておくこと（導入方法については割愛する）。

ATOM で UML を書く（描く）ために以下の2つのパッケージを導入する。

• language-plantuml
• plantuml-viewer ²

language-plantuml は（今のところ）ハイライト機能しかないようなので無くても構わないが， plantuml-viewer は描画に必要なので必ず導入すること。

plantuml-viewer を導入したら Settings を開いて “Charset” および “Graphviz Dot Executable” 各項目の設定をしておく。

“Graphviz Dot Executable” 項目には Graphviz の dot コマンドへのフルパスをセットする。 “Charset” 項目については， ATOM で書くんだから UTF-8 にしておけばいいだろう。

最初はやっぱり Hello World でしょ

動作確認を兼ねて何か書いてみる。

language-plantuml では .pu, .puml, .plantuml を PlantUML 用の拡張子と認識するようなので，まずは hello.puml ファイルを作って以下のように記述する。

Bob->Alice : hello

これを plantuml-viewer で表示する（ctrl-alt-p でビュアーが開く）。

おおっ。 できたできた。 表示されている図は PNG, SVG, EPS のいずれかの形式で保存できる（コンテキスト・メニューから “Save As …” を選択する）。

PlantUML は @startuml ... @enduml の間を記述領域と見なすようで

ほげほげ

@startuml
  Bob->Alice : hello
@enduml

ほえほえ

と書いても，全く同じ図が出力される。 他形式のドキュメントに埋め込むことを想定してのことだろうが³，今回は単純に図が出力できればいいので，以降の記述では @startuml および @enduml を省くことにする。

見た目の調整

このままでもいいっちゃあいいのだが，もう少し見た目をどうにかしたい。 まずはモノクロ表示にしてみる。

skinparam monochrome true
Bob->Alice : hello

これで

という感じにモノクロになった。 調子に乗ってもう少し色々と弄ってみよう。

skinparam shadowing false
skinparam default{
  FontName 'Noto Serif', 'Noto Serif JP', serif
  FontColor black
  FontSize 14
}
skinparam sequence {
  ArrowColor Black
  ArrowFontName 'Noto Sans', 'Noto Sans JP', sans-serif
  ArrowFontColor black
  ArrowFontSize 10
  LifeLineBorderColor Black
  LifeLineBackgroundColor White
  ActorBorderColor Black
  ActorBackgroundColor White
  ParticipantBorderColor Black
  ParticipantBackgroundColor LightGray
  MessageAlign center
}

actor ボブ
participant Alice

ボブ->Alice : こんにちは
activate Alice

Alice-->ボブ : Hello
deactivate Alice

前半部分で線や背景色の色およびフォントについて指定し⁴，後半部分で実際のシーケンスを記述している。 これを SVG に出力するとこんな感じになる。

見た目の記述に毎回あれだけの量を書くのはかったるいのでインクルードファイルとして別出ししてしまおう。

!include style.puml

actor ボブ
participant Alice

ボブ->Alice : こんにちは
activate Alice

Alice-->ボブ : Hello
deactivate Alice

これでスッキリした。 style.puml ファイルの中身はこんな感じで，記述をそのままコピっただけ。

skinparam shadowing false
skinparam default{
  FontName 'Noto Serif', 'Noto Serif JP', serif
  FontColor black
  FontSize 14
}
skinparam sequence {
  ArrowColor Black
  ArrowFontName 'Noto Sans', 'Noto Sans JP', sans-serif
  ArrowFontColor black
  ArrowFontSize 10
  LifeLineBorderColor Black
  LifeLineBackgroundColor White
  ActorBorderColor Black
  ActorBackgroundColor White
  ParticipantBorderColor Black
  ParticipantBackgroundColor LightGray
  MessageAlign center
}

PlantUML で作図可能な UML 図

現在 UML 2.0 では以下の図（Diagrams）が定義されている。

• Diagrams
  • 構造図（Structural Diagrams）
    • クラス図（Class Diagram）
    • オブジェクト図（Object Diagram）
    • パッケージ図（Package Diagram）
    • コンポジット構造図（Composite Structure Diagram）
    • コンポーネント図（Component Diagram）
    • 配置図（Deployment Diagram）
  • 振る舞い図（Behavioral Diagrams）
    • ユースケース図（Use Case Diagram）
    • アクティビティ図（Activity Diagram）
    • 状態遷移図（State Machine Diagram）
    • シーケンス図（Sequence Diagram）
    • コミュニケーション図（Communication Diagram）
    • 相互作用概要図（Interaction Overview Diagram）
    • タイミング図（Timing Diagram）

リンクがあるものが PlantUML 記述可能な図である。

UML 各図の中の線や図形は全て「意味」が決められており，それらを組み合わせることでシステムの仕様や設計が表現できることを目指している。 名前が示す通りモデリングの設計手法と相性がいいため，オブジェクト指向設計においてよく使われる。

実際には上で挙げた図を全て駆使するのではなく，システムの性格や規模に応じて幾つかの図を組み合わせて使うのが普通である。

UML 図の中でもよく使われるシーケンス図とクラス図について PlantUML での記述を紹介しよう。 以前「そうだ，シーケンス図を描こう！」の中で， mermaid 記法で書いたシーケンス図

を PlantUML で作図するとこんな感じだろうか（図のリンク先が PlantUML ソースコード）。

じゃあ， mermaid 記法で書いたクラス図

を PlantUML で作図するとこんな感じかな（コメントをちょろんと加えてみた）。

おおっ。 流石にクラス図は PlantUML の方がいいな。 矢印は横向きにも出来るっぽい。

今度からクラス図描くときは PlantUML で描くようにしよう。

やっぱり考えながら描く

「そうだ，シーケンス図を描こう！」でも書いたんだけど，クラス図やシーケンス図といったものは試行錯誤しながら描いていくものなのよ⁵。 お客さんもマネージャもプログラマも UML 図を中心に議論を行っていく。 だから作成や修正が面倒なツールはダメなのだ。 PlantUML は時々刻々と修正されることを前提にしたツールと言える。

もうひとつ。

要求定義を行っていくと「要求」やそれに伴う「仕様」が大きく変化することがある。 変化すること自体は（改善されてるってことだし）結構なのだが（予算規模が変わってアワアワする可能性はあるけど），あとからチームに参加する人たちは「結果」しか提示されないので「何故そのような「要求」に至ったか」が理解できないことが多い。 不完全な理解のまま作業をすすめると必ず何処かで不整合が起きる（つまり文脈（context）が大事ってこと）。

だから議論の流れを後から追えるよう「履歴」をとっていく必要がある。 私が最近 UML 図に関して教わったのは

1. 最初は不完全でも間違ってても構わない。まずは考えていることを図にぶちまけることが重要
2. ただし，クラス図では多重度を記述すること（MUST）
3. 要求定義レベルの図と設計レベルの図は必要とされる詳細度や厳密度が異なる。最初から設計レベルの図を描こうとしないこと
4. 作成した図は（手書きのものも含めて）全て履歴として保管し，後から参照できるようにすること

だったかな。

PlantUML の利点は，テキストであるが故に修正・変更が容易で， git などのバージョン管理システムと組み合わせて履歴から差分情報を抽出しやすいことにある。 ぶっちゃけ，出力としての PNG や SVG 画像ファイルにはさしたる価値はなく， UML 用の DSL である PlantUML の記述にこそ大きな価値があるということだ。

ブックマーク

• UML入門 - IT専科

• Changing colors and fonts

• PlantUML の使い方 | プログラマーズ雑記帳

• PlantUML Cheat Sheet - Qiita

• AtomとPlantUMLで爆速UMLモデリング - Qiita

• Atom+PlantUMLで見た目もいい感じのシーケンス図を作成する - Qiita

• PlantUMLでER図を描く！ – VELTRA Engineering – Medium