Mermaid.js: basic

phunsanit

5 days ago

Mermaid เป็น JavaScript ที่สามารถทำพวก chart, diagram, graph, UML ได้จากการเขียน markup ( เรียกง่าย ๆ ว่าตัวหนังสือที่มีรูปแบบง่าย ๆ นี่ละ ) ที่นิยมใช้จน AI บางตัวก็เขียนให้เราได้
basic.html

<!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>

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

จาก code จะเห็นว่าง่าย มาก มีแค่ 2 ส่วน คือ

class=”mermaid” เป็นส่วนที่บอกว่า markup อยู่ในนี้นะ และเป็นส่วนที่จะแสดงผล SVG graph ที่เราเขียนไว้ข้างในด้วย

ส่วนที่เรียกทำงาน

<script type="module">
    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
</script>

เท่านี้ ก็แสดงกราฟที่เราต้องการได้แล้ว สังเกตุ ช้างใน div class=”mermaid” กับ ภาพที่ออกมา มันง่าย ๆ จริง ๆ

อ่านเพิ่มเติม