mcpField
D
drawio-logical-diagrams

drawio-logical-diagrams

github.com/giuseppe-trisciuoglioドキュメント3654.0k 回インストール7 週間前に更新
リポジトリ

drawio-logical-diagrams について

draw.io のネイティブ XML で論理図を作成するためのスキルです。フローチャート、アーキテクチャ図、BPMN、UML、DFDに対応し、XMLの検証規則やスタイル資料も扱います。

主な機能

  1. 01draw.io ネイティブ XML の生成
  2. 02フローチャート、アーキテクチャ、BPMN、UML、DFDに対応
  3. 03汎用図形と配色の規則
  4. 04XMLタグ、ID、参照の検証
  5. 05テンプレートとスタイル資料

活用シーン

  1. 01システムコンポーネント間のデータフローの図示
  2. 02業務プロセスと判断分岐の表現
  3. 03クラウド固有の詳細を含まないシステム設計の文書化

インストール

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

$npx skills add https://github.com/giuseppe-trisciuoglio/developer-kit --skill drawio-logical-diagrams

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

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/
color-palette.md
constraints-warnings.md
diagram-templates.md
diagram-types-detailed.md
layout-best-practices.md
shape-examples.md
shape-styles.md

詳細

Draw.io 論理図の作成

概要

汎用的な図形や記号を使用して、論理フロー図、システムアーキテクチャの可視化、抽象的なプロセス表現のための draw.io ネイティブ XML 形式によるプロフェッショナルな論理図を作成します。

使用する場面

  • システムコンポーネント間のデータフローを示す論理フロー図を作成する場合
  • 論理アーキテクチャ図（抽象的なシステム構造）を設計する場合
  • ビジネスプロセス向けの BPMN プロセス図を作成する場合
  • UML 図（クラス図、シーケンス図、アクティビティ図、状態図）を作成する場合
  • システム分析向けのデータフロー図（DFD）を作成する場合
  • 分岐ロジックを含む判断フローチャートを作成する場合
  • システムの相互作用やシーケンスを可視化する場合
  • クラウド固有の内容を含めずに論理システム設計を文書化する場合

使用しないでください： AWS/Azure/GCP アーキテクチャ図（aws-drawio-architecture-diagrams を使用してください）。

手順

論理図の作成
  1. 依頼を分析する：図にするシステムやプロセスを理解します
  2. 図の種類を選ぶ：フローチャート、アーキテクチャ、BPMN、UML、DFD など
  3. 要素を特定する：アクター、プロセス、データストア、コネクターを特定します
  4. XML 構造を下書きする：適切なルートセルを含む mxGraphModel を作成します
  5. 図形を追加する：適切なスタイルを指定した mxCell 要素を作成します
  6. コネクターを追加する：エッジ要素を使って要素を接続します
  7. XML を検証する：XML の形式が正しく、すべての ID が一意であることを確認します（以下の検証チェックリストを参照）
  8. 出力する：ユーザー用の .drawio ファイルを書き込みます
XML 検証チェックリスト

ファイルを出力する前に、以下を確認してください：

  • すべてのタグが適切に閉じられている（<mxCell>、</mxGeometry> などが閉じられていない状態になっていない）
  • すべてのセル ID が一意である（0 と 1 はルートセル用に予約されています。2 から始まる連番の整数を使用してください）
  • すべての source 属性と target 属性が既存のセル ID を参照している
  • すべての parent 属性が既存のセル ID を参照している
  • すべての座標（x、y、width、height）が正の数である
  • 特殊文字がエスケープされている（< → &lt;、> → &gt;、& → &amp;）
  • 複数行のラベルでは、html=1 を指定したスタイルとともに &#xa; または <br> を使用している
主な XML コンポーネント
コンポーネント説明
mxfileホストとバージョンを含むルート要素
diagram図の定義を含みます
mxGraphModelキャンバスの設定（グリッド、ページサイズ）
rootすべてのセルを格納するコンテナ（id="0" と id="1" を含める必要があります）
mxCell個々の図形（頂点）またはコネクター（エッジ）

