Community图像github.com

Draw.io 图表技能

创建和编辑 draw.io 图表文件（.drawio），用于架构图、流程图、网络图和技术插图。当用户要求创建图表、架构可视化、流程图、线框图、网络拓扑或任何可在 draw.io/diagrams.net 中编辑的视觉内容时使用。输出基于 XML 的 .drawio 文件，可直接导入 draw.io 桌面或网页应用。

Draw.io 图表技能 是什么？

该技能使 AI 代理能够以 draw.io 的原生 XML 格式创建和编辑专业、可编辑的图表文件。它专注于生成 .drawio 文件，这些文件可无缝导入 diagrams.net 或 draw.io 桌面/网页应用，支持架构图、流程图、网络图和技术插图等常见用例。该技能提供了详细的 XML 元素模板，包括基础形状（矩形、圆角矩形、圆柱体、椭圆）、容器和组（如泳道）、连接器和箭头（实线、双向、块状、虚线）以及文本元素（纯文本、粗体标题、多行文本）。它还包含了全面的样式指南，涵盖颜色（标准化调色板）、排版（字体大小、样式、对齐方式）和边框效果（圆角、线条宽度、虚线、阴影），以及自定义品牌颜色支持。该技能提供架构图布局模式（自上而下的分层架构、从左到右的流程）和最佳实践（唯一 ID、父级层次结构、定位、分层、间距）。对于云架构图，它在 XML 片段中介绍了 AWS 和 Azure 图标的快速参考，包括 AWS 资源图标（如 Lambda、EC2、S3）及其类别颜色，以及 Azure 的 SVG 路径（如虚拟机、函数应用、存储账户）。工作流程指导从确定图表类型和布局、设置页面尺寸、创建容器、添加组件和连接器，到最终保存为 .drawio 文件并复制到指定输出目录。

兼容平台✓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. 添加连接器，引用 source/target 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 image 路径：

  • 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