Claude3.7sonnet+Mermaidを使って爆速でシーケンス図を作る方法

動画解説

はじめに

開発現場でのコミュニケーションにおいて、シーケンス図は処理の流れを理解するための強力なツールです。しかし、専用のツールを使いこなすための学習コストや、手間のかかる作図作業に悩まされることも少なくありません。

この記事では、人工知能アシスタントの「Claude 3.7 Sonnet」とダイアグラム記述言語「Mermaid」を組み合わせて、簡単に高品質なシーケンス図を作成する方法をご紹介します。コード理解やドキュメント作成の効率が劇的に向上する新しいワークフローをぜひ試してみてください。

余談（追記）

ChatGPTでも同じことは可能ですが、モデルが4oの場合、Calude3.7sonnetの方が精度が高いと私は感じております。また、CaludeではMermaidのコード生成時に右側にプレビューが表示される機能があるので、それが利用できるのも今回GPTではなくCaludeを採用した理由です！

また、今回はシーケンス図で紹介しましたが、フロー図なども作成可能です。

Claude 3.7 SonnetとMermaidの強力な組み合わせ

Claude 3.7 Sonnetとは

Claude 3.7 Sonnetは、Anthropic社が開発した最新の大規模言語モデル(LLM)です。自然言語での対話を通じて様々なタスクをサポートし、特に技術的な内容の理解と生成に優れています。

Mermaidとは

Mermaidは、マークダウンライクな構文でダイアグラムを記述できるJavaScriptベースのライブラリです。シンプルなテキスト記述から、シーケンス図、フローチャート、ER図など様々な図表を生成できます。

なぜClaude+Mermaidが革命的なのか

1. 専門知識不要: Mermaidの複雑な構文を覚える必要がなく、自然言語での説明だけでプロフェッショナルなシーケンス図を生成できます
2. 驚異的な速さ: 従来のツールでは30分以上かかる作業が数分で完了します
3. 対話的な修正プロセス: 会話形式でフィードバックしながら図を改善できるため、イテレーションが速く行えます
4. 技術的詳細の正確な表現: ファイル名、関数名、API呼び出しなどの技術的な詳細を含めた表現が可能です
5. メンテナンスの容易さ: 生成されたMermaidコードは再利用・修正が容易で、ドキュメントの保守性が向上します

実際の使用例：NextAuth.jsの認証フロー図

今回は例として、NextAuth.jsを使用した認証システムのフローをシーケンス図で表現する過程を見ていきましょう。

Step 1: Claudeに自然言語で要望を伝える

まずはClaude 3.7 Sonnetに対して、作成したいシーケンス図の内容を自然言語で説明します：

marmaid用のフロー図もだして　ファイル名付きで　どの順番でファイルのどの部分が実行されて認証されるのかみたい

これだけのシンプルな指示で、Claudeは詳細なシーケンス図を生成できます。必要に応じて、もっと具体的な指示を出すこともできます。

Step 2: Claudeが生成したMermaidコードとシーケンス図

上記のリクエストに対して、Claudeは以下のようなMermaidコードを生成しました：

sequenceDiagram
    participant User as ユーザー
    participant Browser as ブラウザ
    participant NextAuth as NextAuth.js
    participant API as API Routes
    participant DB as データベース
    User->>Browser: /login にアクセス
    Browser->>+NextAuth: app/login/page.tsx: フォーム送信
    NextAuth->>+API: app/api/auth/[...nextauth]/route.ts: 認証リクエスト
    API->>+DB: prisma.user.findUnique(): ユーザー検索
    DB-->>-API: ユーザーデータ返却
    API->>API: bcrypt.compare(): パスワード検証
    API-->>-NextAuth: JWT生成・認証結果返却
    NextAuth-->>-Browser: セッションCookie設定
    Browser->>Browser: app/providers.tsx: SessionProvider更新
    Browser->>+API: getServerSession(): セッション検証
    API-->>-Browser: セッション情報
    Browser-->>User: app/dashboard/page.tsx: 認証済みコンテンツ表示
    note over Browser,API: ログアウト時
    User->>Browser: ログアウトボタンクリック
    Browser->>+NextAuth: app/components/UserInfo.tsx: signOut()呼び出し
    NextAuth->>+API: セッション削除リクエスト
    API-->>-NextAuth: セッション削除完了
    NextAuth-->>-Browser: Cookieクリア
    Browser-->>User: ログイン画面にリダイレクト

このコードから生成される図は以下のようになります：

Step 3: 対話的な修正と詳細化

図の内容をさらに改善したい場合は、自然言語で修正点を伝えるだけです：

「APIとDBの間にPrismaの処理をもう少し詳しく表示してほしい」

Claudeはこのフィードバックに基づいて、Prismaの処理を詳細化した新しいバージョンの図を生成します。必要に応じて何度でも修正を依頼でき、理想の図に近づけていくことができます。

実践的な活用シーン

Claude+Mermaidの組み合わせは、以下のようなシーンで特に効果を発揮します：

1. 設計ドキュメントの作成:

   • システム設計書や技術仕様書への添付図として
   • アーキテクチャ概要図の素早い作成

2. チーム内コミュニケーション:

   • コードレビュー時の処理フロー説明資料
   • 新機能の設計提案時の視覚的サポート

3. トラブルシューティング:

   • 問題発生箇所の可視化
   • バグ報告時の再現ステップの図示

4. 教育・研修資料:

   • 新メンバーへのシステム説明資料
   • 技術勉強会での説明図表

実践テクニック：より良い図を得るためのプロンプト例

Claudeからより良い図を引き出すためのプロンプト例をいくつか紹介します：

基本的なシーケンス図の生成

「ユーザー登録からログインまでの処理をシーケンス図で表現してください。各コンポーネント間のデータの流れも含めてください。」

技術的な詳細を含む図の生成

「Next.jsアプリケーションでのAPI通信フローをMermaidシーケンス図で作成してください。具体的なファイル名、関数名、非同期処理の流れを含めてください。」

既存図の改善

「この図のユーザー認証部分をより詳細に表現してください。特にトークン検証とセッション管理の部分を詳しく示してください。」

まとめ：開発ドキュメントの未来

Claude 3.7 SonnetとMermaidを組み合わせることで、これまで時間と専門知識を要していた図表作成のプロセスが劇的に変わります。特に以下の点で大きなメリットがあります：

• 時間効率の飛躍的向上: 数分で完成度の高い図表が作成可能
• ドキュメント品質の向上: 視覚的に分かりやすい図表が簡単に追加できる
• 技術的正確性の担保: AIが最新の技術知識に基づいて図表を生成
• メンテナンスの容易さ: テキストベースで管理できるため、バージョン管理システムとの親和性が高い

今後の開発現場では、このようなAIツールを活用したドキュメント作成が標準になっていくでしょう。ぜひ皆さんもチームの生産性向上のために、Claude+Mermaidの組み合わせを試してみてください！

参考リンク

• Anthropic Claude
• Mermaid公式ドキュメント
• NextAuth.js公式ドキュメント
• Qiitaでのmermaid記法の使い方