C#のコードからUML図を作成する方法

2023年9月15日

無料でできる範囲で、UML図を作成してみます
クラス図を作成することで、次のようなメリットがあります。

  • クラス間のつながり、構成が整っているかを判断することができる
  • コーディングの学習に役立つ
  • コードの設計資料として使える
  • チームのディスカッションで使える
  • 修正ポイントを見つけやすい
  • コードからUMLを作成するツールを使うと、既存コードの分析に役立つ
  • スパゲッティコードを防げる、解消しやすい
  • 自動配線パターンを見ていると面白い

Java言語のサンプルが多いですが、C#でも使えます。（C#はJavaを参考にしていることがよくわかりますね）
よく、ソフトウェア開発ノウハウのデザインパターン の資料としても使われています。
本来、UMLも記述フォーマットを学んで、クラス図を作成したのち、コーディングに移る方法をとりますが、今回は、存在しているC#コードからUMLを作成するツールをご紹介します。
UMLについては、このページ下部に紹介していますので、並行して学習を進めてください。

サンプル

今回は、VisualStudioだけで作成するC#のコードとUnityで同様に実現するスクリプト（C#)を例としてみていきましょう。

サンプルコードは短いですが、C#を深く学ばないと理解が難しい内容となっています
興味のある方は、次のリンクを参考にしてください

C#の場合

この資料は、UMLやC#について基本を学習した方向けとなっています。ソリューション、プロジェクト、C#の構文についての説明は対象外となっています。学習されたい方は、このページ下部の情報を参考にしてください。

最初に、実際作成されたクラス図を見てもらいます。
イメージをつかんでください。なお、サンプルなので、実際はご自身のコードを使ってもらっていいです。

クラス構成

サンプルクラスの構成となります。
どのようなクラス構成、構文でも構いません。
今回は、抽象クラスと派生クラスを作ってみました。

C#コード

抽象クラス

namespace UML_Sample
{
    public abstract class EnemyBase
    {
        public int Hp { get; set; }
        public abstract void Attack();
    }
}

派生クラス

using System;
namespace UML_Sample
{
    public class Slime : EnemyBase
    {
        public override void Attack()
        {
            Hp = 10;
            Console.WriteLine("噛みつき攻撃");
        }
    }
}

エントリーポイント

using System;
namespace UML_Sample
{
    class Program
    {
        // EnemyBase?（null許容型）としたときは、ラインが一部引かれません
        static EnemyBase enemy;

        static void Main(string[] args)
        {
            enemy = new Slime();
            enemy.Attack();
            Console.WriteLine($"HP = {enemy.Hp}");
        }
    }
}

自動作成されたPlantUMLコード

コードのフォーマットについては、このページ下部の情報を参考にしてください。

@startuml
class Slime {
    + <<override>> Attack() : void
}
EnemyBase <|-- Slime
abstract class EnemyBase {
    + Hp : int <<get>> <<set>>
    + {abstract} Attack() : void
}
class Program {
    {static} Main(args:string[]) : void
}
Program --> "enemy" EnemyBase
@enduml

PlantUMLコードから作成されたクラス図

少し難しいかもしれませんが、依存性を低くする構成となっています。
クラス図のボックス、配線、変数名、参照、継承矢印など、全て自動作成になります。

色違い

Unityの場合

オブジェクトの構成

次のキャプチャを参考にオブジェクトとスクリプトの構成を作ってみましょう。

スクリプト（C#コード）

抽象クラス

using UnityEngine;

abstract class EnemyBase : MonoBehaviour
{
    public int hp;

    public abstract void Attack();
}

派生クラス。Slimeゲームオブジェクトにアタッチするスクリプト

using UnityEngine;

class Slime : EnemyBase
{
    public override void Attack()
    {
        hp = 10;
        Debug.Log("噛みつき攻撃");
    }

    void Update()
    {
        if (Input.GetKeyDown(KeyCode.A))
        {
            Attack();
　　　　　　　Debug.Log($"HP = {hp}");
        }
    }
}

自動作成されたPlantUMLコード

コードのフォーマットについては、このページ下部の情報を参考にしてください。

@startuml
class Slime {
    + <<override>> Attack() : void
    Update() : void
}
EnemyBase <|-- Slime
abstract class EnemyBase {
    + hp : int
    + {abstract} Attack() : void
}
MonoBehaviour <|-- EnemyBase
@enduml

PlantUMLコードから作成されたクラス図

クラス図のボックス、配線、変数名、参照、継承矢印など、全て自動作成になります。

準備

UMLクラス図をビジュアルで作成できるツールは、有料、無料含めたくさんあります。今回は、マイクロソフトが提供している無料のIDE（統合開発環境）を使ってみます。このツールは、UMLクラス図作成のみ対応しているわけではなく、シンプルな基本の構成に、必要としている機能（例えばC#やJava）を拡張していくことで軽いコーディング環境を構築できるものになっています。IT技術者にはメジャーなツールなので、この機会に使いこなせるようになってみましょう。

