html-diagram

HTML 图表

构建最精简的可视化模型，让它比单靠文字更容易说明关系。根据用户的项目和主题，匹配相应的符号和视觉语言。不要强行把每个主题都塞进相同的 SVG 方框和箭头中。

选择合适的模型

明确读者需要回答的问题，然后选择相应形式：

• 用拓扑图表示组件及其连接；
• 用时序图表示按时间排列的消息；
• 用流程图表示步骤、分支和交接；
• 用状态图表示转换和条件；
• 用层级图表示包含关系或所有权；
• 用时间线表示随时间的变化；
• 用矩阵表示重复出现的关系；
• 当数值大小很重要时，使用定量视图。

确定哪些内容必须同时保持可见，哪些可以按需展示。如果更简单的形式能表达相同含义，就采用更简单的形式。

选择渲染方式

根据内容和规模选择 HTML 和 CSS、SVG、Canvas 或 WebGL。不要仅仅因为产物是图表就使用 SVG。

• 先确保标签、分组、方向和连接线清晰易读，再添加交互。
• 当读者需要比较状态或步骤时，保持节点位置稳定。
• 尽量减少边线交叉和含义不明确的箭头。
• 将有意设置为宽幅的画布放在可平移或滚动的区域内。
• 仅在符号含义不言自明时才省略图例。

只有在有助于回答既定问题时，才添加顺序展示、筛选、路径追踪、平移和缩放或动画。确保覆盖层可关闭、控件支持键盘操作，并且动画符合 prefers-reduced-motion。

如果可以使用 design-artifact，请阅读它，了解图表周围的构图和视觉风格。所选图表语法、标签可读性和关系应优先于装饰效果。

构建和验证

交付一个独立的 HTML 文件，并将必要的 CSS 和 JavaScript 内联。不需要构建步骤或外部服务。提供无障碍文本替代，并确保无需动画或仅依赖颜色也能理解重要含义。

在宽屏和窄屏尺寸下检查结果。检查标签是否碰撞、节点是否被裁切、边线路径、阅读顺序、键盘操作、溢出情况以及每种交互状态。

返回绝对路径、所选图表形式，以及主要的简化处理或假设。