Draw.io XML 構造

<mxfile host="app.diagrams.net" agent="Claude" version="24.7.17">
  <diagram id="logical-flow-1" name="Logical Flow">
    <mxGraphModel dx="1200" dy="800" grid="1" gridSize="10" guides="1"
      tooltips="1" connect="1" arrows="1" fold="1" page="1"
      pageScale="1" pageWidth="1169" pageHeight="827" math="0" shadow="0">
      <root>
        <mxCell id="0" />
        <mxCell id="1" parent="0" />
        
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>

主なルール：

  • ID "0" と "1" はルートセル用に予約されています
  • "2" から始まる連番の整数 ID を使用してください
  • アーキテクチャ図では横向きの配置を使用してください
  • すべての座標は正の値とし、グリッドに合わせてください（10 の倍数）

汎用的な図形とスタイル

基本的な図形の種類
図形スタイル
長方形rounded=0;whiteSpace=wrap;html=1;
角丸長方形rounded=1;whiteSpace=wrap;html=1;
楕円／円ellipse;whiteSpace=wrap;html=1;
ひし形rhombus;whiteSpace=wrap;html=1;
円柱shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;
六角形shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;
平行四辺形shape=ext;double=1;rounded=0;whiteSpace=wrap;html=1;
標準カラーパレット
要素の種類塗りつぶし色枠線の色用途
プロセス#dae8fc#6c8ebf操作／アクション
判断#fff2cc#d6b656条件分岐
開始／終了#d5e8d4#82b366終端状態
データ／ストア#e1f5fe#0277bdデータベース／ファイル
エンティティ#f3e5f5#7b1fa2外部システム
エラー／停止#f8cecc#b85450エラー状態
アクター／ユーザー#ffe0b2#f57c00ユーザー／アクター
コンテナ#f5f5f5#666666グループ化する領域
コネクターのスタイル

標準の流れ：

edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;endArrow=classic;endFill=1;strokeColor=#666666;strokeWidth=2;

破線（代替／任意）：

edgeStyle=orthogonalEdgeStyle;dashed=1;dashPattern=5 5;strokeColor=#666666;

矢印のスタイル：

  • endArrow=classic;endFill=1 - 塗りつぶし三角形
  • endArrow=open;endFill=0 - 開いた矢印
  • endArrow=blockThin;endFill=1 - ブロック矢印

図の種類

種類主な要素
論理フローアクター（オレンジ）、サービス（青）、データストア（シアン）、外部システム（紫）
論理アーキテクチャネストされたコンポーネントを含む階層型コンテナー
BPMN円（開始／終了）、角丸長方形（アクティビティ）、ひし形（ゲートウェイ）
UML シーケンス図メッセージ矢印を伴う垂直のライフライン
DFD正方形（エンティティ）、円（プロセス）、開いた長方形（データストア）

参考ファイル

図形の詳細な例やスタイルの参考については、以下を参照してください。

例

例 1：注文処理フロー

リクエスト：「注文処理を示す論理フロー図を作成してください。顧客が注文を送信し、システムが検証します。有効な場合は支払いを処理して発送し、無効な場合は顧客に通知します。」

