GitBucket Markdown Enhanced Plugin でプレビュー時に mermaid 図形が描画されない不具合を修正しました。

概要

GitBucket用のプラグイン GitBucket Markdown Enhanced Pluginを開発しています。

今回は、マークダウンの編集時、プレビューを表示した際に mermaid 図形が描画されない不具合を修正した方法について、説明します。

前回の記事

当初 mermaid.render() を利用したがうまくいかなかった

src\main\resources\gme\assets\gme.js を修正していきます。

• mermaid can't render on preview · Issue #2 · yasumichi/gitbucket-markdown-enhanced

当初、上記 issue に記載したコードに修正しました。肝となる部分は、次の関数です。

    var renderMermaid = function() {
        document.querySelectorAll('.mermaid').forEach(async (node, index) => {
            const graphDefinition = node.textContent;
            const graphId = `mermaid-${index}`;
            node.id = graphId;
            const renderResult = await mermaid.mermaidAPI.render(graphId, graphDefinition, node);
            node.innerHTML = renderResult;
        });
    };

途中までは、描画されるのですが、syntax error in text mermaid ... というエラーが表示されてしまいました。

Google さんに聞いたら mermaid.render() ではなく mermaid.run() の使用が推奨されるとのこと

ということで GitBucket Markdown Enhanced Plugin でプレビュー時に KaTeX が描画されない問題の対処 で対処したあたりで mermaid.run() を実行したら、簡単に解消しました。

• Enable render mermaid in preview · yasumichi/gitbucket-markdown-enhanced@7ac9375

diff --git a/src/main/resources/gme/assets/gme.js b/src/main/resources/gme/assets/gme.js
index afc3f3b..78acbe8 100644
--- a/src/main/resources/gme/assets/gme.js
+++ b/src/main/resources/gme/assets/gme.js
@@ -20,10 +20,11 @@
             const config = { attributes: false, childList: true, subtree: false };

             const observer = new MutationObserver((mutations) => {
-                mutations.forEach((mutation) => {
+                mutations.forEach(async (mutation) => {
                     if (mutation.addedNodes.length == 1) {
                         observer.disconnect();
                         renderKatex();
+                        await mermaid.run();
                         observer.observe(preview, config);
                     }
                 });

関連リンク