AIcanvas制成MN卡片

插件与自动化
1

CanvasCard.mnaddon (845.0 KB)

2a9c922f52536f5f7f91089e86b9f9be
2a9c922f52536f5f7f91089e86b9f9be1920×1305 303 KB

db95665a07ffdaeacc26d528638ec3b2_720
db95665a07ffdaeacc26d528638ec3b2_7201280×966 78.8 KB

a190540b780cab543f3f44db9da178e4_720
a190540b780cab543f3f44db9da178e4_7201280×862 116 KB

非传统开发者 用codex调试出来的beta测试版本 欢迎大佬指出bug给建议

一句话介绍这个插件:

把 Gemini Canvas / React 可视化代码保存成 MarginNote 脑图卡片，并在内置浮窗里重新打开交互。

2 Likes
2

感谢您对 MN 插件生态的支持 :heart:，我们为所有插件开发者提供签名认证，请查看论坛私信联系我~

3

CanvasCard.mnaddon (840.3 KB)
更新一下 修复一点bug

4

没用明白，可以出一个大概的视频教程吗

5

CanvasCard 使用方法CanvasCard 是一个 MarginNote 插件，用来把 AI Canvas、React 可视化、HTML/JS 小动画保存成脑图卡片，并且之后可以在 MarginNote 里重新打开交互预览。

使用流程:

  1. 先在 Gemini、ChatGPT 或其他地方生成一段 Canvas / React / HTML 可视化代码。
  2. 全选并复制这段代码。
  3. 回到 MarginNote，点击工具栏里的 CanvasCard 插件按钮。
  4. 点击 Create Card。
  5. 插件会把剪贴板里的代码保存成一张脑图卡片。
  6. 之后选中这张卡片，再点击 CanvasCard 按钮。
  7. 点击 Browser Card。
  8. 插件会在 MarginNote 内打开一个浮动浏览器窗口，渲染这张卡片里的可视化内容（这一步加载不出来可能是bug 我自己目前也在边用边改哦，如果有bug可以复制代码和报错给我我会尝试修复）。
  9. 浮窗可以拖动、缩放，也可以用 S / M / L 调整大小。
  10. 如果想取回代码，选中卡片后点击 Copy Source，源码就会复制回剪贴板。

几个按钮的作用：

  • Create Card：从剪贴板创建可视化卡片
  • Read Card：检查当前卡片里有没有保存源码
  • Copy Source：复制当前卡片保存的源码
  • Browser Card：打开当前卡片的交互预览
  • Browser Demo：测试插件浏览器是否正常
  • Diagnostics：复制调试日志，出问题时用来反馈

简单说就是：复制代码 → Create Card 保存到脑图 → 选中卡片 → Browser Card 打开交互。

注意：这个插件目前还是 Beta 版，React 预览可能需要联网加载运行环境；如果 Gemini 生成的代码用了特别复杂的第三方库，可能需要稍微改一下才能跑。

附一段我录制的使用示例 视频略微有些长（3min ）可以加速:slightly_smiling_face:

请不要在意本视频中Gemini写的代码有bug:joy: ,自己用可以调到正确状态，再制作成mn卡片

6

hi,我重新介绍了一下这个插件 :slightly_smiling_face:

7

大佬牛逼，这个创意蛮不错的

2 Likes