<mxfile host="app.diagrams.net" agent="Claude" version="24.7.17">
  <diagram id="order-flow-1" name="Order Processing">
    <mxGraphModel dx="1200" dy="800" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1169" pageHeight="827" math="0" shadow="0">
      <root>
        <mxCell id="0"/><mxCell id="1" parent="0"/>
        <mxCell id="2" value="Start" style="ellipse;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;fontSize=12;" vertex="1" parent="1"><mxGeometry x="80" y="50" width="80" height="40" as="geometry"/></mxCell>
        <mxCell id="3" value="Submit Order" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=12;" vertex="1" parent="1"><mxGeometry x="60" y="130" width="120" height="60" as="geometry"/></mxCell>
        <mxCell id="4" value="Validate&#xa;Order?" style="rhombus;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;fontSize=12;" vertex="1" parent="1"><mxGeometry x="80" y="230" width="80" height="80" as="geometry"/></mxCell>
        <mxCell id="5" value="Notify&#xa;Customer" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;fontSize=12;" vertex="1" parent="1"><mxGeometry x="220" y="240" width="100" height="50" as="geometry"/></mxCell>
        <mxCell id="6" value="Process&#xa;Payment" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=12;" vertex="1" parent="1"><mxGeometry x="60" y="350" width="120" height="60" as="geometry"/></mxCell>
        <mxCell id="7" value="Ship Order" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=12;" vertex="1" parent="1"><mxGeometry x="60" y="450" width="120" height="60" as="geometry"/></mxCell>
        <mxCell id="8" value="End" style="ellipse;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;fontSize=12;" vertex="1" parent="1"><mxGeometry x="80" y="550" width="80" height="40" as="geometry"/></mxCell>
        <mxCell id="10" style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=classic;endFill=1;strokeColor=#666666;strokeWidth=2;" edge="1" parent="1" source="2" target="3"><mxGeometry relative="1" as="geometry"/></mxCell>
        <mxCell id="11" style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=classic;endFill=1;strokeColor=#666666;strokeWidth=2;" edge="1" parent="1" source="3" target="4"><mxGeometry relative="1" as="geometry"/></mxCell>
        <mxCell id="12" value="No" style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=classic;endFill=1;strokeColor=#b85450;strokeWidth=2;fontSize=11;" edge="1" parent="1" source="4" target="5"><mxGeometry relative="1" as="geometry"/></mxCell>
        <mxCell id="13" value="Yes" style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=classic;endFill=1;strokeColor=#82b366;strokeWidth=2;fontSize=11;" edge="1" parent="1" source="4" target="6"><mxGeometry relative="1" as="geometry"/></mxCell>
        <mxCell id="14" style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=classic;endFill=1;strokeColor=#666666;strokeWidth=2;" edge="1" parent="1" source="6" target="7"><mxGeometry relative="1" as="geometry"/></mxCell>
        <mxCell id="15" style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=classic;endFill=1;strokeColor=#666666;strokeWidth=2;" edge="1" parent="1" source="7" target="8"><mxGeometry relative="1" as="geometry"/></mxCell>
        <mxCell id="16" style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=classic;endFill=1;strokeColor=#b85450;strokeWidth=2;" edge="1" parent="1" source="5" target="8"><mxGeometry relative="1" as="geometry"/></mxCell>
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>
例 2：3 層論理アーキテクチャ

リクエスト：「プレゼンテーション層、ビジネスロジック層、データ層を持つウェブアプリケーションの論理アーキテクチャ図を作成してください。」

