优化：让Typora集成指定版本Mermaid

一、背景：为什么要升级Typora的Mermaid版本？

Typora 作为广受好评的 Markdown 编辑器，内置的 Mermaid 功能为我们绘制流程图、时序图、甘特图等提供了极大便利。但由于 Typora 和 Mermaid 是独立维护的项目，Typora 内置的 Mermaid 版本往往滞后于官方最新版本（例如 Typora v0.9.89 默认仅集成 Mermaid 8.4.0）。

旧版本的 Mermaid 存在两大局限：

• 不支持新的图表类型（如 Sankey 图、饼图增强特性）；
• 部分语法在新版本中已优化，旧版本可能出现解析错误。

因此，我们需要手动替换本地 Mermaid 库，让 Typora 支持最新特性。

二、操作步骤：从“版本检查”到“功能验证”

1. 检查当前Typora的Mermaid版本

打开 Typora，新建文档并插入 Mermaid 代码块，输入以下内容即可查看当前版本：

info

若输出为 v8.4.0，则说明需要升级。

2. 下载最新版Mermaid库到本地

我们以 Mermaid 8.14.0（兼顾稳定性与新特性）为例，执行以下操作：

• 下载链接：https://unpkg.com/mermaid@8.14.0/dist/mermaid.min.js
• 存储路径：将文件保存到 Typora 安装目录（如 D:/app/Typora），也可选择其他自定义路径（需与后续配置保持一致）。

3. 修改Typora的配置文件window.html

找到 Typora 安装目录下的 resources\app\window.html 文件（如 D:\app\Typora\resources\app\window.html），在 </body> 标签前添加以下代码：

        <script>
        	const interval = setInterval(() => {
        		console.log('check mermaid...');
        		if (window.editor &&
        			window.editor.diagrams &&
        			window.mermaidAPI) {
        			$.getScript('file:///D:/app/Typora/mermaid.min.js') 
        				.then(() => {
        					mermaidAPI = mermaid.mermaidAPI;
        					editor.diagrams.refreshDiagram(editor);
        					clearInterval(interval);
        				});
        		}
        	}, 100);
        </script>

注意：需将 file:///D:/app/Typora/mermaid.min.js 替换为你实际的文件存储路径。

4. 验证Mermaid版本是否升级成功

重启 Typora 后，再次插入 Mermaid 代码块并执行：

info

若输出为 v8.14.0，则说明升级成功。

5. 绘制新特性图表（以流程图为例）

以下是一个包含新版本特性的流程图示例，可直接在 Typora 中测试：

flowchart LR
    client[APP] -->|www.lxf.com| EO[EO服务]
    EO -->|98%| CLB1["主：腾讯云CLB"]
    EO -.->|2%| CLB2["热备：阿里云CLB"]
    CLB1 --> TKE[腾讯云TCK]
    CLB2 -.-> ACK[阿里云ACK]

三、扩展：Mermaid 8.14.0的新特性（可选）

升级到 8.14.0 后，你可以尝试这些新功能：

• 时序图增强：支持更灵活的异步消息、循环逻辑；
• 饼图样式优化：可自定义颜色、标签显示方式；
• 甘特图细节完善：任务依赖、时间刻度的表现更精准。

例如，绘制一个带样式的饼图：

pie
    title 支付方式占比
    "微信支付" : 45
    "支付宝" : 35
    "银行卡" : 15
    "其他" : 5

通过以上步骤，你可以让 Typora 完美支持最新版 Mermaid，在 Markdown 中轻松绘制更丰富、更专业的图表，提升文档的可视化表达能力。

参考文章：Typora不支持最新Mermaid语法的解决办法 - 郄郄私语