PlantUMLでシンプルな図をサクッと書いてみよう

はじめに
PlantUMLとは
記述例
1. アクティビティ図(1～100を加算)
2. シーケンス図(Three-way Handshake)

はじめに

開発など様々な業務においてフローチャートやタイミング図などを作成する機会は非常に多くあるかと思います。その多くで、ExcelやDraw.ioなどのツールを使用してフローチャート書いている方が非常に多くいるとも思っています。しかし、これらのツールでは何度もメンテナンスすると多くの工数が必要なってしまうのも現実です。

今回は、テキストベース記載して図の出力を自動で良しなにやってくれるPlantUMLを用いてもっとメンテナンスを楽にしたいと思います。

PlantUMLとは

PlantUMLは、オープンソースのUMLダイアグラム作成用のテキストベースの言語です。テキストで記載して、図の表示の調整は自動的に行ってくれます。記法が少々独特なので慣れは必要ですが非常に便利なため覚えてしまうのもありだと思います。

VisualStudioCodeの拡張機能にはPlantUMLを描画・画像出力できるものもありますので非常に簡単に扱うことができます。gitlabにおいてはMarkdownにてコードブロック記法で「plantuml」を指定すると自動的に描画することもできます。

画像の出力については以下の記事で触れいていますので是非参考にしてみてください。

PlantUMLでは以下のUML図を生成することが可能です。種類が多いため業務においてもほぼ網羅することは可能です。

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

記述方法については公式ページを確認してみてください。

記述例

いくつかの例を提示します。ぜひ参考にしてみてください。

アクティビティ図(1～100を加算)

1～100までを単純加算して結果を表示します。

@startuml
title 1から100までの合計を求める

start
:合計値 sum = 0 を初期化;
:カウンタ i = 1 を初期化;

partition "加算ループ" {
    while (i <= 100?) is (Yes)
        :sum = sum + i;
        :i = i + 1;
    endwhile (No)
}

:合計値 sum を表示;
stop
@enduml

シーケンス図(Three-way Handshake)

three-way handshakeはTCPなどにおいて使用されるコネクション確立プロトコルです。

@startuml
title TCP 3-way Handshaking
skinparam sequenceMessageAlign center

participant Client
participant Server

Client -> Server: SYN
activate Server

Server --> Client: SYN, ACK
activate Client
deactivate Server

Client -> Server: ACK
activate Server
deactivate Client
@enduml