菜单
Create comprehensive HTML architecture diagrams showing data flows, business objectives, features, technical architecture, and deployment. Use when users request system architecture, project documentation, high-level overviews, or technical specifications.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Use when the user explicitly says `plan on step x` or `plan on phase x`. Do not activate on loose planning language.
Use when the user explicitly asks to review a named project phase, step, milestone, or similar planned slice of work. Resolve the project's planning docs, initialize missing planning docs if needed, then produce a reviewer-first assessment with findings, gaps, and verification coverage.
| name | architecture-diagram-creator |
| description | Create comprehensive HTML architecture diagrams showing data flows, business objectives, features, technical architecture, and deployment. Use when users request system architecture, project documentation, high-level overviews, or technical specifications. |
Create comprehensive HTML architecture diagrams that explain a project from both business and technical perspectives. Use this skill when users ask for system architecture, high-level overviews, technical documentation, data flow diagrams, processing pipelines, or deployment views.
Use this skill when the user asks to:
Generate a single self-contained HTML file that presents:
The output should be visually clear, technically accurate, and based on real project details extracted from the available materials.
The skill may use:
Write a file named:
[project-name]-architecture.html
The HTML must be:
Include:
Create an SVG diagram showing:
Use left-to-right flow where possible.
Show the system as a staged pipeline, such as:
Present the architecture in layers, such as:
Include both:
Examples:
Include:
Use these semantic colors consistently:
#4299e1#ed8936#9f7aea#48bb78#666666<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>[Project] Architecture</title>
<style>
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
line-height: 1.6;
color: #1a202c;
background: #f7fafc;
}
h1 {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 30px;
border-radius: 16px;
margin-bottom: 30px;
}
h2 {
margin-top: 0;
color: #2d3748;
}
.section {
background: white;
border-radius: 16px;
padding: 24px;
margin: 30px 0;
box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 16px;
}
.card {
border-radius: 12px;
padding: 16px;
background: #edf2f7;
}
.tag {
display: inline-block;
padding: 4px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
margin: 4px 6px 0 0;
}
.data { background: #bee3f8; color: #1a365d; }
.processing { background: #fbd38d; color: #7b341e; }
.ai { background: #d6bcfa; color: #44337a; }
.success { background: #c6f6d5; color: #22543d; }
svg {
width: 100%;
height: auto;
max-width: 100%;
}
ul {
margin: 0;
padding-left: 20px;
}
</style>
</head>
<body>
<h1>[Project Name] - Architecture Overview</h1>
<div class="section">
<h2>Business Context</h2>
<!-- objectives, users, value, metrics -->
</div>
<div class="section">
<h2>Data Flow</h2>
<!-- SVG data flow diagram -->
</div>
<div class="section">
<h2>Processing Pipeline</h2>
<!-- SVG or stage cards -->
</div>
<div class="section">
<h2>System Architecture</h2>
<!-- layered architecture -->
</div>
<div class="section">
<h2>Features</h2>
<!-- functional + non-functional -->
</div>
<div class="section">
<h2>Deployment</h2>
<!-- deployment model, prerequisites, workflows -->
</div>
</body>
</html>
<svg viewBox="0 0 800 400" xmlns="http://www.w3.org/2000/svg">
<defs>
<marker id="arrow" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto" markerUnits="strokeWidth">
<path d="M0,0 L0,6 L9,3 z" fill="#666" />
</marker>
</defs>
<rect x="50" y="150" width="120" height="80" rx="12" fill="#4299e1"/>
<text x="110" y="195" text-anchor="middle" fill="white" font-size="14" font-weight="600">Sources</text>
<rect x="340" y="150" width="120" height="80" rx="12" fill="#ed8936"/>
<text x="400" y="195" text-anchor="middle" fill="white" font-size="14" font-weight="600">Processing</text>
<rect x="630" y="150" width="120" height="80" rx="12" fill="#48bb78"/>
<text x="690" y="195" text-anchor="middle" fill="white" font-size="14" font-weight="600">Outputs</text>
<path d="M170,190 L340,190" stroke="#666" stroke-width="2.5" fill="none" marker-end="url(#arrow)"/>
<path d="M460,190 L630,190" stroke="#666" stroke-width="2.5" fill="none" marker-end="url(#arrow)"/>
</svg>
When analyzing a project, extract:
A successful result should: