架构图生成器 - 自动创建HTML系统架构图，可视化数据流与业务背景

architecture-diagram-creator by mhattingpete/claude-skills-marketplace

183 周安装量

535 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/mhattingpete/claude-skills-marketplace --skill architecture-diagram-creator

数据可视化文档生成系统架构

🇨🇳中文介绍

架构图生成器

创建包含数据流、业务背景和系统架构的综合性 HTML 架构图。

使用场景

"为 [项目] 创建架构图"
"生成高层次概览"
"记录系统架构"
"展示数据流和处理流水线"

包含组件

业务背景 : 目标、用户、价值、指标
数据流 : 来源 → 处理 → 输出，包含 SVG 图表
处理流水线 : 多阶段可视化
系统架构 : 分层组件（数据/处理/服务/输出）
功能特性 : 功能性和非功能性需求
部署信息 : 模型、先决条件、工作流

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 开发者，精准高效

联系我们

🇺🇸English

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.

Weekly Installs

144

Repository

mhattingpete/cl…ketplace

GitHub Stars

500

First Seen

Jan 24, 2026

Security Audits

Gen Agent Trust HubFail SocketPass SnykPass

Installed on

opencode128

gemini-cli121

codex120

cursor116

github-copilot115

kimi-cli103