📚

GitHub Copilot × Markdown(Mermaid)でソースコードから設計図の作成を全部やってもらう

2025/07/21に公開

はじめに

仕様/設計書、作成編集ってめちゃくちゃ面倒ですよね。
基本的にあってはならないことと思いますが、システム案件では、古今東西、以下のような状況に頻繁に遭遇します。

設計資料が存在しても、既存コードの設計意図が不明
実際に本番環境動作しているはずのソースコードと仕様/設計書の内容と乖離がある
ソフトウェアの仕様/設計書がそもそも存在しない

かくいう私も資料を書くよりも、実際に動くコードを作ることを優先する人種ですので、、事情は痛いほどよくわかります。だいたい納期という神様に追われていることが原因ですが。。

私の主観も混じりますが、仕様/設計書の整理整頓が進まない理由の一つに、設計図の作成編集がとてつもなく手間である点が挙げられます。
変更を行う場合など、少しの変更で全体的に図の変更が必要になったりと、かなりの作業負荷に感じます。

そこで、設計図はソースコードから作成してもらうのが手っ取り早いのでは？と考え、本記事作成に至ります。

やりたいこと

ソースコードから仕様/設計書に必要な諸々の設計図の作成を、GitHub Copilotにすべてまかせてしまいたい。

方針

Copilotに設計図を作成させるにあたり、MarkdownのMermaid記法を使用して設計図を作成します。(画像出力はそれなりに時間がかかりますし、変更を行う際は手間がかかりるので。)

Markdownとは

https://ja.wikipedia.org/wiki/Markdown

Markdown（マークダウン）とは、文書を記述する軽量マークアップ言語である。
「書きやすくて読みやすいプレーンテキストとして記述した文書を、妥当なXHTML（もしくはHTML）文書へと変換できるフォーマット」として、ジョン・グルーバーにより作成された。

ChatGPT出現あたりから、GPTの返答をMarkdownでコピペできたりと、Markdown自体の活躍の場が増えている印象です。

Mermaidとは

Mermaidとは、Markdownテキストでグラフを作成できるダイアグラムツールの１つです。

慣れは必要ですが、おおむね以下のようなことをMarkdownにて図示できます。

フローチャート（Flowchart）
組織図（Organizational Chart）
シーケンス図（Sequence Diagram）
クラス図（Class Diagram）
状態図（State Diagram）
ガントチャート（Gantt Chart）
Git グラフ（Git Graph）
ER 図（Entity Relationship Diagram）
ユーザージャーニー図（User Journey）
etc

環境

VS Code

以下はVS Codeの拡張機能

GitHub Copilot
- モード：Askモード
- モデル：Claude Sonnet 4

Markdown Preview Enhanced
Mermaidがプレビューできれば他の拡張機能でも問題ないですが、私はMarkdown Preview Enhancedを使用しています。

対象サンプルソースコード

Blazor WebAssembly スタンドアロンアプリ
- .NET 9
  完全無欠のBlazor初期サンプルプロジェクトです。本記事では上記を対象に設計図の生成を行います。

設計図作成

まずはサンプルソースコードのプロジェクトフォルダをVS Codeでおもむろに開きます。

GitHub Copilotに以下のように設計図を出力いただくよう、お願いをします。
いざいざソースコードから設計図を生成します。
以下のようなプロンプトでGitHub Copilotに懇願します。

現在のプロジェクトから、設計資料に必要な以下の図を作成してくだい。
* システム関連図
* アーキテクチャ図
* シーケンス図(機能)
* シーケンス図(ユーザー操作)
* クラス図
* コンポーネント関連図
* データフロー図
* 配置図

適宜、他に必要と考えられる図も出力していただいて構いません。
すべてマークダウンのmermaid記法を用いて作成してください。
mermaidで記載する部分はコードブロックで囲んでください。
どうか、何卒、よろしくお願い申し上げます！

淡々とした返答で設計図を作成してくました。

生成作成図

下記は、GitHub Copilotにお願いお祈りすることで得られた設計図たちです。

システム関連図

出力されたMarkdown

```mermaid
graph TB
    User[ユーザー] --> Browser[ブラウザ]
    Browser --> BlazorWASM[Blazor WebAssembly]
    BlazorWASM --> WebAPI[Web API]
    BlazorWASM --> StaticFiles[静的ファイル]
    WebAPI --> Database[(データベース)]
    WebAPI --> ExternalAPI[外部API]
    
    subgraph "クライアントサイド"
        BlazorWASM --> Components[Blazorコンポーネント]
        BlazorWASM --> Services[クライアントサービス]
        BlazorWASM --> HttpClient[HttpClient]
    end
    
    subgraph "サーバーサイド"
        WebAPI --> Controllers[API Controllers]
        WebAPI --> BusinessServices[ビジネスサービス]
    end
```

アーキテクチャ図

出力されたMarkdown

