mcpField
A
architecture-diagram-creator

architecture-diagram-creator

github.com/mhattingpete开发689462 次安装14 周前更新
代码仓库

关于 architecture-diagram-creator

architecture-diagram-creator 是用于制作 HTML 架构图的技能，涵盖系统结构、数据流和业务背景。它分析项目资料，并将内容组织为六个图示章节。

主要功能

  1. 01业务背景与目标
  2. 02SVG 数据流图
  3. 03多阶段处理流水线视图
  4. 04分层系统架构
  5. 05功能与非功能需求
  6. 06部署信息

适用场景

  1. 01记录项目架构
  2. 02展示数据处理流水线
  3. 03呈现系统组件与数据流

安装

复制下面的命令，在终端中运行。

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

安装后在 Claude Code 中输入/architecture-diagram-creator确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

assets/templates/
architecture_components.html
base_template.html
references/
example_architecture.html

详细介绍

架构图创建工具

创建全面的 HTML 架构图，涵盖数据流、业务背景和系统架构。

使用场景

-“为 [project] 创建架构图” -“生成高层概览” -“编写系统架构文档” -“展示数据流和处理流水线”

包含的组件

  1. 业务背景：目标、用户、价值、指标
  2. 数据流：来源 → 处理 → 输出，并附带 SVG 图表
  3. 处理流水线：多阶段可视化
  4. 系统架构：分层组件（数据／处理／服务／输出）
  5. 功能：功能性和非功能性需求
  6. 部署：模型、先决条件、工作流

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>

  
  
  
  
  
  
</body>
</html>

数据流的 SVG 模式

<svg viewBox="0 0 800 400">
  
  <rect x="50" y="150" width="120" height="80" fill="#4299e1"/>

  
  <rect x="340" y="150" width="120" height="80" fill="#ed8936"/>

  
  <rect x="630" y="150" width="120" height="80" fill="#48bb78"/>

  
  <path d="M170,190 L340,190" stroke="#666" stroke-width="2" marker-end="url(#arrow)"/>
</svg>

工作流

  1. 分析项目（README、代码结构）
  2. 提取：用途、数据来源、处理方式、技术栈、输出
  3. 创建包含全部 6 个部分的 HTML
  4. 使用语义化颜色构建视觉层次
  5. 写入 [project]-architecture.html

保持图表清晰，使用一致的样式，并包含真实的项目细节。

评论

支持 Markdown