อันนี้ลองเขียนดูแบบ ให้สามารถลองเขียน ลองเปลี่ยนตัว mermaid markup ได้ง่าย ๆ ถึงจะมี Mermaid Live Editor อยู่แต่ในการเขียน program การดึงมันจาก database หรือ API ต่าง ๆ แบบ dynamic render ออกมาเป็น SVG เป็นสิ่งที่ต้องใช้บ่อย ๆ
<!DOCTYPE html>
<html> <head> <meta charset="utf-8"> <title>Mermaid: Dynamic Render</title>
</head> <body> <a href="https://mermaid.js.org/intro/#diagram-types" target="_blank">Mermaid Diagram Types</a><br> <label for="exampleFormControlTextarea1">Here is a mermaid diagram:</label> <br> <textarea cols="100" id="sourceTa" rows="10">
pie title What Voldemort doesn't have?
"FRIENDS" : 2
"FAMILY" : 3
"NOSE" : 45</textarea> <br> <button id="submitBtn" type="button">Submit</button> <button id="resetBtn" type="button">Reset</button> <br> <svg id="previewSVG"></svg> <script type="module"> import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs'; mermaid.initialize ({ startOnLoad: false }) const sourceTa = document.getElementById ('sourceTa') ; const previewSVG = document.getElementById ('previewSVG') ; document.getElementById ('resetBtn') .onclick = function () { previewSVG.innerHTML = ''; }; document.getElementById ('submitBtn') .onclick = function () { mermaid.render ('preview', sourceTa.value) .then ( ({ svg }) => { previewSVG.innerHTML = svg; }) .catch (error => { alert ('Mermaid diagram error: ' + error.message) ; }) ; }; </script>
</body> </html>
แค่ 2 บรรทัด
- mermaid.initialize ({ startOnLoad: false }) บอก mermaid ว่าไม่ต้องทำงานก่อนนะ พักก่อน
- mermaid.render อันนี้ก็ตามชื่อเลย render ตาม markup ที่ป้อนเข้าไป แล้วคืนมาเป็น SVG