打开扫描片
图表、表格和结构化视觉代理可以一发 ——从一出 .canvas.tsx 文件到 HTML, PNG, PDF, JPG, 或者一个 IDE 已准备好的画布 。 一样 cursor/canvas 原始人作为Cursor Canvas; 不需要光标应用程序 用于建设或导出.
网络渲染使用 Maintine shim : 光标扫描-网络 (单位:千美元)@flesler/cursor-canvas-web 在npm上。 .
安装
npm install -g @flesler/open-canvas
PNG、PDF和JPG使用无头铬(首先安装) generate) (中文(简体) ).
代理技能
open-canvas skill ~/.cursor/skills/open-canvas # SKILL.md only — read after open-canvas is on PATH
为撰写和导出安装代理指南 .canvas.tsx 带有开放式扫描的文件.
提交人a .canvas.tsx
一个反应文件:图表、表格、挂图、表单——只从 cursor/canvas静态数据可以生活在兄弟会中 ./data/* 文档。 保存的切换和形态状态可以生活在 <stem>.canvas.data.json 旁边的画布( 键与 useCanvasState) (中文(简体) ).
import { Stack, H1, BarChart } from "cursor/canvas";
import report from "./data/report.json";
一些组件接受 extra 具有光标SDK以外的特性的道具,例如 <BarChart extra={{ valueAxis: { scale: "log" } }} />。光标忽略 extra所以画布还在那里 看见闪电了 超级集文件。 。 。 .
生成
open-canvas generate path/to/report.canvas.tsx
open-canvas verify path/to/report.canvas.tsx
| 命令 | 目的 |
|---|---|
generate <canvas> | HTML、PNG、PDF( 默认) 输入 ./out |
verify <canvas> | 类型检查 cursor/canvas 数据进口 |
skill [dir] | 打印或安装代理 SKILL.md |
vendor-path | 打印捆绑 cursor/canvas 参考和 SDK 类型 |
| 旗帜 | 默认 |
|---|---|
-o, (中文(简体) ), --out | ./out 在画布旁边 |
-t, (中文(简体) ), --theme | light 或者说 dark |
-f, (中文(简体) ), --formats | html,png,pdf - 还有 jpg, (中文(简体) ), cursor |
-n, (中文(简体) ), --name | 输出基名( 默认: 画布干) |
-w, (中文(简体) ), --width | 播放窗口视图宽度( 默认) 1280(中文(简体) ) |
--min-height | 可选的 px 最小页面高度 |
--selector | 只导出匹配的段落 |
--inline-state | 与 cursor: 已嵌入 .canvas.data.json 在已发布文件中 |
-q, (中文(简体) ), --quiet | 没有关于成功(产出)的定点值 {--out}/{--name or stem}.{ext}(中文(简体) ) |
出口读取 .canvas.data.json 当在现相. 单独运行 generate 用于 IDE 文件 : open-canvas generate path/to/x.canvas.tsx --formats cursor (可选择) -o 编号 : -n 页:1 {dir}/{stem}.canvas.tsx) (中文(简体) ). --formats cursor 内嵌 ./data/*; 添加 --inline-state 包含已保存的 UI 状态.
画布代码中的主题 : useHostTheme() 在Cursor和出口中相同的钩和回取值。 使用 generate --theme 编号 : --brand 当您需要固定的光/暗或 Cursor/ Grok 在 png/html/pdf 中查看时.
许可证
麻省理工学院 - 自由主义。 。 。 .