mcpField
A
ai-drawio

ai-drawio

github.com/gbsossデザイン・UI8195 回インストール41 週間前に更新
リポジトリ

ai-drawio について

依頼内容を draw.io XML に変換し、ブラウザーで描画する手順を示すスキルです。図の作成に必要なレイアウト、スタイル、コネクター、埋め込みのルールを提供します。

主な機能

  1. 01draw.io XML の生成
  2. 02レイアウトとキャンバス制約の適用
  3. 03図形スタイルと配色の利用
  4. 04コネクターの経路設定とラベル付け
  5. 05ブラウザーの iframe による描画

活用シーン

  1. 01依頼からフローチャートを作成
  2. 02AWS の図形でクラウド構成を図示
  3. 03ブラウザー表示用の図のプレビューを準備

インストール

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

$npx skills add https://github.com/gbsoss/ai-drawio --skill ai-drawio

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

詳細

AI Draw.io 図生成ツール

draw.io XML の生成に特化した図の作成アシスタントです。正確な XML 仕様を使ってユーザーが視覚的な図を作成できるよう支援し、ブラウザーでレンダリングします。

ワークフロー

  1. リクエストを理解する：ユーザーがどのような図を求めているかを分析します
  2. XML を生成する：形式のルールに従って有効な draw.io XML を作成します
  3. HTML を保存する：図を埋め込んだ HTML ファイルを書き込みます
  4. ブラウザーを開く：ブラウザー自動化を使って図をレンダリングします

XML 生成ルール

基本構造

mxCell 要素のみを生成します。<mxGraphModel>、<root>、<diagram> などのラッパータグは含めないでください。

<mxCell id="2" value="Start" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1">
  <mxGeometry x="100" y="100" width="120" height="60" as="geometry"/>
</mxCell>
ID のルール
  • ID は一意の連続した整数とし、「2」から始めます
  • ID「0」と「1」は図のルート用に予約されています
  • すべての要素の parent="1" とします
レイアウトの制約
  • キャンバスサイズ：幅 0～800px、高さ 0～600px
  • ページ区切りが発生しないよう、すべての要素を 1 つのビューポート内に収めます
  • 適切な間隔を空けます（要素間は最低 20px）
一般的なスタイル

長方形（プロセス）：

rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;

ひし形（判断）：

rhombus;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;

楕円（開始／終了）：

ellipse;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;

矢印（コネクター）：

edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeWidth=2;
カラーパレット
用途塗りつぶし色線の色
開始／成功#d5e8d4#82b366
プロセス／情報#dae8fc#6c8ebf
判断／警告#fff2cc#d6b656
エラー／停止#f8cecc#b85450
中立#f5f5f5#666666
エッジの経路設定ルール
  1. 重ねない：複数のエッジで同一の経路を共有しないでください
  2. 双方向：双方向の接続には反対側を使います
  3. ポイントを指定する：exitX、exitY、entryX、entryY 属性を必ず指定します
  4. 迂回させる：エッジは中間の図形を避けて通るようにします
  5. 接続ポイント：
    • 上：entryX=0.5;entryY=0
    • 下：exitX=0.5;exitY=1
    • 左：entryX=0;entryY=0.5
    • 右：exitX=1;exitY=0.5
例：シンプルなフローチャート
<mxCell id="2" value="Start" style="ellipse;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;fontSize=14;" vertex="1" parent="1">
  <mxGeometry x="340" y="20" width="120" height="60" as="geometry"/>
</mxCell>
<mxCell id="3" value="Process Data" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=14;" vertex="1" parent="1">
  <mxGeometry x="340" y="120" width="120" height="60" as="geometry"/>
</mxCell>
<mxCell id="4" value="Valid?" style="rhombus;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;fontSize=14;" vertex="1" parent="1">
  <mxGeometry x="340" y="220" width="120" height="80" as="geometry"/>
</mxCell>
<mxCell id="5" value="End" style="ellipse;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;fontSize=14;" vertex="1" parent="1">
  <mxGeometry x="340" y="340" width="120" height="60" as="geometry"/>
</mxCell>
<mxCell id="6" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeWidth=2;" edge="1" parent="1" source="2" target="3">
  <mxGeometry relative="1" as="geometry"/>
</mxCell>
<mxCell id="7" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeWidth=2;" edge="1" parent="1" source="3" target="4">
  <mxGeometry relative="1" as="geometry"/>
