SuperAPI AI 工具集

architecture-diagram

前端与建站

查看项目

更新于 10-15 19:51

技能介绍

用途:把软件或系统架构可视化为一张专业深色主题图,最终产物是单个自包含 HTML 文档,内嵌 CSS 与内联 SVG,不使用 JavaScript 和外部图片,仅允许引入 Google Fonts 链接,需能直接在浏览器中正确渲染。

主要能力与视觉规范:背景 #020617,叠加 40px 细网格;字体为 JetBrains Mono(等宽,经 Google Fonts 引入)。组件用圆角矩形(rx="6")、1.5px 描边、半透明填充,并按角色配色:facade/开发者界面 fill rgba(8,51,68,0.4)、stroke #22d3ee;核心契约 fill rgba(6,78,59,0.4)、stroke #34d399;插件/提供方 fill rgba(120,53,15,0.3)、stroke #fbbf24;执行环境/能力 fill rgba(76,29,149,0.4)、stroke #a78bfa;观测/事件总线 fill rgba(251,146,60,0.3)、stroke #fb923c;外部/通用 fill rgba(30,41,59,0.5)、stroke #94a3b8。组件名 11px 白色加粗,副标签 8–9px #94a3b8。箭头使用 SVG marker 箭头,先画连线再画方框,使箭头位于方框之后。

布局规则:按架构分层自上而下堆叠为带标签的水平条带,每层组件置于对应条带内;相邻行垂直间距不小于 40px,方框不得重叠;顶部加简短标题与副标题,并加小型图例说明各颜色对应层级,图例放在所有条带之外。

使用方式与输出:返回完整 HTML 文档字符串,HTML 之外不加任何说明文字。

适用场景:需要快速产出可分享、可离线打开的架构示意图时使用。限制:不生成 JavaScript 交互,不使用外部图片;具体调用命令、安装方式与收费信息暂未提供。