IMPLEMENTASI MERMAID.JS UNTUK PENINGKATAN KOMPETENSI DIAGRAM AS CODE PADA SISWA SMKN 8 PEKANBARU
DOI:
https://doi.org/10.31849/9tsdew22Keywords:
mermaid.js, pembelajaran algoritma, diagram as code, mkn 8 pekanbaru, dokumentasi teknisAbstract
Pembelajaran algoritma di SMKN 8 Pekanbaru menghadapi kendala inefisiensi akibat penggunaan metode pembuatan flowchart manual berbasis grafis (drag-and-drop). Metode ini dinilai lambat dan menciptakan kesenjangan kompetensi dengan standar industri yang menuntut dokumentasi terintegrasi kode (Diagram as Code). Pengabdian masyarakat ini bertujuan meningkatkan kompetensi siswa jurusan RPL dan TKJ melalui pelatihan implementasi Mermaid.js. Kegiatan dilaksanakan pada 23 Desember 2025 di Laboratorium Fakultas Ilmu Komputer Universitas Lancang Kuning dengan metode pelatihan intensif, praktik live coding, dan penyelesaian proyek. Hasil evaluasi terhadap 10 peserta menunjukkan peningkatan signifikan kompetensi kognitif, ditandai dengan kenaikan nilai rata-rata dari 48,0 (Pre-Test) menjadi 85,5 (Post-Test). Secara psikomotorik, 100% peserta berhasil menyelesaikan proyek pembuatan diagram alir sistem login yang terintegrasi dengan GitHub. Tingkat kepuasan mitra mencapai 96% dengan kategori "Sangat Puas". Disimpulkan bahwa implementasi Mermaid.js efektif meningkatkan pemahaman logika algoritma serta efisiensi dokumentasi teknis siswa sesuai tuntutan industri.
References
Damre, Mangesh, Alessandro Marchetto, and Alejandro Giorgetti. 2019. “MERMAID: Dedicated Web Server to Prepare and Run Coarse-Grained Membrane Protein Dynamics.” Nucleic Acids Research 47(W1): W456--W461.
González Guerra, Diego, and others. 2025. “Project Master: Aplicación Para La Visualización, Edición y Mejora de Diagramas Mermaid.”
Mussies, Martine, and Emiel Maliepaard. 2017. “The Cyborg Mermaid (or: How Technè Can Help the Misfits Fit In).” Multimodal Technologies and Interaction 1(1): 4.
Myisha, Nabila, Dinda Sabila, Dinera Qurrotul Aini, Mayang Anggun Febrianti, and Farah Malaika Putri. 2024. “Representation of Diversity In< I> The Little Mermaid< I>(2023).” Cultural Narratives 2(1): 1–13.
Nasution, Nurliana, and Mhd Arief Hasan. 2019. “Ibm Pelatihan Cms Content Dan Digital Jurnalistik.” Dinamisia : Jurnal Pengabdian Kepada Masyarakat 3(1): 22–30. doi:10.31849/dinamisia.v3i1.1482.
Nasution, Nurliana, Feldiansyah Bakri Nasution, and Mhd Arief Hasan. 2022. “PKM PELATIHAN PEMBUATAN GAME MENGGUNAKAN UNITY UNTUK SISWA SMK DI KOTA PEKANBARU.” Journal of Computer Science Community Service 2(2): 117–27.
Sidehabi, Sitti Wetenriajeng, Hamdan Gani, and others. 2025. “Penerapan Chatgpt Dan Draw. Io Untuk Otomatisasi Flowchart Menggunakan Mermaid Code.” Hexagon 6(1): 85–93.
Strandvad, Sara Malou, Tracy C Davis, and Megan Dunn. 2022. “Mermaids as Market Creators: Cultural Entrepreneurship in an Emerging Practice.” International Journal of Cultural Studies 25(1): 68–85.
Sveidqvist, Knut, and Ashish Jain. 2021. The Official Guide to Mermaid. Js: Create Complex Diagrams and Beautiful Flowcharts Easily Using Text and Code. Packt Publishing Ltd.
Verma, Rita Prasad. 2021. “Genetics of Sirenomelia, the Mermaid Syndrome.” In Congenital Anomalies in Newborn Infants-Clinical and Etiopathological Perspectives, IntechOpen.
