Community画像github.com

Draw.io ダイアグラムスキル

アーキテクチャ図、フローチャート、ネットワーク図、技術イラスト用のdraw.io図面ファイル(.drawio)を作成・編集します。ユーザーが図やアーキテクチャ図の作成を依頼した際に使用します。出力はXMLベースの.drawioファイルで、draw.ioデスクトップ版またはWeb版にそのままインポートできます。

Draw.io ダイアグラムスキル とは？

このスキルは、Claude CodeなどのAIエージェントがdraw.ioのネイティブXML形式でプロフェッショナルな図面を作成・編集できるようにします。アーキテクチャ図、フローチャート、ネットワーク図、ワイヤーフレームなど、あらゆる種類のダイアグラムをサポートし、出力された.drawioファイルはdraw.io / diagrams.net (デスクトップ版、Web版) にそのままインポートして編集可能です。スキルは、基本的な図形（長方形、楕円、円柱）、コンテナ（スイムレーン、グループ）、コネクタ（矢印、破線）、テキスト要素のXML構造とスタイリングを詳細に説明しています。また、AWS、Azure、GCPのクラウドプロバイダーアイコン用の組み込みライブラリもサポートしており、アーキテクチャ図のレイアウトパターンやベストプラクティスも提供します。企業のブランディング設定はカスタマイズ可能で、ユーザーは組織のカラースキームやスタイルをreferences/branding.mdで定義できます。このスキールにより、AIエージェントは一貫性のある編集可能なダイアグラムを迅速に生成でき、手動での図面作成時間を大幅に短縮できます。

対応✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/davidodediran/Draw.io-claude-skills/tree/HEAD/drawio-skill

Installed? Explore more 画像 skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →

オリジナルを見る→すべてのスキルを見る

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

ドキュメント

Draw.io ダイアグラムスキル は何をしますか？

draw.ioのネイティブXML形式で、プロフェッショナルで編集可能なダイアグラムファイルを作成します。

出力形式

draw.ioファイルは以下の構造のXMLです：

<mxfile host="app.diagrams.net" modified="DATE" agent="Claude" version="21.0.0" type="device">
  <diagram name="DIAGRAM_NAME" id="UNIQUE_ID">
    <mxGraphModel dx="1200" dy="800" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1100" pageHeight="850" math="0" shadow="0">
      <root>
        <mxCell id="0" />
        <mxCell id="1" parent="0" />
        <!-- すべてのダイアグラム要素はここに配置 -->
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>

基本要素タイプ

基本図形

<!-- 長方形 -->
<mxCell id="unique-id" value="ラベルテキスト" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
  <mxGeometry x="100" y="100" width="120" height="60" as="geometry" />
</mxCell>

<!-- 角丸長方形 -->
<mxCell id="unique-id" value="ラベル" 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>

<!-- 円柱 (データベース) -->
<mxCell id="unique-id" value="データベース" style="shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;backgroundOutline=1;size=15;fillColor=#f8cecc;strokeColor=#b85450;" vertex="1" parent="1">
  <mxGeometry x="100" y="100" width="80" height="80" as="geometry" />
</mxCell>

<!-- 楕円 -->
<mxCell id="unique-id" value="ノード" style="ellipse;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="1">
  <mxGeometry x="100" y="100" width="80" height="80" as="geometry" />
</mxCell>

コンテナとグループ

<!-- スイムレーン (ヘッダー付きコンテナ) -->
<mxCell id="unique-id" value="セクションタイトル" style="swimlane;fontStyle=1;align=center;verticalAlign=top;childLayout=stackLayout;horizontal=1;startSize=30;fillColor=#f5f5f5;strokeColor=#666666;fontColor=#333333;" vertex="1" parent="1">
  <mxGeometry x="40" y="40" width="200" height="150" as="geometry" />
</mxCell>

<!-- ヘッダーバー (ブランドプライマリカラー使用) -->
<mxCell id="unique-id" value="" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#0066CC;strokeColor=#0066CC;" vertex="1" parent="1">
  <mxGeometry x="40" y="40" width="400" height="40" as="geometry" />
