Mermaidダイアグラム

Mermaidとは？

Mermaidはテキストベースのダイアグラム言語です。ビジュアルツールで形状をドラッグする代わりに、ダイアグラムの短い説明を書くと、Mermaidがそれをビジュアルグラフィックとしてレンダリングします。コードと一緒に存在するように設計 — Markdownファイル、Wiki、ドキュメント内 — ため、ダイアグラムはバージョン管理され、更新が容易です。

Mermaidは多くのダイアグラムタイプをサポート：

• フローチャート — 決定木とプロセスフロー
• シーケンスダイアグラム — システムまたはサービスが時間とともに互いを呼び出す方法
• エンティティリレーションシップ（ER）ダイアグラム — データベーススキーマ
• アーキテクチャダイアグラム — コンポーネントとその関係
• ガントチャート — タイムラインとプロジェクトスケジュール

ライブダイアグラムレンダリング

IDE StripでMermaidコードブロックを含む.mdファイルを開きます。Mermaidブロックは次のようになります：

```mermaid graph TD A[User] --> B[API Gateway] B --> C[Auth Service] B --> D[User Service] D --> E[(Database)] ```

IDE StripがMermaidブロックを検出すると、ソースの横にビジュアルダイアグラムパネルがレンダリングされます。両方が同時に表示：左側にテキスト説明、右側にレンダリングされたダイアグラム。テキストを編集するとダイアグラムが即座に更新 — 保存してリロードするステップは不要。

インタラクティブ編集

ここが1DevToolのMermaidサポートが標準レンダラーを超える点です。ビジュアルダイアグラムのノードをドラッグすると、ソースコードが自動的に更新されて新しいレイアウトを反映します。これは双方向に機能：

• テキストを編集 → ダイアグラムが更新 — ソースでラベルを変更したり新しい接続を追加したりすると、ダイアグラムが再描画。
• ノードをドラッグ → ソースが更新 — ビジュアルダイアグラムでノードを移動すると、ソースコード内の対応する位置データが一致するように調整。

ノードをリサイズしたり、あるノードのエッジから別のノードにドラッグして再接続することもできます。ソースは常に同期されます。

これにより、Mermaidダイアグラムは「書いて最良を祈る」体験ではなくなります。テキストで大まかな構造を正しくし、視覚的にレイアウトを微調整できます。

AIエージェントと併用

1DevToolで最も強力な組み合わせの1つは、AIエージェントにMermaidダイアグラムを生成してもらい、結果を視覚的に再配置することです。例えば、Claude Codeターミナルを開いて依頼：

「このコードベースの主要コンポーネントが互いにどのように相互作用するかを示すMermaidダイアグラムを生成してください。」

エージェントがコードベースを読み、Mermaidダイアグラムを含む.mdファイルを作成します。そのファイルをIDE Stripで開くと、ダイアグラムがビジュアルにレンダリングされます。レイアウトが読みにくい場合、ノードをより明確な配置にドラッグします。ソースが自動的に更新されるため、改善されたダイアグラムをコミットできます。

これはデータベーススキーマ、API呼び出しシーケンス、デプロイメントアーキテクチャダイアグラムにも適しています。

ヒント： Claude Codeに依頼：「このリポジトリのコンポーネントがどのように相互作用するかを示すMermaidダイアグラムを描いてください。」その後、生成された.mdファイルを開いて、ダイアグラムを視覚的に確認・再配置。