挨拶
ども！Claudeでブログを書きまくっている龍ちゃんです。最近はClaudeのおかげでブログ執筆のスピードがメキメキと上がってきましたが、一方で作業時間の捻出に苦労している今日この頃です。
今回はClaudeでMermaidの図をサクッと作ってもらう方法について解説していきます。皆さんも技術ブログで「図があったらもっと分かりやすいのに…」と思ったことはありませんか？
なぜMermaidなのか？
技術ブログにおける図解の重要性
技術ブログで図解が重要な理由は明確です。図があるかないかで読者の理解度や説得力が大きく変わります。ビジュアル的な要素があると、コンテンツの分かりやすさが飛躍的に向上するからです。
しかし、図を作るのがとにかく大変です。私もブログを書いた後にFigmaで図を作ることがありますが、2時間くらいかかってしまいます。作るのは楽しいのですが、やはり時間がかかるのがネックです。特にシーケンス図やフローチャートを説明する時は、図があった方が確実に分かりやすいのですが、作成の手間を考えると躊躇してしまいがちです。
Mermaidが解決する課題
そこで登場するのがMermaidです。Mermaidを使うと、以下のようなメリットがあります：
- コードベースで図を作成：テキストで書けるのでClaudeが得意
- 短時間で完成：5-10分程度で作成可能
- 一定の品質を保証：自由度が限定されているため、意図しない結果になりにくい
- メンテナンスが容易：コードなので後から修正しやすい
この記事で身につくスキル
この記事を読むことで、以下のスキルが身につきます：
- Claudeで効率的にMermaidコードを生成する方法
- 作成したMermaidを保存・管理するワークフロー
- Live Editorを活用した細かい調整テクニック
従来のツールでは2時間かかっていた図作成が、この方法なら5-10分で完了します。シリーズの一環として、ぜひ最後まで読んでみてください。
基本的な作業フロー
全体の流れ
Claude × Mermaid × Live Editorを使った図作成の基本フローは以下の通りです：
- 要求定義（作りたい図の整理）
- Claudeにプロンプト入力
- Mermaidコード生成
- Live Editorで確認・調整
- PNG/SVGで保存・活用
Live Editorとは
Mermaid Live Editorは、ブラウザ上でMermaidコードをリアルタイムに編集・プレビューできる公式ツールです。コードを入力すると即座に図が表示され、エラーチェックも自動で行ってくれます。
効果的なプロンプトの構成要素
Claudeに良いMermaid図を作ってもらうためのプロンプトには、以下の要素を含めましょう：
- 図の種類：フローチャート、シーケンス図、パイチャートなど
- 目的：何を説明したいのか
- 要素：含めたい項目やステップ
- 制約条件：文字数制限や特別な要求があれば
実践①：フローチャート作成術
フローチャートが適している場面
フローチャートは以下のような場面で威力を発揮します：
- 業務プロセスの可視化：人間の判断や作業手順
- システムの処理流れ：API処理やデータ変換の流れ
- 意思決定プロセス：条件分岐を含む判断フロー
重要なのは、複雑すぎる分岐は避けることです。2-3分岐程度に収めると見やすい図になります。
実際のプロンプト例
Mermaid形式のフローチャートで以下のブログ執筆プロセスを表現してください：
1. 執筆：人間による初稿作成
2. AI校閲：Claudeによる文体・技術的チェック
3. 評価：E-E-A-T観点での点数化
4. 改善判定：70点以上なら公開、未満なら修正
5. 修正：評価結果に基づく改善作業
6. 再評価：改善効果の測定
7. 公開：最終版の公開
見やすさを重視し、判定部分を分岐で表現してください。
よく使うパターン集
API処理フロー
リクエスト受信 → 認証チェック → 処理実行 → レスポンス返却デプロイフロー
コード更新 → テスト実行 → ビルド → デプロイ → 監視開始バグ修正プロセス
バグ報告 → 現象調査 → 原因特定 → 修正実装 → テスト → リリース実践②：シーケンス図でAPI解説
シーケンス図の特徴
シーケンス図は時系列での処理を表現するのに最適です。特に以下のような場面で効果的：
- システム間通信：API呼び出しやデータのやり取り
- 認証フロー：OAuth2.0やJWT認証の流れ
- マイクロサービス連携：複数サービス間の協調処理
実際のプロンプト例
以下の要件でMermaidのシーケンス図を作成してください：
【参加者】
- ユーザー
- フロントエンド
- 認証層
- バックエンド
- Google Sheets
- Azure OpenAI
【処理フロー】
1. ユーザーがフロントエンドにデータ分析を要求
2. フロントエンドが認証層で認証確認
3. 認証OKでバックエンドにAPI呼び出し
4. バックエンドがGoogle Sheetsからデータ取得
5. バックエンドがAzure OpenAIにAI処理要求
6. Azure OpenAIで「Agent Systemとして処理」（注釈追加）
7. 分析結果をバックエンド経由でフロントエンドに返却
8. ユーザーに結果表示
エラーケースも含めて表現してください。
プロンプトのコツ
参加者を明確に定義する：Claudeに推測させると意図と異なる結果になりがちです。関連するシステムやユーザーを明確に列挙しましょう。
処理順序を番号付きで説明：時系列が重要なので、ステップを明確に番号付けすると精度が上がります。
実践③：パイチャートで割合を可視化
パイチャートの活用場面
パイチャートは割合や構成比を表現する際に効果的です：
- リソース使用量：メモリ、CPU、ストレージの使用率
- コスト内訳：プロジェクト予算の配分
- 技術スタック構成：使用技術の割合
特にこちらは、SVGで出力してFigmaで活用したりしています！
実際のプロンプト例
MermaidでPieチャートを作成してください。
【タイトル】
ブログ記事のトークン使用量内訳
【データ】
HTMLタグ：6000
記事本文：12000
プロンプト：2200
その他：1600
各要素の割合を%で表示してください。
注意点
パイチャートは要素が多すぎると見にくくなります。5-7要素程度に収めて、小さな項目は「その他」でまとめるのが効果的です。
トラブルシューティング
よくある問題と解決法
構文エラーが発生する場合
- Claude側での確認：まずClaude上で図が表示されるかチェック
- Live Editorでの検証：エラー箇所を具体的に特定
- Claudeに修正依頼：エラーコードをそのまま貼り付けて「修正してください」と依頼
日本語表示がうまくいかない場合
- 英語で作成：最初は英語で図を作成
- 後から翻訳：完成後に日本語に変換
- エンコーディング確認：文字化けの場合はUTF-8で保存
図が複雑になりすぎる場合
- 階層化：大きな図を複数の小さな図に分割
- 抽象度調整：詳細すぎる部分を簡略化
- 別の図形式：フローチャートではなくシーケンス図に変更
すぐ使えるプロンプトテンプレート集
Claudeに図形式を確認する
Mermaidで作成可能な図の種類を、簡単なサンプルコード付きで教えてください。基本テンプレート
フローチャート用
[システム名/プロセス名]をMermaidフローチャートで作成してください：
【処理ステップ】
- ステップ1：[具体的内容]
- ステップ2：[具体的内容]
- 判定：[条件分岐の内容]
見やすさを重視し、エラーハンドリングを含めてください。シーケンス図用
[システム名]の処理をMermaidシーケンス図で表現してください：
【参加者】
[A、B、C...]
【処理フロー】
1. [A→Bの処理内容]
2. [B→Cの処理内容]
...
エラーケースも含めて表現してください。パイチャート用
以下のデータでMermaidパイチャートを作成してください：
【タイトル】
[グラフのタイトル]
【データ】
項目1：[数値]
項目2：[数値]
...
割合を%表示で含めてください。修正依頼用テンプレート
先ほどのMermaid図を以下の点で修正してください：
【修正内容】
- [修正点1]
- [修正点2]
- [修正点3]
より分かりやすく調整してください。Live Mermaid Editorの活用術
Live Editorの優位性
Live Mermaid Editorが他のツールより優れている点：
- リアルタイム編集：コードを書くと即座に図が更新される
- 構文エラーの即座検出：エラー箇所をリアルタイムで表示
- フル機能対応：GitHubやNotionで制限される機能も利用可能
- ブラウザ完結：インストール不要で、どこでも利用可能
- URL共有：作成した図をURLで簡単に共有できる
- テーマ選択：GitHub、Dark、Neutralなど複数のテーマ
他のプラットフォームとの違い
NotionやGitHub上でもMermaidは表示されますが、以下の制約があります：
Notion：
- コードブロックのサイズ制限により大きな図が見にくい
- コードまたは図のみの表示選択は可能だが、同時編集・確認は困難
GitHub：
- 一部のMermaid機能に制限（ハイパーリンク、ツールチップ、特定シンボル等）
- 保存後に図が表示されるため、試行錯誤に時間がかかる
- 構文エラーの詳細が分かりにくい
Live Editor：
- 複雑な図を作成する際の微調整が効率的
- 全Mermaid機能を制限なく利用可能
- リアルタイムでエラー確認・修正が可能
ファイル管理・履歴機能
Live Editorの保存・管理機能：
自動履歴保存：
- 編集内容を1分間隔で自動保存
- 最大30編集まで履歴を保持
- ブラウザストレージに依存（データクリア時は消失）
外部保存機能：
- GitHub Gistとの連携による長期保存
- URL共有によるチーム間でのやり取り
- 手動保存による重要バージョンの固定
制限事項：
- 履歴はブラウザローカルに保存されるため、他デバイスでは参照不可
- ブラウザデータをクリアすると履歴が失われる
- 長期保管にはGist連携の活用を推奨
まとめ
今回は、ClaudeとMermaidを組み合わせた効率的な図作成方法について詳しく解説しました。
この記事のポイント
- 時短効果：2時間の作業が5-10分に短縮
- 品質確保：一定レベルの見やすい図を安定して作成
- 学習コスト低：複雑なツールの習得が不要
- メンテナンス性：コードベースなので修正が容易
Live Mermaid Editorとの組み合わせにより、リアルタイムでの編集・確認も可能になります。技術ブログの図解作成で時間を短縮したい方は、ぜひこの方法を試してみてください。
図があるだけで記事の分かりやすさが劇的に向上します。皆さんも、ぜひMermaidを使った図解作成にチャレンジしてみてください！