```mermaid
graph TB
    subgraph "クライアントサイド (Browser)"
        subgraph "プレゼンテーション層"
            Pages[Pages/Razor Pages]
            Components[Shared Components]
            Layout[レイアウト]
        end
        
        subgraph "クライアントサービス層"
            ClientServices[クライアントサービス]
            HttpServices[HTTP通信サービス]
            StateManagement[状態管理]
        end
        
        subgraph "WebAssembly Runtime"
            DotNetRuntime[.NET Runtime]
            JSInterop[JavaScript Interop]
        end
    end
    
    subgraph "サーバーサイド"
        subgraph "Web API層"
            APIControllers[API Controllers]
            Middleware[ミドルウェア]
        end
        
        subgraph "ビジネスロジック層"
            BusinessServices[ビジネスサービス]
            DomainModels[ドメインモデル]
            Validation[バリデーション]
        end
        
        subgraph "データアクセス層"
            Repository[リポジトリ]
            DbContext[Entity Framework]
            DataModels[データモデル]
        end
        
        subgraph "インフラストラクチャ層"
            Database[(SQL Server)]
            Cache[キャッシュ]
            Logging[ログ]
        end
    end
    
    Pages --> ClientServices
    Components --> ClientServices
    ClientServices --> HttpServices
    HttpServices -->|HTTPS| APIControllers
    APIControllers --> BusinessServices
    BusinessServices --> Repository
    Repository --> DbContext
    DbContext --> Database
```

シーケンス図（機能）- データ取得

出力されたMarkdown

```mermaid
sequenceDiagram
    participant User as ユーザー
    participant BlazorPage as Blazor Page
    participant ClientService as クライアントサービス
    participant HttpClient as HttpClient
    participant WebAPI as Web API
    participant DB as データベース
    
    User->>BlazorPage: ページアクセス
    BlazorPage->>ClientService: データ要求
    ClientService->>HttpClient: HTTP GET要求
    HttpClient->>WebAPI: API呼び出し
    WebAPI->>DB: データクエリ
    DB-->>WebAPI: データ返却
    WebAPI-->>HttpClient: JSON レスポンス
    HttpClient-->>ClientService: デシリアライズ
    ClientService-->>BlazorPage: DTOオブジェクト返却
    BlazorPage-->>User: 画面表示
```

シーケンス図（ユーザー操作）- フォーム送信

出力されたMarkdown

```mermaid
sequenceDiagram
    participant User as ユーザー
    participant Form as フォーム
    participant BlazorComponent as Blazorコンポーネント
    participant ClientService as クライアントサービス
    participant WebAPI as Web API
    participant DB as データベース
    
    User->>Form: データ入力
    User->>Form: 送信ボタンクリック
    Form->>BlazorComponent: クライアントサイドバリデーション
    alt バリデーション成功
        BlazorComponent->>ClientService: データ送信要求
        ClientService->>WebAPI: HTTP POST要求
        WebAPI->>WebAPI: サーバーサイドバリデーション
        WebAPI->>DB: データ保存
        DB-->>WebAPI: 保存完了
        WebAPI-->>ClientService: 成功レスポンス
        ClientService-->>BlazorComponent: 成功結果
        BlazorComponent-->>User: 成功メッセージ表示
    else バリデーション失敗
        BlazorComponent-->>User: エラーメッセージ表示
    end
```

クラス図

出力されたMarkdown

```mermaid
classDiagram
    class Program {
        +Main(string[] args) void
        +CreateHostBuilder() IHostBuilder
    }
    
    class WeatherForecastService {
        -HttpClient httpClient
        +GetForecastAsync() Task~WeatherForecast[]~
    }
    
    class WeatherForecast {
        +Date DateTime
        +TemperatureC int
        +Summary string
        +TemperatureF int
    }
    
    class MainLayout {
        +BuildRenderTree(RenderTreeBuilder) void
    }
    
    class Index {
        +OnInitializedAsync() Task
    }
    
    class FetchData {
        -WeatherForecastService service
        +OnInitializedAsync() Task
    }
    
    class WeatherController {
        +Get() IEnumerable~WeatherForecast~
    }
    
    Program --> WeatherForecastService
    FetchData --> WeatherForecastService
    WeatherForecastService --> WeatherForecast
    WeatherController --> WeatherForecast
    Index --|> ComponentBase
    FetchData --|> ComponentBase
    MainLayout --|> LayoutView
```

コンポーネント関連図

出力されたMarkdown

```mermaid
graph TB
    App[App.razor] --> Router[Router]
    Router --> MainLayout[MainLayout.razor]
    Router --> Pages[Pages/*.razor]
    
    MainLayout --> NavMenu[NavMenu.razor]
    MainLayout --> MainContent[Main Content Area]
    
    subgraph "Pages (Client-side)"
        Index[Index.razor]
        Counter[Counter.razor]
        FetchData[FetchData.razor]
    end
    
    subgraph "Shared Components"
        NavMenu
        SurveyPrompt[SurveyPrompt.razor]
    end
    
    subgraph "Client Services"
        WeatherService[WeatherForecastService]
        HttpClientService[HttpClient Service]
    end
    
    Index --> SurveyPrompt
    FetchData --> WeatherService
    WeatherService --> HttpClientService
    
    subgraph "Web API (Server-side)"
        WeatherController[WeatherController]
    end
    
    HttpClientService -->|HTTP| WeatherController
```

