linux端Typora不支持Mermaid新语法的解决办法

概要

  最近使用typora编辑markdown文件的时候，发现能使用mermaid功能来画流程图或者结构图。但是，有些功能在本地的typora无法使用，在线上的mermaid却能正常使用。
  

问题原因

  主要原因在于本地typora使用的mermaid版本低于线上mermaid的版本，所以导致有些功能无法使用。
  本地查看mermaid的版本的方法，如下:

```mermaid
info
```

  用这种方式就能查看当前markdown编辑器的mermaid的版本是多少了，比如CSDN内置mermaid,如下显示：

  而目前mermaid的官方已经更新到10.9.0的版本，明显存在差异，这就导致mermaid的功能可能无法满足需求。

解决方案

  从上面分析到原因后，主要的问题在于如何更新mermaid的版本，在typora的安装目录下辗转反侧了很久，于是在网上查看了很多资料如：
  转载：Typora不支持最新Mermaid语法的解决办法 - 郄郄私语 (qzy.im)
这位大神给出的方法，解决了windows和mac端的问题，但是无法解决linux端的问题
  这里主要给出linux端问题的解决方案，windows和mac就不再赘述，请移步观摩大神的文章。
  本文中的方法对linux高版本的1.xx的typora也同样奏效：

步骤：

step 1：安装npm工具
  sudo apt-get install npm

step 2：安装asar工具
  sudo npm install -g asar --registry=https://registry.npm.taobao.org

step 3: 下载mermaid 9.3.0的版本
  wget https://unpkg.com/mermaid@9.3.0/dist/mermaid.min.js
  具体的mermaid版本更新较快，可以更改mermaid@x.x.x下载到对应的版本

step 4: 跳转到typora安装目录，并解压lib.asar
  typora默认安装在/usr/share/typora

# 根目录下文件夹操作需要root权限，这里直接一步到位进入到root
sudo su
cd /usr/share/typora/resources
asar extract lib.asar lib/

step 6：替换新版mermaid的js文件
   这里使用软链接的方式替换的mermaid.min.js，当然也可以用cp的指令来替换该文件。

# 根目录下文件夹操作需要root权限，这里直接一步到位进入到root
sudo su
cd /usr/share/typora/resources/lib/diagram
# 备份一下当前使用的mermaid以防typora无法使用新版mermaid
cp mermaid.min.js mermaid.min.js.bk
# 使用软链接的方式，新版mermaid文件的路径根据下载实际情况做调整
ln -sf /xxx/xxx/xxx/10.9.0/mermaid.min.js mermaid.min.js

step 5：修改frame.js接入mermaid的文件路径

# 根目录下文件夹操作需要root权限，这里直接一步到位进入到root
sudo su
cd /usr/share/typora/resources
# 打开frame.js
vi appsrc/window/frame.js

查找mermaid.min.js如下：
n=File.isNode?"./lib.asar":"./lib",m.getScript(n+"/diagram/diagram.min.js",function(){m.get Script(n+"/diagram/mermaid.min.js",function()
可以看到这里的n我们使用".lib"就行，所以修改为如下语句：
n="./lib",m.getScript(n+"/diagram/diagram.min.js",function(){m.get Script(n+"/diagram/mermaid.min.js",function()
这样就默认使用lib路径下的文件了。

  这样修改有一个好处就是后续如果我们想使用更新版本的mermaid时，直接替换lib/diagram下mermaid.min,js就行。
且目前这样的修改是适用于所有版本typora

如上步骤就实现了typora的mermaid版本更新，如下是我的typora更新完成后的结果：