Part 1: 技術アドバイスに図表生成追加

image

開発者への技術アドバイスをより効果的に伝えるため、テキストだけでなく視覚的な図表を生成 AI で作成して、事後のフォローとして理解度と実装精度を高める手法をご紹介します。

参考事例

alt text

今までの課題

テキストのみの技術サポートでは、複雑なシステム構成やデータフローを文章のみで説明することになるので、開発者側での理解に齟齬が生じやすいという課題がありました。

ホワイトボードでリアルタイムに書いていく手法を併用することはありますが、ホワイトボードがないこともありますし、限られた時間ではいつもできるわけはありません。

また、図表作成には PowerPoint や Google スライドを使用して手作業で行うため、1つの図表に 30 分や 1 時間かかることも珍しくありませんでした。

ということで、急ぎの技術相談では図表作成の時間が取れず、テキストのみの対応にとどまらざる得なかったです。

視覚的図表アプローチの詳細

alt text

こちら私の記事の「Mermaid 記法で図表を出力」にあるように、Mermaid 記法で図表を出力が結構効きます。

これにより、Slack や対面でのテクニカルアドバイス後に箇条書きでまとめる手法ができ、構造化された技術説明した内容から Mermaid 図（フローチャート、シーケンス図）を自動生成して、キャプチャして、技術相談者に視覚的にわかりやすく、かつ私から見ても「うんうんこうだよね」という意識が合った情報を提供することができます。

もし、PowerPoint や Google スライドでの手作業なら、通常 1 時間かもしれない図表作成を約 10 分で作れてますし、視覚的な資料提供により開発者の実装解像度を向上させる効果も期待できます。

デモ

Mermaid 図で以下の手順を図表を出してください。シーケンス図でお願いします。

今回のユーザーの操作から Unity アプリケーションが反応し、https://dog.ceo/api/breeds/image/random に GET リクエストをして

{
    "message": "画像URL",
    "status": "success"
}

の情報が取得できるので、それを Unity アプリケーションがテクスチャとして貼り付けユーザーに表示します。

こちらを Claude にお願いします。

alt text

高確率でこのような図表を作成してくれます。

Tips : mermaid.live でさらに編集できたり表示調整ができる

alt text

https://mermaid.live/ を使うと、コピーした Mermaid 図表コードをさらに編集できたり表示調整できます。

この章のまとめ

生成 AI を活用した視覚的図表の自動生成により、技術アドバイスの品質向上と効率化を同時に実現できます。

テキストベースの説明に加えて、フローチャートやシーケンス図などの視覚的要素をお伝えことで、相談者の理解度をアップし実装時のイメージも付きやすくなります。