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とかで編集をリアルタイムに描画できるぞー