建站: Excalidraw 组件集成

本文介绍了如何在博客中集成自定义的 Excalidraw 组件，实现在 MDX 文档中直接渲染交互式的白板绘图。本组件专注于支持 Obsidian Excalidraw 插件生成的 Markdown (.md) 文件，实现了从双向链笔记到博客展示的无缝衔接。

简介#

Excalidraw 组件是一个基于 React 的轻量级渲染器，专为在 MDX 环境中展示白板绘图而设计。为了获得最佳的编辑体验和资源占用，本组件抛弃了传统的 .excalidraw JSON 格式，直接解析 Obsidian 场景数据中的 compressed-json 块。

处理流程#

1. 编辑场景: 在 Obsidian 中使用 Excalidraw 插件编辑绘图。
2. 文件分发: 复制该 .md 文件到项目的 public/excalidraw/ 文件夹下。
3. 组件引用: 在 MDX 中通过 <Excalidraw snapshotUrl="/excalidraw/your-file.md" /> 进行引用。

核心功能#

• Obsidian 原生支持: 完美解析 Obsidian Excalidraw 插件生成的 .md 文件，包含文本、几何图形及公式映射。
• LaTeX 公式增强: 自动识别并使用 KaTeX 渲染嵌入的 LaTeX 公式，确保数学排版精准美观。
• Magic Flow 信号流动画:
  • 蓝色虚线: 自动触发“能量球轨迹流动”效果，常用于展示系统架构中的数据流向。
• 幻灯片演示 (Frames): 自动识别绘图中的 “Frame” (画框)，并支持通过快捷键或导航栏进行 PPT 式的演示切换。
• 沉浸式交互:
  • 平移/缩放: 支持平滑的拖拽和平移，控制台实时显示当前的 缩放比例。
  • 键盘驱动: 支持使用键盘 左/右方向键 快速切换幻灯片页。
• 极致性能: 直接操作 SVG DOM 节点，无 Canvas 负担，支持 SEO 抓取。

示例演示#

1. 多画框演示 (Obsidian .md)#

在 Obsidian 中通过 Frame 组织内容，组件会自动生成导航控件。你可以尝试使用 键盘左右键 切换。

组件参数 (Props)#

技术实现原理#

1. 格式锁定: 组件只接受包含 compressed-json 代码块的文件。解析器会提取该块并利用 LZString 还原场景数据。
2. LaTeX 集成: 组件会扫描 Markdown 头部元数据及 Embedded Files 区域，利用 KaTeX 生成独立的 SVG 图片对象并注入 Excalidraw 场景缓存。
3. SVG 动力学引擎: 针对 Magic Flow，通过在路径末尾动态插入 <animateMotion> 物理对象（红色小球），实现不丢帧的匀速流动感。
4. 视口感知: 通过 getBoundingClientRect 与 SVG viewBox 的比例关系，精确计算并反馈当前的缩放百分比。
5. 全局监听: 组件激活时会拦截方向键事件，优先响应幻灯片导航，提升演示体验。