📦 floracat-architecture-diagram — 创建HTML/SVG架构图和技术图表

使用此技能生成带有嵌入SVG的独立HTML文件，呈现简洁的演示幻灯片风格，而非代码优先的图表。

输出形式

• 默认生成带有嵌入SVG的独立HTML文件。
• 当一页上有多个图表时，首选分节的“幻灯片”结构。
• 使用SVG（而非Mermaid）以获得最终发布质量的布局控制。
• 确保结果无需缩放即可阅读，非工程师也能理解。

视觉风格

• 使用PPT风格的信息设计：温暖的背景、面板卡片、柔和的阴影、圆角节点、克制配色。
• 当受众为中文用户时，首选清晰的中文标签；仅保留必要的英文技术术语。
• 使用少量语义颜色并在整个部分中保持一致。
• 保持箭头简洁；不要让线条或标记在视觉上过于突出。
• 优先平衡间距而非密集排列。页面应给人经过编辑的感觉，而非自动生成。

图表构建工作流程

• 明确每个图表面向用户的用途。
• 在绘制前将系统简化为几个层级或阶段。
• 选择最简单的SVG结构：

• 先放置组，再放置节点，然后是箭头，最后是注释。
• 布局稳定后，本地化标签并精简措辞。
• 完成前进行专门的箭头和重叠检查。

节点规则

• 每个节点只有一个明确的职责。
• 保持标题简短；如果标题较长，先加宽节点再缩小文字。
• 使用副标题行进行详细说明；保持简短和可扫描。
• 避免在一个节点内混合多个抽象层级。
• 严格对齐同级节点。

箭头规则

• 每条箭头必须从节点边缘开始和结束，不能在节点内部。
• 首选直线。仅在避免碰撞或歧义时添加弯曲。
• 当两条箭头连接同一对区域时，在垂直或水平方向上错开它们。
• 使用实线表示主要的运行时/数据流。
• 仅将虚线用于支持、配置、反馈、可选链接或按需读取。
• 如果箭头很长，缩短或重新路由它们，使方向保持明显。
• 不要让文字放在箭头上面。

编辑规则

• 在优化现有SVG时，检查坐标而非进行语义猜测。
• 如果用户报告重叠，直接修复几何：移动节点、加宽盒子、重新路由路径或调整文字锚点。
• 如果用户质疑箭头的含义，先在代码/文档中验证实际系统关系，然后更正线条。
• 优先使用明确的标签而非装饰性复杂性。

图表特定指南

整体架构

• 分离访问表面、控制平面/运行时、能力子系统和状态/配置区域。
• 使用封闭组显示所有权或子系统边界。
• 保持跨组箭头简洁精确。

运行时流程

• 首先强调主要路径。
• 将配置、会话状态和插件/运行时支持放在主要路径下方作为支持层。
• 使用读起来像产品行为的措辞，而非源代码名称，除非源代码名称很重要。

序列图

• 将参与者减少到解释流程所需的最少数量。
• 按角色而非文件/模块命名参与者，除非实现细节是重点。
• 仅在存在真实重复交互的地方使用循环。
• 将循环标签靠近循环箭头放置。

最终检查清单