</mxCell>
<mxCell id="8" value="Yes" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeWidth=2;" edge="1" parent="1" source="4" target="5">
  <mxGeometry relative="1" as="geometry"/>
</mxCell>
AWS アーキテクチャの図形

クラウドアーキテクチャ図では、次の図形スタイルを使用します。

shape=mxgraph.aws4.ec2;
shape=mxgraph.aws4.s3;
shape=mxgraph.aws4.rds;
shape=mxgraph.aws4.lambda;
shape=mxgraph.aws4.api_gateway;
shape=mxgraph.aws4.cloudfront;
shape=mxgraph.aws4.dynamodb;
shape=mxgraph.aws4.sqs;
shape=mxgraph.aws4.sns;
アニメーション付きコネクター

コネクターにアニメーションを追加します。

flowAnimation=1;

ブラウザーでのレンダリング

XML を生成したら、iframe に図を埋め込んだ HTML ファイルを作成し、ローカル HTTP サーバー経由で開きます。

完全な XML 構造（iframe 用）

iframe 方式では、完全な mxfile 構造を生成します。

<mxfile>
  <diagram name="Page-1" id="page1">
    <mxGraphModel dx="800" dy="600" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="850" pageHeight="600">
      <root>
        <mxCell id="0"/>
        <mxCell id="1" parent="0"/>
        
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>
HTML テンプレート（iframe 方式 - 推奨）

この方式では diagrams.net のビューアー iframe を使用し、安定して動作します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>AI Generated Diagram</title>
  <style>
    body { margin: 0; padding: 40px; background: linear-gradient(135deg, #1a1a2e 0%, #0f3460 100%); min-height: 100vh; font-family: sans-serif; }
    .container { max-width: 1200px; margin: 0 auto; }
    h1 { color: #e94560; margin-bottom: 10px; }
    .subtitle { color: rgba(255,255,255,0.7); margin-bottom: 30px; }
    .diagram-card { background: white; border-radius: 16px; padding: 20px; box-shadow: 0 25px 80px rgba(0,0,0,0.5); }
    .diagram-title { font-size: 1.4em; color: #333; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 3px solid #e94560; }
    iframe { width: 100%; height: 500px; border: none; border-radius: 8px; }
  </style>
</head>
<body>
  <div class="container">
    <h1>AI Draw.io</h1>
    <p class="subtitle">DIAGRAM_DESCRIPTION - Generated by Claude</p>
    <div class="diagram-card">
      <div class="diagram-title">DIAGRAM_TITLE</div>
      <iframe src="https://viewer.diagrams.net/?highlight=0000ff&nav=1&title=Diagram#RURL_ENCODED_MXFILE_XML"></iframe>
    </div>
  </div>
</body>
</html>
実装手順
  1. ユーザーのリクエストに基づいて draw.io XML を生成します（完全な mxfile 構造）
  2. XML 全体を URL エンコードします（encodeURIComponent または同等の方法を使用）
  3. エンコードした XML を指定する viewer.diagrams.net 向けの iframe src を含む HTML ファイルを作成します
  4. ローカル HTTP サーバーを起動します：python -m http.server 8765
  5. ブラウザー自動化ツールを使ってファイルを開きます：
    • ブラウザータブのコンテキストを取得します
    • http://localhost:8765/diagram.html に移動します
    • 結果を表示するスクリーンショットを撮ります
URL エンコードのルール

iframe の src に設定する XML は URL エンコードする必要があります。

  • < は %3C になります
  • > は %3E になります
  • " は %22 になります
  • & は %26 になります
  • = は %3D になります
  • 空白は %20 になります

使用例

ユーザー：シンプルなログインフロー図を描いてください

アシスタントの操作：

  1. ログインフローの XML を生成します（開始 -> 認証情報を入力 -> 検証 -> 成功／失敗 -> 終了）
  2. 図を埋め込んだ HTML ファイルを作成します
  3. ブラウザーを開き、HTML ファイルに移動します
  4. スクリーンショットを撮って結果を表示します

ヒント

  • 複雑な図では、XML を生成する前にレイアウトを計画します
  • 同じ種類の要素には一貫した色を使います
  • わかりやすさのため、エッジにラベルを追加します
  • 関連する要素を視覚的にグループ化します
  • 強調したい箇所に限定してアニメーションを使います

コメント

Markdown 対応