用AI编程画架构图：从系统全景到C4模型

用AI编程画架构图：从系统全景到C4模型

给老板汇报系统架构，PPT 里只有密密麻麻的文字。Visio 画了半天，线条对不齐，改一个组件要重排整张图。如果你也有这种痛点，这篇文章教你用 AI 编程，10 分钟生成专业架构图------而且是可交互、可修改、可导出的网页版。

前言

做技术的人，绕不开一个任务：画架构图。

• 给老板汇报，需要一张系统全景图
• 给开发团队，需要模块划分和组件关系
• 写技术文档，需要分层架构和数据流

传统方案各有痛点：

工具	优点	痛点
Visio	功能强大	学习成本高，排版痛苦
draw.io	免费	组件不够灵活，样式调整麻烦
PPT	简单	改一个组件影响全局排版
Excalidraw	手绘风格	不够正式

而用 AI 编程做架构图，优势非常明显：

1. 用自然语言描述 --- 告诉 AI "我想要一个 4 层架构，接入层、服务层、数据层、基础设施层"，它直接生成
2. 单个 HTML 文件 --- 无需安装任何软件，浏览器打开就能看
3. 随时修改 --- 改一个组件名称或连线，刷新页面就生效
4. 一键导出 --- 导出高清 PNG 或打印为 PDF

本文覆盖三种最常见的架构图场景：系统全景图 、C4 架构模型 、个人年度数据报告（综合实战）。

场景一：分层系统架构图

适用场景

给老板、非技术人员做系统概览汇报。对方不需要知道代码细节，只需要理解"我们的系统大概长什么样"。

需求描述

请用 HTML+CSS 创建一个分层系统架构图，要求：

4层架构（从上到下）：

第1层 - 用户接入层：
- Web端（React）
- 移动端（React Native）
- 小程序（微信/支付宝）
- 开放API

第2层 - 业务服务层：
- API网关（Kong）
- 用户服务、商品服务、订单服务
- 支付服务、通知服务、搜索服务

第3层 - 数据层：
- MySQL（主从集群）
- Redis（缓存+会话）
- Elasticsearch（搜索）
- RabbitMQ（消息队列）

第4层 - 基础设施层：
- 阿里云ECS
- Kubernetes（容器编排）
- SLB负载均衡
- OSS对象存储
- CDN加速

视觉要求：
- 每层用不同背景色区分
- 层与层之间用箭头连接
- 每个组件用圆角矩形+图标
- 整体宽度900px，居中显示
- 单个HTML文件

AI 生成的核心代码结构

AI 会生成一个完整的 HTML 页面，核心结构如下：

<div class="architecture">
    <!-- 第1层：用户接入层 -->
    <div class="layer" style="background: #EBF5FB;">
        <div class="layer-title">用户接入层</div>
        <div class="components">
            <div class="component">Web端 (React)</div>
            <div class="component">移动端 (React Native)</div>
            <div class="component">小程序</div>
            <div class="component">开放API</div>
        </div>
    </div>

    <!-- 箭头 -->
    <div class="arrow-down">▼</div>

    <!-- 第2层：业务服务层 -->
    <div class="layer" style="background: #D5F5E3;">
        <div class="layer-title">业务服务层</div>
        <div class="components">
            <div class="component">API网关 (Kong)</div>
            <div class="component">用户服务</div>
            <div class="component">商品服务</div>
            <div class="component">订单服务</div>
        </div>
    </div>

    <!-- ... 第3层、第4层类似 -->
</div>

对应的 CSS 关键样式：

.architecture {
    max-width: 900px;
    margin: 0 auto;
    font-family: 'Microsoft YaHei', sans-serif;
}

.layer {
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 10px;
}

.layer-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
    padding-left: 10px;
    border-left: 4px solid #2C3E50;
}