データフロー図

出力されたMarkdown

```mermaid
flowchart TD
    UserInput[ユーザー入力] --> ClientValidation{クライアントサイド<br>バリデーション}
    ClientValidation -->|成功| HttpRequest[HTTP要求]
    ClientValidation -->|失敗| ClientError[クライアントエラー表示]
    
    HttpRequest --> WebAPI[Web API]
    WebAPI --> ServerValidation{サーバーサイド<br>バリデーション}
    ServerValidation -->|失敗| ServerError[サーバーエラー応答]
    ServerValidation -->|成功| BusinessLogic[ビジネスロジック]
    
    BusinessLogic --> DataAccess[データアクセス層]
    DataAccess --> Database[(データベース)]
    
    Database --> DataTransform[データ変換]
    DataTransform --> JSONResponse[JSON レスポンス]
    JSONResponse --> ClientDeserialization[クライアント<br>デシリアライゼーション]
    ClientDeserialization --> ComponentUpdate[コンポーネント更新]
    ComponentUpdate --> UIRendering[UI レンダリング]
    UIRendering --> UserDisplay[ユーザー表示]
    
    ServerError --> ClientError
    
    subgraph "外部データ"
        ExternalAPI[外部API]
        StaticFiles[静的ファイル]
    end
    
    BusinessLogic --> ExternalAPI
    ComponentUpdate --> StaticFiles
```

配置図

出力されたMarkdown

```mermaid
flowchart TB
    subgraph Client["クライアント環境"]
        Browser[Webブラウザ]
        Mobile[モバイルブラウザ]
        PWA[PWA オフライン対応]
    end
    
    subgraph CDN["CDN/静的ホスティング"]
        StaticHost[静的ファイルホスティング]
        BlazorWASM[Blazor WebAssembly App]
        StaticAssets[CSS/JS/画像ファイル]
    end
    
    subgraph WebAPIServer["Web API サーバー"]
        APIServer[API Server]
        Controllers[API Controllers]
        BusinessLayer[ビジネス層]
    end
    
    subgraph DataLayer["データ層"]
        SQLServer[(SQL Server)]
        Redis[(Redis Cache)]
        BlobStorage[Blob Storage]
    end
    
    Browser --> StaticHost
    Mobile --> StaticHost
    StaticHost --> BlazorWASM
    StaticHost --> StaticAssets
    
    BlazorWASM -.->|HTTPS API Calls| APIServer
    APIServer --> Controllers
    Controllers --> BusinessLayer
    BusinessLayer --> SQLServer
    BusinessLayer --> Redis
    BusinessLayer --> BlobStorage
    
    Browser --> PWA
```

PWA 配置図（追加）

出力されたMarkdown

```mermaid
flowchart TB
    subgraph BrowserEnv["ブラウザ環境"]
        MainThread[メインスレッド]
        ServiceWorker[Service Worker]
        CacheAPI[Cache API]
        IndexedDB[IndexedDB]
    end
    
    subgraph BlazorWASM["Blazor WebAssembly"]
        WASMRuntime[WebAssembly Runtime]
        DotNetCode[.NET Code]
        JSInterop[JS Interop]
    end
    
    subgraph OfflineFeatures["オフライン機能"]
        OfflineStorage[オフラインストレージ]
        BackgroundSync[バックグラウンド同期]
        PushNotifications[プッシュ通知]
    end
    
    MainThread --> WASMRuntime
    WASMRuntime --> DotNetCode
    DotNetCode --> JSInterop
    
    ServiceWorker --> CacheAPI
    ServiceWorker --> BackgroundSync
    ServiceWorker --> PushNotifications
    
    JSInterop --> IndexedDB
    CacheAPI --> OfflineStorage
    IndexedDB --> OfflineStorage
```

まとめ

というわけで、ソースコードをもとにしてGitHub Copilotに諸々の設計図をMermaidで作成いただきました。
生成AIを使って資料作成の補助を行う、という内容について今となっては目新しい話ではないですが、サンプルコードであってもそれなりの設計図を出力してくれたので、なかなか驚きが禁じ得ないです。。
本記事が、なにかしらの仕様/設計書作成作業や既存コードの解析作業の一助のなれば幸いです。

はじめに

やりたいこと

方針

Markdownとは

Mermaidとは

環境

VS Code

対象サンプルソースコード

設計図作成

生成作成図

システム関連図

アーキテクチャ図

シーケンス図（機能）- データ取得

シーケンス図（ユーザー操作）- フォーム送信

クラス図

コンポーネント関連図

データフロー図

配置図

PWA 配置図（追加）

まとめ

Discussion