Community影像github.com

davidodediran/Draw.io-claude-skills

建立與編輯 draw.io 圖表檔案 (.drawio)，適用於架構圖、流程圖、網路圖和技術插圖。當使用者要求建立圖表、架構視覺化、流程圖、線框圖、網路拓撲或任何可在 draw.io/diagrams.net 中編輯的視覺內容時使用。輸出以 XML 為基礎的 .drawio 檔案，可直接匯入 draw.io 桌面版或網頁版。

Draw.io-claude-skills 是什麼？

這是一項專門用於建立與編輯 draw.io 原生 XML 格式圖表檔案的 AI 代理技能。它非常適合工程師和開發人員，用於建立專業且可編輯的圖表，例如架構圖、流程圖、網路圖和技術插圖。該技能支援多種平台，包括 Claude Code、Cursor 和 Codex，並透過輸出標準的 .drawio 檔案，確保與 draw.io 桌面版和網頁版相容。其主要功能包括提供全面的 XML 模板庫，涵蓋基本形狀（矩形、橢圓形、圓柱體）、容器（泳道）、連接器（箭頭、虛線）和文字元素。此外，它還包含 AWS、Azure 和 GCP 等雲端供應商的內建圖示庫，以及常見架構模式（如分層架構和從左到右的流程）的範本。該技能也支援透過編輯 references/branding.md 檔案來自訂品牌顏色，並強調最佳實踐，例如為元素使用唯一 ID、分層排列以及提供一致的間距。

相容平台✓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 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

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>

常見樣式屬性

顏色 (使用十六進位色碼)

屬性用途範例
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