【可执行状态】现在就能做（平台页面与课件均已在线）
【本讲对应资产】可视化工作流平台、课程课件页、教材橱窗、应用讲解卡（技能）、lesson-agent 引擎的课件能力
【本讲原理来源】langGraph 专题课（状态 / 节点 / 边）、L3 第 18 课《Agent 生态认知革命》
有位老师讲《数据怎么变成判断》这一节，讲得特别好。流程图一张接一张：采集、清洗、建模、输出，四步清清楚楚；板书工整，例子贴切，节奏稳。下课他随手问了一句：“刚才那个流程走到第三步的时候，数据长什么样？”
底下没人应。不是学生走神——是因为屏幕上那张图，从头到尾一动没动。
流程图能告诉你“有哪几步”，却没法告诉你“走这一步的时候会发生什么”。这就是本讲要面对的问题：我们用来讲“过程”的东西，自己是静止的。
一节讲“数据怎么变成判断”的课。过去用的是 PPT：左边一张流程图，右边一张截图，下面一行小字写着“数据经过处理后生成报告”。学生看懂了流程，但没感觉——因为屏幕上的东西不会动。
这次换个讲法：一屏分两半，左边是逐句出现的要点，右边是真的在跑的应用。
讲到“取数”那一步，右边就是一个工作流画布，节点一个个亮起来；讲到“生成结论”，右边换成市场看板，图表是活的，能点、能改参数、能看变化。例如，把“客单价”这个参数从 120 改到 150，右边的利润曲线当场抬高一截——学生第一次亲眼看见“参数影响结论”这件事。
学生第一次不是在“看图”，而是在看一个东西真的在动。
再比如讲“流程里的判断”这一小节：过去只能在板书上写“如果库存低于阈值，就触发补货”，学生点头；现在右边就开着那条流程，你当场把阈值改小，补货节点立刻亮起来。教学上最难讲的那一类概念——“条件”“触发”“先后顺序”，恰恰是靠“看它动一下”才讲透的。
任何一条工作流，拆开只有三样东西：
| 三要素 | 是什么 | 讲课时的说法 |
|---|---|---|
| 状态 | 全局共享的一张黑板，谁都能读能写 | “所有环节都在往同一张纸上写” |
| 节点 | 一个计算步骤，读状态、做事、写回状态 | “一道工序” |
| 边 | 顺序、条件、循环 | “先做哪个、满足什么才往下走、什么时候回到前面” |
三样东西说完，学生就知道“流程”不是一条线，而是一道工序接一道工序，每道工序都在改同一份数据。
打个比方：这就像一个班的作业要批。一个班四十几份卷子摊在桌上（这就是状态）；你一份一份改（一个一个节点）；改完把分数登记到同一张成绩表上（写回状态）；哪一份有争议就退回重看（这就是边里的循环）。改的不是从头再来一遍，是在同一张表上往前推。
再补两句真实的工程约束，课就有厚度了：
这两句不是代码知识，是工程常识——听懂了，学生以后自己设计流程时会少踩坑。
课件这件事也有历史。看它一路怎么来，就知道今天的“双屏”不是花招，是必然：
| 阶段 | 时间 | 核心特征 | 解决了上一阶段什么痛点 | 留下什么新问题 |
|---|---|---|---|---|
| 黑板与板书 | 十九世纪起 | 边讲边写，内容随讲随出 | 教学第一次有了“看得见的公共画面” | 写一遍只能看一遍；擦掉就没了 |
| 幻灯与投影胶片 | 二十世纪中叶起 | 课前做好片子，课上换片 | 图可以提前画好，不用现场画 | 片是死的；改一页要重做一张 |
| 幻灯片软件 | 一九八七年起 | 电脑排版、动画、模板 | 改一页的成本几乎为零，人人能做 | 内容变成“一页一页的字”，越做越满 |
| 网页课件与在线应用 | 今天 | 课件是一个网址，应用能现场跑 | 课件可以带走、可以更新，演示的软件是真的 | 需要设计节奏，也需要兜底 |
这条线的规律很清楚：每一步都在让“内容”更容易改、更容易带，但直到第三步为止，屏幕上的东西始终是“死的”。 第四步才第一次反过来——屏幕上的东西开始会动了。
就像幻灯片软件刚出来的时候有人担心“老师会不会变成念片子的人”，结果确实出现了一批“念片子的课”。技术从不替人做判断：它只把新的可能摆在你面前，用不用、怎么用，是老师的事。[1]
因为可追问、可复现、可修改：
一张截图讲不透的东西，一个能点开的东西讲透了。形象地说：PPT 像一张照片，应用像一段现场；照片能证明“曾经这样”，现场才能证明“现在也这样”。
这一条是有依据的，不是审美偏好。人的眼睛和脑子，看字走一条通道、看图走另一条通道；两条通道同时收到对应信息时，理解效果最好[2]。而且这两样东西在屏幕上的距离越近，效果越好——就像你教学徒修表，不会让他先在楼上读书、再到楼下看机芯，而是把说明书和机芯摆在同一张工作台上。
所以双屏的有用之处，不全在“左边是字、右边是图”，而在“左边的每一句，右边的哪一个动作”被事先配好了对。
| 位置 | 放什么 | 注意 |
|---|---|---|
| 左屏 | 逐句出现的课件要点（一个要点一屏，翻页式） | 一屏一个要点，不要塞满 |
| 右屏 | 真实应用（工作流画布、看板、对话入口） | 提前登录、提前跑通一遍 |
纪律：不做“套娃”。 不要在课件页面里再嵌一层界面去套另一个界面——那样两边都挤，投影上更看不清。好比一个房间里摆两张桌子够了，非要在一张桌子上再叠一张，结果是两张都用不了。正确做法是并排两块，不是层层嵌套。
这个问题问得很实在，值得认真回答。
第一，不必每节课都做。 一个学期十六节，真正“难讲”的大概就两到三节——讲过程、讲机制、讲判断的。例如讲“数据怎么变成判断”“为什么要设风控阈值”“评价指标怎么定”，这三类课值得做；讲定义、讲名词那一类，PPT 足够。
第二，做完能复用。 课件是一个网址，下学期换个班照样打开；就像装了一次投影仪，后面每个学期都在用，不是每学期重装一次。
第三，最小的版本只要两件事：左边一列要点，右边一个能点开的页面。假如你只有一个能跑的应用和一张要点清单，也够上课——先有，再谈好不好看。
兜底是备课的一部分，不是可选项。 三种兜底，成本都很低：
| 兜底做法 | 怎么做 | 什么时候用 |
|---|---|---|
| 截图版 | 把要演示的每个页面各存一张图 | 网络断了，照着截图讲流程 |
| 本地课件 | 课件文件放本机，不联网也能翻 | 教室只给投影、不给网 |
| 二维码 | 学生用自己的手机流量打开 | 教师机不行、学生机可以 |
关键动作只有一句：课前十分钟，按演示顺序全走一遍，包括拔一次网线。 这不是谨慎，这是上课的基本礼貌——就像出门前看一眼天气预报，不是怕淋雨，是不想让学生陪你淋。
把这一节做成讲课用的两屏课件：左边是逐句要点（每屏一个要点，按空格向下翻），
右边嵌入今天要演示的真实应用（工作流画布与市场看板），并给每个要点标注“此时右边应演示什么”。
要让课件直接生成并打开预览，可以点名工具：
用mcp__lesson-agent__lesson_deck把这一节的教案做成课件，再用mcp__lesson-agent__lesson_open打开给我看。
注意：工具生成的是“课件骨架”，右边那个“真实的活应用”是你在平台里已经有的页面，需要你自己把链接放进去。
| 产物 | 内容 |
|---|---|
| 两屏课件页 | 可在浏览器全屏，左要点右应用，逐句翻页 |
| 演示对照表 | 每一屏左边讲什么、右边演示什么、要点切换的时机 |
| 二维码 | 每个要演示的应用有独立链接（学生课后可自己进去看） |
| 兜底版 | 所有演示页面各存一张截图，断网时顶上 |
错误一：把截图当“双屏”。
现象：右边是张图片，学生看不出跟 PPT 有什么区别。
排错：右边必须是能操作的真实页面。做不到就退一步——把“能点开的链接”发给学生，让他们自己在手机上看。要记住：学生信的不是流程图，是它当场跑一遍。
错误二：页面里层层嵌套。
现象：课件里嵌了一个面板，面板里又嵌了一层应用，三边挤在一起，投影上看不清。
排错：并排两块，各占一半；宁可分成两个窗口，也不要套娃。
错误三：演示前没跑一遍。
现象：上课时页面打不开、要登录、要验证码。
排错：课前十分钟按演示顺序全走一遍，包括登录状态和网络。
错误四：一屏塞满要点。
现象：字小、行多，学生低头抄，不看右边。
排错：一屏一个要点，最多一行主句加一行解释。就像地铁报站——一站一停，你才知道到哪了；一口气报十站，没人记得住。
错误五：没有兜底。
现象：网络一断，整节课卡在演示环节。
排错：准备截图版，并提前试一次“只有截图能不能讲完”。
错误六：把讲稿搬进页面。
现象：课件上是大段大段的文字，你照着念。
排错：页面上放的是要点和画面，讲的是你自己的话。假如页面上的字和你要说的话一字不差，那这一页对学生就是多余的。
流程图讲“有哪几步”，活的应用讲“走这一步会发生什么”。
| 你要做的事 | 工具全名 | 一句话作用 |
|---|---|---|
| 把一节教案变成课件 | mcp__lesson-agent__lesson_deck | 出课件页面（可嵌真实应用链接） |
| 打开课件看效果 | mcp__lesson-agent__lesson_open | 本地预览，边改边看 |
| 查这一节课的底稿 | mcp__lesson-agent__lesson_merge | 多讲汇总，便于通读 |
[1] Gaskins R. Sweating Bullets: Notes about Inventing PowerPoint[M]. Vinland Books, 2012.（幻灯片软件 1987 年首发；作者为其主要设计者，书中记录了“演示工具如何反过来改变演讲内容”的观察）
[2] Mayer R E. Multimedia Learning[M]. 2nd ed. New York: Cambridge University Press, 2009.（双通道、分段与空间邻近原则：文字与对应图像靠近呈现时理解效果最好）
[3] LangGraph. LangGraph 官方文档[EB/OL]. https://langchain-ai.github.io/langgraph/.（状态图、节点与边的工程定义，含循环上限与并行汇合的处理方式）
数据与平台：本讲涉及的平台页面（可视化工作流画布、市场看板、课程课件页、教材橱窗）均在线可打开，
实测日期 2026-09-17；本讲速查表中的三个工具全名取自 lesson-agent 引擎（该引擎共 11 个工具）。
演示所用数据为样例数据或脱敏数据，非真实经营数据。