仕事効率化

【UMLツール】Visual Studio CodeとPlantUMLでソフトウェア設計図を描く方法

Visual Studio CodeからPlantUMLを使う

こんにちは。

Visual Studio Codeヘビーユーザーの”はやぶさ”@Cpp_Learningです。

前回『UML入門』や…

あわせて読みたい
UML入門
【UML入門】ソフトウェア設計図を描く前に知っておきたいUMLの基礎知識こんにちは。 現役エンジニアのはやぶさ@Cpp_Learningです。 より正確にはソフトウェアの仕様検討から設計・実装まで...

『ソフトウェア開発入門チュートリアル』の記事を書きました。

あわせて読みたい
ソフトウェア開発入門
【ソフトウェア開発入門チュートリアル】OpenCVとPythonで『物体追跡カメラ』を作るソフトウェア開発入門のチュートリアル記事を書きました。本記事では、OpenCVとPythonを使った『物体追跡カメラ』の開発を題材に、開発プロセス・設計・実装(コーディング)などのソフトウェア開発に関する知識を一通り学べる内容になっています。...

これらの記事に出てくるモデル図(ソフトウェア設計図)は“PlantUML”というUMLツールを使って描きました!

↑の記事や本で”UML”や”ソフトウェア設計”を勉強したら、モデル図(ソフトウェア設計図)描きたくなっちゃうよね?

モデル図(ソフトウェア設計図)は手書きやエクセルでも描けますが、UMLツールを使う方が綺麗に描けます!

本記事ではUMLツールでモデル図(ソフトウェア設計図)を描きたい!という人のために…

『Visual Studio CodeとPlantUMLでソフトウェア設計図を描く方法』を説明したいと思います。

”Visual Studio Code”も”PlantUML”は無料で使えるので安心してください!

これで私と同じモデル図(ソフトウェア設計図)が書けるよ(*・ω・)ノ♪

PlantUMLとは

PlantUMLとは、DSL(ドメイン固有言語)でUMLの図を描くツールです。

DSL?何それ美味しいの?

という感じですよね?

DSLとは、特定のタスク向けに設計されたコンピュータ言語のことで、今回の場合はUMLの図を描くための言語という意味です。

…まぁ言葉で説明するより、実際に見た方が分かりやすいですね↓

PlantUMLの使い方

左のコードを書くと右の状態遷移図を表示できます。もちろん状態遷移図以外の図も描けます!

【PlantUMLで描ける図】

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

以下のような、UML以外の図もサポート

  • ワイヤーフレーム
  • アーキテクチャ図
  • 仕様及び記述言語 (SDL)
  • Ditaa
  • ガントチャート
  • AsciiMath や JLaTeXMath による、数学的記法

PlantUMLとその他UMLツールの違い

PlantUML以外にもUMLツールはありますが、それらのツールの多くはGUIで図を描きます。

PlantUML(DSL)とGUIベースのUMLツールの大きな違いは以下の通りです。

UMLツール 図の記述方法 保存ファイル形式
GUIベース GUI操作 専用プロジェクト
PlantUML(DSL) コード生成 テキスト

GUIベースの方は説明不要で直観的に操作できるというメリットがあります。しかし、保存ファイル形式が専用のプロジェクトファイルになるため、ファイル容量が大きくなりやすくかつツールを持っている人以外は図の編集ができないというデメリットがあります。

一方、PlantUMLはコード生成が必要なため、文法を知らないと図が描けないというデメリットがあります。しかし、保存ファイルの形式がテキストファイルなので、メモ帳などのエディタソフトでも編集可能です。つまり誰でも図を編集できるというメリットがあります。

ここまでの説明だと、

PlantUMLよりGUIベースの方が良いかも?

と思う人が多いかもしてれません。ツールは好みもあるため、自分に合うツールを使うのが一番ですが、次からPlantUMLをオススメしたい人について説明します。

PlantUMLをオススメしたい人

「GUIは直観的に操作できる」と説明しましたが、”分からない操作”や”複雑な操作”をする場合には、結局方法を調べる必要があります。

それにファイル容量が大きいと立ち上げに時間がかかるしツールの有無で図が編集できないから情報共有が難しい…

つまり私が言いたいのは

『チームで気軽にモデル図(ソフトウェア設計図)の作成や共有がしたい!』ってことです(*・ω・)ノ♪

そして『PlantUMLならできるよ!』ってことも伝えたいです。

【PlantUMLがオススメな理由】

  1. テキストファイルなので容量が小さく立ち上げが早い
  2. テキスト編集後はリアルタイムビュアーで素早く図を確認できる
  3. 好きなエディタで編集できる
  4. 無料でインストールできる
  5. テキストファイルなのでGitでの管理が楽
  6. ❶~➎の理由からチームでの情報共有がしやすい

「軽快な動作で図を描きたい人」「チームで図を共有・編集をしたい人」には”PlantUML”をオススメしたい!

でもコードの文法が覚えられるか心配…

という人もいると思いますが、PlantUMLを使ってみると…意外と直観的にできた!となる気がしています。(人それぞれかもしれないけどね)

実はインターネットとPCがあれば、簡単にPlantUMLを使うことができます!

なので、まずは一度”PlantUMLのオンラインジェネレータ”を触ってみてほしい!

PlantUMLのオンラインジェネレータの使い方

下のボタンから”PlantUMLのオンラインジェネレータ”を試すことができます。

PlantUMLから概要オンラインジェネレータまで

ボタンを押すとPlantUMLで描ける図の説明が見れるので、クラス図をクリックしてみます。

PlantUMLの使い方

するとサンプルコードが見れるので、以下のコードをコピーする。

PlantUMLの使い方

最初のページに戻り、下にスクロールするとコードを書く場所があるので、先ほどコピーしたコードを張り付けます。すると右にリアルタイムでクラス図が表示されます。

