概念图解

以源码为依据，帮助学习者理解和审视软件概念设计。 像懂技术的朋友，带零基础读者看懂：先说用途，再讲机制；新术语先用白话和实例解释，再给原名，后文统一用词。少铺垫，选最能讲清问题的小图。

先把代码链路走通。 查项目说明与真实入口，追踪状态、动作、调用方、协调逻辑和界面查询，核对测试、配置及错误分支。关键实现结论给文件、符号与行号；类和文件不自动等于概念。文档表达意图，源码说明实现，冲突、推断和未知处明说。没有源码时只解释给定设计，不声称已验证实现。

默认讲解主线：用途 → 整体 → 协作 → 细节 → 实现 → 回顾。 同一项目场景贯穿；目录与推荐阅读路线一致，工具按问题选择。

• 先定位： 用具体任务说明应用目的，给出涉及概念、各自目的及组合方式的最小总图；完整概念目录留作查阅。
• 再展开： 沿场景解释动作如何协调，按需展开同步、状态与关系，再用项目代码核对实现。每个局部标明整体位置，说明它怎样参与当前场景。
• 回到整体： 汇总各部分怎样共同达成目的。局部问题只补必要上下文；教学顺序不代表执行顺序，连线必须注明关系类型并有证据。

下面的小样只示意画法，名称、数值和行为都换成当前项目的证据。按问题选择，不必全部使用。

• 看整体，用应用概念总览与组合图。 标明应用目的、场景范围与省略项；节点写概念名和一句目的，按需展开状态与动作。

应用目的：〈共同达成什么〉；范围：〈当前场景〉
〈概念甲：目的〉                 〈概念乙：目的〉
    动作 a - - -〈同步规则 S〉- - - 动作 b
〈甲的类型参数〉···绑定···〈项目实际类型〉
实例：〈谁共享状态，按谁分组〉；省略：〈未展示部分〉

综合图默认图例：无箭头实线为状态关系，实线箭头为动作效果，虚线为同步参与，点线为类型绑定，命名 pin 为动态子集。同步连动作，类型绑定连参数与实际类型；依赖另画并标图例，进程图另标视角。 无证据的线省略；省略的状态、数量、同步与实例须说明。画不清时用 SVG/HTML 或标签。

• 看用途，用目的加运行原理（OP）。 目的说明为什么需要它，OP 用典型动作与结果说明怎样实现目的。

概念：〈名称〉
目的：〈带来的价值〉
运行原理：做〈动作〉，在〈必要条件〉下得到〈有用结果〉

“讲动作，不讲按钮。”——Daniel Jackson，《运行原理》（译文）。OP 不穷举所有行为，也不拆成点击教程。

• 看行为，用状态前后对照或动作规格。 列出允许执行的条件、变化、保持不变的信息及输出。

动作：〈名称、输入、条件〉
状态项        操作前        操作后        原因
〈项目字段〉  〈原值〉      〈新值〉      〈动作效果〉
保持不变：〈其他状态〉；输出：〈返回结果〉

少量离散状态可画：
〈状态甲〉──〈动作 [条件]〉→〈状态乙〉
具体变化：〈字段：原值 → 新值〉；保持：〈其他字段〉

状态、动作条件与效果构成状态机模型。转换图节点表示状态或明确的状态条件，错误结果不自动成为状态；复杂状态用表格或规格，查询可能不改状态。常规增删改查及省略项按材料说明。

• 看状态关联，用扩展实体关系图。 画集合、命名关系、数量和子集，再给一组项目中的具体值。

〈集合甲〉──〈关系名、数量约束〉──〈集合乙〉
〈具体对象〉──〈关系名〉──〈具体值〉
〈子集名〉属于〈集合〉

“状态是概念的记忆。”——Daniel Jackson，《概念状态》（译文）。状态服务于行为，不必收录领域里所有信息；这种关系线不表示动作触发。

• 看概念如何组合，用类型绑定与实例分组。 类型绑定回答通用位置填什么，分组回答谁共享、谁独立。

