# Excalidraw > 此说明当前更新至 2.4.0-beta-9。 Obsidian-Excalidraw 插件将 [Excalidraw](https://excalidraw.com/) 这一功能丰富的草图工具集成到 Obsidian 中。您可以在您的库中存储和编辑 Excalidraw 文件，可以将图形嵌入到文档中，还可以在 Excalidraw 中链接到文档和其他图形。有关 Excalidraw 功能的展示，请查看我的博客文章 [这里](https://www.zsolt.blog/2021/03/showcasing-excalidraw.html) 或观看以下视频。 ## 视频演示

### 这是我完整的视频目录：

10 部分（稍微过时）视频演示

将内容嵌入 Excalidraw

链接到元素、垂直文本对齐、Markdown 样式

脚本引擎商店 - Excalidraw 自动化

介绍脚本引擎

脚本引擎商店

使用颜色

颜色 - Excalidraw 基础（自定义）

链接和块引用

链接到元素、垂直文本对齐、Markdown 样式

强大工具

OCR

生活质量改善

### Beta 测试该插件遵循每月发布的计划。如果您希望获得更频繁的更新，包括新功能（例如，excalidraw.com 上的新内容，但尚未在 Obsidian 中提供）和小的 bug 修复，请加入 beta 社区。 [![缩略图 - 20240803 Excalidraw 发布方法（自定义）](https://github.com/user-attachments/assets/ab40648c-f73f-4bda-a416-52839f918f2a)](https://youtu.be/2poSS-Z91lY) [![Excalidraw 插件发布策略（手机）](https://github.com/user-attachments/assets/87f1f379-782c-4c32-8b5b-d27fe2d3ac4b)](https://github.com/user-attachments/assets/120a0790-7239-48ae-bfbd-eb249f8b518d) --- ## 功能 - 该插件将 Excalidraw 无缝集成到 Obsidian 中，包括命令面板操作、文件资源管理器功能、选项菜单命令和工具栏按钮。 - 在工具栏按钮或文件资源管理器中 CTRL/CMD+鼠标左键 以在新面板中创建/打开绘图。 ### 设置设置将允许您根据需要自定义 Excalidraw。该插件提供了大量设置。我尝试为这些设置添加有意义的解释，所以请耐心查找，对于大多数请求，已经存在相关设置。插件设置分为以下几个部分： - **基本设置**：例如使用的默认文件夹。 - **保存**：压缩和自动保存间隔。 - **文件名**：配置自动生成的 Excalidraw 文件名。 - **显示**：影响 Excalidraw 处理的设置（例如：左利手模式、主题设置、鼠标滚轮和捏合缩放设置、适应缩放设置）。 - **链接和嵌入**：影响链接和嵌入项在 Excalidraw 画布上行为的设置。 - **Markdown 嵌入设置**：这些设置控制从您的 Vault 嵌入到 Excalidraw 绘图中的 Markdown 文档的行为。 - **嵌入与导出**：控制 Excalidraw 图像在嵌入到 Markdown 文档时的显示方式的设置。 - **自动导出设置**：您可以配置 Excalidraw 在每次保存时创建绘图的 PNG 或 SVG 副本。 - **兼容性功能**：如果您在 Obsidian 之外编辑 Excalidraw 绘图（例如在 LogSeq、Visual Studio、网页等），请检查这些设置。 - **实验性功能**：有一些高级功能作为“巧妙”的 hacks 实现，包括定义本地字体、添加自定义图标以区分 Obsidian 文件资源管理器中的 Excalidraw 文件、OCR 设置等。 - **已安装脚本的设置**：从脚本库安装的一些脚本附带设置。脚本设置在您第一次运行脚本时安装。因此，要访问脚本的设置，请安装脚本，首次运行后在插件设置中查找设置。 #### 模板 - 新绘图的模板。该模板将恢复笔画属性。这意味着您可以在模板中设置笔画颜色、笔画宽度、不透明度、字体系列、字体大小、填充样式、笔画样式等的默认值。这同样适用于 ExcalidrawAutomate。 - 通过模板，您可以自定义 Excalidraw 使用的调色板。 - 切换到 Markdown 视图。 - 滚动到文件底部，找到 `"AppState": {`。 - 在 AppState 部分末尾找到 `"customColorPalette": {`。 - 您可以通过添加以下三个变量中的任何一个或全部来指定 Excalidraw 使用的 3 个调色板： - `"canvasBackground":[], "elementBackground":[], "elementStroke": []`。 - 在每个变量的数组中添加有效 HTML 颜色的逗号分隔列表（例如，`#FF0000` 表示红色）。 - 有关更多帮助，请查看我上面的录像。 #### 导出 - 如果便携性对您很重要： - 自动导出 SVG 和/或 PNG 文件，包括同步保持功能，这样您可以将 SVG/PNG 嵌入到文档中，而不是嵌入 Excalidraw 文件。 - 您可以通过添加 `excalidraw-autoexport` 前置字段键来覆盖单个文件的导出设置。该键的有效值为 `none`、`both`、`png` 和 `svg`。 - 指定嵌入绘图的默认宽度。 - 兼容性功能以自动导出和保持同步 Markdown Excalidraw 文件及旧版 `.excalidraw` 文件。 - 实验性功能可在文件资源管理器中添加自定义标签以标记绘图文件。 - 启用/禁用自动保存。 ### 将您的绘图嵌入到 Markdown 文档中 - 您可以使用以下格式自定义嵌入图像的大小和位置： - `![[image.excalidraw|100]]`， - `![[image.excalidraw|100x100]]`， - `![[image.excalidraw|100|left]]`， - `![[image.excalidraw|right-wrap]]`， - `![[|x|]]`。 - 您可以通过 CSS 添加自定义 [对齐方式](https://www.scaler.com/topics/align-image-in-html/)。 - 出现在 `` 中的任何文本将被添加到渲染的 SVG 元素样式和包装 DIV 元素中。 - 有关更多信息，请参见 [styles.css](https://github.com/zsviczian/obsidian-excalidraw-plugin/blob/master/styles.css)。 - Excalidraw 绘图在 Obsidian Publish 中不显示。如果您希望在发布的文档中使用 Excalidraw，可以在插件设置中的 `Embed & Export` 下进行配置，以便在创建新文件时自动将绘图的 PNG 或 SVG 版本插入到文档中。请参见 `type of file to insert into document`。 - 在 `Export settings` 下，您还可以配置自动导出图像的深色和浅色版本，以便您的发布网站支持深色和浅色模式。 ### 超链接和拖放支持 ![](https://github.com/zsviczian/obsidian-excalidraw-plugin/blob/master/images/excalidraw-modifiers.png) #### 超链接 - 支持超链接，例如： - `https://zsolt.blog`， - `[Obsidian](https://obsidian.md)`，以及 - 内部链接，例如在绘图文本中使用 `[[My file in vault|Alias]]`。 - 如果您启用了 Obsidian 设置中的“文件与链接/自动更新内部链接”，则文件移动或重命名时链接会自动更新。 - 绘图中的链接会出现在文档的反向链接中。 - 支持嵌入： - `![[myfile#^blockref]]` 将绘图转换为该块的嵌入文本。 - `![[myfile#section]]` 也有效，这将嵌入该部分。 - 您还可以通过在嵌入后加上最大字符数的花括号来指定嵌入文本的换行，例如 `![[myfile#^blockref]]{40}` 将在 40 个字符处换行。 - 为了方便，您还可以使用命令面板将链接插入到绘图中。 - CTRL/CMD + 鼠标悬停 可以调出链接的 Obsidian 快速预览。（在 Mac 上为 CTRL+CMD+鼠标悬停）。 - 使用块引用，您还可以在其他文档中引用和嵌入绘图中出现的文本。 #### 拖放支持 - 您可以从 Obsidian 文件资源管理器中拖动文件，它们将成为 Excalidraw 中指向这些文件的链接。有关各种修饰键组合，请参见上面的表格。 - 注意：将图像锚定到其 100% 尺寸是一个非常小众的功能，具有非常特定的行为，我主要是为自己开发的。 - （甚至 Excalidraw Obsidian 中的其他功能更是如此 - 也是主要为自己开发的 😉）。 - 每次打开 Excalidraw 绘图时，这将重置您嵌入的图像为 100% 尺寸，或者如果您在画布上嵌入了使用此功能插入的 Excalidraw 绘图，每次更新嵌入的绘图时，它将缩放回 100% 尺寸。 - 这意味着即使您在绘图中调整了图像的大小，下次打开文件或修改原始嵌入对象时，它也会重置为 100%。此功能在将绘图分解为单独的 Excalidraw 文件时非常有用，但当它们组合到单个画布上时，您希望各个部分保持其实际大小。我使用此功能从原子绘图构建“一页书”摘要。 - 您可以将文本从 Markdown 视图拖放到 Excalidraw 中。 - 您可以从浏览器中拖放网页地址，它们将成为链接。 - 您可以拖放 YouTube 链接和缩略图，它们将在 Excalidraw 中成为带缩略图的 YouTube 链接。 ### LaTeX 使用命令面板操作“插入 LaTeX 公式”插入 LaTeX 公式。您可以在 Markdown 视图中编辑公式，或者通过 CTRL/CMD + 鼠标左键 点击公式进行编辑。 ### 图像支持 - 在 iOS 和 Android 上，您可以通过按下 Excalidraw 中的添加图像按钮从相机添加图像。 - 您可以将图像复制/粘贴到绘图中。图像将保存在您的 Vault 中。 - 您可以按照上面的说明拖放图像。 - URL 链接到网络上的图像：您可以从网页将图像拖放到 Excalidraw。如果在将图像拖放到 Excalidraw 时按住 CTRL 键，图像将不会保存到您的 Vault 中。Excalidraw 将从 URL 加载图像。请注意，如果您没有互联网连接，或者这些图像从互联网上被删除，它们也会从您的绘图中消失。 - 如果您将图像 URL 粘贴到 Excalidraw（只需点击 URL 复制，然后在 Excalidraw 画布上点击粘贴），图像将以链接形式插入到网络图像上。同样，图像不会保存到您的 Vault 中，只有链接会被保存。 - 如果您拖放 YouTube 视频链接，它将转换为一个缩略图，并带有指向视频的元素链接。 ### 引用图像部分的块有关更多详细信息，请参见此 [视频](https://youtu.be/yZQoJg2RCKI)。 - 当通过链接引用 Excalidraw 文件中的画布元素时，可以使用： - 元素 ID 或章节标题（即包含 `# <章节标题>` 的文本元素） - 例如 `[[file#^elementID]]`， - 您可以添加 `group=` 前缀， - 例如 `[[file#^group=elementID]]`，或 - `area=` 前缀， - 例如 `[[file#area=Section heading]]`。 - 如果找到 `group=` 前缀，Excalidraw 将选择与通过元素 ID（块引用）或章节标题引用的元素在同一组中的元素。 - 如果找到 `area=` 前缀，Excalidraw 将在引用的元素周围插入图像的剪切部分。 - 请注意，当将 Excalidraw 嵌入为 PNG 到您的 Markdown 文档时，不支持 `area=` 选择器。 - 引用文本元素的元素 ID 而不带 `group=` 或 `area=` 前缀将以普通文本嵌入该元素。引用非文本元素（例如矩形、椭圆等）而不带 `group=` 或 `area=` 前缀将导致 Obsidian 错误，因为这些元素 ID 在 Excalidraw Markdown 文件中不能够作为块引用。 ### Markdown - 从 1.2.0 版本开始，绘图文件存储在 Markdown 文件中。 - 您可以为绘图添加标签。 - 您可以在绘图的 YAML 前置字段中添加元数据。 - 您在前置字段和 `# Text Elements` 标题之间添加的任何内容将被 Excalidraw 忽略，即您可以在这里添加任何内容，它将作为文档的一部分被保留。 - Excalidraw 文档现在会在图形视图中显示。 - 以下前置字段键将自定义绘图的显示方式 - 覆盖一般设置： - `excalidraw-link-prefix: "📍"` 内部链接的预览前缀 - `excalidraw-url-prefix: "🌐"` 外部链接的预览前缀 - `excalidraw-link-brackets: true|false` 是否在预览中显示链接周围的括号 - `excalidraw-default-mode: view|zen` 默认以查看模式或禅模式打开此文档。默认查看模式非常适合演示幻灯片。 - 前置字段标签用于在文件级别自定义图像导出 [519](https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/519)。如果这些键存在，它们将覆盖默认的 Excalidraw 嵌入和导出设置。 - `excalidraw-export-transparent: true`： true == 透明 / false == 有背景。 - `excalidraw-export-dark`： true == 深色模式 / false == 浅色模式。 - `excalidraw-export-padding`：指定图像的导出边距。 - `excalidraw-export-pngscale`：这仅影响导出为 PNG。指定图像的导出比例。典型范围在 0.5 到 5 之间，但您也可以尝试其他值。 ### 将完整的 Markdown 文件嵌入到您的绘图中从 Obsidian 文件资源管理器中拖动所需文件，同时按住 SHIFT 将文件放到画布上。 - 使用命令面板操作：`从 Vault 插入 Markdown 文件` - 使用自定义的 woff、woff2 或 TTF 字体来显示文档，您可以在 Excalidraw 设置中设置默认字体。 - 您可以为渲染 Markdown 文档的快照图像设置自定义 CSS。仅支持操作系统标准字体作为字体系列（[Win10](https://docs.microsoft.com/en-us/typography/fonts/windows_10_font_list)、[Mac & iOS](https://developer.apple.com/fonts/system-fonts/)），此外，您可以使用上述设置添加一个额外的自定义字体。 - （要查看演示，请观看此 [视频](https://youtu.be/K6qZkTz8GHs) 并查看此 - [示例 CSS](https://github.com/zsviczian/obsidian-excalidraw-plugin/discussions/281)）。 - 为了帮助样式设置，您可以查看 Excalidraw 创建的 Markdown 文档的 SVG 快照。 - 打开 Obsidian 开发者控制台 (CTRL+Shift+i/CMD+OPT+i)，并 - 执行以下命令：`ExcalidrawAutomate.mostRecentMarkdownSVG` - 您可以通过将以下前置字段键添加到您的 Markdown 文档，按文件控制嵌入 Markdown 文件的外观： - `excalidraw-font: Virgil|Cascadia|font_file_name.extension` - `excalidraw-font-color: css-color-name|#HEXcolor|any-other-html-standard-format`， - 您可以在 [这里](https://www.w3schools.com/colors/colors_names.asp) 找到 CSS 颜色名称。 - `excalidraw-border-color: css-color-name|#HEXcolor|any-other-html-standard-format` - `excalidraw-css: "css-filename|css snippet"` - 切换到 Markdown 视图或使用 WIN+CTRL/CMD+CTRL 点击图像以编辑嵌入的属性： - `[[filename#^blockref|WIDTHxMAXHEIGHT]]` ### 自定义字体、自定义笔、OCR 支持、SVG 导入 - 在插件设置中，您可以添加自定义的本地字体。有关更多详细信息，请参见此 [视频](https://youtu.be/eKFmrSQhFA4)。 - 该插件包括使用 Taskbone OCR 的 OCR 支持。有关更多详细信息，请参见此 [视频](https://youtu.be/7gu4ETx7zro)。 - 您可以将 SVG 文件转换为 Excalidraw 绘图（有一些限制）。有关更多详细信息，请参见此 [视频](https://youtu.be/vlC1-iBvIfo)。 - 您可以定义自定义笔和荧光笔，并将其固定到侧边栏。有关更多详细信息，请参见此 [视频](https://youtu.be/OjNhjaH2KjI)。使用 ExcalidrawAutomate，您可以添加对 [自动切换]() 笔的支持，以及对 [硬件橡皮擦按钮]() 的支持。 ### 脚本引擎 - 从 1.5.0 版本开始，您可以轻松执行 ExcalidrawAutomate 宏，并为它们分配命令面板快捷键，使用脚本引擎。您可以在 [这里](ea-scripts/README.md) 找到介绍视频和不断增加的可安装脚本库。 - 您可以通过将脚本和随附的 SVG 图标文件移动到文件夹中，将脚本组织成组，放在 Excalidraw 的 Obsidian 工具面板中。请参见演示 [视频](https://youtu.be/wTtaXmRJ7wg?t=16)。 ### 其他 - 左利手模式 - 包含完整的 - [QuickAdd](https://github.com/chhoumann/quickadd)， - [Templater](https://silentvoid13.github.io/Templater/) 和 - [Dataview](https://blacksmithgu.github.io/obsidian-dataview/docs/api/intro/) 支持，通过 ExcalidrawAutomate 实现。 - 查看 [详细帮助 + 示例](https://zsviczian.github.io/obsidian-excalidraw-plugin/)。 - 我还有一个 [YouTube ExcalidrawAutomate 播放列表](https://www.youtube.com/playlist?list=PL6mqgtMZ4NP1IR4nXxSlMA4PA5E-qpyHZ)，里面有很多示例。 - 需要 Obsidian Sync 订阅：完整的绘图文件历史记录和设备之间的同步。 - 多语言支持：如果您想通过翻译插件来帮助，请与我联系。 ## 反馈、问题、想法、问题请在 [forum.obsidian.md](https://forum.obsidian.md/t/excalidraw-full-featured-sketching-plugin-in-obsidian) 上参与关于 Excalidraw 插件的讨论。请前往 [GitHub](https://github.com/zsviczian/obsidian-excalidraw-plugin/issues) 报告错误或请求增强功能。 --- ## 感谢支持如果您喜欢 Excalidraw，请通过在 [https://ko-fi/zsolt](https://ko-fi.com/zsolt) 上请我喝杯咖啡来支持我的工作和热情。请通过在 Twitter、Reddit 或其他您常用的社交媒体平台上分享 Obsidian Excalidraw 插件来帮助传播消息。您可以在 Twitter 上找到我 [@zsviczian](https://twitter.com/zsviczian)，以及我的博客 [zsolt.blog](https://zsolt.blog)。 [

](https://ko-fi.com/zsolt) --- ## Excalidraw 的朋友们如果您喜欢 Excalidraw，可以考虑尝试 [ExcaliBrain](https://github.com/zsviczian/excalibrain)（也可通过 Obsidian 社区插件获得）。