在VitePress搭建的博客里在线预览xmind文件

Lvzl2023-08-09 15:57

背景

相信很多人都会将知识、笔记、想法等内容创作成思维导图，笔者也不例外，会把一些平时学习的笔记写到xmind。在思维导图创作工具方面也有很多选择，笔者比较喜欢使用下面几款：

语雀 : www.yuque.com
ProcessOn : www.processon.com
Xmind : www.xmind.cn

其中在线的思维导图创作工具我们只要有网络就能实时访问，体验还是非常好的。但是如果有一天你想把你的思维导图迁移到你自己的博客网站上，那么不得不使用各个工具的导出功能，一般都可以导出为png图片或者 xmind文件，但是当你的头脑风暴足够大（图节点足够多的时候），导出来的图片放到博客网站后不是很方便阅读，比如下图：

由于咱们的图片太大了，就会有滚动条，而且字体还很小，特别不方便阅读，因此笔者就想着有没有插件能支持在浏览器中预览xmind 文件，废话不多说了，接下来看下方案吧。

实现

笔者想着先到掘金上找一下，但是貌似掘金没有相关的文章，如下图：

然后笔者在GitHub找了一下，发现可以通过xmind-embed-viewer这个包来实现 xmind 文件的在线预览

好了接下来就是站在巨人的肩膀上 Coding，以下是一个笔者在Vitepress中使用的例子：

XmindViewer.vue

给容器加了一个loading的效果：

Loading.vue

使用：

vue 复制代码

<script setup>
  import XmindViewer from '@/XmindViewer'
</script>

<XmindViewer url="https://mp-cb2e47ef-a802-469a-a81c-2b6efa9f8b60.cdn.bspapp.com/xmind/browser-rendering-flow.xmind"/>

效果：

点击此处获取源码。

总结

本文借助xmind-embed-viewer，实现了xmind文件的在线预览功能，如果有掘友遇到相关需求，到掘金能够搜索到这篇文章，也算没白写，哈哈！

如果本文对你有一点点帮助，点个赞支持一下吧，你的每一个【赞】都是我创作的最大动力 ^_^。