HTML Diagram 是一个直接调用的专门技能，目标是构建最小的可视化模型，让关系比纯文字更易理解。它强调图表的标注和视觉语言应与用户项目及主题匹配，而不是把所有主题都塞进同样的 SVG 方框和箭头。
用途：先识别读者需要回答的问题，再选择合适图示形式，例如拓扑用于组件与连接、时序用于按时间排序的消息、流程用于步骤分支与交接、状态用于转换与条件、层级用于包含或归属、时间线用于随时间变化、矩阵用于重复关系，以及在量级重要时使用定量视图。随后决定哪些内容需同时可见、哪些可按需展示；若更简单形式能表达相同含义，应优先采用。
主要能力：根据信息和规模选用 HTML 与 CSS、SVG、Canvas 或 WebGL 渲染，不因输出是图表就默认用 SVG。在增加交互前，优先保证标签、分组、方向与连接线清晰可读；读者需比较状态或步骤时使用稳定节点位置；尽量减少边交叉和歧义箭头；对有意宽大的画布使用带边界的平移或滚动区域；仅在标注无法自解释时使用图例。仅在有助于回答既定问题时，才添加排序、筛选、路径追踪、平移缩放或动画，并保持浮层可关闭、控件可用键盘访问、动效兼容 prefers-reduced-motion。若 design-artifact 可用，可参考其了解图表周边构图与视觉风格，但所选图表语法、标签可读性和关系表达优先于装饰处理。
使用方式：交付一个自包含 HTML 文件，必要 CSS 与 JavaScript 内联，无需构建步骤或外部服务。使用可访问的文本替代方案，确保重要含义不依赖动画或颜色单独传达。在宽和窄两种宽度下检查结果，核对标签碰撞、节点裁剪、边路由、阅读顺序、键盘操作、溢出以及每种交互状态。返回绝对路径、所选图表形式以及主要简化或假设。
适用场景：需要把组件关系、消息时序、流程分支、状态转换、层级归属、时间变化、重复关系或数量对比做成独立 HTML 图表，并希望直接打开查看或嵌入使用。
限制：资料未提供具体收费、价格、平台支持范围或性能上限；也未提供安装命令或代码示例，相关细节暂未说明。