</mxCell>

コネクタと矢印

<!-- 基本矢印 -->
<mxCell id="unique-id" value="" style="endArrow=classic;html=1;rounded=0;strokeWidth=2;strokeColor=#666666;" edge="1" parent="1" source="source-id" target="target-id">
  <mxGeometry relative="1" as="geometry" />
</mxCell>

<!-- 双方向矢印 -->
<mxCell id="unique-id" value="" style="endArrow=classic;startArrow=classic;html=1;rounded=0;strokeWidth=2;" edge="1" parent="1">
  <mxGeometry relative="1" as="geometry">
    <mxPoint x="200" y="200" as="sourcePoint" />
    <mxPoint x="400" y="200" as="targetPoint" />
  </mxGeometry>
</mxCell>

<!-- フレックス矢印 (ブロック矢印) -->
<mxCell id="unique-id" value="" style="shape=flexArrow;endArrow=classic;html=1;fillColor=#FFB800;strokeColor=#cc9400;width=20;endSize=8;" edge="1" parent="1">
  <mxGeometry relative="1" as="geometry">
    <mxPoint x="200" y="200" as="sourcePoint" />
    <mxPoint x="400" y="200" as="targetPoint" />
  </mxGeometry>
</mxCell>

<!-- 破線 -->
<mxCell id="unique-id" value="" style="endArrow=classic;html=1;dashed=1;dashPattern=8 8;strokeColor=#999999;" edge="1" parent="1">
  <mxGeometry relative="1" as="geometry">
    <mxPoint x="200" y="200" as="sourcePoint" />
    <mxPoint x="400" y="200" as="targetPoint" />
  </mxGeometry>
</mxCell>

テキスト要素

<!-- プレーンテキスト -->
<mxCell id="unique-id" value="ラベルテキスト" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=12;" vertex="1" parent="1">
  <mxGeometry x="100" y="100" width="100" height="30" as="geometry" />
</mxCell>

<!-- 太字タイトル -->
<mxCell id="unique-id" value="タイトル" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=18;fontStyle=1;fontColor=#333333;" vertex="1" parent="1">
  <mxGeometry x="100" y="20" width="300" height="40" as="geometry" />
</mxCell>

