Mermaid Visualizer

概要

テキストコンテンツをクリーンでプロフェッショナルな Mermaid ダイアグラムに変換し、プレゼンテーションとドキュメンテーションに最適化します。よくある構文の落とし穴(リスト構文の競合、サブグラフの命名、間隔の問題など)を自動的に処理し、Obsidian、GitHub、その他の Mermaid 対応プラットフォームでダイアグラムが正しくレンダリングされることを保証します。

クイックスタート

Mermaid ダイアグラムを作成する際:

1. コンテンツを分析 - 主要な概念、関係性、フローを特定する
2. ダイアグラムタイプを選択 - 最も適切な可視化方法を選択(下記のダイアグラムタイプを参照)
3. 設定を選択 - レイアウト、詳細度、スタイリングを決定
4. ダイアグラムを生成 - 構文的に正しい Mermaid コードを作成
5. マークダウンで出力 - 適切なコードフェンスでラップし、説明を追加

デフォルトの仮定:

• 特に水平を指定されない限り、垂直レイアウト(TB)
• 中程度の詳細度(シンプルさと情報のバランス)
• セマンティックカラーを使用したプロフェッショナルなカラースキーム
• Obsidian/GitHub 互換の構文

ダイアグラムタイプ

1. プロセスフロー (graph TB/LR)

最適な用途: ワークフロー、決定木、順序付きプロセス、AI エージェントアーキテクチャ

使用時: コンテンツがステップ、段階、または一連のアクションを説明している

主な機能:

• 関連ステップのグループ化用サブグラフスイムレーン
• トランジション用のアロウラベル
• フィードバックループと分岐
• カラーコード化されたステージ

設定オプション:

• layout: "vertical"(TB)、"horizontal"(LR)
• detail: "simple"(コアステップのみ)、"standard"(説明付き)、"detailed"(注釈付き)
• style: "minimal"、"professional"、"colorful"

2. サーキュラーフロー (円形レイアウトの graph TD)

最適な用途: 循環プロセス、継続的改善ループ、エージェントフィードバックシステム

使用時: コンテンツが反復、フィードバック、または循環関係を強調している

主な機能:

• 中央のハブと放射状の要素
• 曲線フィードバック矢印
• 明確なサイクルインジケータ

3. 比較ダイアグラム (並列パスの graph TB)

最適な用途: ビフォー/アフター比較、A vs B 分析、従来型 vs モダンシステム

使用時: コンテンツが2つ以上のアプローチまたはシステムを対比している

主な機能:

• サイドバイサイドレイアウト
• 中央の比較ノード
• カラー/スタイルによる明確な区別

4. マインドマップ

最適な用途: 階層的な概念、知識の構成、トピックの分類

使用時: コンテンツが明確な親子関係を持つ階層構造である

主な機能:

• ラジアル木構造
• 複数レベルのネスト
• クリーンなビジュアル階層

5. シーケンスダイアグラム

最適な用途: コンポーネント間のインタラクション、API 呼び出し、メッセージフロー

使用時: コンテンツが時間軸に沿ったアクター/システム間のコミュニケーションを含む

主な機能:

• タイムラインベースのレイアウト
• 明確なアクター分離
• プロセス用のアクティベーションボックス

6. ステートダイアグラム

最適な用途: システムの状態、ステータストランジション、ライフサイクルステージ

使用時: コンテンツが状態と状態間のトランジションを説明している

主な機能:

• 明確なステートノード
• ラベル付きトランジション
• 開始状態と終了状態

重要な構文ルール

パースエラーを防ぐため、以下のルールを常に従う:

ルール1: リスト構文の競合を回避

❌ 間違い: [1. Perception]       → "Unsupported markdown: list" をトリガー
✅ 正解: [1.Perception]         → ピリオド後のスペースを削除
✅ 正解: [① Perception]         → 丸囲み数字を使用(①②③④⑤⑥⑦⑧⑨⑩)
✅ 正解: [(1) Perception]       → 括弧を使用
✅ 正解: [Step 1: Perception]   → "Step" プレフィックスを使用

ルール2: サブグラフの命名

❌ 間違い: subgraph AI Agent Core  → クォートなしの名前にスペース
✅ 正解: subgraph agent["AI Agent Core"]  → ID と表示名を使用
✅ 正解: subgraph agent          → シンプルな ID のみを使用

ルール3: ノード参照

❌ 間違い: Title --> AI Agent Core  → 表示名を直接参照
✅ 正解: Title --> agent          → サブグラフ ID を参照

ルール4: ノードテキスト内の特殊文字

✅ スペースを含むテキストにはクォートを使用: ["Text with spaces"]
✅ エスケープまたは回避: 引用符 → 『』を使用
✅ エスケープまたは回避: 括弧 → 「」を使用
✅ 円形ノード内でのみ改行: ((Text<br/>Break))

ルール5: 矢印タイプ

