内容提要
这篇文章介绍了在Markdown中嵌入Excalidraw画板的方法。作者通过渲染组件来决定渲染Excalidraw的数据格式。然而,随着图的复杂性增加,数据量变得庞大,嵌入在Markdown中不合适。作者提出了一种新的存储方案,通过引用的方式存储数据,并使用增量修改来复用原先的作图。最后,作者展示了编辑功能的实现。
延伸解读
内嵌数据过大的实际影响
文章指出,当Excalidraw图形变复杂时,其JSON数据量会显著增长,即使压缩后也可能达到32K。若一个Markdown文档包含多个这样的图形,文档总大小可能接近数百K。这不仅影响可读性,更关键的是,当文档字符数超过一定范围后,algoliaSearch会拒绝收录,导致文档无法被搜索到。因此,直接内嵌数据的方式在复杂场景下存在明显局限。
引用与增量存储的解决思路
作者提出的新方案是在Markdown中引入引用地址和增量Diff数据。第一行存储原始作图数据的引用地址,第二行存储基于原始数据的压缩JSON增量修改。解析时先获取原始数据,再通过patch方式应用增量,得到最终数据集。这种方式避免了在Markdown中直接嵌入完整的大体积JSON,同时保留了兼容性。
增量存储带来的复用与编辑优势
增量存储不仅减小了文档体积,还允许在已有作图基础上进行增量修改。作者展示了编辑功能,可以在第一个作图的基础上增量绘制新图,并生成包含引用和增量数据的Markdown内容。这种方式提升了数据的可读性和管理性,因为原始数据只需存储一次,后续修改以Diff形式记录,便于复用和版本管理。
Q&A
如何在 Markdown 中嵌入 Excalidraw 画板?
在 Markdown 中使用代码块,指定 language 为 excalidraw,渲染时根据数据决定渲染 Excalidraw 组件。
为什么 Excalidraw 数据直接嵌入 Markdown 不合适?
随着图的复杂性增加,数据量变得庞大,内嵌在 Markdown 中难以阅读,且当文档字符数超过一定范围后,algoliaSearch 会拒绝收录。
Excalidraw 的数据格式是什么?
Excalidraw 的数据格式是 JSON。
作者提出的新存储方案是什么?
通过引用的方式存储数据,并使用增量修改来复用原先的作图。在 Markdown 中引入引用地址和压缩的 JSON 增量数据,解析时先获取原始数据,再用 patch 方式获取修改后的数据集。
增量存储方式有什么好处?
可以复用原先的作图,在此基础上做增量修改,提升了数据的可读性和管理性。
编辑功能是如何实现的?
在已有作图基础上进行增量绘制,生成新的作图,并在 Markdown 中记录引用地址和增量数据。