架构图生成器

系统架构可视化的痛点

在软件开发和系统设计中，将复杂的模块关系、数据流向和用户角色可视化至关重要，但传统绘图工具如 Visio 或 Draw.io 需要手动拖拽，耗时且难以维护一致性。对于频繁迭代的架构，快速生成可交互的图表成为技术团队的核心需求。

架构图生成器的核心能力

该技能通过自然语言描述自动生成基于 HTML 的架构图，无需外部依赖，直接在浏览器中渲染。其核心工作流程如下：

• 描述解析：用户输入系统描述（如模块层级、交互关系），技能解析出关键元素。
• 结构规划：基于预定义的模板（如 assets/template.html），自动规划分层布局，包括用户角色行、分组区块和卡片组件。
• 组件映射：使用提供的 CSS 类名生成 HTML 代码，例如：

- 卡片使用 .card 类，并通过 card-{theme} 控制主题色（如 web、api）。
- 连接线使用 .flow-arrow 和 .h-connector 类表示数据流。
- 响应式设计通过媒体查询实现，768px 以下自动切换纵向布局。

• 文件输出：生成自包含的 .html 文件，仅引用 Google Fonts CDN（如 Inter 字体），便于分享和归档。

关键实现细节

技能严格遵循 Paper.design 风格：

• 视觉一致性：背景为 #edebe1 暖奶油色，卡片使用 #f5f3eb 浅色表面，搭配细边框和 3px 彩色指示条。
• 交互与动画：hover 效果添加上浮和阴影，组件通过 fadeUp 错帧渐入动画（如 .section-N 控制延迟）。
• 扩展性：当架构复杂时，可通过 CSS 变量（如 --accent-{name}）新增颜色或组件，但需手动修改模板。

适用边界与注意点

• 描述依赖性：生成质量高度依赖用户输入的清晰度；模糊描述可能导致图表结构不合理。
• 自定义限制：虽然支持主题扩展，但预定义类名（如 .card-web）固定，深度定制需编辑 CSS。
• 浏览器兼容性：文件依赖现代浏览器渲染，旧版 IE 可能不支持动画或 Flexbox 布局。
• 无外部工具：不集成版本控制或协作功能，适合作为独立文档或演示用途。