<mxfile host="app.diagrams.net" agent="Claude" version="24.7.17">
  <diagram id="three-tier-1" name="Three-Tier Architecture">
    <mxGraphModel dx="1200" dy="800" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1169" pageHeight="827" math="0" shadow="0">
      <root>
        <mxCell id="0"/><mxCell id="1" parent="0"/>
        <mxCell id="2" value="User" style="ellipse;whiteSpace=wrap;html=1;fillColor=#ffe0b2;strokeColor=#f57c00;fontSize=12;" vertex="1" parent="1"><mxGeometry x="40" y="340" width="60" height="40" as="geometry"/></mxCell>
        <mxCell id="3" value="Presentation Layer" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;fontSize=14;fontStyle=1;" vertex="1" parent="1"><mxGeometry x="160" y="40" width="300" height="180" as="geometry"/></mxCell>
        <mxCell id="4" value="Web&#xa;Browser" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=12;" vertex="1" parent="3"><mxGeometry x="20" y="30" width="80" height="50" as="geometry"/></mxCell>
        <mxCell id="5" value="Mobile&#xa;App" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=12;" vertex="1" parent="3"><mxGeometry x="120" y="30" width="80" height="50" as="geometry"/></mxCell>
        <mxCell id="7" value="Application Layer" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;fontSize=14;fontStyle=1;" vertex="1" parent="1"><mxGeometry x="160" y="260" width="300" height="180" as="geometry"/></mxCell>
        <mxCell id="8" value="API&#xa;Gateway" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;fontSize=12;" vertex="1" parent="7"><mxGeometry x="20" y="30" width="80" height="50" as="geometry"/></mxCell>
        <mxCell id="9" value="Business&#xa;Logic" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=12;" vertex="1" parent="7"><mxGeometry x="110" y="30" width="80" height="50" as="geometry"/></mxCell>
        <mxCell id="11" value="Data Layer" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;fontSize=14;fontStyle=1;" vertex="1" parent="1"><mxGeometry x="160" y="480" width="300" height="180" as="geometry"/></mxCell>
        <mxCell id="12" value="Primary&#xa;Database" style="shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;fillColor=#e1f5fe;strokeColor=#0277bd;fontSize=12;" vertex="1" parent="11"><mxGeometry x="20" y="30" width="60" height="80" as="geometry"/></mxCell>
        <mxCell id="13" value="Cache" style="shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;fillColor=#fff3e0;strokeColor=#e65100;fontSize=12;" vertex="1" parent="11"><mxGeometry x="100" y="30" width="60" height="80" as="geometry"/></mxCell>
        <mxCell id="20" style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=classic;endFill=1;strokeColor=#666666;strokeWidth=2;" edge="1" parent="1" source="2" target="4"><mxGeometry relative="1" as="geometry"/></mxCell>
        <mxCell id="21" style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=classic;endFill=1;strokeColor=#666666;strokeWidth=2;" edge="1" parent="1" source="4" target="8"><mxGeometry relative="1" as="geometry"/></mxCell>
        <mxCell id="22" style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=classic;endFill=1;strokeColor=#666666;strokeWidth=2;" edge="1" parent="1" source="8" target="9"><mxGeometry relative="1" as="geometry"/></mxCell>
        <mxCell id="23" style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=classic;endFill=1;strokeColor=#666666;strokeWidth=2;" edge="1" parent="1" source="9" target="12"><mxGeometry relative="1" as="geometry"/></mxCell>
        <mxCell id="24" value="query" style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=open;endFill=0;strokeColor=#666666;strokeWidth=1;fontSize=10;dashed=1;" edge="1" parent="1" source="9" target="13"><mxGeometry relative="1" as="geometry"/></mxCell>
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>

その他のテンプレート（マイクロサービスアーキテクチャ、イベント駆動型、決定木、シーケンス図、DFD）については、diagram-templates.md を参照してください。

制約と警告

重要な制約
  1. XML の妥当性：タグは必ず正しく閉じ、特殊文字はエスケープしてください
  2. 一意の ID：すべてのセル ID は一意でなければなりません（親の「0」と「1」を除く）
  3. 有効な参照：ソース／ターゲットは既存のセル ID を参照する必要があります
  4. 正の座標：すべての x、y の値は >= 0 でなければなりません
警告
  • XML ファイルは整形式でなければなりません。そうでない場合、draw.io で開けません
  • 無効な親参照があると、要素が表示されなくなります
  • 負の座標を指定すると、要素が表示キャンバスの外側に配置されます

ベストプラクティス

  1. すべての図で、要素の種類ごとに一貫した色を使用します
  2. 矢印は曲がりを最小限に抑え、まっすぐに保ちます
  3. ラベルは矢印の線から少なくとも 20px 離して配置します
  4. 関連する要素をコンテナーにまとめます
  5. ラベルには 12～14px、注釈には 10～11px のフォントを使用します
  6. すべての座標をグリッド（10 の倍数）に合わせます
  7. コントラストの高い色を使用し、意味を色だけに頼らないようにします

コメント

Markdown 対応