The Implementation of Mermaid.js to Enhance Diagram-as-Code Competence among Students of SMKN 8 Pekanbaru
DOI:
https://doi.org/10.31849/9tsdew22Keywords:
Mermaid.js, Algorithm Learning, Diagram as Code, Vocational High School, Technical DocumentationAbstract
Algorithm learning at SMKN 8 Pekanbaru currently faces inefficiencies due to the reliance on manual, graphic-based flowchart creation methods (drag-and-drop). This approach is considered time-consuming and creates a competency gap regarding industry standards, which increasingly demand code-integrated documentation (Diagram as Code). This community service activity aims to enhance the competency of Software Engineering (RPL) and Computer Network Engineering (TKJ) students through training on Mermaid.js implementation. The activity was conducted on December 23, 2025, at the Faculty of Computer Science Laboratory, Universitas Lancang Kuning, utilizing intensive training methods, live coding practices, and project-based learning. Evaluation results from 10 participants demonstrated a significant improvement in cognitive competence, indicated by an increase in the average score from 48.0 (Pre-Test) to 85.5 (Post-Test). In terms of psychomotor skills, 100% of participants successfully completed the login system flowchart project integrated with GitHub. The partner satisfaction level reached 96%, categorized as "Very Satisfied." It is concluded that the implementation of Mermaid.js effectively improves students' understanding of algorithmic logic and technical documentation efficiency in accordance with industry demands.
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.
