shield_lock
JinDaGe
← Back to skills
extension
Category: Data & AnalyticsNo API key required

SBR可视化建模

SBR（Structure-Behavior-Relation）结构行为关系可视化建模技能。当用户需要把一段系统/业务/概念清晰画成"结构-行为-关系"三维架构图（SVG），或提到"架构图"、"流程图"、"系统可视化"、"SBR 建模"、"结构行为关系图"、"画一张XX的架构图"、"SBR"、"structure-behavior-relation"时使用——自动产出 1600×900 深色主题单文件 HTML（内嵌 SVG，含图例/配色/贝塞尔防交叉连线），支持 PNG/PDF 导出；多层次系统可产出 L1/L2/L3 多张图。

personAuthor: user_81d33501hubcommunity
downloadDownload package

SBR 结构行为关系可视化建模技能

SBR 建模法 v2.1 — 输入任意系统 / 业务 / 概念，自动产出一张 1600×900 深色主题 SVG 架构图，同时呈现结构（组件）、行为（接口）、关系（连线）三个维度。

License: MIT Version SkillHub

一句话

把任何复杂系统画成一张"结构-行为-关系"三维架构图（SVG），不靠凭空画，先建模再绘图。

✨ 核心特性

| 特性 | 说明 | |---|---| | SBR 三维建模 | 结构（组件形状）/ 行为（接口）/ 关系（连线）同时呈现 | | 形状即语义 | 矩形=功能、圆角矩形=有状态、六边形=控制、圆=存储、菱形=判断、云=外部 | | 五步工作流 | 前置分析 → 识别组件 → 定义行为 → 规划关系 → 布局绘制 | | 固定画布 | 1600×900，横向 16:9，重心居中、四象限均衡 | | 贝塞尔防交叉 | 连线全部贝塞尔曲线，反馈回路走外围弧线，清晰不重叠 | | 双主题配色 | 深色（tokyo-night + 白/黄高对比，默认）/ 浅色（可选） | | 自包含可导出 | 单文件 HTML + 内嵌 SVG，浏览器打印即 PNG/PDF | | 多层次建模 | 组件 >9 时洋葱式 L1/L2/L3 分层出图 |

🎯 适用场景 & 触发词

| 类别 | 触发词示例 | |---|---| | 架构可视化 | "画一张XX架构图"、"系统可视化"、"SBR 建模" | | 流程图 | "画XX的流程图"、"业务流程图" | | 概念建模 | "结构行为关系图"、"SBR"、"structure-behavior-relation" | | 知识建模 | "把XX画成图"、"XX 的 SBR 图" |

已验证示例

  • AI Agent 架构（深色主题，含规划器/推理/工具/记忆 + 反馈回路）
  • 订单处理流程（分阶段，含支付失败回流控制流）

📦 安装

用户级（推荐）

~/.workbuddy/skills/sbr-model-builder/

项目级

<workspace>/.workbuddy/skills/sbr-model-builder/

SkillHub 发布

在 WorkBuddy 技能中心上传本目录（含 SKILL.md + icon + LICENSE）。

🚀 使用方式

触发

/sbr-model-builder 帮我画一张「推荐系统」的 SBR 架构图

或自然语言：

把订单处理系统画成 SBR 结构行为关系图

产出

sbr_推荐系统/
├── sbr_推荐系统.html     # 主架构图（深色，1600×900 SVG，可打印 PNG/PDF）
├── sbr_推荐系统.svg      # 可选纯 SVG 导出
└── 知识体系_推荐系统.md   # 可选 SBR 三维叙述

用 present_files 打开 sbr_推荐系统.html 预览；浏览器 Ctrl+P 可存为 PDF/PNG。

📁 技能目录结构

sbr-model-builder/
├── SKILL.md                       # 主流程（触发词 + 五步工作流 + 强制约束）
├── README.md                      # 本文件
├── LICENSE                        # MIT
├── icon.png                       # 发布图标 (512×512)
└── assets/
│   └── icon.png
└── references/
    ├── SBR_V2.md                  # 完整规范（v2.1 优化版，权威参考）
    └── templates/
        ├── sbr_template.html      # 可复制骨架（深色主题，含 defs/marker/图例）
        └── examples/
            ├── example_agent.html # AI Agent 架构示例
            └── example_order.html # 订单处理流程示例

🧩 方法论核心：SBR 三维

| 维度 | 回答 | 表示 | |---|---|---| | 结构 Structure | 由哪些组件构成？ | 形状（矩形/六边形/圆/菱形/云） | | 行为 Behavior | 组件提供什么功能？ | 接口标记 ●/○/◆ + 组件内文字 | | 关系 Relation | 组件如何交互？ | 箭头（数据/控制/反馈/关键/双向） |

质量门禁（交付前必过）

  • [ ] 前置分析完成（类型 A 抽象 / B 扩展）
  • [ ] 核心组件 5–9，形状符合语义
  • [ ] 行为（输入→处理→输出）明确
  • [ ] 关系连线无孤立、无交叉（贝塞尔规避）
  • [ ] 画布 1600×900，重心居中、四象限均衡
  • [ ] 含图例（形状 + 箭头含义）
  • [ ] 文字无溢出、主流程红粗、反馈橙弧

🛠 技术栈

| 层 | 技术 | 用途 | |---|---|---| | 图元 | 原生 SVG | 形状/连线/文字，固定 1600×900 | | 箭头 | SVG marker | 数据流/控制流/反馈/关键路径 | | 配色 | CSS 变量 | 深色（默认）/ 浅色双主题 | | 防交叉 | 贝塞尔 path | 曲线绕行、反馈外围弧 | | 交付 | 单文件 HTML | 内嵌 SVG，浏览器打印 PNG/PDF |

无外部依赖，支持离线打开。

📄 许可证

MIT © 2026 hemin

📌 版本记录

| 版本 | 日期 | 说明 | |---|---|---| | v1.0.0 | 2026-09-01 | 首发。内置 SBR_v2.1 优化规范、深色主题模板骨架、2 个完整示例、五步工作流与质量门禁。 |

✅ SkillHub 发布自查清单

  • [x] SKILL.md frontmatter 完整：name/description/license/icon/tags/metadata(version+author)/agent_created
  • [x] 图标：512×512 PNG，深色主题 SBR 三色，位于 assets/icon.png 与 icon.png
  • [x] README.md：功能/触发词/安装/方法论/技术栈/自查清单
  • [x] LICENSE：MIT 文件存在
  • [x] references/ 完整：SBR_V2.md 规范 + 模板 + 2 示例
  • [x] 无敏感信息
  • [x] description 含触发词
  • [x] tags 准确：sbr/architecture/svg/visualization 等

🔗 相关链接

  • 规范原文：references/SBR_V2.md
  • 模板：references/templates/sbr_template.html
  • 示例：references/templates/examples/
  • 作者主页：GitHub @sharptoolbox
<p align="center"> <sub>Built with <a href="https://www.workbuddy.cn">WorkBuddy</a> · Powered by <strong>SBR 建模法 v2.1</strong></sub> </p>