Mermaid เป็น JavaScript ที่สามารถทำพวก chart, diagram, graph, UML ได้จากการเขียน markup ( เรียกง่าย ๆ ว่าตัวหนังสือที่มีรูปแบบง่าย ๆ นี่ละ ) ที่นิยมใช้จน AI บางตัวก็เขียนให้เราได้
basic.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Mermaid: Basic</title></head><body> <div class="mermaid"> graph TD A[Enter Chart Definition] --> B(Preview) B --> C{decide} C --> D[Keep] C --> E[Edit Definition] E --> B D --> F[Save Image and Code] F --> B </div> <script type="module"> import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs'; </script></body></html> |
จาก code จะเห็นว่าง่าย มาก มีแค่ 2 ส่วน คือ
- class=”mermaid” เป็นส่วนที่บอกว่า markup อยู่ในนี้นะ และเป็นส่วนที่จะแสดงผล SVG graph ที่เราเขียนไว้ข้างในด้วย
- ส่วนที่เรียกทำงาน
123
<script type="module">import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';</script>
เท่านี้ ก็แสดงกราฟที่เราต้องการได้แล้ว สังเกตุ ช้างใน div class=”mermaid” กับ ภาพที่ออกมา มันง่าย ๆ จริง ๆ
อ่านเพิ่มเติม