diff --git a/.gitignore b/.gitignore
index 000003a..ef4b879 100644
--- a/.gitignore
+++ b/.gitignore
@@ -22,3 +22,16 @@ npm-debug.log*
# TypeScript
*.tsbuildinfo
+
+# Game assets (large files)
+public/videos/*
+public/audio/*
+public/images/*
+
+# Keep example files
+!public/videos/intro.mp4
+!public/scenes/demo.json
+!public/subtitles/intro.vtt
+
+# Release output
+release/
diff --git a/FUTURE.md b/FUTURE.md
index 6b29c3c..3274cfd 100644
--- a/FUTURE.md
+++ b/FUTURE.md
@@ -184,4 +184,159 @@ AI工具也一样,一个不懂电影游戏制作的人,只靠AI是做不出
本引擎就是帮助懂电影游戏制作的人更快更高质量的完成产品,AI是帮助引擎更容易使用,达到降本增效的效果。
-引擎帮助人降本增效,AI帮助引擎更容易被使用和提升产出效率。
\ No newline at end of file
+引擎帮助人降本增效,AI帮助引擎更容易被使用和提升产出效率。
+
+## 游戏内流图可视化 — Detroit 式分支图即时查看
+
+基于已有 P15 的章节回顾 Vue Flow 节点图,升级为游戏内实时查看。
+玩家在决策点暂停时,可快速预览当前章节的分支结构,已走路高亮,未解锁路径灰色。
+
+**核心功能:**
+
+- 暂停菜单中新增"查看分支图"按钮,点击后全屏展示当前章节流图
+- 已到达场景节点绿色实心,当前场景节点带呼吸动画
+- 未到达场景灰色虚线边框,提前未知路径用虚线表示
+- 条件分支显示条件提示(如"需要 trust >= 80"),帮助玩家理解未解锁原因
+- 点击已到达的节点可直接跳转到该场景重新开始(需玩家确认)
+
+**数据依赖(已有基础):**
+- `visitedSceneIds`(P15 — `goToScene` 自动记录,IndexedDB 持久化)
+- 场景间边关系(从 `SceneManager.getScenes()` 解析 choices / nextScene / qte success/fail / hotspots,BFS 遍历)
+- 章节起始场景(P8 — `ChapterInfo.startScene`)
+- Vue Flow 组件(P3 编辑器已有,只读渲染 + 高亮 + 动画)
+
+**关键技术点:**
+- 章节可达场景 BFS 遍历(P15 ChapterRecap 已有实现)
+- 节点 `visited` 高亮样式(P15 已有)
+- 节点跳转回游戏内场景 → 引擎已有 `startChapter → goToScene`,新增 `jumpToScene(sceneId)` 直接跳(不重置变量,作为"分歧点回退")
+
+**实现要点:**
+- [ ] `src/components/InGameFlowChart.vue` — 复用 Vue Flow,只读模式 + 呼吸动画 + 节点点击跳转
+- [ ] `src/stores/gameStore.ts` — `showFlowChart` 状态 + 当前章节场景图数据
+- [ ] `src/App.vue` — 暂停菜单/ESC 菜单中增加"查看分支图"入口
+- [ ] `engine/core/Engine.ts` — 支持从流图节点跳转到场景(`jumpToScene(sceneId)`)
+
+## 人物关系系统 — 角色好感度可视化
+
+对标 Detroit 的角色关系 HUD。游戏变量中角色好感度值(如 trust / friendship)在决策后通过角色头像 +
+关系变化值(+数值显示)+ 迷你进度条动画展示给玩家,增强叙事沉浸感和角色互动的反馈。
+
+**核心功能:**
+
+- JSON 中定义角色信息:头像 URL、名称标签、关联变量
+- 变量值变化时 → HUD 弹出角色头像 + 变化值(如 `+10 信任`),短暂停留后淡出
+- 暂停或按特定键可查看完整的角色好感度一览(个人资料 + 当前值 + 历史变化趋势)
+
+**数据示例:**
+```json
+{
+ "characters": [
+ { "id": "stranger", "name": "陌生人", "portrait": "/images/stranger.jpg", "variable": "trust" },
+ { "id": "partner", "name": "伙伴", "portrait": "/images/partner.jpg", "variable": "courage" }
+ ]
+}
+```
+
+**技术架构:**
+- `StateManager.apply` 前快照旧值 → apply 后计算变化 → emit `relationChange` 事件
+- `RelationshipHUD.vue` 监听事件,显示浮动弹出(`+/- N`)+ 头像 → 短暂停留后自动消失
+- 完整角色一览面板通过暂停菜单按钮打开
+
+**实现要点:**
+- [ ] `engine/types.ts` — `GameData.characters: CharacterDef[]`
+- [ ] `engine/core/StateManager.ts` — `apply` 前快照 `variables` → apply 后对比 → emit `relationChange`
+- [ ] `src/components/RelationshipHUD.vue` — 底部/侧边角色头像条,值变化时弹出变化箭头动画
+- [ ] `src/stores/gameStore.ts` — `changedCharacters` 列表(前/后变量值对比结果)
+- [ ] `src/App.vue` — 整合 RelationshipHUD
+
+## Engine/UI 分离架构 — 制作者定制 UI 能力
+
+当前 `moviegame-starter` 分发的是完整构建产物(引擎 + UI 打包在一起),制作者只能改 JSON。
+要给制作者更多 UI 定制能力,需要将引擎和 UI 拆分为独立的可替换层。
+
+### 目标架构
+
+```
+moviegame-engine (npm 包 / CDN 脚本,闭源)
+ └── engine/core/*.ts → dist/engine.mjs
+ Engine, VideoManager, StateManager, SceneManager, AudioSystem ...
+
+moviegame-ui (npm 包 / 源文件分发,开源)
+ └── src/components/*.vue 源码暴露
+ GamePlayer, ChoicePanel, Subtitles, QTEOverlay ...
+ └── src/composables/useGameEngine.ts 桥接引擎和 UI
+
+moviegame-starter (制作者项目)
+ ├── imports: moviegame-engine + moviegame-ui
+ ├── public/ ← 视频、音频、JSON
+ ├── src/App.vue ← 制作者自由修改
+ └── theme.css ← 制作者写 CSS
+```
+
+### 三层用户定制方案
+
+| 技能等级 | 使用方式 | 修改什么 |
+|----------|---------|---------|
+| **零代码**(预计 90% 制作者) | clone starter → 只改 JSON + 换视频 | 不动代码 |
+| **会 CSS**(预计 8% 制作者) | 改 `theme.css` — 颜色、字体、按钮样式 | 一行 `` 引入 |
+| **会 Vue**(预计 2% 制作者) | fork `moviegame-ui` → 改 `.vue` 组件 → `npm install` 自己版本 | 完全重做 UI |
+
+### 方案 A: CSS 主题变量(JSON 驱动)
+
+在 `my_story.json` 顶层加 `theme` 字段,映射到 CSS 变量。复杂度低,但表达力有限。
+
+```json
+{
+ "theme": {
+ "primaryColor": "#ff6b35",
+ "bgColor": "#1a1a2e",
+ "fontSize": 16,
+ "subtitleColor": "#ffff00"
+ }
+}
+```
+
+### 方案 B: 自定义 CSS 文件(推荐)
+
+`dist/` 中放空 `theme.css`,引擎 `index.html` 中 `` 引入。制作者填 CSS 覆盖默认样式。
+一行代码解决,零侵入引擎,零复杂度。面向 98% 的定制需求。
+
+```html
+
+
+```
+
+```css
+/* theme.css — 制作者自由填 */
+.choice-btn { border-radius: 20px; background: linear-gradient(...); }
+.subtitles .sub-text { font-family: 'MyCustomFont', serif; }
+```
+
+### 方案 C: 开放 UI 源码(Vue 组件替换)
+
+`moviegame-ui` 发布 Vue `.vue` 源码包,制作者 `npm install` 后可直接修改组件。
+适合有前端能力的高级制作者,可完全重做 UI(如把选项列表改成对话轮盘)。
+
+### engine 本身体积大小预估
+
+若 engine 独立构建为 ESM 库:
+
+- 当前 engine 代码共 6 个 TS 文件:`Engine.ts` (417 行)、`StateManager.ts` (102 行)、`VideoManager.ts` (188 行)、`SceneManager.ts` (53 行)、`AudioSystem.ts` (145 行)、`ChoiceSystem.ts` / `QTESystem.ts` / `AchievementSystem.ts` / `SaveSystem.ts`
+- 总计约 1600 行 TS,`tsc` 编译后约 15-20KB minified
+- 不包含 Vue / Pinia / Dexie / Vue Flow — 这些属于 UI 层或按需引入
+- 可作为极轻量 CDN 脚本分发:`