obsidian excalidraw 脚本

### 如何在 Obsidian 中编写或使用 Excalidraw 相关的脚本 Obsidian 提供了一个强大的生态系统，其中 Excalidraw 插件允许用户直接在笔记中嵌入和编辑图表。为了进一步扩展其功能，可以通过社区开发的脚本来增强交互性和自动化操作。 #### 脚本环境设置 要编写或使用与 Excalidraw 相关的脚本，首先需要确保已启用 **Obsidian 的 Tampermonkey 或 DataviewJS 支持**。如果计划使用 JavaScript 编写自定义逻辑，则可以依赖以下工具之一： 1. **Tampermonkey**: 这是一个浏览器扩展程序，用于运行用户编写的脚本。它可以帮助你在网页版 Obsidian 上执行特定任务。 2. **Plugin API (Community Plugins)**: 如果你更倾向于本地化解决方案，可以利用 Obsidian 社区插件的功能接口来创建自定义行为[^1]。 以下是基于上述两种方式的具体实现思路： --- #### 方法一：通过 Tampermonkey 实现自动化的 Excalidraw 图表生成 下面展示一段简单的 Tampermonkey 用户脚本模板，该脚本会检测当前页面是否存在未保存的 Excalidraw 数据，并提示用户是否希望立即存储这些数据到指定路径下。 ```javascript // ==UserScript== // @name Auto Save Excalidraw Data in Obsidian // @namespace http://tampermonkey.net/ // @version 0.1 // @description Automatically save your unsaved changes from embedded Excalidraw diagrams. // @author Your Name Here // @match *://*.obsidian.md/* // @grant none // ==/UserScript== (function() { 'use strict'; const observer = new MutationObserver((mutationsList, observer) => { mutationsList.forEach(mutation => { if (mutation.type === 'childList') { let excalidrawElements = document.querySelectorAll('.excalidraw-container'); Array.from(excalidrawElements).forEach(element => { try { // Extract JSON data of the diagram let sceneData = element.querySelector('textarea').value; console.log("Detected Excalidraw Scene:", sceneData); // Example action - Alert user with option to persist this change locally alert(`Unsaved Excalidraw detected! Do you want to store it?`); } catch(error){ console.error("Error processing Excalidraw container", error); } }); } }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); ``` 此代码片段监听 DOM 变动事件，在发现新的 `.excalidraw-container` 元素时提取内部场景数据并通知用户采取行动。 --- #### 方法二：借助 DataviewJS 动态查询和显示 Excalidraw 文件 另一种常见需求是从多个 Excalidraw 文档中检索信息或将它们汇总成报告形式呈现出来。这可通过内置插件 `Dataview` 来完成。 假设每张图都附带了一些元标签（如日期、类别），那么我们可以构建如下 JS 查询语句以筛选符合条件的结果列表： ```js dv.list( dv.pages() .where(p => p.file.name.includes(".excalidraw")) .sort(p => p.date, "desc") // 假设存在名为 date 的字段表示上传时间戳 .map(page => `<li><a href="${page.file.link}">${page.file.basename}</a>: ${page.description || "(No description provided)"}</li>` ) ); ``` 以上代码将返回所有匹配名称模式的 Excalidraw 页面链接及其描述摘要。 --- #### 注意事项 当设计此类脚本时，请务必考虑目标受众的技术水平。对于初学者而言，可能还需要额外提供详细的安装指导；而对于经验丰富的开发者来说，则可省略基础部分而专注于核心算法讨论[^4]。 此外，虽然这里仅展示了几个例子，但实际上可以根据具体业务需求定制更加复杂的逻辑链路——比如批量转换现有资源为标准格式或者与其他第三方服务对接等等[^3]。 ---