Cara Menyertakan Diagram Putri Duyung di Proyek GitHub Anda

Platform berbagi kode yang populer, GitHub, telah mengumumkan dukungan untuk jenis konten tersemat baru. Dalam file penurunan harga, Anda sekarang dapat menggunakan sintaks Mermaid untuk membuat diagram alur, diagram urutan, dan lainnya dengan mudah.

Rasa penurunan harga GitHub sudah menangani gambar, daftar tugas, dan kode pendek emoji. Dengan dukungan untuk diagram umum, GitHub melakukan bagiannya untuk dokumentasi yang lebih informatif dan berguna.

Apa yang Baru Dengan GitHub?

Anda sekarang dapat menyematkan kode Mermaid di README.md dan file penurunan harga lainnya. Jika Anda melakukannya, GitHub akan membuat diagram yang dijelaskan oleh kode itu. Kode putri duyung menggunakan sintaks sederhana yang menggambarkan bagian individu dari setiap diagram dalam teks biasa.

Lihat juga: Apa itu GitHub? Pengantar Fitur Dasarnya

Bagaimana Anda Menyertakan Diagram?

1. Pilih file penurunan harga yang ada atau buat yang baru untuk ditambahkan ke repositori Anda. Gunakan juga .md atau .penurunan harga ekstensi.
instagram viewer
2. Tambahkan beberapa kode Mermaid ke file itu. Kode apa yang terserah Anda; berikut adalah contoh sederhana untuk memulai:

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

3. Lihat file di GitHub. Anda akan melihat rendering diagram yang bagus.

Sekarang Anda hanya perlu mempelajari kekayaan diagram yang tersedia di Mermaid. Atau Anda bisa merujuk ke putri duyung dokumentasi ketika dan ketika Anda membutuhkan diagram.

Jenis Diagram Apa yang Dapat Saya Gunakan?

Mermaid mendukung jenis diagram berikut:

• Diagram alir
• Urutan
• Kelas
• Negara
• Hubungan Entitas
• Perjalanan Pengguna
• Gantt
• Pai
• Persyaratan

Lihat juga: Gantt Chart vs. Bagan PERT: Apa Perbedaannya?

Masing-masing memiliki sintaks sendiri, untuk mencerminkan jenis data yang ditampilkan diagram. Misalnya, inilah kode untuk diagram urutan sederhana:

urutanDiagram
 Bart->>Homer: Jangan punya sapi, kawan.

Yang terlihat seperti ini saat dirender:

Dan inilah kode untuk diagram keadaan dasar:

stateDiagram-v2
 [*] --> Baru
 Baru -> Siap: diterima
 Siap -> Berjalan: pengiriman penjadwal
 Menjalankan -> Siap: interupsi
 Menjalankan -> Menunggu: I/O atau acara menunggu
 Menunggu -> Siap: I/O atau penyelesaian acara
 Menjalankan -> Dihentikan: keluar
 Dihentikan --> [*]

Yang membuat seperti itu:

Tambahkan Nilai ke Proyek GitHub Anda Dengan Diagram Putri Duyung

Diagram putri duyung adalah tambahan yang berguna untuk GitHub, terutama karena kami yakin diagram tersebut mendorong dokumentasi yang lebih baik. Banyak proyek dapat ditingkatkan dengan beberapa penjelasan visual langsung di dokumentasi atau file README mereka.

GitHub sekarang menjadi layanan yang sangat populer, fitur dan perubahannya memengaruhi banyak pengembang di seluruh dunia. Untungnya, dukungan untuk diagram Mermaid ada jika Anda membutuhkannya, dan tidak terlihat jika Anda tidak membutuhkannya. Tapi, semoga, Anda akan mulai melihat beberapa dokumentasi yang lebih bagus setidaknya.

Cara Meng-host Situs Web Gratis Menggunakan Halaman GitHub

Jika Anda memiliki situs web sederhana, Anda tidak perlu membayar untuk web hosting. Anda dapat menggunakan Halaman GitHub secara gratis!

Baca Selanjutnya

Tentang Penulis