<!-- 複数行テキスト (改行には &#xa; を使用) -->
<mxCell id="unique-id" value="行1&#xa;行2&#xa;行3" style="text;html=1;strokeColor=none;fillColor=none;align=left;verticalAlign=top;whiteSpace=wrap;rounded=0;fontSize=10;" vertex="1" parent="1">
  <mxGeometry x="100" y="100" width="150" height="60" as="geometry" />
</mxCell>

共通スタイルプロパティ

色 (16進コードを使用)

プロパティ目的例
fillColor背景色fillColor=#dae8fc
strokeColor枠線色strokeColor=#6c8ebf
fontColor文字色fontColor=#333333

標準カラーパレット

青:    fillColor=#dae8fc;strokeColor=#6c8ebf
緑:    fillColor=#d5e8d4;strokeColor=#82b366
黄:    fillColor=#fff2cc;strokeColor=#d6b656
橙:    fillColor=#ffe6cc;strokeColor=#d79b00
赤:    fillColor=#f8cecc;strokeColor=#b85450
紫:    fillColor=#e1d5e7;strokeColor=#9673a6
灰:    fillColor=#f5f5f5;strokeColor=#666666

タイポグラフィ

プロパティ値例
fontSize数値fontSize=12
fontStyle0=標準, 1=太字, 2=斜体, 3=太字+斜体fontStyle=1
alignleft, center, rightalign=center
verticalAligntop, middle, bottomverticalAlign=middle

枠線とエフェクト

プロパティ値例
rounded0 または 1rounded=1
strokeWidth数値strokeWidth=2
dashed0 または 1dashed=1
dashPatternパターンdashPattern=8 8
shadow0 または 1shadow=1

企業ブランディング (カスタマイズ可能)

このスキルは企業固有のブランディングをサポートしています。references/branding.md を編集して、組織のカラーとスタイルを設定してください。

デフォルトのブランドプレースホルダー (独自のものに置き換えてください):

プライマリ:   fillColor=#0066CC;strokeColor=#0052a3;fontColor=#FFFFFF
セカンダリ: fillColor=#FFB800;strokeColor=#cc9400;fontColor=#333333
ダーク:      fillColor=#1a1a2e;strokeColor=#1a1a2e;fontColor=#FFFFFF
ライト背景:  fillColor=#f0f4f8;strokeColor=#0066CC

完全なカスタマイズ手順については references/branding.md を参照してください。

ダイアグラムパターン

アーキテクチャ図レイアウト

  1. タイトルバー 上部 (全幅、ブランドカラー)
  2. メインセクション をスイムレーンまたは角丸コンテナとして
  3. コンポーネント をセクション内の角丸長方形として
  4. データベース を円柱として
  5. 外部システム を左右の端に
  6. 矢印 でデータ/制御フローを示す
  7. 凡例 を隅に配置し色や記号を説明する
  8. フッター にメタデータ

レイヤードアーキテクチャ (上から下へ)

┌─────────────────────────────────────┐
│           ユーザー/クライアント         │  ← 最上層
├─────────────────────────────────────┤
│           API / インターフェース       │
├─────────────────────────────────────┤
│         ビジネスロジック               │
├─────────────────────────────────────┤
│          データ / ストレージ           │  ← 最下層
└─────────────────────────────────────┘

左から右へのフロー

┌──────┐     ┌──────────┐     ┌──────────┐
│ ソース│ ──► │  処理    │ ──► │  ターゲット│
└──────┘     └──────────┘     └──────────┘

ベストプラクティス

  1. ユニークID: 各 mxCell にユニークな id 属性が必要
  2. 親階層: トップレベル要素には parent="1" を設定
  3. 位置指定: mxGeometry で x, y, width, height を使用
  4. レイヤリング: 後で定義した要素が前面に表示される
  5. 配置: 一貫した x/y 間隔を使用 (グリッド10～20px)
  6. 色: パレットから調和のとれた塗りつぶし/枠線のペアを使用
  7. ラベル: テキストは簡潔に。説明は別のテキスト要素を使用
  8. 余白: コンテナ内に余白を残す (20～40pxのパディング)

ワークフロー

  1. ダイアグラムの種類とレイアウトパターンを決定
  2. mxGraphModel でページサイズ (pageWidth, pageHeight) を設定
  3. コンテナ構造 (スイムレーン、グループ) を作成
  4. ユニークIDを持つコンポーネントを追加
  5. ソース/ターゲットIDを参照するコネクタを追加
  6. ラベルと注釈を追加
  7. 色分けを使用する場合は凡例を追加
  8. .drawio ファイルとして保存
  9. /mnt/user-data/outputs/ にコピーしてユーザーに提示

クラウドプロバイダーアイコン (AWS、Azure、GCP)

Draw.ioには主要クラウドプロバイダー向けの組み込み図形ライブラリが含まれています。プロフェッショナルなアーキテクチャ図には公式アイコンを使用してください。

AWSアイコン (クイックリファレンス)

AWSは shape=mxgraph.aws4.resourceIcon と resIcon=mxgraph.aws4.SERVICE を使用します:

<mxCell id="lambda-1" value="Lambda" style="sketch=0;outlineConnect=0;fontColor=#232F3E;fillColor=#ED7100;strokeColor=#ffffff;dashed=0;verticalLabelPosition=bottom;verticalAlign=top;align=center;html=1;fontSize=12;fontStyle=0;aspect=fixed;shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.lambda;" vertex="1" parent="1">
  <mxGeometry x="100" y="100" width="78" height="78" as="geometry" />
</mxCell>

よく使うAWS resIcon値:

  • コンピューティング: ec2, lambda, ecs, eks, fargate
  • ストレージ: s3, elastic_block_store, elastic_file_system
  • データベース: rds, dynamodb, aurora, elasticache, redshift
  • ネットワーキング: vpc, cloudfront, route_53, api_gateway, elastic_load_balancing
  • セキュリティ: iam, cognito, secrets_manager, kms, waf

AWSカテゴリ色:

  • コンピューティング: #ED7100
  • ストレージ: #7AA116
  • データベース: #C925D1
  • ネットワーキング: #8C4FFF
  • セキュリティ: #DD344C

Azureアイコン (クイックリファレンス)

Azureは image=img/lib/azure2/CATEGORY/SERVICE.svg を使用します:

<mxCell id="vm-1" value="VM" style="aspect=fixed;html=1;points=[];align=center;image;fontSize=12;image=img/lib/azure2/compute/Virtual_Machine.svg;verticalLabelPosition=bottom;verticalAlign=top;" vertex="1" parent="1">
  <mxGeometry x="100" y="100" width="68" height="68" as="geometry" />
</mxCell>

よく使うAzure画像パス:

  • compute/Virtual_Machine.svg, compute/Function_Apps.svg
  • containers/Kubernetes_Services.svg
  • storage/Storage_Accounts.svg, storage/Blob_Storage.svg
  • databases/SQL_Database.svg, databases/Azure_Cosmos_DB.svg
  • networking/Virtual_Networks.svg, networking/Load_Balancers.svg
  • security/Key_Vaults.svg, identity/Azure_Active_Directory.svg

AWSグループコンテナ

<!-- VPC -->
<mxCell id="vpc" value="VPC" style="sketch=0;outlineConnect=0;gradientColor=none;html=1;whiteSpace=wrap;fontSize=12;fontStyle=0;shape=mxgraph.aws4.group;grIcon=mxgraph.aws4.group_vpc;strokeColor=#8C4FFF;fillColor=none;verticalAlign=top;align=left;spacingLeft=30;dashed=0;" vertex="1" parent="1">
  <mxGeometry x="40" y="40" width="400" height="300" as="geometry" />
</mxCell>

<!-- パブリックサブネット -->
grIcon=mxgraph.aws4.group_public_subnet;strokeColor=#7AA116;fillColor=#E9F3E6

<!-- プライベートサブネット -->
grIcon=mxgraph.aws4.group_private_subnet;strokeColor=#00A4A6;fillColor=#E6F6F7

リファレンス

高度なパターンと完全なアイコンリストについては以下を参照:

  • references/architecture-patterns.md - 一般的なアーキテクチャ図のレイアウト
  • references/style-guide.md - 拡張スタイルオプションとアイコン配置
  • references/cloud-icons.md - 完全なAWS、Azure、GCPアイコンリファレンス
  • references/branding.md - 企業ブランディングのカスタマイズガイド

関連スキル

steipete/songsee

Generate spectrograms and feature-panel visualizations from audio with the songsee CLI.

community

affaan-m/frontend-design

Create distinctive, production-grade frontend interfaces with high design quality. Use when the user asks to build web components, pages, or applications and the visual direction matters as much as the code quality.

community

mattpocock/improve-codebase-architecture

Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.

community

lobehub/add-provider-doc

Add documentation for a new AI provider — usage docs, env vars, Docker config, image resources.

community

addyosmani/browser-testing-with-devtools

Tests in real browsers via Chrome DevTools MCP. Use when building or debugging anything that runs in a browser. Use when you need to inspect the DOM, capture console errors, analyze network requests, profile performance, or verify visual output with real runtime data. Requires the chrome-devtools MCP server to be configured.

community

bytedance/chart-visualization

This skill should be used when the user wants to visualize data. It intelligently selects the most suitable chart type from 26 available options, extracts parameters based on detailed specifications, and generates a chart image using a JavaScript script.

community
← More 画像 skills