技术链路讲解 · 时序图

场景模板技术讲解时序图调用链数据流交互报告浅色

适用任务

用实体生命线与消息箭头串联跨模块调用，再配合输入输出表、分流汇合说明与可展开细节，帮助读者理解一条输入如何成为最终输出。

适合: 跨模块技术链路、流式数据处理与系统协作的讲解页；时序图解释先后依赖，实际耗时须由目标项目提供。
主要风险: 逻辑时序不等于按比例计时；模块不等于独立服务，示例消息与拓扑不能当作目标项目事实。

体验意图

未标注意图；可按模板正文判断是否适用。

这个模板提供什么

复用方式: 按场景调整信息结构与交互；可直接采用默认设计，视觉风格按需另选。
结构与交互: 提供布局与组件说明。
视觉设计: 提供默认视觉参数，可按项目品牌或明确选择的风格调整。
应用后检查: 提供本场景的操作检查。

整套交互预览

1 个

示例适用范围

跨模块技术链路、流式数据处理与系统协作的讲解页；时序图解释先后依赖，实际耗时须由目标项目提供。

参照页面

从用户认可的技术链路讲解页面提炼；示例为本地编写的通用架构和合成消息。原页面链接与观察日期未保留，不能据此声称已核实来源网站。

按模板应用无需访问来源网站；需要研究未覆盖组件时，可从这些入口继续查证。

应用前了解

会改变什么: 建立全链路时序图及对应说明，按需要补充输入输出表、并列数据流和折叠细节。
使用可用横向空间；按真实路径提供切换，保持图示、正文与图例一致。
数据条件与适用限制: 提供读者问题及可核对的模块、调用或事件资料；未知环节明确保留未知，不补造链路。
若需要解释实际延迟，提供事件时间、单位与时间基准；只有顺序资料时使用逻辑时序图。

应用后的页面

主题

深绿侧栏、米白画布、白色内容表面；以颜色和线型共同区分消息与数据流。；可选：采用默认配色与系统字体、按项目品牌或所选视觉风格调整

布局 · 宽图示工作台

宽屏使用稳定侧栏目录与流式主区；只限制正文行长，图示和表格使用主区宽度。窄屏导航移到顶部，复杂图在自身容器内横向滚动。

布局 · 从全貌到细节

先展示输入到输出的全链路，再按需要解释模块输入输出、分流汇合、完成或切换语义，最后给出依据与覆盖边界。章节按读者问题调整。

组件 · 消息时序图

实体生命线与具名消息箭头表达发送方、接收方和先后依赖；用图例说明网络、进程内调用与数据流，以背景分组说明真实进程边界。显式标注纵向距离是否代表耗时。

组件 · 路径切换

存在多条需要比较的路径时，使用有选中状态的具名按钮，同时更新图示与解释文字；单路径无需增加切换。

组件 · 输入输出与汇合

表格对应模块、输入、输出及消费者；并列说明有不同用途的数据流，并明确在哪里、通过什么身份关联汇合。

组件 · 渐进展开

关键结论与限制直接可见，消息字段和长证据按需展开；保留原生展开指示、键盘焦点与完整技术文字。

项目覆盖

保留项目品牌与真实接口语义；实体数、章节、协议和交互按实际内容调整。可替换视觉风格，不把示例架构或数据作为项目要求。

应用后检查

读者能沿一条输入追踪到输出，辨认发送方、接收方和关键中间产物。
图与正文对模块、进程边界、数据流及分流汇合的说明一致，不把所有箭头误画成完全串行等待。
图旁说明是否按时间比例绘制；未观测耗时不显示为实测值，示例与项目事实可区分。
存在路径切换时，按钮选中状态、箭头与说明同步变化；折叠细节支持展开和收起。
宽窄屏下正文、图例与操作可读可达；宽图局部滚动，页面整体不横向溢出。

Prompt 模板

1 条

中文默认

## 执行方式

本 Prompt 依赖 skill web-ui-workflows（公开仓 https://github.com/lindong28/lindong-skills 的 web-ui-workflows/ 目录）。若尚未安装，先 git clone 该仓库到独立目录，取得完整 web-ui-workflows/；可放到 Claude Code 的 ~/.claude/skills/ 或 Codex 的 ~/.agents/skills/，已有同名目录不直接覆盖。无论是否已安装，本次会话都先读取该目录 SKILL.md 及下方指定工作流的正文，按其中的依赖说明准备工具并执行，不等待宿主重新发现 skill。下方占位符表示尚缺输入，先复用对话已有信息，只向用户询问仍影响任务的缺项；无需用户预先安装作者的配置。

## 任务

使用 `web-ui-workflows apply-ui-template`，按“技术链路讲解 · 时序图”模板制作或改进目标页面。

模板：technical-sequence-explainer
模板定义：https://prompts.aiplanet.live/api/webui/v3/templates/technical-sequence-explainer.json
目标仓库：[填写仓库路径]
目标页面：[填写页面 URL、路由或输出位置]
读者问题：[填写希望解释的链路与认知难点]
依据：[提供代码、文档或观测记录；可由项目上下文补全]
可选视觉风格：[可留空；指定时填写风格模板 URL]

读取当前定义与可运行示例，形成或复用本次有效设计。保留项目真实模块边界、业务含义和品牌约束；图示、输入输出表和解释文字共同回答读者问题，实体与章节按内容调整，不复制示例拓扑为项目事实。逻辑时序与按实测时间绘制的时间线必须可区分，缺少耗时数据时不编造时长。

完成适配与实现。从目标页面实际追踪输入到输出，检查宽窄屏、适用的路径切换与细节展开；应用 acceptance，分别说明事实依据、展示符合程度及未核实范围。记录实际模板来源与内容摘要、项目覆盖和用户反馈。

审核现有页面

只审核，不修改

## 执行方式

本 Prompt 依赖 skill web-ui-workflows（公开仓 https://github.com/lindong28/lindong-skills 的 web-ui-workflows/ 目录）。若尚未安装，先 git clone 该仓库到独立目录，取得完整 web-ui-workflows/；可放到 Claude Code 的 ~/.claude/skills/ 或 Codex 的 ~/.agents/skills/，已有同名目录不直接覆盖。无论是否已安装，本次会话都先读取该目录 SKILL.md 及下方指定工作流的正文，按其中的依赖说明准备工具并执行，不等待宿主重新发现 skill。下方占位符表示尚缺输入，先复用对话已有信息，只向用户询问仍影响任务的缺项；无需用户预先安装作者的配置。

## 任务

使用 `web-ui-workflows review-ui`，按“技术链路讲解 · 时序图”模板审核目标页面。

模板：technical-sequence-explainer
模板定义：https://prompts.aiplanet.live/api/webui/v3/templates/technical-sequence-explainer.json
目标仓库：[填写仓库路径]
目标页面：[填写页面 URL、路由或输出位置]
读者问题：[填写希望解释的链路与认知难点]
依据：[提供代码、文档或观测记录；可由项目上下文补全]
可选视觉风格：[可留空；指定时填写风格模板 URL]

读取当前定义与可运行示例，形成或复用本次有效设计。保留项目真实模块边界、业务含义和品牌约束；图示、输入输出表和解释文字共同回答读者问题，实体与章节按内容调整，不复制示例拓扑为项目事实。逻辑时序与按实测时间绘制的时间线必须可区分，缺少耗时数据时不编造时长。

本次只审核，不修改。从目标页面实际追踪输入到输出，检查宽窄屏、适用的路径切换与细节展开；应用 acceptance，分别说明事实依据、展示符合程度及未核实范围。记录实际模板来源与内容摘要、项目覆盖和用户反馈。