architecture-diagram-creator

@mhattingpete · 收录于 1 周前 · 上游提交 4 个月前

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.

场景架构设计项目文档技术方案汇报

适合你，如果需要快速绘制系统架构图并生成文档

/ 下载安装

architecture-diagram-creator.skill双击,或拖进 Claude 桌面版 / Cowork,即完成安装↓ .skill ↓ .zip

用别的 agent?下载 .zip 解压,把文件夹放进它的技能目录

Claude Code~/.claude/skills/(项目级 .claude/skills/)

Codex CLI~/.codex/skills/

Cursor自动读取上面两处目录

其他工具见其文档的「skills」目录;两个下载是同一份文件,只是名字不同

/ 通过 npx 安装 校验哈希

npx oh-my-skill add mhattingpete/claude-skills-marketplace/architecture-diagram-creator

/ 通过 bash 安装

curl -fsSL https://oh-my-skill.com/install.sh | bash -s -- mhattingpete/claude-skills-marketplace/architecture-diagram-creator

/ 已经装过?验证本机副本,不用重装

npx oh-my-skill verify mhattingpete/claude-skills-marketplace/architecture-diagram-creator

安装目标可用 --agent / --scope 或 --to 明确指定;省略时只会在唯一已存在的 agent 目录上自动选择,零命中或多命中会停止并提示。content_hash 缺失或不一致均拒装。

644GitHub stars

~568最小装载

~568含声明引用

~11.1K文本包总量

镜像托管

怎么用

技能原文 SKILL.md作者撰写 · Apache-2.0 · 3fa16a9

Architecture Diagram Creator

Create comprehensive HTML architecture diagrams with data flows, business context, and system architecture.

When to Use

"Create architecture diagram for [project]"
"Generate high-level overview"
"Document system architecture"
"Show data flow and processing pipeline"

Components to Include

Business Context: objectives, users, value, metrics
Data Flow: sources → processing → outputs with SVG diagram
Processing Pipeline: multi-stage visualization
System Architecture: layered components (data/processing/services/output)
Features: functional and non-functional requirements
Deployment: model, prerequisites, workflows

HTML Structure

<!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 Pattern for Data Flow

<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>

Workflow

Analyze project (README, code structure)
Extract: purpose, data sources, processing, tech stack, outputs
Create HTML with all 6 sections
Use semantic colors for visual hierarchy
Write to [project]-architecture.html

Keep diagrams clear, use consistent styling, include real project details.

按 Apache-2.0 许可原样转载,未经改动 · 在 GitHub 查看 →

登录即可评论;带「已验证安装」的,是发布者名下有本店的安装或持有记录。

…