菜单
Generate .drawio architecture diagrams with consistent visual style and export to PNG/SVG/PDF/HTML. Use when user asks to "create a diagram", "draw architecture", "make a drawio file", "build a diagram", or mentions "drawio", "architecture diagram", or "system diagram".
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Create and manage presentation decks. Two modes - Slidev markdown (default) and "conference" hand-built HTML. Use when user asks to "create slides", "make a presentation", "add slides to this project", "set up a slide deck", or mentions "slidev", "pitch deck", "conference talk", "conference deck", or "slides folder".
This skill should be used when the user asks to "create a skill", "write a skill", "build a skill", or wants to add new capabilities to Claude Code. Use when developing SKILL.md files, organizing skill content, or improving existing skills. Do NOT use for plugin development, hook creation, agent creation, or slash command creation — those have dedicated skills.
This skill should be used when the user says "solve problem", "solve this problem", or invokes /solve-problem. Applies a methodical, evidence-first approach to diagnosing a problem - understand intent, observe the problem first-hand, form multiple hypotheses, gather discriminating evidence to eliminate them, propose an evidenced solution, and verify the fix actually resolves the original symptom. Do NOT use for general how-to questions, explanations, or building new features.
This skill should be used when the user asks to "improve my setup", "learn from this session", "fix my config", "stop asking for permissions", or reports friction with skills, agents, hooks, or permissions. Analyzes conversation history and proposes configuration improvements.
Create a new GitHub project with standard configuration. Use when user asks to "create a project", "set up a new repo", "initialize a repository", or wants to start a new GitHub project.
This skill should be used when the user asks to "create a hook", "add a hook", "write a hook", or mentions Claude Code hooks. Also suggest this skill when the user asks to "automatically do X" or "run X before/after Y" as these are good candidates for hooks.
| name | drawio-diagram |
| description | Generate .drawio architecture diagrams with consistent visual style and export to PNG/SVG/PDF/HTML. Use when user asks to "create a diagram", "draw architecture", "make a drawio file", "build a diagram", or mentions "drawio", "architecture diagram", or "system diagram". |
Generate .drawio architecture diagrams with a consistent visual style. Always include a legend. Supports export to PNG, SVG, PDF, and self-contained HTML.
.drawio file — use the XML structure and style conventions belowEvery .drawio file must follow this structure:
<mxfile host="Electron" version="28.0.6">
<diagram name="Page-1" id="unique-id">
<mxGraphModel dx="1100" dy="760" 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" />
<!-- All diagram cells use parent="1" -->
</root>
</mxGraphModel>
</diagram>
</mxfile>
For larger diagrams, increase pageWidth and pageHeight as needed (e.g., 1400x900 or 1600x1000).
Blue, rounded, bold title top-aligned.
rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;verticalAlign=top;fontSize=10;
Green, rounded, bold title with description.
rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;fontSize=10;verticalAlign=top;
Grey, rounded.
rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;fontColor=#333333;strokeColor=#666666;verticalAlign=top;fontSize=10;
Purple, rounded.
rounded=1;whiteSpace=wrap;html=1;fillColor=#e1d5e7;strokeColor=#9673a6;fontSize=10;verticalAlign=top;
Orange, sharp corners.
rounded=0;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;fontSize=10;
Yellow, italic, pill-shaped.
rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;fontSize=10;verticalAlign=middle;fontStyle=2
Dark green, white text. Use sparingly.
rounded=0;whiteSpace=wrap;html=1;fillColor=#008a00;strokeColor=#005700;fontColor=#ffffff;fontSize=10;
Small circle, 8pt font.
ellipse;whiteSpace=wrap;html=1;aspect=fixed;fontSize=8;fontStyle=0
Size: 25x25.
Sticky note shape, yellow.
shape=note;whiteSpace=wrap;html=1;backgroundOutline=1;fontColor=#000000;darkOpacity=0.05;fillColor=#FFF9B2;strokeColor=none;fillStyle=solid;direction=west;gradientDirection=north;gradientColor=#FFF2A1;shadow=1;size=20;pointerEvents=1;
No fill, dashed border.
rounded=0;whiteSpace=wrap;html=1;dashed=1;fillColor=none;strokeColor=#999999;
Full-width grey bar, typically at bottom.
rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;fontColor=#333333;fontSize=10;
Use HTML in value attributes for rich text:
<b>Title</b><br><font style="font-size: 9px;">text</font><font><b>Title</b><br>Description</font>Standard element label pattern:
<font><b>Component Name</b><br>Brief description</font>
Always use orthogonal edges:
edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;
Add labels on edges where the relationship needs clarification.
Every diagram must include a legend row near the top. Use small pill-shaped elements (80x20) showing each element type used in the diagram:
<mxCell id="key-1" value="<span>Capability</span>" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;fontSize=10;verticalAlign=middle;fontStyle=2" vertex="1" parent="1">
<mxGeometry x="20" y="40" width="80" height="20" as="geometry" />
</mxCell>
Space legend items 90px apart horizontally. Only include element types actually used in the diagram.
# macOS
/Applications/draw.io.app/Contents/MacOS/draw.io -x -f png -e -b 10 -o output.drawio.png input.drawio
# Linux
drawio -x -f png -e -b 10 -o output.drawio.png input.drawio
Formats: png, svg, pdf, jpg
Key flags:
-x: export mode-f: format-e: embed diagram XML in output-b 10: border width-t: transparent background (PNG only)After export, the .drawio source can be deleted since the export embeds the XML.
Generate a standalone HTML file that renders the diagram in a browser without draw.io installed:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DIAGRAM_TITLE</title>
<style>
body { margin: 0; background: #f5f5f5; display: flex; justify-content: center; align-items: center; min-height: 100vh; }
.container { background: white; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); overflow: hidden; }
</style>
</head>
<body>
<div class="container">
<div class="mxgraph" style="max-width:100%;border:1px solid transparent;" data-mxgraph='{"highlight":"#0000ff","nav":true,"resize":true,"toolbar":"zoom layers lightbox","edit":"_blank","xml":"ESCAPED_XML_HERE"}'></div>
</div>
<script src="https://viewer.diagrams.net/js/viewer-static.min.js"></script>
</body>
</html>
To create the HTML:
<mxGraphModel>...</mxGraphModel> XML from the .drawio filedata-mxgraph JSON attribute (escape ", <, >, &)ESCAPED_XML_HERE with the escaped XMLDIAGRAM_TITLE with the diagram titleOpen with open output.html (macOS) or xdg-open output.html (Linux).
name.drawioname.drawio.png, name.drawio.svg, name.drawio.pdfname.drawio.htmlSee references/ in this skill directory for:
demo.drawio — example output with all element typesxml-and-export.md — detailed XML structure and CLI reference