CanvasCard.mnaddon (845.0 KB)
非传统开发者 用codex调试出来的beta测试版本 欢迎大佬指出bug给建议
一句话介绍这个插件:
把 Gemini Canvas / React 可视化代码保存成 MarginNote 脑图卡片，并在内置浮窗里重新打开交互。
2 个赞
感谢您对 MN 插件生态的支持 
，我们为所有插件开发者提供签名认证，请查看论坛私信联系我~
CanvasCard.mnaddon (840.3 KB)
更新一下 修复一点bug
没用明白，可以出一个大概的视频教程吗
CanvasCard 使用方法CanvasCard 是一个 MarginNote 插件，用来把 AI Canvas、React 可视化、HTML/JS 小动画保存成脑图卡片，并且之后可以在 MarginNote 里重新打开交互预览。
使用流程:
- 先在 Gemini、ChatGPT 或其他地方生成一段 Canvas / React / HTML 可视化代码。
- 全选并复制这段代码。
- 回到 MarginNote，点击工具栏里的 CanvasCard 插件按钮。
- 点击
Create Card。 - 插件会把剪贴板里的代码保存成一张脑图卡片。
- 之后选中这张卡片，再点击 CanvasCard 按钮。
- 点击
Browser Card。 - 插件会在 MarginNote 内打开一个浮动浏览器窗口，渲染这张卡片里的可视化内容（这一步加载不出来可能是bug 我自己目前也在边用边改哦，如果有bug可以复制代码和报错给我我会尝试修复）。
- 浮窗可以拖动、缩放，也可以用
S / M / L调整大小。 - 如果想取回代码，选中卡片后点击
Copy Source，源码就会复制回剪贴板。
几个按钮的作用：
Create Card：从剪贴板创建可视化卡片Read Card：检查当前卡片里有没有保存源码Copy Source：复制当前卡片保存的源码Browser Card：打开当前卡片的交互预览Browser Demo：测试插件浏览器是否正常Diagnostics：复制调试日志，出问题时用来反馈
简单说就是：复制代码 → Create Card 保存到脑图 → 选中卡片 → Browser Card 打开交互。
注意：这个插件目前还是 Beta 版，React 预览可能需要联网加载运行环境；如果 Gemini 生成的代码用了特别复杂的第三方库，可能需要稍微改一下才能跑。
附一段我录制的使用示例 视频略微有些长（3min ）可以加速
请不要在意本视频中Gemini写的代码有bug
,自己用可以调到正确状态，再制作成mn卡片
hi,我重新介绍了一下这个插件
大佬牛逼，这个创意蛮不错的
2 个赞