ダイアグラムとマッピング に戻る

Mermaid ダイアグラム テンプレート

プレーンテキストを強力な技術向けダイアグラムに変換します。宣言型の Mermaid 構文を使用して、フローチャート、API シーケンスマップ、データベーススキーマ、タイムライン、スプリントのロードマップなどを、図形を手動でドラッグしたり整列したりすることなく、キャンバス上で直接記述・レンダリング・バージョン管理できます。

0 のテンプレート

もっと見る

製品管理フローチャートガントチャートタイムラインテンプレート集ER 図（実体関連図）UML シーケンス図マインドマップUML 図UML クラス図

Mermaid ダイアグラムのテンプレートについて

Mermaid ダイアグラムのテンプレートは、テキスト駆動で開発者向けの視覚的ワークスペースで、プレーンテキストの Markdown コードをリアルタイムで整った複雑なダイアグラムに変換します。個々の図形を手作業でドラッグやドロップ、配置やスタイル調整する代わりに、チームは Mermaid の宣言型構文を使って、フローチャート、シーケンス図、ガントチャート、アーキテクチャ マップをコードベースのそばで直接スクリプト化できます。標準化された Miro テンプレートを利用することで、エンジニアリング チーム、システムアーキテクト、テクニカルライターは、バージョン管理された Markdown テキストを即座に共同編集可能なビジュアルダイアグラムに変換でき、ドキュメント保守の負担を大幅に削減できます。

Mermaid ダイアグラムを使う理由

コードベースの変更に伴って静的なアーキテクチャ図や手動で作成したワイヤーフレームの図形を管理すると、ドキュメントが古くなりやすくなります。テキストベースのコードで図をスクリプト化すると、次の4つの明確な利点があります：

  • バージョン管理に適した形式：プレーンテキストのMermaid構文は、アプリケーションのソースコードと並べてGitHubやGitLabのリポジトリ内にそのまま保存、レビュー、差分確認できます。

  • 迅速な反復：決定ノードの修正やデータベース接続の追加は数秒で完了します—コネクターの位置合わせや図形のレイアウトを手動で調整することなく、単一行のテキストを更新するだけです。

  • 標準化されたビジュアル：図形、矢印コネクター、余白の境界を統一されたデザイン基準に従って自動整形し、チーム間の見た目の不一致を解消します。

  • ネイティブなエコシステムでのレンダリング：Miro、Notion、GitHub Markdown、VS Code 拡張機能、MkDocs のようなドキュメントエンジンなど、主要な開発プラットフォーム内で動的にレンダリングされます。

ダイアグラムのアーキテクチャ類型

テンプレートのレイアウトを選ぶ際は、チームのドキュメント作成目的に合う Mermaid の構文エンジンを選んでください:

  • フローチャート (flowchart or graph): ユーザーのオンボーディング経路、エラー処理アルゴリズム、業務プロセスの可視化。

  • シーケンス図 (sequenceDiagram): API のリクエスト/レスポンスサイクル、OAuth フロー、複数サービス間のメッセージキューの可視化。

  • 状態図 (stateDiagram-v2): 複雑な UI の状態変化、注文ライフサイクルの遷移、または IoT デバイスのモードをドキュメント化する際に。

  • 実体関連図 (erDiagram): リレーショナルデータベースのテーブル、主キー/外部キーの関連、データスキーマのモデリング。

  • ガント / ロードマップ (gantt): ソフトウェア提供の各フェーズの順序付け、リソースのキャパシティ、チーム横断のスプリントタスクの管理。

Miro で Mermaid 図テンプレートを使う方法

Mermaid ダイアグラムを追加するか、テンプレートを使う

Mermaid によるダイアグラムは、主に次の 3 つの方法で作成できます：

  1. ボードに Mermaid コードを直接貼り付ける

    • エディター、文書、または AI チャットから Mermaid コードをコピーします。

    • Miro のボードに貼り付けます。

    • Miro はそれを編集可能な Miro 図形で構成されたダイアグラムとしてレンダリングします（静止画像ではありません）。

  2. ダイアグラム形式（「コードで構築」）を使用する

    • Miro のボードで、作成バーを開き、フォーマット → ダイアグラムに移動します

    • コードで構築をクリックします

    • Mermaid コードをコードパネルに貼り付けるか、Mermaid テンプレートを選択します。

    • ダイアグラムは Miro の図形としてレンダリングされ、フォーカスモードやキャンバス上で編集を続けられます。

  3. Miro MCP と AI ツールで生成する（上級ユーザー向け）

    • MCP 対応の AI ツール（例: Cursor、Claude Code）を Miro MCP Server に接続します。

    • エージェントに特定のボード上で Mermaid ダイアグラムを作成するよう依頼します（ボードの URL を含めてください）。

    • Miro でボードを開いてレンダリングされたダイアグラムを確認・編集します。エージェントは後で Mermaid ダイアグラムを読み取り・更新することもできます。

Mermaid ダイアグラムの編集

いつでも視覚的におよびコードで編集でき、変更は同期されます。

  • ボード上で視覚的に編集

    • 図をフォーカスモードで開きます

    • 図形、線、またはラベルを選択して、テキスト、図形の種類、フォント、色、レイアウト方向（上→下／左→右）、間隔（狭い／標準／広い）を変更します。

    • 視覚的な変更に合わせて、基になっている Mermaid ソースが自動的に更新されます。

  • Mermaid コードを編集

    • フォーカスモードで、コードパネルを開きます

    • Mermaid 構文を編集すると、図は入力に合わせて再描画されます。

    • パネルのオプションで、行番号や折り返しなどの編集設定を切り替えられます。