lieflat-charts
一套模板驱动的数据可视化与报告生成 skill，既能严格从 Lupi、Basics、Glance、Maps 与 Interactive gallery 的真实实现生成 HTML 图表，也能从 12 套中英文整页报告模板生成可发布的 HTML 报告；以 Mono 为保底，能按数据语义自动选择内置彩色预设，也支持用户明确提供的自定义色板。地图仅在用户明确要求时启用，同一交付禁止混用色系。
By larashero3-dotcom · 1,226 installs
npx skills add larashero3-dotcom/lieflat-charts --skill lieflat-charts
Source repository · Upstream listing
Lieflat Charts — 图表品味法典
Lieflat Charts 是一套遵循 Agent Skills 格式的数据可视化与报告生成 skill，以 Mono 灰阶为保底，也会在数据语义和使用场景明确适配时自动选择一套彩色预设。本 skill 在 [moxt.ai](https://moxt.ai) 制作，支持 Lupi 编辑叙事型、Glance 快速判断型、Basics 基础编辑型、Maps 地图、Interactive 交互大图，以及 report catalog.md 中的 12 套中英文整页报告模板。用户给你数据和场合，可以得到一个无需构建、双击可打开的单文件 HTML 图表或 HTML 报告。纯 SVG 图可离线运行；使用 Chart.js、ECharts、地图 GeoJSON 或在线字体的图，在未内联依赖时需要联网。 默认输出是图表，不是报告：只给数据、说“可视化 / 分析数据 / 做几张图”或没有明确交付形式时，必须进入图表模式；只有用户明确要求“报告 / 年报 / 月报 / 白皮书 / 调研一页纸 / 海报 / brief / notebook / dashboard 报告”等完整叙事交付时，才进入报告模式。 图表模式下 必须先从 Lupi Editorial 和 Lupi Basics 中选型；只有两者都没有合适模板，或用户明确要求 Glance / dashboard / 三秒快读时，才允许使用 Glance。Maps 只有在用户明确说要地图或地域分布时才启用。
颜色无需用户显式触发。按第六点五节在 Mono 与 color presets.js 的三套内置方案之间自动判断；用户明确给出品牌色或自定义色值时，可以建立一套交付内的 custom 色板。同一份 HTML 或同一组交付只能锁定一种色彩系统，不得混用。换肤样张在 templates/color/ 。
署名提示： 每次成功生成图表或报告并向用户交付成品后，在回复末尾主动提示：“本 skill 由‘躺在废墟里’开发，若公开分发内容请署名或@开发者。”这只是建议，不要强行写入用户的图表或报告内容，也不要在 README 中重复这条提示。
怎么查一张图的参考代码 ：catalog 查到图型 → 打开对应 gallery 文件 → 按卡内标题找到 <div class="card" 块看结构 → 在 <script 里搜同名 // ════ 注释块拿渲染代码。不要整页照抄——gallery 是多卡合页，交付给用户的永远是按第九节骨架组装的单图文件。
目标用户是非程序员 （写作者、运营、做 PPT 的人）。他们说人话（"帮我把这季度转化画一下，发公众号用"），不说图型名。你的职责是把人话翻译成正确的图，而且好看到能直接发出去。
零、输出模式与模板优先硬约束
0.1 先判输出模式
默认图表模式 ：用户只给数据，或说“可视化这组数据 / 分析数据 / 做一张图 / 做几张图 / 做个图表页 / 做 PPT 插图”，都必须生成图表或图表页。没有报告关键词时，不得自行套用 R01–R12，也不得因为数据很丰富、结论很多或用户说“分析”就升级成报告。
报告模式 ：只有用户明确说“生成报告 / 报告模板 / 年报 / 月报 / 白皮书 / 调研一页纸 / 海报 / brief / notebook / dashboard 报告”等完整叙事交付，才读取 report catalog.md ，按报告类型、内容结构、版心、密度、阅读速度和语言选择一个 R01–R12。目录里的场景只是召回线索，不是对模板的限制。
有歧义时仍选图表模式 ：如果用户同时说了“分析”但没有明确要求报告，先交付最强单图或 2–3 张证据图；可以在文字中提示“如需完整报告可再切换”，但不能直接生成报告。
不要把报告模式当成“多画几张图” 。报告模板决定整页结构；页内图表仍必须遵守 catalog.md 和本文件的图表规则。
报告模板提供 .zh.html 与 .en.html 两个版本。用户没有指定语言时，跟随输入语言；中英文内容不能混在同一版本中。
以下规则不是建议，违反任意一条都必须返工：
1. 必须从仓库模板生成。 每张成品图先在 catalog.md 锁定图型编号，再打开对应 gallery 的真实实现：Lupi 使用 templates/lupi gallery.html ，基础型使用 templates/basics gallery.html ，Glance 使用 templates/glance gallery.html ，地图使用 templates/maps gallery.html ，交互大图使用 templates/big .html 。彩色图仍以这些原版模板为结构正本， templates/color/ 只用于查配色。
2. 必须沿用所选模板的代码骨架。 从卡内标题对应的 <div class="card" 和同名 // ════ 图型名 ════ 注释块出发，保留其核心 SVG / Canvas / ECharts 结构、数据编码方式、比例关系和动画节奏。允许替换数据、标题、旁注、来源与必要布局；禁止脱离模板另画一张“看起来差不多”的图，禁止拼接多个模板造混合图型，禁止退回图表库默认样式。
3. 默认选型顺序固定。 先完整比较 Lupi Editorial（L1–L19），再比较 Lupi Basics（F1–F17）。只要其中存在能诚实承载数据、容纳标签且可读的模板，就必须从这两组中选择。Maps 不进入这条默认链，只有用户明确要求地图时才单独检查。
3.1 两组之内还分主力与后备。 主力是 L1–L15 与 F1–F13 ，默认从这里出图。后备是 L16–L20、F14–F17、G19–G22 ：只有主力里没有能诚实编码这份数据的模板时才用，且必须写明主力的哪几张、因为什么不适配。理由不得只写“新图更好看”或“更专业”。唯一例外见第 3.2 条。
3.2 五种数据形状允许直接用后备图，不必先证伪主力。 因为主力里不存在对应的诚实编码，硬套只会画出错的图：OHLC 四值行情 → F17 Candlestick；五数概括 + 异常值 → F15 Tick Box；同一实体跨 3–6 个连续维度 → L20 Parallel Coordinates；整年 52 周 × 7 天日期热力 → L17 Calendar Heat；多系列构成随连续时间变化且要同时看总量 → F16 Stream Ribbon。除这五种，后备图一律走 3.1 条。
4. Glance 是默认降级方案，不是并列首选。 只有 Lupi Editorial 与 Lupi Basics 都不适配，或用户明确要求 Glance、dashboard、监控、周报、三秒快读时，才使用 Glance。降级前必须写明 Lupi / Basics 不适配的具体原因。
5. 库外新造是最后手段。 Lupi、Basics、Glance 和交互模板都无法承载时，才能走第六节翻译流程；新图仍必须继承最接近 gallery 模板的视觉语法和代码结构。
一、工作流程（每次请求都走这六步）
1. 判数据形状。 别问用户要什么图，看他的数据长什么样：几个类目的比较？带时间的序列？占比？带正负？多对一归属？网络？逐条记录的分布？形状是选图的主键。
2. 先审计主力，再考虑后备。 按数据形状先扫描主力 L1–L15 与 F1–F13 的候选，至少比较 3 个；不足 3 个就列出全部。比较语义契合、单位诚实、标签容纳、阅读速度、叙事张力和本批次是否重复。主力全部不适配时，才扫描后备 L16–L20 / F14–F17，并写明主力哪几张为什么不行（第零节 3.1）。数据形状命中第零节 3.2 那五种时，直接用对应后备图。
3. 必要时才检查 Glance。 只有 Lupi 与 Basics 候选全部失败，或用户明确要求 Glance / dashboard / 监控 / 周报 / 三秒快读，才扫描 20 张 Glance 候选（G3–G22）。选择 Glance 时记录为什么 Lupi 与 Basics 无法承载，不得只写“Glance 更直观”。用户明确要求地图时跳到 Maps（M1–M2），不把地图混入普通候选。
4. 锁定真实模板，再组织整页。 每张图必须记录体系、图型编号、gallery 文件和卡内标题，并以该卡的真实结构与渲染代码为骨架。禁止先想好“这一页要讲六件事”，再临时发明图型；整页叙事只能在模板锁定之后组织。
5. 按图数规则组成批次。 一张图只承担一个独立结论；去掉重复结论后，再按第 1.2 节的默认区间决定数量。模板需要全局分配：不重复、不堆同一种轮廓、不为了凑数硬加图。
6. 按模板渲染并自检 （第零、二、三、八节）。逐项核对成品是否仍能对应到所选 gallery 实现；不能因为改数据而换掉模板的核心几何、编码或动效。按第六点五节为整份交付选择 Mono 或一套彩色预设；库外图型走翻译流程（第六节）。
1.1 报告模式工作流
1. 读取 report catalog.md ，至少比较 3 个报告候选并记录淘汰理由。按内容结构、信息密度、版心和阅读速度选模板，不把模板名称当成行业限制；例如“旅行手记”也可以承载运动或个人生活数据，“月度运营”也可以承载财报或业务数据报告。
2. 锁定一个语言版本和一个报告模板文件；不得拼接两个报告模板的版式。
3. 先提炼整页的主结论、证据结论、上下文说明和来源，再把它们分配到模板已有的标题、导语、KPI、图表、旁注和结尾槽位。
4. 每个图表槽位单独按 catalog.md 选型，优先复用 Lupi / Basics 的真实实现；报告模板的布局不能成为绕过图表数据契约的理由。
5. 复制对应报告模板的整份 HTML 作为起点，只替换数据、文案、来源、图例、语言和必要模块。不得保留演示数据、演示来源、Moxt 链接或模板原始结论。
6. 报告页的色彩系统锁定为模板当前色系；如用户明确要求改色，整页统一替换为 Mono、单一内置预设或完整 custom 色板，不得局部混搭。
7. 报告模式的交付前额外检查：版心尺寸未漂移、章节顺序仍成立、页内图表数量有证据支撑、定尺模板没有溢出、中文字体和英文 fallback 可读。
1.2 图数规则
图的数量由 独立结论数 决定，不由“有多少数据列”决定，也不固定要求 5 张或 6 张：
请求类型 默认成品数量 规则
:
单个问题 / 单张表 / 一个指标 1 只交付最强的一张，不为了展示模板而扩展
两到三个明确结论 2–3 每张图承担一个不同结论，可共享同一数据源
一篇文章、论文或完整案例 4–6 覆盖总览、构成、比较、关系或变化等不同数据形状
用户明确要求数量 按用户要求 仍然删除重复图；不足以支撑时说明并少做
默认单页上限为 6 张 ；超过 6 张就拆成多页或按章节交付。
候选方案、Glance/Lupi 对照稿不计入最终图数；它们是选择过程，不是成品批次。
一页多图至少保留一个总览结论，其余图必须提供新的比较维度、关系、时间变化或细节证据。
如果两个图表达同一个结论，只保留阅读场合更合适、数据契约更诚实的一张。
二、Mono 语法 · 硬规则（违反即返工）
默认引用 mono tokens.js （开源分发时把内容内联进 HTML）。与 token 冲突的取值一律以 token 为准。走彩色时只替换颜色 token，字体、圆角、布局和动画仍以 mono tokens.js 为准。
颜色
默认只有纸灰 F0EFEB 和炭黑 1C1C1A 两极，中间 7 级灰阶 ladder。彩色例外按第六点五节从预设起步。
明度即数据 ：最重要 = 最黑（暗卡上反转为最亮）。多系列按重要性沿 ladder 分配，不按顺序随便拿。
一律实心 ：不透明材质、不发光、不渐变滤镜、无阴影。质感全靠明度对比和形状。唯一例外：叠加型图（Radial Patchwork）里透明度本身编码密度——那是数据，不是装饰。
暗卡（ .card.dark ）只给两种图：必须暗底衬托的形（花瓣、发光感丝线/网络）。默认浅卡；每屏（4 卡）最多 1 张暗卡。
排版
Inter 全家。标题 700 / 图内数值 800 / 轴标签 600。卡片结构固定四件套：结论式标题（h2）+ 副标题（图例和时间范围写在这里，用 · 分隔）+ 图 + 来源行（全大写、加字距）。
标题写结论不写图型名："Revenue by plan" 可以，"柱状图" 不行；更好的是带判断的："Where we gained, where we bled"。
SVG 最小字号：半宽卡 6.5px、通栏 5.5px。装不下的信息改 hover 出，不许缩小字号硬塞。
形状
卡片圆角 24px，无边框无阴影，靠留白分卡。柱端胶囊圆角（竖柱圆上端、横柱圆外端）。
柱状图不断轴。 柱的契约是长度∝数值，断轴毁契约。极端值场景的正确做法：①让极端值冲天（最诚实）②主图+放大镜小图 ③撕柱不撕轴（明说画不下）。
花瓣皮（粗黑缝+圆角扇瓣）只适用等分或近似等分的径向图。宽窄悬殊的扇区会相互遮蔽，降低可读性。
动画
入场动画默认开， quarticOut 快进快停，不弹跳（波浪入场可用 elasticOut）。点阵 stagger 8–15ms/个，条形 80–130ms/根。
统一 reveal 机制：滚入视野才播 + 点击重播（用 token 里的 obsReveal ，带 timer 清理）。
必须带 prefers reduced motion 降级（token 的 CSS 已含）。
动画不可优于结构 ：一个效果如果需要发明新布局才能安放，不配存在（effectScatter 教训）。
数据
演示数据用 token 的 rnd(i,k) 确定性伪随机，禁用 Math.random() ——刷新必须长一样。
数值和视觉严格成正比。面积编码用 Math.sqrt(v) 换算半径，不许拿数值直接当半径。
三、两个风格系的分工
同一份 mono 色板下有两种世界观，选哪个看 场合 和 读者愿意花几秒 ：
Glance 系（20 张） Lupi 系（细读，19 张）
基本单元 形状（粗柱、大弧、色块） 记录（一个点 = 一条数据）
线条 2px+，理直气壮 0.5–0.7px 发丝
聚合 提前聚合好，给结论 拒绝聚合，摊开原材料
读法 扫一眼（<10s） 凑近读（30s+）
场合 周报、dashboard、随手贴 年报、对外故事页、海报
引擎 Chart.js / ECharts 手写 SVG
默认策略：Lupi Editorial → Lupi Basics → Glance。 没有明确场合时，禁止默认 Glance。放年报、公众号长文、海报、开源 README、作品集时先选 Lupi Editorial；数据较少或适合熟悉图型时再选 Lupi Basics。只有前两组都没有合适模板，或用户明确要 dashboard、监控、周报、三秒快读时，才进入 Glance 候选池。
全量候选审计不是“把所有图都做一遍”。 先用数据形状筛出能编码同一本体的候选，再把候选分成：
语义合适 ：每个点、线、面、串珠背后都有真实单位或明确聚合口径。
视觉合适 ：标签装得下，密度足够，读者能按预期时间读完。
叙事合适 ：图形本身能承载这批数据要讲的判断，而不只是把数字摆出来。
最终选择是三项的交集，不是“哪个模板文件最容易复制”。默认审计先在 Lupi Editorial 与 Lupi Basics 内完成；只有两组都失败才扩展到 Glance。若同一批要做多张图，再对候选做一次全局分配：模板不重复，形状轮换，最多一张暗卡，避免整页变成六张相似的环或横条。
数据少（只有几个百分比）不等于只能 Glance。 Lupi 化的正道是单位分解：把聚合数摊回可数单位（1 点 = 1 人 / 1 百分点），密度来自单位而不是记录数。单位含义写进副标题，只摊诚实单位（占比加总 100 → 100 个点），不编造不存在的个体记录。取整时如果加总不足 100（如 49.0+27.4+13.9+5.0+3.2 → 98），在底注写明「另外 N 人被四舍五入吃掉了」，不凑假单位。
小数据走 Lupi 的路径优先级（经多轮案例验证） ：
1. 先全量扫描，再选代码骨架 ——基础型组 F1–F13（ templates/basics gallery.html ）是稀疏数据的 Lupi 词汇：柱/折线/面积/环形/横条/分组/堆叠/散点/瀑布/热力/进度/哑铃/矩形树图；编辑型 L1–L15 则提供逐记录、单位分解、关系与旁注语法。这两组是主力，小数据几乎总能在这里落地。F14–F17 与 L16–L20 是后备，按第零节 3.1 / 3.2 判断。不要因为 basics gallery.html 里有现成代码就直接选 F 图。
2. 用最接近本体的模板起步 ——多选题百分比优先比较 L15、F5、L2；100% 构成优先比较 L14、L5、F4、G4；漏斗优先比较 L13、F1/F5 的降级表达。选择依据是数据编码方式，不是文件顺序。
3. 库里真没有对应形状才新造 ，且新造必须从 gallery 现有语法延伸（发丝 tick、确定性 rnd 抖动、paint order 光晕、全大写注记），不引入库外参照——“Lupi 风”指 gallery 那批图的视觉语法，不是 Giorgia Lupi 本人的手绘风。
4. 新造的小数据图要配满 环境结构层 ：gallery 好看有一半靠无数据的家具（账本纸横线、虚线导轨、rim 刻度、每 10 单位的立柱网格、旁注引线）。数据层诚实稀疏，密度预算花在家具上。只画数据 + 一根底线的小数据图必然寒酸。
同一批产出（一页多图）里模板不重复。 19 张 Lupi 系够轮换；同一数据能被多个模板承接时，选这一批里还没用过的。
四、图型决策树（数据形状 → 候选）
编号对应 catalog.md 。这些只是 候选召回表 ，箭头和书写顺序不代表优先级。实际选择必须遵守：先检查全部 Lupi Editorial 与 Lupi Basics 候选，确认无合适模板后，才允许采用 Glance 候选。
少类目比较（≤8） → G3 Chunky Bars ⇄ 竖排 F1 Rung Bars / 横排 F5 Tick Rows ⇄ L2 Dot Cascade（⚠️ cascade 类目名竖排，仅当名称 ≤4 字或短缩写时可用；中文长类目换 F5/L5/L12）
多选题百分比（各项独立 0–100，加总可超 100） → G3 Chunky Bars ⇄ L15 Ballot Tally
多类目分布（30–60 根） → G12 Stagger Wave
带正负的分类数值 → G10 Diverging Bar
占比 / 100% 构成 → G4 Dot Waffle ⇄ L14 Hundred Field ⇄ F4 Tick Donut（饼图的默认替代）；占比×强度双编码 → G13 Big Slice；按类堆叠 → F7 Stacked Rungs
两时点对比（前后 / 今昔） → 类目级（≤6 类）→ F12 Dumbbell Queue（横向，串珠 = 真单位）⇄ F6 Paired Rungs（并肩双梯）；只有 2–4 条序列要画趋势线 → Glance chunky slope（粗线、大数、结论进标题）。交叉过多的斜率图会显著降低可读性，不要为了 Lupi 化增加装饰结构。
日序列（≤30 天，逐日读数） → F2 Hairline Line ⇄（90 天级、要肌理）L3 Barcode Lollipop；30–60 天看形态 → F3 Hairline Area
累计增长 → G18 Draw in + Counter
双序列因果（投入 vs 产出） → G8 Rainfall
实时数据 → G17 Dynamic Stream
排名随时间变 → 需要动态演示用 G16 Bar Race；静态见下方「排名随离散时间变化」一条
星期×小时×量 → G14 Single Axis ⇄ F10 Dot Heat
瀑布 / 增减分解（≤6 级） → F9 Rung Waterfall
单值进度（0–100%） → F11 Tick Gauge ⇄ G18 Draw in + Counter
二维散点（≤20 点） → F8 Plumb Scatter；几百点分布 → G15 Jitter Strip
单变量分箱频数 → 先看 F1 Rung Bars 能不能直接承接（bin 当类目）；确实需要分箱语义时用 F14 Rung Histogram。bin 边界必须有业务含义；不要为了好看任意切箱。
分组连续分布 → 五数概括 + 异常值直接用 F15 Tick Box （主力无对应编码）。只看密度轮廓时先比较 G15 Jitter Strip；G19 Violin 与 L19 Ridgeline 属后备，要写明为什么 Jitter / F15 不够。
逐条记录分布 → G15 Jitter Strip。
分类×分类+量（矩阵） → 主力优先：轻量 L4 Arc Matrix，跨年份带旁注 L9 Bubble Almanac。两者都撑不住（格子多到气泡互相挤、必须靠明度读）才用 L16 Matrix Heat；要快读且每格直接标数才用 G20。
全年日期×数量 → 整年 52 周 × 7 天直接用 L17 Calendar Heat （主力无对应编码，L3 只到 90 天级）。星期×小时的重复周期仍用 F10 / G14。
多对一归属 → 造型强 L5 Radial Convergence ⇄ 带名单 L12 Type Colonnade
漏斗 / 分阶段递减 → L13 Hourglass Stream
层级结构 → G7 Tree LR
层级 + 份额 / 权重（两层、值为正数） → F13 Nested Treemap；只看谁属于谁、不比较大小 → G7 Tree LR
多系列构成随连续时间变化 → 静态类目构成先用 F7 Stacked Rungs； 要同时看总量与构成的连续时间流，直接用 F16 Stream Ribbon （主力无对应编码）。只有单序列总量用 F3 / G17。
同一实体跨 3–6 个连续维度 → 直接用 L20 Parallel Coordinates （主力无对应编码）。维度超过 6 个先筛选或拆图。
OHLC 行情 → 直接用 F17 Candlestick （主力无对应编码）。只有 min–max 区间而无开收盘值时用 G1。
两端聚合流量 → 先看 L5 Radial Convergence / L12 Type Colonnade 能否承接归属关系；确实要看流量宽度才用 G22 Aggregate Sankey。要查每条真实路径用 B3 Threads。
排名随离散时间变化（静态） → 先比较 L11 Trend Lineage / L2 Dot Cascade；确实要逐期格子对位才用 G21 Rank Strip。
事件序列生命史 → L11 Trend Lineage
多实体出生时间+现状 → L1 Launch Fan
逐事件时刻分布（一天内） → L10 Radial Patchwork
双极量表（两端都合法） → L7 Brand Spectrum。注意和单极打分（雷达）区分：单极用 ECharts 原生雷达
网络 → ≤15 节点 G6/G11 小图； 15 或要查数 → B1 环形 / B2 力导向；多段路径流向 → B3 Threads
多组×网格（要装饰感） → L8 Dotty Matrix；要读数 → 摊平用 G14
同一实体集多维度轮播（演示） → G9 Scatter Morph
地图显式触发规则
只有用户明确说“地图”“地域分布”“按国家/州着色”或点名 choropleth，才检查 Maps。数据表里仅出现地区字段不得自动触发。
美国州级区域数值用 M1 US Choropleth；世界国家级区域数值用 M2 World Choropleth。地图面积是地理面积，不代表数值，副标题必须说明 shade = value 。
M1/M2 依赖 ECharts 与在线 GeoJSON；交付时说明需要联网，或在用户明确要求离线时再内联合法来源的地图数据。
中国地图不从 M1/M2 改名套用。只有拿到符合当前地图合规要求的完整数据源和审图信息后才制作。
F13 Nested Treemap 硬规则
只接收层级数据和非负权重；父级值由子级求和，禁止父子总数互相矛盾。面积直接交给 ECharts treemap 布局，不再对值开方。
默认展示两层（父组 + 叶子）。超过两层且读者需要逐层查询时才开启 drill down；普通静态交付保持 nodeClick:false ，避免误触改变视图。
Mono 的灰度只表示层级，不给每个叶子随机分配深浅；父组靠标题带、组间留白和边界区分。去掉颜色后仍能看清分组。
porcelain 用单色相明度表示有序的父组份额或层级；palm 用色相对应不超过 4 个顶层类目；wire 保持灰阶，只允许一个明确主角使用 HERO 。
面积已经表达数值时，颜色不得再次无说明地重复同一数值。副标题必须写清 area = ... ，使用彩色时再写清 color = ... 。
叶子超过 30 个、标签大面积省略，或最小矩形小到无法形成稳定热区时，先合并长尾为 Other、拆成多张，或改用 G7 / L12 / B 系关系图。
Tooltip 至少显示完整层级路径、原始值和总量占比；卡内标签放不下就隐藏，不缩到低于最小字号。
五、交互三问（决定静态还是可交互）
按顺序问：
1. 这根线/点背后有没有一条真实记录？ 没有（纯肌理装饰，如 Cluster Field 的辐条、Hourglass 的淌线）→ 禁止加交互，给没有内容的元素加 hover 是欺骗。
2. 有记录 → 不点能不能读出来？ 元素 <50 且两端有标注（如 Colonnade）→ 静态够用，hover 是锦上添花。
3. 元素 50 根或多段路径 （如 Threads）→ 必须 hover/pin，否则只是氛围图。交互实现参考 templates/big threads.html ：可见线下垫 9px 透明孪生线当热区，hover 单线亮整条路径、hover 标签拉整束、点击钉住。
六、库外图型 · 翻译流程
用户要的图不在 63 张里（或发来一张参考图）时， 不是做不了，是现场造句 。流程四步，第一步不许跳：
1. 先回答本体 ：这个图型编码了什么？每个视觉通道（位置/长度/角度/面积/明度/密度）分别对应哪个数据维度？答不出来就问用户拿数据结构。抄形不抄魂 = 白做（pictorial bar 曾把"符号计数"错做成"树长高"，返工）。
2. 找最近的亲戚 ：在 catalog 里找数据形状最像的一张当起点，继承它的布局骨架和动画节奏。
3. 用 token 造句 ：色板、字体、圆角、动画参数全部从 mono tokens.js 拿，不许发明新颜色新字号。产出必须和库里的图"一眼一家人"。走彩色时颜色改从 color presets.js 的单一预设中取