SuperAPI AI 工具集

architecture-diagram

前端与建站

查看项目

更新于 10-15 19:53

技能介绍

用途:根据用户描述的系统架构(组件、连接、技术栈),生成专业深色主题的技术架构图,输出为带内联 SVG 的独立 HTML 文件。无需外部工具、API 密钥或渲染库,写入 HTML 后浏览器打开即可,离线可用。

主要能力:内置语义化配色系统,按组件类型区分填充与描边,如前端(cyan-400)、后端(emerald-400)、数据库(violet-400)、AWS/云(amber-400)、安全(rose-400)、消息总线(orange-400)、外部(slate-400)。字体为 JetBrains Mono,背景为 Slate-950 加 40px 网格。支持圆角组件、箭头标记、安全流虚线、安全组与区域边界,以及图例。

使用方式:用户描述架构后生成 HTML,用 write_file 保存为 .html(如 ~/architecture-diagram.html),默认路径为 ./[project-name]-architecture.html。保存后建议用户打开,如 macOS 用 open ./my-architecture.html,Linux 用 xdg-open ./my-architecture.html。可加载模板参考:skill_view(name="architecture-diagram", file_path="templates/template.html")。

限制:输出须为单一自包含 HTML,除 Google Fonts 外所有 CSS 与 SVG 内联,不使用 JavaScript(动画用纯 CSS),需在现代浏览器正确渲染。图例必须放在所有边界框之外。具体收费、平台支持等信息暂未提供。