mermaidを非同期で読み込む

UMLを書くツールのmermaidがすごくいいのですが
使ってると共通部品を別ファイルとして外だししたくなってきます
そうなるとajax等で動的に読み込む仕組みがほしくなります

ただmermaidのデフォルトだと
HTMLがreadyになったタイミングでパースとかの処理が走ってしまうのでうまくない

そこで今日はパース処理をHTMLがreadyの状態以外で読み込む方法を調べた

非同期で読み込むサンプル

<!DOCTYPE html>
<div class="mermaid"></div>
<script src="https://unpkg.com/mermaid@7.1.2/dist/mermaid.js"></script>
<script>mermaid.initialize({startOnLoad:false});</script> <!-- 処理しない -->

<script>
setTimeout(() => {
  var text = `
  graph LR
    A --> D
    B --> D
    C --> D
  `.trim();
  document.querySelector('.mermaid').innerHTML = text;
  mermaid.init();// パース開始
}, 3000);// 3秒待つ
</script>

ミソはinitialize()init()

mermaid.initialize({startOnLoad:false})

これで勝手にパース処理が走るのを抑止します
そして任意のタイミングで

mermaid.init()

を呼ぶとパース処理を開始できる
思ったより簡単だった

これでajaxからの非同期読み込みができるぞー
vue.jsとかで編集をリアルタイムに描画できるぞー