flow-diagram

用途：把活动流程或系统架构画成一个自包含的交互式 HTML+SVG 页面（无外部依赖，浏览器直接打开），左侧是默认自适应视图的图表，右侧是说明卡片，读者可点选某条流程查看其从起点到终点的走向。\n\n主要能力：双栏应用式布局，含标题行与明暗主题切换、流程选择 chips、缩放条；点击某条流程后该流程保持颜色、其余元素变暗，并有小圆点沿线路移动表示方向；点击步骤徽标可高亮对应说明行。每个流程组有唯一短代码，线条、徽标、标签通过 data-flow 关联，包裹方框的组用 data-flows 列出经过的流程。支持线性、汇聚、中心枢纽、条件分支等布局模式，可嵌套组合。模板自带浅色 CSS、5 种箭头标记、示例前向/返回流程、方框、徽标与卡片，复制 assets/template.html 后替换内容即可。\n\n使用方式：先询问图表使用语言，再锁定内容（方框、流程组、每条流程的去与回方向），依据布局指南确定拓扑，把坐标网格规划写成 SVG 顶部注释，然后沿设计系统绘制并接好交互属性，最后用检查脚本做机器校验。可用浏览器运行 assets/check-collisions.js 逐条点击流程核对；无法连接浏览器时改用离线检查 assets/check-svg.js（node assets/check-svg.js <file.html>），它基于真实坐标计算方框重叠、箭头过近、悬空箭头、viewBox 溢出等；仅文本重叠为估算警告。旧文件可用 assets/fix-arrow-gaps.js（node assets/fix-arrow-gaps.js <file.html>）批量把过近的箭头拉到约 8px。\n\n设计约束：系统无衬线字体、克制配色、方框白底由边框区分角色，色板仅用于流程（蓝=请求、绿虚线=返回、红=安全、紫=定时、琥珀=数据管道），SVG 属性内只写浅色十六进制值，由模板 CSS 按主题重映射；箭头端点需与目标方框保持约 8px 间隙；打印或无 JS 时布局自动展开为可读。\n\n限制：资料未提供价格、平台与收费信息；交互依赖 JavaScript，离线检查器对文本重叠的判断为估算，仍需人工确认，图片或完整代码示例未在此展开。