#mermaid.jsとは
- マークダウンにて、フローチャート・ダイアグラム・シーケンス図など記載できます。
- javascriptで動くので、軽く使いやすいです。
- VScodeにプレビュー機能が付いたプラグインがあるのでぜひどうぞ
#結論
- 描画するAttributeを削除
removeAttribute('data-processed'); - 再びinitすればOK
mermaid.init();
##ソースコード
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="mermaid.min.css">
</head>
<body>
<input id="chart-src" onchange="changechart()" textarea value="
graph TD;
あ-->B;
あ-->C;
B-->D;
C-->D;">
</input>
<div id="flowchart" class="mermaid">
</div>
<script src="https://unpkg.com/mermaid@7.1.0/dist/mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad:false});</script>
<script>
let aa = document.getElementById("chart-src").value;
document.getElementById("flowchart").innerHTML = aa;
mermaid.init();
</script>
<script>
function changechart(){
document.getElementById("flowchart").removeAttribute('data-processed');
let aa = document.getElementById("chart-src").value;
document.getElementById("flowchart").innerHTML = aa;
mermaid.init();
}
</script>
<body>
</html>
※汚いソースコードなのはご勘弁ください。