インストールするプログラム

Visual Studio Code

インストール方法の説明は割愛しますが、インストーラの手順に従えば、マウスクリックだけで完了します。
最新版をインストールしましょう

.NET 6.0 SDK

すでにインストール済みである場合不要です

C#からPlantUML作成のツールを使うため、.Net6をインストールします。
これは、VisualStudioでC#を使えるようにするためにも使われています

インストール方法の説明は割愛しますが、インストーラの手順に従えば、マウスクリックだけで完了します。

Visual Studio Codeにインポートするいくつかの拡張機能

インストール方法は割愛しますが、画面左側の拡張機能アイコンからインストールが可能です。

UML作成プラグイン

最新のバージョンをインストールしましょう

C#の開発環境

最新のバージョンをインストールしましょう

エディター の日本語化するプラグイン

最新のバージョンをインストールしましょう
(VisialStudioの初期インストールから同梱されるようになりました）

C#のコードをUMLへコンバートするプラグイン

最新のバージョンをインストールしましょう
V1.3.3(2023/3/7)では、.NET6対応になりました。
.NET6のインストールが必須です。

設定内容の変更

設定画面の表示

画面左下のギアアイコンから設定メニューを選択します

設定項目の検索

検索窓に「plantuml」と入力し、設定内容の項目を絞ります。

C# to PlantUML設定変更

Unityのコードを変換する場合、コードが存在するフォルダを指定した方がいいです
UnityEngineのコードが大量に変換されてしまうためです
C#ピュアコードの場合は、指定なしでいいです

ID説明規定
inputPath入力フォルダを指定します（ワークスペースフォルダからの相対パス）
Unityの場合、Assetsと入力すればいいでしょう
outputPath出力フォルダを指定する（ワークスペースフォルダからの相対パス）plantuml
publicパブリックアクセシビリティメンバーのみ出力しますtrue
ignoreAccessibility無視するメンバーのアクセシビリティをカンマ区切りで指定します。(例：’private,protected,protected internal’)
excludePathファイルやディレクトリのパス（InputPathからの相対パス）をカンマで区切って指定します(例：’obj,PropertiesAssemblyInfo.cs’)
createAssociationフィールドとプロパティの参照からオブジェクトの関連付けを作成するtrue
allInOneすべてのダイアグラムの出力をファイル include.puml にコピーします (これにより PlanUMLServer がレンダリングできるようになります)false
attributeRequiredこのスイッチを有効にすると、型宣言に「PlantUmlDiagramAttribute」がある型のみが出力されますfalse
excludeUmlBeginEndTagsこのスイッチを有効にすると、pumlファイルから「@startuml」「@enduml」タグを除外しますfalse

PlantUML設定変更

サーバーは、ローカルとリモート(PlantUMLServer)が選択できます
ローカルの場合は、インストール手順で示したツールが必要にあります
リモートは、PlantUMLを提供しているところのサーバーを変換ツールとして使うことになります

使い方

簡単なシーケンス図を作成してみよう

PlantUMLフォーマットのファイルを作成

ファイル名をtest.pumlとして作成します

@startuml
Alice -> Bob: test
@enduml

UML図を自動描画させよう

Alt + D (Altキーを押しながらDキーを押す。Macでは、option + D)と、次のように描画されるはずです

ここで、次のエラーが出た場合（2022/01/22）、大きなUMLファイルではエラーになる場合のツールインストール作業をしてください

インストールしても、引き続き表示が全くされない場合、Windowsを再起動（リスタート）してください

Error: certificate has expired
at TLSSocket.onConnectSecure (_tls_wrap.js:1497:34)
at TLSSocket.emit (events.js:315:20)
at TLSSocket._finishInit (_tls_wrap.js:932:8)
at TLSWrap.ssl.onhandshakedone (_tls_wrap.js:706:12)

簡単なクラス図を作成してみよう

シーケンス図のpumlファイルに追記してみましょう

もちろん、別ファイルに作成してもいいです
今回は、練習なので追記してみます

@startuml
class  顧客
{
}
@enduml

UML図を自動描画させよう

Alt + D (Altキーを押しながらDキーを押す。Macでは、option + D)と、次のように描画されるはずです

メンバー入りのクラス図を作成してみよう

シーケンス図のpumlファイルに追記してみましょう

もちろん、別ファイルに作成してもいいです
今回は、練習なので追記してみます
記号の意味は、参考資料を確認してみましょう

@startuml
class  顧客
{
    + 名前 : string
    + レンタルする(DVD : string) : void
}
@enduml

UML図を自動描画させよう

Alt + D (Altキーを押しながらDキーを押す。Macでは、option + D)と、次のように描画されるはずです

色々試してみましょう

基本的な動きが確認できましたので、いろんな書き方を学習していきましょう

C#からUMLへのコンバート

次は、C#のコードからUMLクラス図を自動生成する方法を試してみましょう

準備

Unityの場合は、Assts/Scriptsフォルダ下にC#スクリプトが必要です

変換

左下のギアマークからコマンドパレットを選びます

上部にパレットが開きますので、C# to PlantUMLを選択し、実行します

作成されたUMLの確認

それぞれのクラスごとに、*.pumlファイルが作成されていると思います

ファイル内容の確認

サンプルです。自動作成されているのがわかります
全体の情報、クラス間の繋がり、関係性を確認するためには、関連情報が１つのファイルにまとめられた、include.pumlファイルを選択し、内容を確認してみます

UMLからクラス図の自動作成

ALT + d（Macではoption + d）で、クラス図が作成されプレビューを確認することができます

このサンプルは、ピュアC#です
Unityのサンプルではありません

クラス図のイメージファイルへの変換、保存

表示されているクラス図は、図形としても保存することができます
右クリックメニューからクラス図イメージのファイルへの書き出しもできます

outフォルダが作成され、ファイルフォーマットを指定したイメージ図が保存されます

*.pngファイル

いわゆる画像ファイルになります。画像加工ソフトで開くことができます。

*.svgファイル

ブラウザで開くことができます。
*.pngファイルと違い、画像としての保存ではなく、データとして保存されているので拡大しても粗くなりません。
複雑な図になるときは、こちらの方が見やすくなります。*.pngファイルの場合、拡大しても粗くなって非常に読みづらいものとなります。

自動変換されたサンプルクラス図

今回のサンプルに直接関係ありませんが参考でみてください

他のプロジェクトでテストしてみた結果になります。
表示位置、配線は自動になっています。この位置もコードで指定ができますので、最終的には、納まりのいいところを模索してもらえればと思います。

このような、大きな構成でも作成することもできます。
配置、配線は自動で作成されますが、Unityでは、GetComponentメソッドで取得するなど、このツールでは完全に変換できないところがあります
位置決めやコメント追加などの調整もコードで記述できますので、きれいに清書して資料として使うことを考えてみましょう

大きなUMLファイルではエラーになる場合

各クラスは、問題なく表示されても、includeファイルがエラー表示になる場合、変換サーバの設定をローカルに変更すれば表示される場合があります。

設定の変更箇所

PlantUML設定

javaとGraphVizのインストールが必要です。

必要な描画ツールの準備

Java JDKのインストール

GraphVizのインストール

次のところからインストールします。
キャプチャーは、執筆時点のバージョンですが、最新版をインストールしてください

セットアップ画面では、次の項目を選んでおきましょう

使い方

使い方は、ローカルの場合と全く同じです

表示が全くされない場合、Windowsを再起動（リスタート）してください

（参考）GitHubを使った自動変換

GitHubのAction機能を使うと、コミット、プッシュするごとにpumlファイルから自動で図形を作成してくれます

詳細は省きますが、GitHubのAcitonに次のコードを記述すると実現できます

name: generate plantuml
on: push
jobs:
  generate_plantuml:
    runs-on: ubuntu-latest
    name: plantuml
    steps:
    - name: checkout
      uses: actions/checkout@v1
      with:
        fetch-depth: 1
    - name: plantuml
      id: plantuml
      uses: grassedge/generate-plantuml-action@v1.5
      with:
        path: example
        message: "Render PlantUML files"
      env:
        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

結果は、svgファイルとして、リポジトリに追加されます

参考資料

VisualStudioで作成する方法

オリジナルマニュアル

本家の資料になります

UMLのクラス図

基本

線の種類の具体例

PlantUMLのレイアウトのコツ

見た目を変えるサンプル

クラス図の見た目を変えたいとき

コンポーネント図

Unityでは、こちらの方がふさわしい時もあるかもしれません

やさしいシーケンス図

学習資料

基本を学習されたい方は、こちらを参考にしてください。

UMLについての学習もこの資料には含まれていません。学習されたい場合、次の資料ページを確認してください。

C#からPlantUMLへの変換ソースコード

C#のソースからUMLクラス図へ変換する拡張（GitHub）
サンプル以外の変換パターンがUMLとクラス図とともにReadme.mdに記載されています

（補足）ChatGPTとクラウドのPlantUML作成ツールを使う方法

手軽に作成する方法について説明です
最近は便利なツールが出てきていいですね

ChatGPTに対するプロンプト例

次のコードからPlantUMLを使ってクラス図を書いて
```
public class Test 
{
    public int Hp { get; set; }

    public void Show()
    {
        System.Console.WriteLine("Hello");
    }
}
```

クラウドでのPlantUML図作成リンク

実行サンプル

C#,Unity,ツール,バージョン管理,学習,設計

Posted by hidepon