Typore中升级mermaid到最新版本

背景简述

笔者今天在写计算机网络的实验报告的时候，想要使用 mermaid 绘制数据包结构图，但是 Typore 支持的 mermaid 为 version 10.9.1。这个版本是不支持数据包结构图的，所以笔者想升级到 version 11.4.1。但是现在网上并没有可用的方法，在尝试后，自己解决了这个问题，为了方便后人，写一篇blog。

可以看到 CSDN 支持的 mermaid 只有落后的 version 8.14.0。

声明：此方法在 windows 11 操作系统上可用，笔者没有 Mac，所以不知道在 Mac 上是否可用，或使用类似的方法

提醒：文章中对文件的所有修改，请自主备份，避免出现无可挽回的损失

具体操作

1. 下载新版 mermaid 的 mermaid.min.js 文件

   • 因为 mermaid 是 npm 的一个包，可以正常从 unpkg上下载，也可以从 mermaid 文档中提供的网站上下载。这两个网址打开后直接右键另存为即可。
     

2. 打开 Typore 所在的文件夹，找到 resources 文件夹下的 lib.asar 文件。

3. 使用任意的手段，将这个文件夹解压，我是用的是Bandizip

4. 解压后大概是这个样子
   

5. 我们要替换掉 diagram 文件夹中的 mermaid.min.js 文件。将我们从网上下载下来的 mermaid.min.js 文件直接复制粘贴过来即可。

6. 接下来就是把这个文件夹重新打包成 lib.asar 文件。

   • 打包这个文件需要使用 asar 包，可以使用 npm install -g asar 安装，安装好后可以用 asar -V 测试，会打印对应的版本号，注意 -V 要大写。
   • 使用 asar pack ./ lib.asar 命令打包这个文件夹。可以看到文件夹中生成了新的 lib.asar 文件
     

7. 最后用这个新的文件替换原来的 lib.asar 文件即可。

8. 在 Typore 中实际测试通过。可以看到，运行的很完美。
   

结语

这个方法其实是受到其他文章对替换 Mac 上 Typore 的 mermaid 版本的方法启发，巧合之下发现的。那篇文章中写到的对 windows 系统上进行替换的方法现在已经失效（至少在我的电脑上失效了）。于是有了这篇文章。因为启发归启发，又没有用人家文章里的东西。所以这里就不放链接了。