数据流图设计与可视化 · DFD-01
一个以「校园二手交易平台」为样本的数据流图（DFD）项目文档，包含从 0 层上下文图、1 层分解图到可交互 SVG 工作台的完整设计与实现说明。
打开方式
直接双击 数据流图设计与可视化.html，用现代浏览器打开即可。页面为单文件、自包含 CSS/SVG/JS，不依赖外部字体、图片、CDN 或本地服务器。
文件结构
数据流图设计可视化/
├─ 数据流图设计与可视化.html # 最终交付物（单文件）
├─ preview-0l.png # 0 层工作台桌面截图
├─ preview-mobile.png # 390px 移动端截图
├─ README.md
└─ parts/ # 分片源文件，便于维护
├─ p1.html # 头部、CSS、侧栏、封面、00 节
├─ p2.html # 01–03 节 + DFD 工作台结构与样式
├─ p3.html # 04–06 节
├─ p4.html # 07–09 节、附录、页脚
└─ p5.html # 交互脚本
重新构建：
cd D:\\autoclawspace\\数据流图设计可视化
node –e "const fs=require('fs');const p=['parts/p1.html','parts/p2.html','parts/p3.html','parts/p4.html','parts/p5.html'];fs.writeFileSync('数据流图设计与可视化.html',p.map(f=>fs.readFileSync(f,'utf8')).join('\\n'),'utf8')"
页面结构
| 00 | 项目简报：目标、范围、读者、非目标 |
| 01 | DFD 语法：外部实体、处理、数据存储、数据流；常见错误 |
| 02 | 分层与平衡：0 层边界、1 层分解、父子平衡检查 |
| 03 | 交互工作台：切层、点节点/连线、播放、标签、缩放、导出 |
| 04 | 分层布局：手工坐标 + 正交路由 + 标签避让 |
| 05 | 数据模型与渲染管线：节点/边数据结构、SVG 渲染流程 |
| 06 | 数据字典与 CRUD 矩阵 |
| 07 | 工程化与测试：性能预算、测试分层、可访问性 |
| 08 | 评审清单：12 项 DFD 质量检查 |
| 09 | 复盘与下一步：做对了什么、代价、后续演进 |
| 附录 | 术语表、参考资料、版本记录 |
编号体系
页面刻意使用两套编号，避免 0 层与 1 层含义混淆：
- 0 层边界流：C1–C8。C 表示 Context，描述系统与外部世界之间的 8 条边界流。
- 1 层数据流：E1–E27。E 表示 Edge，描述 6 个处理、4 个数据存储与 4 类外部实体之间的 27 条数据流。
底部索引会跟随当前层级切换：0 层显示 C1–C8，1 层显示 E1–E27。点击图中编号可查看该流的来源、去向与数据内容。
交互说明
| 0 层 / 1 层 | 在上下文图与分解图之间切换 |
| 视图：核心 / 全部 | 1 层下在 16 条交易主链与 27 条完整流之间切换 |
| 点击节点 | 查看节点类型、说明、输入流、输出流 |
| 点击连线 / 编号 | 查看来源、去向、数据内容 |
| ▶ 播放数据流 | 数据流虚线位移动画 |
| 标签：编号 / 全称 / 关 | 循环切换标签密度 |
| − / ＋ / 适配 | 70%–140% 缩放与复位 |
| 导出 SVG | 导出当前层级与标签状态的 SVG 文件 |
窄屏下画布保留 920px 最小宽度并横向滚动，工具栏与详情面板自动换行；页面本身不产生横向溢出。
设计语言
工程图纸 / 图纸集（drawing set）方向，而不是通用 dashboard：
- 纸面 #eef2f3、墨色 #15232d、 petrol accent #0d6b74
- 等宽字体标注图号、比例、修订、编号
- 左侧 Sheet Index 目录、图框、图签、底部数据流索引
- 正交路由、节点框障碍物、标签防碰撞
- 无渐变、无阴影、无圆角卡片墙
验证记录
在 Edge 无头浏览器（CDP）下完成：
| 默认 0 层 | 5 个节点、8 条边、8 个 C 编号 |
| 1 层核心 | 12 个节点、16 条边 |
| 1 层全部 | 14 个节点、27 条边 |
| 节点检查器 | P4「下单与支付」，2 入 / 2 出 |
| 连线检查器 | C1 买家 → 平台；E1 买家 → 认证与账户 |
| 标签模式 | 编号 → 全称 → 关 → 编号，27 → 27 → 0 → 27 |
| 索引联动 | 0 层 C1–C8；1 层 E1–E27 |
| 导出 SVG | dfd-campus-market-l0.svg，6,303 bytes，含节点与箭头 marker |
| 页面横向溢出 | 1440px 无；390px 无页面级溢出 |
| JS 异常 | 0 |
| 视觉复核 | 0 层桌面/移动端通过；未发现严重问题 |
已知限制
- 节点坐标为手工调校，不支持拖拽编辑或自动布局；生产级编辑器应接入 Sugiyama / ELK 分层布局。
- 1 层「全部」27 条流在 1200×760 画布内仍然较密，默认用核心视图与编号标签降低阅读压力；需要逐条追踪时建议配合底部索引。
- 导出 SVG 为当前视图的静态快照，不包含页面说明文字与交互脚本。
- 示例业务为教学样本，未连接真实后端或数据库。
数据流图设计与可视化.html动态教程文件资源-CSDN下载 https://download.csdn.net/download/shihui2003/93757584