.components {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.component {
    background: white;
    padding: 10px 20px;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    font-size: 14px;
}

.arrow-down {
    text-align: center;
    font-size: 24px;
    color: #95A5A6;
    padding: 5px 0;
}

效果

一张清晰的 4 层架构图，每层用不同背景色区分，组件用圆角矩形展示，层与层之间有箭头连接。老板看了秒懂。

注意：AI 生成的样式可能需要微调。比如组件间距、字体大小、颜色深浅。你只需要告诉 AI "间距大一点"、"颜色再深一些"就能快速调整。

场景二：C4 架构模型

什么是 C4 模型？

系统全景图只能回答"系统大概长什么样"，但老板问得更细："业务层和技术层什么关系？代码层面是怎么组织的？"

C4 模型是一种分层架构方法，从高到低分为 4 层：

层级	名称	回答的问题	受众
Layer 1	System Context	系统与外部的关系	老板、非技术人员
Layer 2	Container	系统内部有哪些模块	架构师、技术负责人
Layer 3	Component	每个模块内部有哪些组件	开发人员
Layer 4	Code	每个组件的代码结构	开发人员

核心思想：不同的受众看不同层级的图。老板看 Layer 1 就够了，开发看 Layer 3-4。

需求描述

请用 HTML+CSS 创建一个 C4 模型的架构图，4层从上到下排列：

第1层 - System Context（系统上下图）：
- 中心：电商平台系统
- 左侧：用户（买家/卖家）
- 右侧：支付系统（微信/支付宝）
- 下方：物流系统、短信服务商
- 连线标注交互关系

第2层 - Container（容器图）：
- Web前端（React）
- 移动端App（React Native）
- API网关（Nginx+Kong）
- 用户服务（Spring Boot）
- 商品服务（Spring Boot）
- 订单服务（Spring Boot）
- MySQL、Redis、RabbitMQ

第3层 - Component（组件图，以订单服务为例）：
- 订单控制器
- 订单服务层
- 订单数据访问层
- 支付集成组件
- 库存集成组件

第4层 - Code（代码层，以订单服务为例）：
- OrderController.java
- OrderService.java
- OrderRepository.java
- Order.java（实体类）

每层用不同背景色，层与层之间有箭头连接。
整体宽度900px，单个HTML文件。

AI 生成的核心代码结构

C4 模型的 HTML 结构和系统全景图类似，但多了层级标注 和连线关系：

<div class="c4-model">
    <!-- Layer 1: System Context -->
    <div class="c4-layer">
        <div class="layer-header">
            <span class="layer-badge">L1</span>
            <span class="layer-name">System Context</span>
            <span class="layer-desc">系统上下文 --- 系统与外部的关系</span>
        </div>
        <div class="c4-content">
            <!-- 中心系统 -->
            <div class="c4-system center">
                电商平台系统
            </div>
            <!-- 外部系统 -->
            <div class="c4-external left">
                用户（买家/卖家）
            </div>
            <div class="c4-external right">
                支付系统
                <div class="note">微信/支付宝</div>
            </div>
        </div>
    </div>

    <!-- Layer 2-4 类似结构 -->
</div>

效果

一张完整的 C4 架构图，4 层从上到下排列：

• Layer 1：一目了然看到系统边界和外部依赖
• Layer 2：看到系统内部有哪些模块（Web 前端、API 网关、各微服务）
• Layer 3：以订单服务为例，看到控制器、服务层、数据访问层
• Layer 4：看到具体的 Java 类文件

实用建议：不是每个项目都要画 4 层。给老板汇报画 Layer 1-2，给开发团队画 Layer 2-3，代码评审时画 Layer 4。根据受众选择画哪几层。

场景三：综合实战------个人年度数据报告

适用场景

综合运用多种可视化技术，做一个GitHub 风格的年度数据报告。这个案例展示的是：当你掌握了前面所有技术后，能做出什么样的综合作品。

需求描述

请用 ECharts 创建一个个人年度数据报告页面（GitHub风格）：

顶部：个人姓名 + 年度关键词
第1行：4个数字卡片（读书52本、运动280天、学习3项新技能、写笔记128篇）
第2行：月度阅读量日历热力图
第3行：月度运动趋势折线图 + 月度消费柱状图
第4行：技能雷达图（今年新学的技能）
第5行：年度总结文字区域

配色：深色背景 + 绿色主色调（GitHub风格）
单个HTML文件，支持导出PDF。

技术要点

这个案例综合运用了多种技术：

// 1. 深色主题
var theme = {
    backgroundColor: '#0d1117',    // GitHub 深色背景
    textStyle: { color: '#c9d1d9' },
    // ...
};

// 2. 日历热力图（GitHub 贡献图风格）
option = {
    visualMap: {
        min: 0,
        max: 10,
        inRange: {
            color: ['#161b22', '#0e4429', '#006d32', '#26a641', '#39d353']
            // GitHub 经典绿色梯度
        }
    },
    series: [{
        type: 'heatmap',
        // 日历坐标系
        calendarIndex: 0,
        data: calendarData  // 365天的数据
    }]
};

// 3. 技能雷达图
option = {
    radar: {
        indicator: [
            { name: 'Python', max: 100 },
            { name: '数据分析', max: 100 },
            { name: '产品设计', max: 100 },
            { name: '项目管理', max: 100 },
            { name: '写作', max: 100 }
        ]
    },
    series: [{
        type: 'radar',
        data: [{
            value: [85, 90, 70, 75, 80],
            name: '2025年度技能'
        }]
    }]
};

效果

一张 GitHub 风格的年度数据报告，深色背景 + 绿色主色调，包含：

• 数字卡片（核心指标）
• 日历热力图（全年活跃度）
• 折线图 + 柱状图（趋势和对比）
• 雷达图（能力维度）
• 文字总结区域

这就是 AI 编程做可视化的魅力------前面学到的所有技术在这里汇聚成一个完整的作品。

三种架构图对比

图表类型	适用场景	受众	复杂度
系统全景图	系统概览汇报	老板、非技术人员	低
C4 架构模型	详细技术设计	架构师、开发团队	中-高
综合数据报告	个人/团队年度总结	所有人	高

AI 编程画架构图的技巧

1. 分层描述需求

不要一次性描述所有细节，而是分层告诉 AI：

先画第1层（系统上下文），确认效果后再加第2层（容器层）。

这样每一步都可以验证，避免 AI 理解偏差导致返工。

2. 用参考图辅助描述

如果你有参考图，可以截图发给 AI：

"参考这张图的风格，但把内容换成我的系统组件"

AI 能理解图片中的布局风格并复刻。

3. 善用 CSS 变量统一风格

让 AI 使用 CSS 变量来管理颜色和间距，方便后续统一修改：

:root {
    --primary-color: #4A90D9;
    --bg-layer-1: #EBF5FB;
    --bg-layer-2: #D5F5E3;
    --bg-layer-3: #FDEBD0;
    --bg-layer-4: #F5EEF8;
    --component-bg: #fff;
    --border-radius: 8px;
}

改一套变量，全图风格统一变化。

4. 导出技巧

架构图导出为 PNG 时，推荐使用 window.print()：

// 添加打印按钮
<button onclick="window.print()">导出PDF</button>

浏览器打印功能可以直接保存为 PDF，比截图更清晰，而且可以控制纸张大小和方向。

技术栈总结

能力	技术	说明
分层架构图	HTML + CSS	Flex/Grid 布局，颜色区分层级
C4 模型	HTML + CSS	4 层递进，从业务到代码
日历热力图	ECharts heatmap	GitHub 贡献图风格
技能雷达图	ECharts radar	多维度能力展示
导出 PDF	window.print()	浏览器原生打印为 PDF
统一配色	CSS 变量	:root 变量统一管理

写在最后

用 AI 编程画架构图，核心优势在于：

1. 效率 --- 传统方式画一张架构图可能要半天，AI 编程 10 分钟搞定
2. 灵活性 --- HTML/CSS 天然支持响应式，手机上也能看
3. 可维护性 --- 改一个组件名称，刷新页面就生效，不需要重新排版
4. 可复用性 --- 做好的模板可以直接复用到下一个项目

本质上，架构图只是 AI 编程能力的冰山一角。同样的方法论可以应用到：

• 数据可视化（饼图、热力图、桑基图）
• 响应式数据看板
• 在线简历生成器
• 个人知识管理系统

更多 AI 编程实战案例（100+ 期完整代码与提示词），欢迎关注我的小报童专栏。从零开始，用 AI 把你的每一个想法变成现实。

---

如果这篇文章对你有帮助，欢迎点赞收藏。有问题欢迎评论区交流。