html-diagram 是一份制作自包含 HTML 关系图的 Skill。你要说明连接、顺序、状态或层级时，它先问读者应从图里看懂什么，再选表示方式。
拓扑适合组件连接，时序展示消息先后，状态图说明条件与转换，矩阵比较重复关系。主文不规定所有主题都画成方框箭头，也不因为叫图就一律选择 SVG。
先保证文字、方向和分组可读，需要时再加筛选、路径追踪或缩放。交付单个 HTML，关键样式与脚本内嵌，不依赖外部服务；装饰设计另有可选参考，本文只讲主文的信息组织。
你提供真实关系与解释目标后，宽窄屏、键盘、溢出和每个交互状态都要检查。动画与颜色不能是理解关键含义的唯一方式；本文未生成文件，所以不把原则介绍当成已完成图的验收。