株式会社シベスピ 従業員ブログ

シベスピの社員ブログ。技術・想い・経験沢山書いていきます!

最近知ったplantUMLを使ってみた

こんにちは。日笠です。

入社をして1年半が過ぎました。入社当初は仕事に精一杯で土日も仕事のことを考えたりしていましたが、最近はようやく生活が自分のものになってきて休みの日は趣味に費やすことができております。

今回のテーマ「plantUML」

f:id:chivsp:20210719090824p:plain
plantUML_参考

さて今回はplantUMLのお話です。
UML自体の説明は、様々なサイトが解説しているので、割愛します。

plantUMLを使おうとした経緯

私はPowerPointで資料を作成するのが結構好き(得意とは言いません(笑))で、満足できる出来になるまでとことん突き詰めます。趣味だったらいくらでも時間をかけていいのですが、仕事となると別です。
PowerPointで一番時間がかかるのが、図の位置調整でしょうか。グループ化したり、図の配置から左右中央ぞろえなどを利用して効率的に位置調整をしても、やっぱり時間がかかります。
プログラムチックに文字だけで図を描けないものか(latex的な)と探していた時に「plantUML」を知りました。

plantUMLとは

wikipediaを見ると、「オープンソースUMLダイアグラム作成用のテキストベースの言語」とのことです。

plantUMLに必要な環境

肝心のplantUMLが入ってないけど!っとなるかと思いますが、Visual Studio Codeからインストールが可能です。
環境構築は全く難しくありませんでした。検索すれば詳しい環境構築方法がありますので、そちらを参考にしてください。

実際に使ってみる

シーケンス図

plantUMLでの記載


   @startuml
      title ログイン画面

      actor ユーザ
      ユーザ -> "ログイン画面" : ログイン
      "ログイン画面" -> "ユーザ情報" : 権限チェック

      ref over ユーザ情報, 権限 : 権限チェック
      "ユーザ情報" --> "ログイン画面" : 権限結果

   @enduml

結果
f:id:chivsp:20210717234100p:plain
ログイン画面_シーケンス図
Visual Studio Codeの画面

実際の編集画面です。

f:id:chivsp:20210717235024p:plain
Visual Studio Code_編集画面

コードを編集するとリアルタイムで図も更新されます。コードにエラーがある場合は、図は更新されず、ビックリマークが出ます。

ER図

plantUMLでの記載


@startuml
    entity "顧客マスタ" as costomerMaster {
        *顧客ID
        --
        顧客名
        郵便番号
        住所
        電話番号
        FAX番号
    }


    entity "注文" as order {
        *注文ID
        --
        *顧客ID:<>
        注文日時
        配送希望日
        配送方法
        お届け先名
        お届け先住所
        決済方法
        合計金額
        消費金額
    }


    entity "注文明細" as orderDetail {
        *注文ID
        *明細番号
        --
        SKU
        注文数
        税抜価格
        税込価格
    }

    entity "SKUマスタ" as SKUMaster{
        *SKU
        --
        商品ID:<>
        カラー
        サイズ
        重量
        販売単価
        仕入単価
    }

    entity "商品マスタ" as productMaster{
        *商品ID
       --
        商品名
        原産国
        仕入れ先ID:<>
        商品カテゴリ
        配送必要日数
    }

    entity "仕入先マスタ" as SupplierMaster{
        *仕入先ID
        --
        仕入先名
        郵便番号
        住所
        電話番号
        FAX番号
    }

    ' ------- IE記法 ------- '
    '' 「|」は1
    '' 「o」は0
    '' 「{」「}」は多
    ' ------- リレーション------- '
    '' 「r」は右
    '' 「l」は左
    '' 「d」は下
    '' 「u」は上
    costomerMaster |o-r-o{ order
    order||-r-|{orderDetail
    orderDetail}-d-||SKUMaster
    SKUMaster}|-l-||productMaster
    productMaster||-l-o{SupplierMaster


@enduml

結果
f:id:chivsp:20210718003355p:plain
ER図

最後に

今回は、シーケンス図とER図をサクッと作成してみましたが、公式サイトには下記のような図も作成することができるそうです。

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

いかがだったでしょうか。
plantUMLを使うことで、テキストベースでそれなりの図を描くことができました。
記法もなんとなくで記載できそうなわかりやすい書き方となっていると思います。(特にER図の「|」「o」「{」とか)
さっと、図を作るときに覚えておいて損はないでしょう。

ありがとうございました。