PlantUML 備忘録

PlantUML

PlantUMLUML図描画のためのDSL(ドメイン特化言語) です。
業務で図形を描画するには一般的に CacooGoogle図形描画などが使用されることが多いですが、バージョン管理に一苦労することはネックかと思います。
PlantUMLは指定の記述方法を利用することでテキストベースで主要なUML図を作成することができるため、バージョン管理ツールで管理しやすく、記述方法も比較的シンプルで直感的であることが強みです。

PlantUMLが対応するダイアグラム

PlantUMLが対応するダイアグラムは以下の通りです。主要なものはだいたいサポートされているかと思います。

  • シーケンス図
  • ユースケース
  • クラス図
  • アクティビティ図
  • コンポーネント
  • 状態遷移図(ステートマシン図)
  • オブジェクト図
  • 配置図
  • タイミング図

UML以外の図もサポートしてます。

PlantUML Viewer(Chrome拡張機能

テキストで記述したUML図を確認するのに個人的にオススメなのがChromeウェブストアからDLできる PlantUML Viewer です。
Eclipseプラグインなども存在しますがなんか色々インストールが必要でめんどくさかったり、そもそもEclipse起動するのも面倒だし、お手軽にブラウザで確認できるところが気に入っています。
PlantUML系のまとめを読んでいても案外Chrome拡張機能があることは記述がないので、布教程度に。

拡張機能の追加後、chrome://extensions/ にアクセスし、下記にチェックを入れることで有効となります。
f:id:mpiman:20171220125632p:plain

シーケンス図

まずは業務でも作成したことのあるシーケンス図について、簡単なウェブアプリケーションのログイン機能を想定して作成していきます。
シーケンス図については、この辺り がとても参考になりました。
簡単には、クラスやオブジェクト間のやりとりを時間軸に沿って表現している図のことです。
最終的にはこんな図を作成したいと思います。↓
f:id:mpiman:20171220170146p:plain

PlantUMLでシーケンス図

まずはおまじない。お好きな場所にテキストファイル(.txt)を作成し、下記の青字の記述を追加します。

@startuml  
    ここに記述していきます  
@enduml  

ログインするユーザを配置します。

@startuml  
    actor ユーザ  
@enduml  

この時点でchromeからシーケンス図を確認すると、ユーザの図が現れているはずです。このようにどんどんテキストでシーケンス図を書いていきます。

先ほどは分類子(棒人間の図)を表現するために actor というキーワードを使用しましたが、ほかにも下記のようなキーワードを使用することで分類子を簡単に表現できます。

  • actor
  • boundary
  • control
  • entity
  • database

これ以降、デフォルトの分類子(四角)を表現するために participant キーワードを使用していますが、省略もできますので明示的に宣言する必要はありません。

次に、処理の進む方向を -> 、戻る方向を --> もしくは <-- で表現します。
ログイン処理を行うため、ユーザ分類子からログイン分類子に処理を進めます。

@startuml  
     actor ユーザ  
     participant ログイン処理
     ユーザ -> ログイン処理 : ログイン  
@enduml  

処理の説明を : で区切った先に記述します。

また、分類子には別名をつけられます。ユーザに user 、ログイン処理に login という別名をつけてみます。シーケンス図の見た目こそ変わりませんが、別名を付与した以降は別名を使用して記述していけますので、大規模なシーケンス図になればなるほどありがたいですよね。 2byte文字を参照せずに済むという利点もあると思います。

@startuml  
    actor ユーザ as user  
    participant ログイン処理 as login
    user -> login : ログイン  
@enduml

次に、ライフラインでイベントが実行中であるということを示すため、 activatedeactivate キーワードを追加していきます。 これを追加することで、ライフライン上にイベント実行中(四角い箱)が表現されます。

@startuml  
    actor ユーザ as user 
    participant ログイン処理 as login 
    activate user
        user -> login : ログイン  
    deactivate user
@enduml

次にログイン処理がユーザの存在を確認しに行くデータベース分類子を定義し、処理を進めます。

@startuml  
    actor ユーザ as user  
    participant ログイン処理 as login
    activate user
        user -> login : ログイン  
        activate login
            database データベース as db
            activate db
                login -> db : データベース問い合わせ
            deactivate db
        deactivate login    
    deactivate user
@enduml

ここまででリクエストの定義は完了です。次のステップからレスポンスを定義していきます。

先ほども少し触れましたが、処理の戻る方向は --> もしくは <-- で表現します。
この二つに表現される内容の違いはありませんが、可読性のためにレスポンスであることがわかりやすいよう <-- の使用が推奨されているようです。
これを各分類子の間に定義していきます。

@startuml
    actor ユーザ as user
    participant ログイン処理 as login
    activate user
      user -> login : ログイン
      activate login
          database データベース
          activate データベース
              login -> データベース : データベース問い合わせ
              login <-- データベース : レスポンス
          deactivate データベース
          user <-- login : /indexにリダイレクト
      deactivate login
    deactivate user
@enduml

ログイン成功、失敗によって処理を分けます。分岐処理は一般的なシーケンス図と同様に alt キーワードを使用して記述します。
分岐処理のみでなく、複雑な処理を表現するための複合フラグメントは多種存在します。

分岐処理の構文は下記の通りです。

alt 条件1
  処理1
else 条件2
  処理2
end

ログイン成功時は/indexにリダイレクト、失敗時はエラーメッセージを表示するといった処理を上記構文で表現すると、このようになります。

@startuml
    actor ユーザ as user
    activate user
      participant ログイン処理 as login
      user -> login : ログイン
      activate login
          database データベース
          activate データベース
              login -> データベース : データベース問い合わせ
              login <-- データベース : レスポンス
          deactivate データベース
          alt 認証[成功]
              login --> user : /indexにリダイレクト
          else 認証[失敗]
              login --> user :認証失敗のメッセージを表示
          end
          deactivate login
    deactivate user
@enduml 

以上で、冒頭のシーケンス図が完成します。

PlantUMLの中でもシーケンス図に絞り、ごくごく簡単で基本的な内容にしか触れていませんが、複雑な処理を簡単に記述することができ、共有しやすく、かつバージョン管理もしやすいことは伝わったかと思います
いつかクラス図にも触れられたら、記事にします。