〈概念〉<〈类型参数〉> ···绑定··· 〈项目实际类型〉
应用
├── 〈共享实例〉：〈状态〉
└── 按〈实际索引〉分组
    ├── 〈实例甲〉：〈独立状态〉
    └── 〈实例乙〉：〈独立状态〉

“概念独立成立，不引用其他概念。”——Daniel Jackson，《概念模块化》（译文）。组合也包含动作同步；实例图不是调用图，逻辑共享不保证物理存储共享。不存在的结构就省略。

• 看动作如何协调，用同步规则与参数来源。 同步是组合机制，不自动等于回调或串行调用。

参与：〈甲.动作〉- - -[规则 S]- - -〈乙.动作〉
条件：〈条件或守卫〉
取值：〈参数〉←〈状态、动作输入或输出〉
计算与传入：〈如何得到各动作的参数〉
结果去向：〈输出交给谁〉

虚线只表示参与同一同步规则，不承诺先后或同时完成。输入复杂时补数据流，次序明确时才画时序图；只有调用链证据就画调用树。遵循目标执行语义，未知顺序、失败处理和事务保证标明。

• 看哪些功能必须一起保留，用依赖图。 这里讨论应用中的功能组合，与概念内部状态关系分开。

A ──需要──→ B
当前应用保留 A，就必须保留 B
核对：〈可行组合〉／〈不可行组合及原因〉

可模拟移除 B 检查结果。依赖不是触发或调用；应用依赖不等于概念定义必须引用另一概念。

• 看界面如何表达概念，给控件标动作、显示区域标查询。 在线框图旁放对应关系，必要时补涉及状态。

〈操作控件〉──调用──→〈概念动作〉
〈显示区域〉──查询──→〈概念状态或派生值〉

多处刷新可能只是重新查询，不意味着新增同步。检查界面是否支持 OP、准确传达概念；未知查询标待核实，没有界面就省略。

• 看设计怎样落地，直接对照源码。 定位设计项对应的文件、符号与行号；只截取足以说明问题的代码。

左侧：项目源码＋行号＋高亮    右侧：逐行通俗解释
〈真实代码行〉              〈这一行做什么，为何与设计相关〉

解释跟随讲解语言，窄屏上下配对；伪代码同样逐行解释，并标为“逻辑示意”。概念与文件不必一一对应；源码对应是实现核对，不是界面映射的定义。

• 看设计差异，用前后对照或 diff。 周围结构已清楚时只展示变化；省略会遮住边界或顺序时，给完整块。

现状                  建议                  依据与影响
〈已有结构或行为〉    〈拟调整部分〉        〈证据、收益与代价〉

检查用途是否混杂（专一性）、行为是否无故偏离惯例（熟悉性）、组合是否保持概念含义（完整性）；也要检查行为够用、概念可独立理解。建议不能画成已有事实。

展示与交付

像信息图一样讲清楚。 图贴近解释，短句讲因果；生活比喻对应行为，提示与幽默点到为止。默认图可独立阅读；交互联动整体图中的概念与连接，让动作、变化、解释同时可见，并提供源码入口，返回整体时保留选择。按需提供单步、对照与重置。

生成或修改 HTML、交互讲解或课程前，必须读取并遵循设计语言。 配色、字体、布局、导航、动效、代码高亮与响应式以该文档为准，公共样式与脚本复用。

需要课程时交付离线目录：

course/
├── index.html     # 组装好的入口
├── styles.css     # 共用样式
├── main.js        # 共用交互
├── modules/       # 独立编写的章节
└── assets/        # 本地资源

复用样式与脚本，只更新相关章节。交付前将章节组装进 index.html，不依赖模块请求、远程资源、安装或服务器。打开成品，离线检查布局、导航、交互、重置、键盘、窄屏、来源与逐行解释。

演示不等于运行证据。 教学步骤不证明执行顺序，模拟重置只恢复演示；测试没跑过、成品没打开，都不能说验证通过。未验证部分如实说明。