html-line-svg

用途：把原内容中的对象、关系、状态与阅读顺序，重新编码为克制的技术文档式框线图，先保证图能准确复述教学判断，再处理构图与 SVG 细节。关系密集型图可先用 Mermaid 写可执行的关系结构规格。流程上先读取目标内容、现有草图与承载它的 HTML/CSS 和可用空间，写语义规格（teaching_claim、对象角色、关系、状态、可见标签、布局约束、阅读顺序）；节点关系为主时补 Mermaid；随后生成自包含的线框图生成提示词。选图型按语义决定连接方式：主流程用蓝色实线单向箭头，非主流程用蓝色虚线，双向同步用双向箭头，无方向关联用黑色实线，包含关系用嵌套框，状态变化尽量不动位置只改线型或标签。视觉遵循纯白极简：白底、黑框线、蓝仅表方向链接、橙表提示与指示线、红表阻碍，虚线表未完成或候选状态，等宽字表机器可读字段，保持轻微圆角与清晰线宽层级，禁用渐变、阴影、滤镜和装饰。SVG 使用稳定 viewBox（常从 0 0 600 250 起步），用 g 分组，文字保留为 text，添加 role="img"、aria-labelledby、唯一 ID 的 title 与 desc，线条用 vector-effect: non-scaling-stroke。嵌入 HTML 时容器 width: 100%、SVG width: 100%、height: auto。默认用标准浏览器生成同名 .preview.png，提示词另存同名 .prompt.md。验证含语义、结构脚本 node <html-line-svg-skill-dir>/scripts/validate-line-svg.mjs、几何、视觉、连线可追踪性、可访问性、PNG 一致性与项目集成。交付含 SVG、PNG 预览、线框图生成提示词、交付摘要和验证结果。限制：无法从材料确认的关系不得画成箭头；交叉线过多或三层以上嵌套应先拆图；不要机械照搬 Mermaid 自动布局，也不要把文字转路径或使用 foreignObject。