PlantUMLの使い方

コードと図を見比べてみると…似ていますよね?

直観的と言えないまでも…そんなに難しくないと思いませんか?

他の図も同じように描くことができますよ(*・ω・)ノ♪

”PlantUMLのオンラインジェネレータ”を使ってみて「ローカルPCでも使えるようにしたい!」と思った人は、続きも読んでみて下さい。

PlantUMLの環境構築

PlantUMLをオンライン環境で問題なく使える人は良いのですが、ローカルPCでPlantUMLを使いたいという人も多いと思います。

ソフトをインストールするのにインターネットは必須ですが、一度インストールしてしまえば、オフライン環境でもPlantUMLを使えようになります。

インストールするソフト

PlantUMLを使えるようにするには、以下のソフトをインストールする必要がありますので、各ソフトのインストールまたはダウンロードページのリンクを張っておきました。(黄文字をクリックするとジャンプできます。)

今回はWindowsマシンの”Visual Studio Code”からPlantUMLを使えるようにします。

PlantUMLはVisual Studio Code以外のエディタから使うことができますが、個人的にお気に入りのエディタ”Visual Studio Code”から使う方法のみ説明します。

PlantUML (VSCodeの拡張機能)だけは、Visual Studio Codeを先にインストールする必要がありますが、その他のソフトはどの順番でインストールしても問題ありません。

JavaGraphvizは別のソフトでも使うことがあるため、インストール済みの人もいるかもしれません。なので、必要なソフトのみインストールして頂ければ大丈夫です。

各ソフトのインストール方法

各ソフトのインストール方法ですが…各インストールページが親切に誘導してくれるため、特に説明は要らないと考えています。

ただし、Graphvizは少し戸惑うかもしれないので補足します。

Graphvizのインストールページに飛んだら *.msi の方をクリックしてダウンロード後、インストールしてください。

【実践】VSCodeとPlantUMLでソフトウェア設計図を描く

各ソフトのインストールが完了したら、モデル図(ソフトウェア設計図)を描いてみます。

最初に手順を説明しておきます。

【PlantUMLの使い方】

  1. 拡張子が*.puのファイルを生成する
  2. *.puをVisual Studio Codeで開く
  3. *.puにコードを書く
  4. キーボードから”Alt + D”を入力してプレビューを表示

実践してみます。

まずは”Tracking_Cam.pu”というファイルを生成する。(適当なファイルを作って拡張子puに変えればOK)

”Tracking_Cam.pu”をVisual Studio Codeで開き、以下のコードを書きます。

キーボードから”Alt + D”を入力して、プレビューが表示されればOK!

PlantUMLの使い方

ね?すごく簡単に私の描いたモデル図(ソフトウェア設計図)を共有できました(*・ω・)ノ♪

テキストなのでコピーも簡単!とても気軽に図の共有ができます。

画像ファイル出力(ソフトウェア設計図の出力)

プレビューに表示された図は画像ファイルとして出力することができます。

こちらも先に手順を説明しておきます。

【画像ファイルの出力方法】

  1. キーボードから”Ctrl + Shift + P” を入力してコマンドパレットを開く
  2. PlantUML: Export Current Diagram と入力する
  3. pngを選択する

以下の注意点があるので確認しておいて下さい。

  1. タグの「表示」⇒「コマンドパレット」でも可
  2. コマンドパレットを開くと”>”があるので消さずにコマンドを入力する
  3. png以外のファイル形式も選べるけど使ったことない…

無事に図の出力ができれば、”Tracking_Cam.pu”と同じ階層に”Tracking_Cam”というフォルダが生成され、その中に”State Transition Diagram for Tracking_Cam.png”(図のタイトル名)で保存されます。

  • 生成および管理が必要なのはコード(*.pu)のみ
  • Git管理もしやすく差分も簡単確認
  • 図は必要なときだけ画像ファイルとして出力すればよいので、メモリ容量を節約

PlantUMLのサンプルコード

本記事では、状態遷移図のしか紹介できてませんが、オンラインジェネレータの各図の説明や以下のサイトでPlantUMLのサンプルコードを紹介しているので、参考にしてみて下さい。

まとめ

本記事では、PlantUMLの環境構築から使い方までの紹介しました。

”UML”や”ソフトウェア設計”を勉強したけど、どんなツールを使って図を描けば良いか分からない…

という人がいるかな?

はやぶさ
はやぶさ
困ってるなら助けないと!

とか想いながら本記事を書きました。

ただし、ツールは自分に合ったものを使うのが一番良いと考えているので、PlantUML以外のUMLツールを使って頂いても何の問題もありません!

ただ、本サイトに遊びに来てくれる人とソフトウェア設計図(PlantUMLのコード)を共有したい!…というのが本音だったりします!笑

また、良いソフトウェア設計図(PlantUMLのコード)を書いた!という人が情報共有してくれたら嬉しいなぁ!なんてことも思っています(*・ω・)ノ

ソフトウェア設計は奥が深いので、PlantUMLで図を書いた消したりしながら、納得のいくものを作成できると良いと思います。(描いた図のバージョン管理とかするのも面白い)

ソフトウェア設計を学びたいという人が少しでも増えると嬉しいなぁ

はやぶさ
はやぶさ
理系応援ブロガー”はやぶさ”@Cpp_Learningは頑張る理系応援を応援します!

(完)

LINEスタンプ配信中!

フクロウのLINEスタンプ

当サイトのマスコットキャラクター

「フクロウのくるる」が

LINEスタンプになりました!

勉強で疲れたあなたに癒しをお届け☆

お迎え待ってます(*・ω・)ノ♪

今すぐお迎えする

40個セットがたったの50コインとお得です