| name | lightest-inline-chart |
| skill_id | chart_visualization_skill |
| controlled | true |
| description | 当用户只要在对话里快速展示趋势/占比示意、流程图、思维导图或交互 HTML 演示(输出 graph/vega-lite/html/mindmap/mermaid 代码块),且不需要 CSV 精确数字或研报 Exhibit 时使用。**触发**:对话里画图、graph、vega-lite、更好看的图表、mermaid、mindmap、流程图示意、HTML 演示块。**加载**:`skills_fetch(skill_ids=["chart_visualization_skill"])` → read `references/inline-formats.md`;fetch 后直接输出代码块。**勿用**:CSV Exhibit、研报精确数据图 → `lightest_data_viz_skill`;CSV/Excel→matplotlib → `lightest_data_viz_skill`;Typst 成稿 figure → `lightest_typst_report_skill`。 |
| references | ["references/inline-formats.md"] |
LighTest 对话内联可视化
在 AI 回复正文里直接输出 fenced 代码块,前端自动渲染;不要为这类图调用 chart_visualization 以外的画图工具,也不要先问「要不要画图」。
连接本地项目时,本目录同步到 .lightest/skills/lightest-inline-chart/;不在 skills.ts 注册(由 chart_visualization_skill 受控加载)。
与其它技能的分工
| 技能 | 何时用 |
|---|
| 本技能 | 对话内 graph / vega-lite / mermaid / mindmap / html 块;示意、结构、轻量交互 |
lightest_data_viz_skill | CSV/Excel 真实数据 → matplotlib/seaborn → Typst/Word/研报 Exhibit |
lightest_typst_report_skill | 成稿 Typst 里的 #figure、Fletcher 架构图、三线表 |
开源 optional lightest_data_analysis_skill | EDA、检验、Findings(无配图要求时) |
强制工作流(skills_fetch 之后)
- 读
references/inline-formats.md(字段、示例、能力边界、禁止项的 SSoT)。
- 判块类型:用下文「任务路由」选
graph / vega-lite / mermaid / mindmap / html 之一(可多张,但每张只承载一个结论)。
- 写代码块:围栏语言与类型一致;块内禁止
<Ref...>;标题/轴/节点语言与当前回答一致。
- 数据诚实:数值只来自用户原文、附件、或本轮已
read 的结果;无数据时用定性标签 + 占位比例或明确写「示意,非实测」,禁止编造精确统计量填进 vega-lite / graph。
- 自检:对照文末「交付验收」;流程/架构类再核对「文字里的关系是否都有边」。
任务路由(用户原话 → 读什么 / 用什么块)
| 用户大致在说 | 优先块 | 在 inline-formats.md 读 |
|---|
| 趋势、对比、占比、甘特、时间线、雷达能力 | graph(type 必填) | §一 数据图表 |
| 更好看、研报风、分面、layer、tooltip、分组柱 | vega-lite | §二 Vega-Lite |
| 多维雷达对比 | graph type: "radar"(勿用 vega-lite 画雷达) | §一 + §二 能力边界 |
| 流程、决策、状态机、序列、ER | mermaid | §五 Mermaid |
| 论文结构、知识拆解、层级大纲 | mindmap(# 标题层级,禁空格缩进) | §四 思维导图 |
| 动画演示、小工具、Canvas 原理示意 | html(自包含,无 CDN) | §三 HTML |
| 基于当前文档画流程/关系图 | mermaid + 仅用上下文实体 | §五 事实锚定 |
| 有 CSV/Excel 要精确出图进报告 | 勿用本技能 → lightest_data_viz_skill | — |
五种块类型速选
| 块 | 围栏 | 典型场景 | 勿用于 |
|---|
| graph | ```graph | 折线/柱/饼/雷达/甘特/时间线等 JSON | 分面统计图、极坐标雷达 |
| vega-lite | ```vega-lite | 分组柱、layer 折线+标签、facet、arc 环图 | 雷达、桑基、地图 |
| mermaid | ```mermaid | flowchart、sequence、state、ER | 静态层级大纲 |
| mindmap | ```mindmap | #~###### 层级知识图 | 条件分支、顺序流程 |
| html | ```html | 交互/动画/小原型 | 纯数字图表(用 graph) |
字段级 JSON、长示例、美学基线、Vega 分面尺寸禁忌 → 只查 references/inline-formats.md,不要在 SKILL 里复制全文。
示例 A:用户要「季度销量趋势示意」
用户:帮我在对话里画一下四个季度销量上涨的趋势,不用读文件。
Agent:回复简短说明 + 一块 graph(无真实 CSV 时可用 round 示意数,并在句中标注「示意数据」):
{
"type": "line",
"title": "季度销量趋势(示意)",
"xAxis": ["Q1", "Q2", "Q3", "Q4"],
"series": [{"name": "销量", "data": [100, 130, 160, 190]}],
"unit": "万件",
"smooth": true
}
示例 B:用户要「审批流程图」
用户:画一下从提交到审批通过的流程图。
Agent:mermaid flowchart TD,节点短、条件用 {},不要输出自定义 nodes/edges JSON:
flowchart TD
A[提交申请] --> B{材料齐全?}
B -->|是| C[初审]
B -->|否| D[退回补件]
C --> E{通过?}
E -->|是| F[归档生效]
E -->|否| G[驳回]
D --> A
示例 C:用户要「更专业的分组对比」(有给定数字时)
用户:产品 A/B 在 Q1–Q2 营收分别是 120/90 和 150/110(万元),用好看一点的图。
Agent:数字仅用用户给的值 → vega-lite 分组柱(详见 reference §二 示例 1);根对象含 $schema,data.values 为 number。
数据诚实(强制)
- 有用户/附件/工具数字 → 原样进
series / data.values;改单位须在正文说明。
- 无数字 →
graph 可用小整数示意 + 正文写「示意」;vega-lite 禁止伪造精确营收/百分比冒充实测。
- 用户要求「按这篇 PDF/笔记画图」→ 节点与边必须来自上下文,禁止虚构实体(mermaid §五)。
- 代码块内数值类型必须是 number,不要用字符串。
交付验收(回复前勾选)
references 索引
| 文件 | 用途 |
|---|
references/inline-formats.md | 五种块完整规范、参数表、长示例、Vega 美学/边界、通用禁止项 |
常见踩坑(指针)
| 现象 | 处理 |
|---|
| vega-lite 雷达/极坐标折线空白 | 改 graph type: "radar" |
| 分面 vega-lite 整块空白 | 顶层勿写 width: "container";见 reference §二 |
| 柱高 hover 刚挂载时上下飘 | 多图同屏 embed 瞬态;静止后仍抖再查 App docs/Vega-Lite内嵌图柱高抖动.md |
mermaid 节点含 % 或 : | 双引号包裹节点;% → % |
| mindmap 层级错乱 | 只用 # 标题,禁止空格缩进 |