【Excalidraw脚本】分享下DIY的Excalidraw脚本

[熊猫别熬夜 (噗~)]

分享下使用 Obsidian 一年多折腾 Excalidraw 时写的 Excalidraw 脚本片段，GitHub 仓库：熊猫别熬夜的 Excalidraw 代码片段：

脚本安装详解介绍

可通过 Excalidraw 插件的脚本代码块 (```excalidraw-script-install) 来安装，里面放的是脚本 GitHub 的 RAW 链接，在 Obsidian 中会显示为按钮，脚本更新会自动检测，欢迎大家分享和反馈，脚本的详细介绍我都上传到 PKMer 了。

```excalidraw-script-install
https://raw.githubusercontent.com/PandaNocturne/ExcalidrawScripts/master/README.md
```

• Excalidraw 脚本的详细介绍：Excalidraw 如何安装脚本 + 脚本设置介绍
• Excalidraw 脚本开发文档：ExcalidrawPluginDocs
  • Excalidraw 脚本的基本配置

---

脚本安装可以根据源码来安装，也可以通过 Excalidraw 插件提供的脚本安装代码块来安装

• 代码块链接方法：
  • 优点：一键安装脚本和图标，操作方便，后续脚本更新可以检测
  • 缺点：国内需要可访问 GitHub 的网络
• 源码拷贝方式：
  • 优点：不需要特殊网络
  • 缺点：需要手动复制源码，这个过程很容易出问题，没有图标，脚本更新无法检测…

PS：之后我的脚本更新或者 BUG 修复，可能不会更新到网站，而是直接更新到 GitHub，因为这样对我来说比较方便点而且快速点。

实用脚本

QuickSwitchFrame

https://raw.githubusercontent.com/PandaNocturne/ExcalidrawScripts/master/PandaScripts/QuickSwitchFrame.md

• Author：熊猫别熬夜
• PKMerDoc：自定义 Excalidraw 脚本 -QuickSwitchFrame- 简单的 Frame 切换大纲
• Description：提供一个 Frame 边框切换的提示框。
  • 

文档编辑

QuickerInsertZKCard

https://raw.githubusercontent.com/PandaNocturne/ExcalidrawScripts/master/PandaScripts/QuickerInsertZKCard.md

• Author：熊猫别熬夜
• PKMerDoc：自定义 Excalidraw 脚本 - 快速插入时间戳笔记
• Description：快速插入或删除时间戳笔记
  • 
  • 
  • 选择或框选笔记后，再次运行脚本就可以删除本地笔记和画板元素了
    • 
• ChangeLog：
  • 2024-03-27_02:55：添加创建DrawIO的SVG矢量图，默认不会自动打开，可以配合OpenSelectImage脚本来打开文件。
    • 
    • Tip：选中第2次运行同样可以删除文件，也可以用OpenSelectImage删除。

AddMermaidSvg

https://raw.githubusercontent.com/PandaNocturne/ExcalidrawScripts/master/PandaScripts/AddMermaidSvg.md

• Author：一鸣惊人
• PKMerDoc：自定义 Excalidraw 脚本 - 插入可以编辑的 Mermaid 图形
• Description：插入可以二次编辑的 Mermaid 矢量图
  • 
  • Ctrl + 鼠标左键单击 可以弹出源码：
    • 

NumberMode

https://raw.githubusercontent.com/PandaNocturne/ExcalidrawScripts/master/PandaScripts/NumberMode.md

• Author：熊猫别熬夜
• PKMerDoc：自定义 Excalidraw 脚本 - 双击添加圆圈编号
• Description：编号模式，双击添加或编辑编号
  • 
    • 已启动编号模式，双击添加 num
    • 双击 num 可以重新编辑编号
    • 再次运行脚本即可退出编号模式

图片处理

OpenSelectImage

https://raw.githubusercontent.com/PandaNocturne/ExcalidrawScripts/master/PandaScripts/OpenSelectImage.md

• Author：熊猫别熬夜
• PKMerDoc：自定义 Excalidraw 脚本 - 默认应用打开图片
• Description：设定默认或其他软件打开图片
  • 在 Excalidraw 插件设置里面可以设置参数，除了默认应用打开外，还可以自定义多个不同软件打开
  • 
  • 
• ChangeLog：
  • 2024-03-26_12:07：添加删除图片的选项
    • 
  • 2024-03-27_02:53：
    • 添加修改设置选项，可在调整外部应用参数的设置
      • 
    • 添加图片重命名选项，可以来重命名或移动图片

这个非常好用，简单但实用

TextExtractor

https://raw.githubusercontent.com/PandaNocturne/ExcalidrawScripts/master/PandaScripts/TextExtractor.md

• Author：熊猫别熬夜
• PKMerDoc：自定义 Excalidraw 脚本 - OCR 自动提取图片文字
• Description：使用 Text Extractor 插件或者本地 Paddleocr 模型批量识别画板中的图片到 Yaml 区，可编辑修改。
  • 
  • 
• ChangeLog：
  • 2023-12-29：
    • 优化 OCR 识别文本的 Yaml 数据结构存储
    • 修复修改文本后不同步问题
  • 2024-03-02：
    • 添加当编辑 Frame 名称后，会将名称添加到 Yaml 的 aliases 属性中，方便通过别名来定位 Excalidraw 内的标题

AdjustImageSize

https://raw.githubusercontent.com/PandaNocturne/ExcalidrawScripts/master/PandaScripts/AdjustImageSize.md

• Author：一鸣惊人，熊猫别熬夜
• PKMerDoc：自定义 Excalidraw 脚本 -AdjustImageSize- 统一多个图片宽度或者高度
• Description：用于调整多个图片 (image)、矩形框 (rectangle)、Frame 边框的大小，以选中的元素的最大宽度 (高度) 或者最小宽度 (高度) 进行统一缩放，分别有 等宽缩放、等高缩放、完全相等 这 3 个选项。
  • 

这个非常好用，简单但实用

UploadImageToPicGo

https://raw.githubusercontent.com/PandaNocturne/ExcalidrawScripts/master/PandaScripts/UploadImageToPicGo.md

• Author：熊猫别熬夜
• PKMerDoc：自定义 Excalidraw 脚本 - 上传画板中的图片到图床
• Description：将 Excalidraw 画板中引用的图片直接上传到 PicGo 的 Server 后并删除本地文件 (可不删除)
  • 
  • 

画布演示

playExcalidrawAnimation

https://raw.githubusercontent.com/PandaNocturne/ExcalidrawScripts/master/PandaScripts/playExcalidrawAnimation.md

• Author：熊猫别熬夜
• PKMerDoc：自定义 Excalidraw 脚本 - 画板局部或者全局播放动画
• Description：逐步显示 Excalidraw 画板的元素
  • 
  • 
  • 

FrameKanban

https://raw.githubusercontent.com/PandaNocturne/ExcalidrawScripts/master/PandaScripts/FrameKanban.md

• Author：熊猫别熬夜
• PKMerDoc：自定义 Excalidraw 脚本 - 画板与 Kanban 得梦幻结合 - 像 PPT 一样演示
• Description：配合 Kanban 插件生成画板的 Frame 缩略图或者线型大纲
• ChangeLog：
  • 2024-03-02：
    • 添加缩略图是否添加连接选项，参数修改为中文注释
      • 
    • 排序时会将 Frame 名称添加到文档的 aliases 区 (添加文档别名方便搜索)
  • 2024-03-06：
    • 当选中一个 Frame 时，不再弹出选项框，而是更新 frame 大纲 (无缩略图)
    • 添加设置 Kanban 宽度选项 ->可以随时调整宽度

推荐配合另一个脚本 QuickSwitchFrame 使用。

外部联用

ZoteroToExcalidraw

https://raw.githubusercontent.com/PandaNocturne/ExcalidrawScripts/master/PandaScripts/ZoteroToExcalidraw.md

• Author：熊猫别熬夜
• PKMerDoc：自定义 Excalidraw 脚本：实现 Zotero 与 Excalidraw 的拖拽联动
• Description：实现 Zotero 标注文本或者图片通过拖拽或者复制粘贴的形式添加到 Excalidraw 画板中
  • 
• ChangeLog：
  • 2023-10-17：添加可以匹配 Zotero 标注颜色的设置
  • 2024-03-22：可以通过复制粘贴形式来添加

Zotero 与 Obsidian 的 md 笔记的联动，参考 Quikcer 动作：

• ZoteroToObsidian - by 熊猫别熬夜 - 动作信息 - Quicker
  • 

BookxnoteToExcalidraw

https://raw.githubusercontent.com/PandaNocturne/ExcalidrawScripts/master/PandaScripts/BookxnoteToExcalidraw.[]

• Author：熊猫别熬夜
• PKMerDoc：自定义 Excalidraw 脚本 - 实现 Excalidraw 与 BookxNote 的联动
• Description：联动 Bookxnote 与 Excalidraw
  • 

Bookxnote pro 与 Obsidian 的 md 笔记的联动，参考 Quikcer 动作：

• BookxNoteToObsidian - by 熊猫别熬夜 - 动作信息 - Quicker
  • 

EagleToExcalidraw

https://raw.githubusercontent.com/PandaNocturne/ExcalidrawScripts/master/PandaScripts/EagleToExcalidraw.md

• Author：熊猫别熬夜
• PKMerDoc：自定义 Excalidraw 脚本 - 建立库外 Eagle 素材库的连接
• Description：实现 Eagle 与 Excalidraw 的联动，可导入素材并定位到 Eagle 具体位置，暂时还没做发送 Excalidraw 的图片到 Eagle。

Zotero 与 Eagle 的联动我也有一点尝试：

• ZoteroToEagle - by 熊猫别熬夜 - 动作信息 - Quicker
  • 

[熊猫别熬夜 (噗~)]

在开始写 Excalidraw 脚本之前，我并没有学过 JavaScript。第一个脚本是关于 Zotero 与 Excalidraw 的联动（ZoteroToExcalidraw），是在 @一鸣惊人 大佬的指导下，并结合一些案例才实现的。在后续的过程中，我遇到了一些不懂的地方也是向他请教解决的，在此非常感谢他。

不过目前我的代码水平很基础，也没学多少 ，望大家指点 。

[yaozhuwa]

厉害啊，感谢分享~

[熊猫别熬夜 (噗~)]

@OpenSelectImage

ChangeLog

• 2024-03-26_12:07：添加删除图片的选项
  • 
• 2024-03-27_02:53：
  • 添加修改设置选项，可在调整外部应用参数的设置
    • 
  • 添加图片重命名选项，可以来重命名或移动图片

@QuickerInsertZKCard

ChangeLog

• 2024-03-27_02:55：添加创建DrawIO的SVG矢量图，默认不会自动打开，可以配合OpenSelectImage脚本来打开文件。
  • 
  • Tip：选中第2次运行同样可以删除文件，也可以用OpenSelectImage删除。

[熊猫别熬夜 (噗~)]

Draw.io的Excalidraw中完美结合

[自权的SPACE]

好奇这个联动是怎么做到的

[自权的SPACE]

请教怎么把draw.io里内容放到excalidraw的，两个是如何联动的？

[熊猫别熬夜 (噗~)]

你可以看看#4的详细说明…我尝试整理本楼话题#1，让它看起来不那么长，因为论坛目前好像没有目录的功能。

[熊猫别熬夜 (噗~)]

obsidian中的excalidraw如何添加标签

你是想在文本里面添加标签吗，我之前弄过类似的，是基于Modal Form表单实现的，目前就单个修改，还没做批量编辑，主要我自己不怎么在里面用标签，所以没怎么折腾了。 [自定义Excalidraw脚本-给Excalidraw添加标签_IMG-1] 在使用这段代码之前，需要确保已安装并启动了 Modal Form 插件，以便正常执行代码逻辑。

【Excalidraw脚本】AddTagsByM…