Visual Architecture — 视觉架构

视觉架构 使用捆绑的Python渲染器渲染架构图，而不是手写SVG。 工作流程 创建一个包含标题、节点和边缘的JSON文件。在写入节点位置之前，先在脑海中将其与渲染器网格对齐： 水平网格：120px 垂直网格：80px 运行： python3 skills/visual-architecture/scripts/render_architecture.py input.json output.svg 如果可用并需要位图预览，运行： rsvg-convert -o output.png output.svg JSON 输入结构 { "title": "服务映射", "nodes": [ { "id": "web", "label": "Web 应用", "subtitle": "用户界面", "kind": "service", "x": 120, "y": 160 }, { "id": "api", "label": "API", "subtitle": "业务逻辑", "kind": "service", "x": 360, "y": 160 } ], "edges": [ { "from": "web", "to": "api", "kind": "primary-data", "label": "HTTP" } ] } 节点类型 service：圆角矩形 llm：双边框圆角矩形 agent：六边形 memory：圆柱体 每个节点需要： id：唯一字符串 label：主要标题 kind：上述节点类型之一 x, y：网格对齐中心坐标 可选： subtitle：次要标题 show_grid：设置为 true 以在导出的 SVG 中显示编辑网格 边缘类型 primary-data：蓝色实箭头 memory-write：绿色虚箭头 control：灰色虚箭头 每个边缘需要： from：源节点 id to：目标节点 id 可选： label：在路由上渲染带有遮罩背景 rect source_side, target_side：强制边缘锚点（左、右、上、下） via：正交转折点数组，每个点具有 x 和 y 坐标 label_segment：零基段索引以放置标签 label_offset：[dx, dy] 微调标签放置 渲染器保证 仅以正交方式渲染箭头 按照以下顺序渲染：背景、箭头、节点、标签 将标签遮罩放在箭头文本后面以提高可读性 保持克制：干净的笔画，无装饰效果，并隐藏编辑网格，除非明确请求 使用说明 在用户需要架构图、路由图或系统关系图时，首选此技能。 首先选择语义类型，然后将节点放置在网格上，最后仅添加必要的边缘来解释流程。 保持图表简洁。如果图表感觉拥挤，请将其分成两个文件，而不是强制一个密集的复合图。 示例 使用 examples/service-map.json 作为 web 应用、API、worker、数据库和 LLM 提供商图表的通用起点。