こんにちは。LOHACOのバックエンド開発部のさわだです。
新規開発するバッチの設計書を作成することになったのですが、設計書内のシーケンス図の作成にGitHub Copilot Agentを使用してみたところ作成にかかる時間を短縮できました。
今回は、GitHub Copilot Agentをシーケンス図の生成に活用する方法を紹介します。
背景
設計書はConfluence内に作成しており、今まではConfluenceのマクロにある作図ツールを使用してシーケンス図を作成していました。
この作図ツールは図形や矢印をGUI上で配置できるので直感的に操作可能ですが、手動で配置するのは手間と時間がかなりかかっていました。また、AIエージェント（以下、Agent）で設計書から実装のコードを生成する際に作図ツールで作成したシーケンス図をAgentは読み取ることができないため、シーケンス図もコードベースにして読み取れる形式にしたいと思っていました。
そこで、Mermaidというテキストベースで作図可能なツールを使用することにより、GitHub Copilot Agentを使用してConfluence内の設計書を読ませてMermaidのシーケンス図をコードベースで生成してみることにしました。
作成方法
シーケンス図を次の手順で作成します。今回はAIが作成したサンプルの設計書を使用します。
- シーケンス図以外の設計書を作成
- Agentに設計書ページを読ませる
- Agentがシーケンス図をコードベースで生成
- 生成されたコードを設計書に挿入
シーケンス図以外の設計書を作成
Confluenceにシーケンス図以外の設計書を作成します。 実際に設計書を作成した際には人間が作成しましたが、ここもAIに任せてよいかもしれません。
Agentに設計書ページを読ませる
エディタ（今回はVSCode）にAtlassianのMCPサーバの設定をすることで、GitHub Copilot AgentにMCPサーバ経由でConfluenceの設計書ページを読んでもらうことができました。
Agentがシーケンス図をコードベースで生成
GitHub Copilot Agentにシーケンス図をMermaidで生成するよう指示します。 実際は、Agentと対話しながらシーケンス図を調整しました。
生成されたコードを設計書に挿入
生成されたMermaidのコードをConfluenceの設計書内に挿入します。 ConfluenceのマクロのHTMLを使用して、生成されたコードをdivタグで囲むと設計書内にシーケンス図が表示されます。
※ Mermaidのシーケンス図の表示のために、HTMLマクロを使用して次のコードをページの末尾に挿入しました。
<style type="text/css">
.mermaid {
border: 1px solid #ccc;
}
</style>
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
mermaid.initialize({
startOnLoad: true,
gantt:
{}
});
</script>
やってみて
ConfluenceのMCPサーバとGitHub Copilot Agentを利用して簡単にシーケンス図を作成できました。
Agentによってシーケンス図が生成されて、図の修正はMermaidのコードの変更だけで済むため、GUIの作図ツールを使用していた頃より体感半分ぐらいの時間で作成できたと思います。
これまでは「AI＝コーディング支援ツール」として使うケースが多かったのですが、設計書のシーケンス図作成など上流の工程でも十分活用できることが分かりました。
また、Agentに対して処理のシーケンス図も読ませることで、設計書の文章だけを読ませていた時より高い精度で実装が生成されていた気がします。特に、処理の流れや業務ロジックまわりについては、ほとんど修正を加える必要がないレベルで驚きました。
シーケンス図は人間が実装内容を視覚的に理解しやすいものという認識でしたが、AIコーディングの精度向上にも応用できるというのは新しい発見です。
今回はシーケンス図以外の設計書については人間の手で作成したのですが、Agentに要件を伝えれば設計書を作成してくれると思うので、今後はこちらについてもAgentを積極的に活用してAI駆動開発を進めていきたいです。
MCPサーバが提供されているプロダクトで設計書を作成している場合は、同じようなアプローチが可能だと思います。似たような構成を利用中の方はぜひ一度試してみてはいかがでしょうか。
