architecture-diagram-creator by mhattingpete/claude-skills-marketplace
npx skills add https://github.com/mhattingpete/claude-skills-marketplace --skill architecture-diagram-creator创建包含数据流、业务背景和系统架构的综合性 HTML 架构图。
<!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; max-width: 1200px; margin: 0 auto; padding: 20px; }
h1 { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 30px; }
.section { margin: 30px 0; }
svg { max-width: 100%; }
/* Use semantic colors: #4299e1 (data), #ed8936 (processing), #9f7aea (AI), #48bb78 (success) */
</style>
</head>
<body>
<h1>[Project Name] - Architecture Overview</h1>
<!-- Business Context Section -->
<!-- Data Flow Diagram (SVG) -->
<!-- Processing Pipeline (SVG) -->
<!-- System Architecture Layers -->
<!-- Features Grid -->
<!-- Deployment Info -->
</body>
</html>
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
<svg viewBox="0 0 800 400">
<!-- Data sources (left, blue) -->
<rect x="50" y="150" width="120" height="80" fill="#4299e1"/>
<!-- Processing (center, orange) -->
<rect x="340" y="150" width="120" height="80" fill="#ed8936"/>
<!-- Outputs (right, green) -->
<rect x="630" y="150" width="120" height="80" fill="#48bb78"/>
<!-- Arrows connecting -->
<path d="M170,190 L340,190" stroke="#666" stroke-width="2" marker-end="url(#arrow)"/>
</svg>
[project]-architecture.html 文件保持图表清晰,使用一致的样式,包含真实的项目细节。
每周安装量
144
代码仓库
GitHub 星标数
500
首次出现
2026 年 1 月 24 日
安全审计
安装于
opencode128
gemini-cli121
codex120
cursor116
github-copilot115
kimi-cli103
Create comprehensive HTML architecture diagrams with data flows, business context, and system architecture.
<!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; max-width: 1200px; margin: 0 auto; padding: 20px; }
h1 { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 30px; }
.section { margin: 30px 0; }
svg { max-width: 100%; }
/* Use semantic colors: #4299e1 (data), #ed8936 (processing), #9f7aea (AI), #48bb78 (success) */
</style>
</head>
<body>
<h1>[Project Name] - Architecture Overview</h1>
<!-- Business Context Section -->
<!-- Data Flow Diagram (SVG) -->
<!-- Processing Pipeline (SVG) -->
<!-- System Architecture Layers -->
<!-- Features Grid -->
<!-- Deployment Info -->
</body>
</html>
<svg viewBox="0 0 800 400">
<!-- Data sources (left, blue) -->
<rect x="50" y="150" width="120" height="80" fill="#4299e1"/>
<!-- Processing (center, orange) -->
<rect x="340" y="150" width="120" height="80" fill="#ed8936"/>
<!-- Outputs (right, green) -->
<rect x="630" y="150" width="120" height="80" fill="#48bb78"/>
<!-- Arrows connecting -->
<path d="M170,190 L340,190" stroke="#666" stroke-width="2" marker-end="url(#arrow)"/>
</svg>
[project]-architecture.htmlKeep diagrams clear, use consistent styling, include real project details.
Weekly Installs
144
Repository
GitHub Stars
500
First Seen
Jan 24, 2026
Security Audits
Gen Agent Trust HubFailSocketPassSnykPass
Installed on
opencode128
gemini-cli121
codex120
cursor116
github-copilot115
kimi-cli103
minimax-docx:基于 OpenXML SDK 的 DOCX 文档自动化创建与编辑工具
1,200 周安装