• --> 実線矢印
• -.-> 破線矢印(補助的なシステム、オプションパス用)
• ==> 太矢印(強調用)
• ~~~ 見えないリンク(レイアウト用のみ)

詳細な構文リファレンスと特殊ケースについては、references/syntax-rules.md を参照してください。

設定オプション

すべてのダイアグラムは以下のパラメータを受け入れます:

レイアウト:

• direction: "vertical"(TB)、"horizontal"(LR)、"right-to-left"(RL)、"bottom-to-top"(BT)
• aspect: "portrait"(デフォルト)、"landscape"(横長)、"square"

詳細度:

• simple: コア要素のみ、最小限のラベル
• standard: 主要な説明を含むバランスの取れた詳細度(デフォルト)
• detailed: 完全な注釈、説明、メタデータ
• presentation: スライド用に最適化(より大きなテキスト、詳細度が少ない)

スタイル:

• minimal: モノクロ、クリーンなライン
• professional: セマンティックカラー、明確な階層(デフォルト)
• colorful: 鮮やかな色、高コントラスト
• academic: 論文/ドキュメント用のフォーマルスタイル

その他のオプション:

• show_legend: true/false - カラー/シンボルレジェンドを含める
• numbered: true/false - ステップにシーケンス番号を追加
• title: string - ダイアグラムタイトルを追加

使用パターン例

パターン1: 基本的なリクエスト

ユーザー: "ソフトウェア開発ライフサイクルを可視化して"
レスポンス: [分析 → graph TB を選択 → 標準詳細度で生成]

パターン2: 設定付き

ユーザー: "営業プロセスの水平フローチャートを、詳細度を高くして作成して"
レスポンス: [分析 → graph LR を選択 → 詳細度レベルで生成]

パターン3: 比較

ユーザー: "従来型 AI と AI エージェントを比較して"
レスポンス: [分析 → 比較レイアウトを選択 → 対比スタイルで生成]

ワークフロー

1. コンテンツを理解する

   • 主要な概念、エンティティ、関係性を特定
   • 階層または順序を決定
   • 比較や対比を注記

2. ダイアグラムタイプを選択

   • コンテンツ構造をダイアグラムタイプにマッチ
   • ユーザーのプレゼンテーションコンテキストを考慮
   • 曖昧な場合はプロセスフローをデフォルトに

3. 設定を選択

   • ユーザー指定オプションを適用
   • 未指定オプションに対して適切なデフォルトを使用
   • 読みやすさに最適化

4. Mermaid コードを生成

   • すべての構文ルールを厳密に従う
   • セマンティックな命名(説明的な ID)を使用
   • 一貫したスタイリングを適用
   • よくあるエラーをテスト:
     • ノードテキストに「数字. スペース」パターンがない
     • すべてのサブグラフが ID["display name"] フォーマットを使用
     • すべてのノード参照が表示名ではなく ID を使用

5. コンテキスト付きで出力

   • ダイアグラム構造の簡潔な説明を追加
   • レンダリング互換性について言及(Obsidian、GitHub など)
   • 調整またはバリエーション作成を提案

カラースキームのデフォルト

標準プロフェッショナルパレット:

• 緑(#d3f9d8/#2f9e44): 入力、認識、開始状態
• 赤(#ffe3e3/#c92a2a): 計画、判断ポイント
• 紫(#e5dbff/#5f3dc4): 処理、推論
• オレンジ(#ffe8cc/#d9480f): アクション、ツール使用
• シアン(#c5f6fa/#0c8599): 出力、実行、結果
• 黄(#fff4e6/#e67700): ストレージ、メモリ、データ
• ピンク(#f3d9fa/#862e9c): 学習、最適化
• 青(#e7f5ff/#1971c2): メタデータ、定義、タイトル
• グレー(#f8f9fa/#868e96): ニュートラル要素、従来型システム

一般的なパターン

スイムレーンパターン(グループ化)

graph TB
    subgraph core["Core Process"]
        A --> B --> C
    end
    subgraph support["Supporting Systems"]
        D
        E
    end
    core -.-> support

フィードバックループパターン

graph TB
    A[Start] --> B[Process]
    B --> C[End]
    C -.->|Feedback| A

ハブ&スポークパターン

graph TB
    Central[Hub]
    A[Spoke 1] --> Central
    B[Spoke 2] --> Central
    C[Spoke 3] --> Central

品質チェックリスト

出力前に確認:

• ノードテキストに「数字. スペース」パターンがない
• すべてのサブグラフが適切な ID 構文を使用
• すべての矢印が正しい構文を使用(-->、-.->)
• カラーが一貫して適用されている
• レイアウト方向が指定されている
• スタイル宣言が存在する
• 曖昧なノード参照がない
• Obsidian/GitHub レンダラーと互換性がある
• ノードテキストに絵文字がない - テキストラベルまたはカラーコーディングを使用

リファレンス

詳細な構文ルールとトラブルシューティングについては、以下を参照してください:

• references/syntax-rules.md - 完全な構文リファレンスとエラー防止