mcpField
I
image-to-diagram

image-to-diagram

github.com/mindmorassドキュメント237 回インストール37 週間前に更新
リポジトリ

image-to-diagram について

image-to-diagram は、画像の図を編集可能な Mermaid または DOT コードに変換するスキルです。テキストで図を管理したい開発者向けで、結果を Qdrant に取り込んで再利用することもできます。

主な機能

  1. 01ノードと関係の画像解析
  2. 02Mermaid 図の生成
  3. 03DOT/Graphviz 出力
  4. 04色とスタイルの反映
  5. 05Qdrant への任意取り込み

活用シーン

  1. 01アーキテクチャ画像のコード化
  2. 02ホワイトボードのフロー図化
  3. 03コードと図のバージョン管理
  4. 04Qdrant による図のパターン再利用

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/mindmorass/reflex --skill image-to-diagram

インストール後、Claude Code で/image-to-diagramを入力して読み込まれたか確認します。

詳細

画像から図への変換

視覚的な図を、編集可能でバージョン管理できるコードに変換します。

ワークフロー

Image → Claude Vision → Mermaid/DOT code → Save → Optionally ingest to Qdrant

対応する入力

種類品質
図のスクリーンショット優秀
アーキテクチャツールからのエクスポート優秀
明瞭なホワイトボードの写真良好
手描きの図普通（明確なボックスや矢印があると効果的です）
コントラストが低い画像／ぼやけた画像不良

出力形式

Mermaid（デフォルト）
  • フローチャート、シーケンス図、クラス図、ER 図
  • GitHub、GitLab、Notion、VS Code でレンダリングできます
  • ファイル拡張子：.mmd または .mermaid
DOT/Graphviz
  • レイアウトをより細かく制御できます
  • 複雑なグラフに適しています
  • ファイル拡張子：.dot または .gv

変換プロセス

1. 画像を分析する

画像を読み取り、以下を特定します。

  • 全体構造（階層、フロー、ネットワーク）
  • コンポーネント／ノードとそのラベル
  • コンポーネント間の関係／接続
  • グループ化／サブグラフ
  • 色分け（スタイルに変換）
2. 図の種類を選ぶ
視覚的なパターンMermaid の種類
矢印でつながったボックス（フロー）flowchart TD/LR
インタラクションのシーケンスsequenceDiagram
関係を持つクラスclassDiagram
データベーステーブルerDiagram
状態と遷移stateDiagram-v2
タイムライン／フェーズgantt または timeline
階層的なグループsubgraph を含む flowchart
3. コードを生成する

フローチャートのテンプレート：

%% Description of the diagram
%% Source: converted from image

flowchart TD
    subgraph GroupName["Group Label"]
        A[Component A]
        B[Component B]
    end

    A --> B
    B --> C[External]

    %% Styling
    style A fill:#color,stroke:#border,color:#text

シーケンス図のテンプレート：

sequenceDiagram
    participant A as Service A
    participant B as Service B

    A->>B: Request
    B-->>A: Response
4. スタイルを適用する

視覚的な色を Mermaid のスタイルに対応付けます。

%% Color mapping
style NodeName fill:#hexcolor,stroke:#bordercolor,color:#textcolor

%% Common colors
%% Blue: fill:#2563eb,stroke:#3b82f6,color:#fff
%% Green: fill:#059669,stroke:#10b981,color:#fff
%% Red: fill:#dc2626,stroke:#ef4444,color:#fff
%% Orange: fill:#d97706,stroke:#f59e0b,color:#fff
%% Purple: fill:#7c3aed,stroke:#8b5cf6,color:#fff
5. 保存し、必要に応じて取り込む
# Save to file
# Write to ~/Desktop/diagram-name.mmd

# Ingest to Qdrant for pattern reuse
/reflex:ingest ~/Desktop/diagram-name.mmd --collection personal_memories

最良の結果を得るためのヒント

  1. 意図を説明する：「これを Mermaid に変換してください。マイクロサービスアーキテクチャを示しています」
  2. 形式を指定する：「サブグラフを使ったフローチャートにしてください」または「シーケンス図にしてください」
  3. スタイルを指定する：「画像の色に合わせてください」または「デフォルトのスタイルを使ってください」
  4. 繰り返し調整する：「認証フローの詳細を追加してください」または「データベースのセクションを簡略化してください」

プロンプトの例

"Convert this whiteboard photo to Mermaid"

"Turn this architecture diagram into a flowchart with subgraphs"

"Create a sequence diagram from this interaction flow screenshot"

"Convert to Mermaid, save as microservices-arch.mmd, and ingest to Qdrant"

変換後

図は以下のように活用できます。

  • バージョン管理にコミットする
  • ドキュメント（GitHub、GitLab、Notion）でレンダリングする
  • 意味検索やパターンの再利用のために Qdrant に取り込む
  • テキストとして編集、調整する
  • 類似したアーキテクチャのテンプレートとして使用する

コメント

Markdown 対応