Zenn
🙆

【UML】ダイアグラムをまたいで要素をトレースする「ダイアグラムマップ」

2020/12/15に公開
UML
diagram
model
traceability
tech

この投稿では、異なる種類の UML のダイアグラムをまとめて表示し、ダイアグラムをまたいでのモデル要素のトレースを視覚的に支援する「ダイアグラムマップ※」を紹介します。ダイアグラムマップを利用することで、複数の異なる種類のダイアグラムを俯瞰的に見ることができます。また、モデル要素やダイアグラムの間のつながりを視覚的に確認することもできます。自分の描いたダイアグラムを確認したり、他の人の描いたダイアグラムを理解する上で役立ててもらえれば幸いです。

※筆者の造語です。一般的な用語ではありません。

デモ

Demo

GitHub ページで、ダイアグラムマップのサンプルを試すことができます。

機能

  • ダイアグラムマップは、異なる種類のダイアグラムをまとめて表示します。表示の際は、同じ種類のダイアグラムが同じ列に並ぶようにレイアウトします。
  • ダイアグラムマップは次の３つを視覚的に表現します。
    • 同じ型のモデル要素同士のつながり
    • モデル要素とダイアグラムの参照関係
    • モデル要素やダイアグラムに設定されたハイパーリンク
  • ダイアグラムマップでは、Google マップのようにマウスを使ったパンやズームが可能です。ただし、ブラウザの JavaScript を有効にする必要があります。

作成手順

ダイアグラムマップは、m plus プラグイン（筆者謹製）を追加した Astah（チェンジビジョン製のモデリングツール）を用いて作成することができます。m plus プラグインは個人利用、商用利用ともに無償です。Astah は有償（試用期間あり）です。作成手順は次のとおり。

  1. ここからダウンロードした Astah Professional or UML をインストールし、ここからダウンロードした m plus プラグインを Astah に追加します。
    参考：プラグインの追加方法
  2. Astah でモデルおよびダイアグラムを作成します。
  3. モデルブラウザ上でダイアグラムを選び、「Create Diagram Map」ボタンを押します。モデルブラウザ上でパッケージを選んだ場合には、その配下のダイアグラムがすべて対象になります。ボタンが押された後、ダイアグラムマップ（HTML ファイル）が作成され、ブラウザで表示されます。

その他

  • ダイアグラムマップは閲覧専用です。モデルやダイアグラムを編集したい場合は Astah で行ってください。
  • m plus プラグインは Astah 専用です。他のモデリングツールへの対応については現在未定です（将来検討するかもしれません）。
  • m plus プラグインはクローズドソースです。オープンソース化については現在未定です（将来検討するかもしれません）。

リンク

みなさん快適なモデリングを。Happy modeling!

Discussion