复制安装命令
用 Codex 或 Claude 安装复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它先审查 Skill 页面再帮你安装。
复制前请先查看来源、License 和安全提示。
SkillAtlasSkill 详情
drawio
Powered by Awesome Copilot GitHub contributors from allcontributors.org
审核状态：已审核Quality 72Security 70
项目 README
来源文件：README.md
🤖 Awesome GitHub Copilot
A community-created collection of custom agents, instructions, skills, hooks, workflows, and plugins to supercharge your GitHub Copilot experience.
[!TIP] Explore the full collection on the website → awesome-copilot.github.com
The website offers full-text search and filtering across hundreds of resources, plus the Learning Hub for guides and tutorials.
Using this collection in an AI agent? A machine-readable
llms.txtis available with structured listings of all agents, instructions, and skills.
📖 Learning Hub
New to GitHub Copilot customization? The Learning Hub on the website offers curated articles, walkthroughs, and reference material — covering everything from core concepts like agents, skills, and instructions to hands-on guides for hooks, agentic workflows, MCP servers, and the Copilot coding agent.
What's in this repo
| Resource | Description | Browse |
|---|---|---|
| 🤖 Agents | Specialized Copilot agents that integrate with MCP servers | All agents → |
| 📋 Instructions | Coding standards applied automatically by file pattern | All instructions → |
| 🎯 Skills | Self-contained folders with instructions and bundled assets | All skills → |
| 🔌 Plugins | Curated bundles of agents and skills for specific workflows | All plugins → |
| 🍳 Cookbook | Copy-paste-ready recipes for working with Copilot APIs | — |
Install a Plugin
For most users, the Awesome Copilot marketplace is already registered in the Copilot CLI/VS Code, so you can install a plugin directly:
copilot plugin install <plugin-name>@awesome-copilot
If you are using an older Copilot CLI version or a custom setup and see an error that the marketplace is unknown, register it once and then install:
copilot plugin marketplace add github/awesome-copilot
copilot plugin install <plugin-name>@awesome-copilot
Contributing
See CONTRIBUTING.md · AGENTS.md for AI agent guidance · Security · Code of Conduct
The customizations here are sourced from third-party developers. Please inspect any agent and its documentation before installing.
Contributors ✨
Thanks goes to these wonderful people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!
📚 Additional Resources
- VS Code Copilot Customization Documentation - Official Microsoft documentation
- GitHub Copilot Chat Documentation - Complete chat feature guide
- VS Code Settings - General VS Code configuration guide
™️ Trademarks
This project may contain trademarks or logos for projects, products, or services. Authorized use of Microsoft trademarks or logos is subject to and must follow Microsoft's Trademark & Brand Guidelines. Use of Microsoft trademarks or logos in modified versions of this project must not cause confusion or imply Microsoft sponsorship. Any use of third-party trademarks or logos are subject to those third-party's policies.
文档与办公
中风险
- 来源需自行核对维护者身份。
- 包含脚本或命令调用，安装前请复核。
- 可能需要外部 token、网络权限或第三方服务。
- 未检测到高风险命令。
- 扫描发现：2 条。
Codex — Git Clone 安装
- 安装前请先查看来源仓库和风险报告。
- 克隆仓库：git clone https://github.com/github/awesome-copilot.git
- 将 "skills/drawio" 文件夹复制到 Codex 的 skills 目录中。
- 重启 Codex 让新的 skill 生效。
Codex — 手动复制安装
- 安装前请先查看来源仓库和风险报告。
- 从源仓库下载 SKILL.md 及相关文件。
- 在 Codex 的 skills 目录中创建新文件夹。
- 将所有 skill 文件复制到新文件夹中。
- 重启 Codex 让新的 skill 生效。
Claude Code — Git Clone 安装
- 安装前请先查看来源仓库和风险报告。
- 克隆仓库：git clone https://github.com/github/awesome-copilot.git
- 将 "skills/drawio" 文件夹复制到 Claude Code 的 skills 目录中。
- 重启 Claude Code 让新的 skill 生效。
Claude Code — 手动复制安装
- 安装前请先查看来源仓库和风险报告。
- 从源仓库下载 SKILL.md 及相关文件。
- 在 Claude Code 的 skills 目录中创建新文件夹。
- 将所有 skill 文件复制到新文件夹中。
- 重启 Claude Code 让新的 skill 生效。
Cursor — Git Clone 安装
- 安装前请先查看来源仓库和风险报告。
- 克隆仓库：git clone https://github.com/github/awesome-copilot.git
- 将 "skills/drawio" 文件夹复制到 Cursor 的 skills 目录中。
- 重启 Cursor 让新的 skill 生效。
Cursor — 手动复制安装
- 安装前请先查看来源仓库和风险报告。
- 从源仓库下载 SKILL.md 及相关文件。
- 在 Cursor 的 skills 目录中创建新文件夹。
- 将所有 skill 文件复制到新文件夹中。
- 重启 Cursor 让新的 skill 生效。
GitHub Copilot — Git Clone 安装
- 安装前请先查看来源仓库和风险报告。
- 克隆仓库：git clone https://github.com/github/awesome-copilot.git
- 将 "skills/drawio" 文件夹复制到 GitHub Copilot 的 skills 目录中。
- 重启 GitHub Copilot 让新的 skill 生效。
GitHub Copilot — 手动复制安装
- 安装前请先查看来源仓库和风险报告。
- 从源仓库下载 SKILL.md 及相关文件。
- 在 GitHub Copilot 的 skills 目录中创建新文件夹。
- 将所有 skill 文件复制到新文件夹中。
- 重启 GitHub Copilot 让新的 skill 生效。
Windsurf — Git Clone 安装
- 安装前请先查看来源仓库和风险报告。
- 克隆仓库：git clone https://github.com/github/awesome-copilot.git
- 将 "skills/drawio" 文件夹复制到 Windsurf 的 skills 目录中。
- 重启 Windsurf 让新的 skill 生效。
Windsurf — 手动复制安装
- 安装前请先查看来源仓库和风险报告。
- 从源仓库下载 SKILL.md 及相关文件。
- 在 Windsurf 的 skills 目录中创建新文件夹。
- 将所有 skill 文件复制到新文件夹中。
- 重启 Windsurf 让新的 skill 生效。
查看 SKILL.md 原文
name: drawio
description: Generate draw.io diagrams as .drawio files and export to PNG/SVG/PDF with embedded XMLDraw.io Diagram Skill
Generate draw.io diagrams as native .drawio files and export them to PNG images that can be embedded in Word documents.
How to Create a Diagram
- Generate draw.io XML in
mxGraphModelformat for the requested diagram - Write the XML to a
.drawiofile using the create/edit file tool - Export to PNG using the bundled export script
Bundled Export Script
This skill includes drawio-to-png.mjs, a Node.js export script with two rendering backends:
- draw.io CLI (pixel-perfect, fastest) — used automatically if draw.io desktop is installed
- Official draw.io viewer in headless browser (pixel-perfect, needs Chromium/Edge) — fallback when CLI is unavailable
Usage
# Install dependencies (one-time, from the scripts folder)
cd skills/drawio/scripts && npm install
# Export a single diagram
node skills/drawio/scripts/drawio-to-png.mjs <input.drawio> [output.png]
# Export all .drawio files in a directory
node skills/drawio/scripts/drawio-to-png.mjs --dir <directory>
# Force a specific renderer
node skills/drawio/scripts/drawio-to-png.mjs --renderer=cli|viewer|auto <input.drawio>
Skill Folder Contents
| File | Purpose |
|---|---|
SKILL.md | This instruction file |
scripts/drawio-to-png.mjs | Node.js export script (CLI + browser fallback) |
scripts/package.json | Dependencies (puppeteer-core) |
Supported Export Formats
| Format | Embed XML | Notes |
|---|---|---|
png | Yes | Viewable everywhere, editable in draw.io |
svg | Yes | Scalable, editable in draw.io |
pdf | Yes | Printable, editable in draw.io |
Draw.io XML Style Conventions
Use these styles for consistent, professional diagrams:
<!-- Primary service (highlighted) -->
<mxCell style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;strokeWidth=2;arcSize=12;shadow=1;" />
<!-- External system -->
<mxCell style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;" />
<!-- Success/processing stage -->
<mxCell style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" />
<!-- Warning/quality gate -->
<mxCell style="rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;" />
<!-- Error/failure path -->
<mxCell style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;" />
<!-- Data store (cylinder) -->
<mxCell style="shape=cylinder3;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;" />
<!-- Arrow -->
<mxCell style="edgeStyle=orthogonalEdgeStyle;rounded=1;strokeColor=#6c8ebf;strokeWidth=2;" />
Locating the draw.io CLI
Try drawio first (works if on PATH), then fall back:
- Windows:
"C:\Program Files\draw.io\draw.io.exe" - macOS:
/Applications/draw.io.app/Contents/MacOS/draw.io - Linux:
drawio(via snap/apt/flatpak)
CLI Export Command
drawio -x -f png -e -b 10 -o <output.png> <input.drawio>
Flags: -x (export), -f (format), -e (embed diagram XML), -b (border), -o (output path).
评论 (0)
暂无评论，成为第一个评论者吧！