members

members

テキストで簡単に図を作成できる!PlantUMLの使い方!

Tweet

図を作成する時、どのように作成していますか?

一般的なパワーポイントやエクセルでの作成では図同士の間隔や文字サイズ等、

内容以外のレイアウトに注意を取られて作成に時間がかかるといった場面は多いと思います。

上記のような問題を解決してくれるのがPlantUMLというテキストから図を作成してくれるコンポーネントです。

PlantUML って何?

PlantUML とはテキストから図を作成するコンポーネントになります。

簡単にメリットとデメリットを説明いたします。

メリット

  • 幅や大きさが自動で調整される。
  • 矢印やアイコンなどがあらかじめ用意されている。
  • 画像での書き出しが可能である。
  • テキストファイルであるため修正が容易である。
  • 様々な図の作成に対応している。
  • ライセンスがフリーのため、無料で商用利用可能。
  • テキストで図を書くため(Git などでの)バージョン管理が容易。

デメリット

  • 記述方法がちょっと特殊で覚えるのに少し時間がかかる。
  • ローカルで使うには動作環境を整えなければならない。

動作環境

これらは Visual Studio Code というエディタ上で PlantUMLをローカル上で動かすためのツールになります。

簡単にどこでも利用したいという方にはPlantUML公式のオンラインジェネレーターがおすすめです。

Plant UML online Generate

使用準備

  • Visual Studio Code を起動
  • (任意の名前).pu で新規ファイルを作成

これで準備は完了です。

さっそくですが図を作ってみましょう。

@startuml
:Hello world;
:Welcome to PlantUML;
@enduml

 

上のコードを入力して Alt + D を入力すると以下の図が表示されます。

HelloWorld

このようにテキストで図を制作していきます。

図の出力は Ctrl + Shift + Pで出力したい形式にエクスポートができます。

使用例

パート担当別フローチャート

@startuml
|Director|
start
:要件定義;
:ワイヤー作成;
:指示書作成;
|Designer|
:サイトデザイン;
|Director|
:お客さんに確認;
|Designer|
:サイトデザイン修正;
|Coder|
:コーディング;
|Director|
:納品物確認;
:納品;
end
@enduml

 

上のコードで出力される図は以下のようになります。

workflow

このようにパートごとに別れているフローチャートも書くことが可能です。

条件付きフローチャート

@startuml
start
:判定開始;
if (パターンA) then (yes)
  :異常なし;
elseif (パターンB) then (yes)
  :エラー;
  end
elseif (パターンC) then (yes)
  :異常なし;
elseif (パターンD) then (yes)
  :異常なし;
else (no)
  :エラー;
  end
endif
:終了;
end
@enduml

 

上のコードで出力される図は以下のようになります。

branch

まとめ

私自身も最近使い始めたのですが図が綺麗に簡単に作成できるため自らの頭の中の整理する際にすばやく図が作成できて役立っています。
慣れるまでには少し時間はかかりますが、慣れると爆速でフローチャートの作成や相関図の作成ができるようになります。
公式サイトやユーザーズマニュアルは以下のサイトになります。

PlantUML 公式

PlantUML 言語リファレンス

様々なクラスやテーマが用意されているので気になった方は参考に御覧ください。
ぜひ、PlantUML を用いて日々の資料作成の効率化を行ってはいかがでしょうか?
最後までお付き合いいただきありがとうございました。

中川 麿(なかがわ たかよし)

第5ビジネスユニットアカウントサービス第6ユニット所属。

趣味:プログラミング。