用 Codex 或 Claude 帮你安装 复制这段 Prompt,粘贴到 Codex、Claude 或其他助手里,让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt;运行前请先检查来源。
npx skills add https://github.com/railwise-cn/RAILWISE-CLI --skill canvas-design命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地?可下载 SkillsMP 当前能够提供的文件。
基于 SOC 职业分类
正在显示 SKILL.md
| name | canvas-design |
| description | 工程图表与可视化设计技能。当需要生成监测趋势图、断面剖面图、测点分布示意图或其他工程可视化图表时加载此技能。 |
chart_generator(SVG 趋势图生成)系统内置的图表工具,专为监测时序数据设计。
参数说明:
| 参数 | 类型 | 说明 |
|---|---|---|
data | 数组 | 时序数据,每条含 point_id/date/value |
title | 字符串 | 图表标题 |
alertThreshold | 数字 | 报警阈值,显示为红色水平虚线 |
outputPath | 字符串 | SVG 输出路径 |
输出:800×400px SVG 文件,含多测点折线、图例、网格线和报警线。
趋势图使用以下 10 色系列区分不同测点:
#2563eb 蓝色(第1条线)
#dc2626 红色(第2条线)
#16a34a 绿色(第3条线)
#ca8a04 黄色(第4条线)
#9333ea 紫色(第5条线)
#0891b2 青色(第6条线)
#e11d48 玫红色(第7条线)
#65a30d 黄绿色(第8条线)
#c026d3 品红色(第9条线)
#ea580c 橙色(第10条线)
报警线固定为:#dc2626 红色虚线(stroke-dasharray: 6,4)
| 元素 | 规范 |
|---|---|
| X 轴 | 日期或期次编号,间隔显示避免重叠(超过10个日期时旋转45°) |
| Y 轴 | 监测值,单位标注在轴标题中(如"累计变化量 (mm)") |
| 网格线 | 浅灰色(#e5e7eb),水平网格线为主 |
| 刻度 | 自动计算合理间距,避免小数位过多 |
格式:[监测项目] + [时间范围/描述]
示例:
调用 chart_generator,传入:
data: [
{ point_id: "DB-01", date: "2025-01-15", value: -2.3 },
{ point_id: "DB-01", date: "2025-01-22", value: -4.1 },
...
{ point_id: "DB-02", date: "2025-01-15", value: -1.8 },
...
]
title: "地表沉降监测趋势图"
alertThreshold: -30
outputPath: "./沉降趋势图.svg"
注意:沉降值通常为负数(向下为正),图表 Y 轴应体现方向性。
当 chart_generator 不满足需求时(如需要柱状图、剖面图),可直接编写 SVG 代码:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 400">
<!-- 标题 -->
<text x="400" y="30" text-anchor="middle" font-size="16" font-weight="600">图表标题</text>
<!-- 坐标系 -->
<!-- 数据绑定 -->
</svg>
手写 SVG 时遵循以下规范:
0 0 800 400(与 chart_generator 一致)font-family="PingFang SC, Microsoft YaHei, sans-serif"font-variant-numeric: tabular-nums这类图表 chart_generator 不直接支持,需构造 SVG:
X 轴:位移量(mm),正方向为远离基坑方向
Y 轴:深度(m),从上到下递增(地面在顶部)
数据线:各期位移剖面,用不同颜色区分
标注:管口标高、地面标高、支撑位置(水平虚线标注)
图 X-X [图名]chart_generator 输出纯 SVG 文件,可在浏览器直接打开预览