【Mermaid&ChatGPT】コードからダイアグラムを逆起こし

コードからシーケンス図等のダイアグラムを簡単に逆起こしする方法の一つとして、VS Code上のMermaidとChatGPTを使った例を紹介します。設計書がないアプリ等の構造をざっくり把握したいときの手助けになるかと思います。

• 操作環境：　
• OS：Windows 11
• Webブラウザー：Edge
• 使用アプリ：
• VS Code(拡張機能：Mermaid Graphical Editor, Markdown PDF)
• ChatGPT(無料プラン)

Mermaidと使用アプリの処理について

Mermaid(公式サイトはこちら)はMarkdownに似た構文を使用してダイアグラム(フローチャート、シーケンス図、クラス図等)を作成できるツールです。
VS Code等の様々なツールにプラグインが提供されており、それらのツール内で扱うことができます。

図表1-1 Mermaid公式サイト

この記事では、VS Code上にMermaid関連のプラグインを導入して、以前の記事で紹介したアプリのコードから数種のダイアグラムを生成してみます。ダイアグラムの生成にあたり必要となるMermaid構文は、人力で作成するのではなく、ChatGPTにコードを読み込ませることで作成してみます。

図表1-2 MermaidとChatGPTの使用の流れ

VS CodeのMermaid使用開始設定

VS Codeを起動し、左端の[拡張機能]メニューを選択し[Mermaid Graphical Editor]を検索し、表示されたら[インストール]を選択します。
確認メッセージが表示されたら、[発行元を信頼&インストール]を選択します。
なお、VS Codeはこちらから入手できます。

図表2-1 VSCodeのプラグインインストール(Mermaid Graphical Editor)

併せて、生成したダイアグラムをPDFファイル等に出力できるプラグイン「Markdown PDF」も導入しておきます。
[拡張機能]メニューで[Markdown PDF]を検索し、表示されたら[インストール]を選択します。
確認メッセージが表示されたら、[発行元を信頼&インストール]を選択します。

図表2-2 VSCodeのプラグインインストール(Markdown PDF)

インストールした[Mermaid Graphical Editor]の基本操作を紹介します。

対象アプリのプロジェクトフォルダー内(どこでも構いませんが分かりやすい場所の例としてプロジェクトフォルダー内にしました)にMermaid用のファイル(xxx.md)を用意します。
用意したファイル内で”```mermaid”と入力し、[Mermaid Editor]のリンクが表示されたらこれを選択します。
右側に[Mermaid Editor]のタブが表示されたら、作成したいダイアグラムを選択します(この例ではシーケンス図)。

図表2-3 Mermaid Graph Editorの基本操作(mdファイル作成,ダイアグラム選択)

“sequenceDiagram”と”```”の間にMermaid構文を入力すると、右側の[Mermaid Editor]にシーケンス図が生成されます。
次の工程で、ChatGPTを使用してMermaid構文を作成してみます。

図表2-4 Mermaid Graph Editorの基本操作(Mermaid構文からダイアグラム生成)

ChatGPTによるMermaid構文生成

対象アプリのコードをまとめてテキストエディタに貼り付けて保存しておきます。
ChatGPTにサインインし、保存したテキストファイルを添付し、シーケンス図用のMermaid構文の作成を指示します。

図表3-1 ChatGPTへのMemaid構文の作成指示(シーケンス図)

シーケンス図用のMermaid構文の作成結果です。

図表3-2 ChatGPTによるMemaid構文の作成結果(シーケンス図)

図表3-1のテキストファイルを元に、クラス図用のMermaid構文の作成も指示してみました。

図表3-3 ChatGPTへのMemaid構文の作成指示(クラス図)

Mermaidによるダイアグラム生成

VS Codeの画面に戻り、xxx.mdファイル内の“```mermaid”と”```”の間に、前の工程で作成したMermaid構文(この例ではシーケンス図)をコピー&ペーストします。

図表4-1 VSCodeへのMemaid構文の貼付(シーケンス図)

コピー&ペーストしたMermaid構文を基づき、[Mermaid Editor]タブにシーケンス図が生成されました。
このアプリの紹介記事内にある、手作成したシーケンス図と概ね同じ内容でした。

図表4-2 Memaid構文からダイアグラム生成(シーケンス図)

同様に、クラス図用のMermaid構文もコピー&ペーストし、こちらも生成されました。
元のコードでクラスを使用していないため、無理矢理な感じですが、構造はざっくり把握できます。

図表4-3 Memaid構文からダイアグラム生成(クラス図)

生成したダイアグラムをpdfファイルに出力してみます。
xxx.mdファイル内で右クリックすると、[Markdown PDF: Export (ファイル形式)]メニューが複数表示されます。その中の[Markdown PDF: Export (pdf)]を選択します。

図表4-4 ダイアグラムのPDFファイル出力の実行

エクスポートされたpdfファイルをAcrobat Readerで開いたところ、問題なくダイアグラムが表示されました。

図表4-5 出力されたPDFファイルの確認

Markdown PDFのトラブル対応(参考)

Mermaid構文が出力

画面イメージのように、Markdown PDFのエクスポートを実行した時、ダイアグラムではなくMermaid構文が出力される場合があります。

図表5-1 PDFファイル出力エラー(Mermaid構文が出力)

[ファイル>ユーザー設定>設定]を選択し、設定項目[Markdown PDF:Mermaid Server]を検索し、[mermaid server]の値を”https://unpkg.com/mermaid@9.0.1/dist/mermaid.min.js”に変更します。

図表5-2 Markdown PDFの設定変更

この設定により、ダイアグラムが出力されるようになりました。
なお、[mermaid server]のバージョン履歴やjsファイルはこちらにアクセスすると確認できます。

図表5-3 PDFファイル出力エラー解消(Mermaid構文が出力)

Syntax Errorが発生

画面イメージのように、 Markdown PDFのエクスポートを実行した時、Syntax Errorが発生する場合があります。

図表5-4 PDFファイル出力エラー(Syntax error発生)

特定のダイアグラム内で特定の記号が含まれているとエラーが発生するようです。
全量は分かりませんが、少なくとも以下については別の文字に置き換える必要がありました。

• フローチャート用のMermaid構文で全角の＆を使用した場合
• クラス図用のMermaid構文で半角の<を使用した場合

図表5-5 Syntax error発生の原因となる文字の除去

おわりに

Markdown PDFについてはエラー発生時の対処で手間がかかってしまうかもしれません。しかし、MermaidとChatGPTを使用することは、コードからダイアグラムを逆起こししてアプリの構造をざっくり把握するのに良い方法です。

また、未評価ですがMermaidにはChatGPTのプラグインもありますので、活用できれば逆起こしがもっと楽になるかもしれません。

当ブログ内の関連記事

elmgrn.hatenablog.com