渲染解剖图

coding-visualizer 参考样例 — 卡片 / Mermaid DAG / 数据表三种形态

本页用途
  • 本页是「照着抄」的形态样例。展示三种核心可视化形态的 HTML 结构。
  • ① 卡片网格用于架构概览（每节点带描述/列表）。② Mermaid DAG用于 issue/Wave 依赖图（必须带 zoom 外壳）。③ 数据表/热力图用于 AC 清单、追溯表、NFR 风险矩阵。
  • 正式渲染时以 templates/skeletons/{phase}.html 骨架为主，本文件仅作形态参考。

① 卡片网格 — 架构概览

Gateway Layer

API Gateway

统一入口，路由、鉴权、限流。所有外部请求经此进入。

  • resolveRoute() 路由分发
  • authMiddleware JWT 校验
Port: 1 实现
Domain Layer

Order Aggregate

订单聚合根，包含状态机和不不变式校验。

  • 状态: created → paid → shipped
  • 不变式: 金额 ≥ 0
Aggregate Root
Infra Layer

PostgreSQL Adapter

持久化适配器，实现 OrderRepository Port。

  • save(order) 落库
  • findById(id) 查询
Adapter

② Mermaid DAG — Issue 决策图（带 zoom/pan）

Ctrl/Cmd + wheel 缩放 · 拖动平移 · 双击适配 · 按钮控制

Loading...

③ 数据表 + 热力图 — NFR 风险矩阵

✅ 无风险
⚠️ 需缓解
❌ 高风险
— 不适用
Issue安全数据性能并发稳定性兼容性可观测
I-1 数据模型 ✅ ⚠️ — — ✅ ⚠️ ✅
I-2 状态机 — ❌ ✅ ❌ ⚠️ ✅ —
I-3 缓存策略 ⚠️ ❌ ✅ ⚠️ ✅ — ✅

附：AC 清单表（追溯表形态）

AC ID类型场景状态关联 Wave
AC-1.1正常用户提交有效订单 → 创建成功 PASSWave 1
AC-1.2异常库存不足 → 返回 409 + 错误码 待验Wave 2
AC-2.1边界并发下单同一库存 → 只有一单成功 未实现Wave 3