Mermaid ビジュアライザー

テキストコンテンツをクリーンでプロフェッショナルな Mermaid 図に変換。プレゼンテーションとドキュメント用に最適化され、Obsidian と GitHub 互換性のための自動構文エラー防止機能付き。

主な利点

• テキストをプロフェッショナルな Mermaid 図に変換
• 6 つの図タイプ：プロセスフロー、サーキュラーフロー、比較、マインドマップ、シーケンス、状態図
• 構文エラー防止機能内蔵（リスト衝突回避、サブグラフ命名問題）
• Obsidian と GitHub 互換
• 設定可能なレイアウト（垂直/水平）と詳細レベル
• 意味のあるプロフェッショナルな配色

主な機能

• 図タイプ：プロセスフロー（graph TB/LR）、サーキュラーフロー、比較、マインドマップ、シーケンス、状態図
• レイアウトオプション：垂直（TB）、水平（LR）、右から左（RL）、下から上（BT）
• 詳細レベル：シンプル（コアのみ）、標準（バランス）、詳細（完全な注釈）、プレゼンテーション（スライド）
• スタイル：ミニマル（モノクロ）、プロフェッショナル（意味のある色）、カラフル（鮮やか）、アカデミック（フォーマル）
• 構文保護：Markdown リスト衝突の自動回避、適切なサブグラフ ID 構文、正しいノード参照

使用するタイミング

• 概念、プロセス、ワークフローの視覚化
• フローチャートまたは決定木の作成
• システムアーキテクチャ図の構築
• 比較図またはビフォー/アフター図の生成
• ユーザーが「可視化」、「フローチャート」、「図」、「マインドマップ」の作成を要求

重要な構文ルール

一般的なエラーを防止：

• Markdown リスト衝突をトリガーする「数字. スペース」パターンを回避
• 適切なサブグラフ命名を使用：subgraph id["表示名"]
• 表示名ではなく ID でサブグラフを参照
• 特殊文字をエスケープ：" → 『』、() → 「」
• 正しい矢印構文を適用（-->、-.-> 、==>)

設定オプション

• レイアウト：direction（TB/LR/RL/BT）、aspect（縦向き/横向き/正方形）
• 詳細：simple/standard/detailed/presentation
• スタイル：minimal/professional/colorful/academic
• 追加：show_legend、番号付きステップ、カスタムタイトル

ワークフロー

1. コンテンツ構造と関係を分析
2. 適切な図タイプを選択
3. 設定を選択（またはデフォルトを使用）
4. 構文的に正しい Mermaid コードを生成
5. 説明付きで markdown コードフェンスに出力

配色

• 緑：入力、知覚、開始状態
• 赤：計画、決定ポイント
• 紫：処理、推論
• オレンジ：アクション、ツール使用
• シアン：出力、実行、結果
• 黄：ストレージ、メモリ、データ
• ピンク：学習、最適化
• 青：メタデータ、定義

ソース：https://github.com/axtonliu/axton-obsidian-visual-skills/tree/main/mermaid-visualizer ライセンス：詳細はリポジトリを確認