Back to Details

architecture-diagram-creator

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Architecture Diagram Creator

架构图生成工具

Create comprehensive HTML architecture diagrams with data flows, business context, and system architecture.
创建包含数据流、业务上下文和系统架构的全面HTML架构图。

When to Use

使用场景

  • "Create architecture diagram for [project]"
  • "Generate high-level overview"
  • "Document system architecture"
  • "Show data flow and processing pipeline"
  • "为[项目]创建架构图"
  • "生成高层概览"
  • "文档化系统架构"
  • "展示数据流与处理流水线"

Components to Include

需包含的组件

  1. Business Context: objectives, users, value, metrics
  2. Data Flow: sources → processing → outputs with SVG diagram
  3. Processing Pipeline: multi-stage visualization
  4. System Architecture: layered components (data/processing/services/output)
  5. Features: functional and non-functional requirements
  6. Deployment: model, prerequisites, workflows
  1. 业务上下文：目标、用户、价值、指标
  2. 数据流：数据源→处理→输出，搭配SVG图
  3. 处理流水线：多阶段可视化
  4. 系统架构：分层组件（数据/处理/服务/输出）
  5. 功能特性：功能性与非功能性需求
  6. 部署内容：模型、前置条件、工作流

HTML Structure

HTML结构

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

SVG Pattern for Data Flow

数据流SVG模板

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

Workflow

工作流程

  1. Analyze project (README, code structure)
  2. Extract: purpose, data sources, processing, tech stack, outputs
  3. Create HTML with all 6 sections
  4. Use semantic colors for visual hierarchy
  5. Write to 
    [project]-architecture.html
Keep diagrams clear, use consistent styling, include real project details.
  1. 分析项目（README、代码结构）
  2. 提取信息：用途、数据源、处理流程、技术栈、输出内容
  3. 创建包含全部6个部分的HTML文件
  4. 使用语义化颜色构建视觉层级
  5. 保存为
    [project]-architecture.html
确保图表清晰，样式统一，包含真实项目细节。