Read this post in: de_DEen_USes_ESfr_FRhi_INjapl_PLpt_PTru_RUvizh_CNzh_TW

Panduan Referensi Playbook PlantUML VPASCode

Daftar artikel yang dikurasi dari Playbook PlantUML VPASCode yang menampilkan panduan sintaks untuk alur kerja diagram-as-code UML dan non-UML.

Inti dan Dasar-dasar Sintaks PlantUML

  1. Dasar-dasar Sintaks PlantUML: Kuasai sintaks dasar PlantUML yang mencakup deklarasi diagram dengan @startuml/@enduml, definisi entitas, operator hubungan, arahan penataan, dan kata kunci umum. Pelajari cara membuat skrip PlantUML yang bersih dan mudah dibaca yang secara otomatis menghasilkan diagram profesional. [[34]]

  2. Panduan Sintaks Diagram Kasus Pengguna PlantUML: Pelajari cara memodelkan kebutuhan fungsional dan interaksi aktor menggunakan diagram kasus pengguna PlantUML. Mencakup aktor, kasus pengguna, batas sistem, hubungan include/extend, dan pola generalisasi untuk dokumentasi kebutuhan dan pemetaan cerita pengguna.

  3. Panduan Sintaks Diagram Kelas PlantUML: Rancang struktur sistem statis dengan diagram kelas PlantUML. Kuasai deklarasi kelas/atribut/metode, modifikator visibilitas, pewarisan (<|--), komposisi (*--), agregasi (o--), dan hubungan asosiasi untuk dokumentasi arsitektur berbasis objek. [[49]]

  4. Panduan Sintaks Diagram Urutan PlantUML: Model alur pesan dan interaksi temporal antar komponen sistem. Pelajari deklarasi peserta, pesan sinkron/asinkron (->, -->), batang aktivasi, perulangan, blok alt/else, dan sintaks pembuatan/deaktivasi untuk desain API dan diagram komunikasi mikroservis. [[51]]

  5. Panduan Sintaks Diagram Aktivitas PlantUML: Visualisasikan proses bisnis dan alur kerja algoritmik menggunakan sintaks diagram aktivitas PlantUML. Mencakup node mulai/selesai, tindakan, cabang bersyarat (if/then/else), perulangan (repeat/while), cabang paralel, dan jalur pemisah untuk dokumentasi logika prosedural. [[46]]

  6. Panduan Sintaks Diagram Status PlantUML: Model mesin status hingga dan transisi siklus hidup objek. Pelajari deklarasi status, panah transisi (-->), tindakan masuk/keluar, status komposit, dan wilayah bersamaan untuk desain sistem berbasis peristiwa dan spesifikasi perilaku. [[36]]

  7. Panduan Sintaks Diagram Objek PlantUML: Ilustrasikan instans objek konkret dan hubungan runtime mereka pada saat tertentu. Kuasai penamaan objek, penugasan nilai atribut, sintaks tautan, dan asosiasi tingkat instans untuk debugging dan visualisasi skenario pengujian. [[15]]

  8. Panduan Sintaks Diagram Komponen PlantUML: Peta arsitektur perangkat lunak modular dengan komponen, antarmuka, dan ketergantungan. Pelajari deklarasi komponen, antarmuka yang disediakan/dibutuhkan (<>), panah ketergantungan, dan pengelompokan paket untuk dokumentasi sistem mikroservis dan berbasis plugin. [[35]]

Jenis Diagram PlantUML Lanjutan

  1. Panduan Sintaks Diagram Penempatan PlantUML: Model infrastruktur fisik dan topologi penempatan runtime. Kuasai node, awan, bingkai, basis data, dan artefak elemen, sintaks kontainer bersarang, dan penandaan protokol jaringan untuk buku petunjuk DevOps dan diagram arsitektur awan. [[31]]

@startuml
skinparam shadowing false
skinparam defaultFontName "Arial"

' Tentukan gaya
skinparam node {
BackgroundColor #F1F8FF
BorderColor #005CC5
FontColor #032F62
}

skinparam database {
BackgroundColor #FFF5E6
BorderColor #D96F00
FontColor #5C3000
}

skinparam artifact {
BackgroundColor #E6FFF1
BorderColor #008670
FontColor #004D40
}

left to right direction

' Zona Jaringan / Node
node "Jaringan Pengiriman Konten" as cdn <<CDN>> {
artifact "Aset Statis yang Dicache" as static
}

node "Pembagi Beban" as lb <<F5 / HAProxy>>

node "Server Aplikasi" as appServer <<Ubuntu Linux>> {
node "Kontainer Docker" as docker {
artifact "app.war" as artifactApp
}
}

node "Server Basis Data" as dbServer <<Cluster>> {
database "Basis Data Produksi" as db <<PostgreSQL>>
}

' Koneksi dengan Label Protokol
cdn --> lb : HTTP/HTTPS (Port 443)
lb --> artifactApp : HTTP (Port 8080)
artifactApp --> db : JDBC / SQL (Port 5432)

@enduml

Contoh: Arsitektur tiga lapisan klasik yang menunjukkan CDN, pembagi beban, server aplikasi dengan artefak bersarang, dan lapisan basis data dengan koneksi berlabel protokol. [[1]]

@startuml

skinparam shadowing false

skinparam defaultFontName "Arial"

skinparam linetype ortho

' Definisi Gaya

skinparam rectangle {

    BackgroundColor #F4F6F9

    BorderColor #A0AAB2

    FontColor #232F3E

}

skinparam node {

    BackgroundColor #E2F3FC

    BorderColor #4A90E2

    FontColor #111111

}

skinparam database {

    BackgroundColor #FFF2E6

    BorderColor #FF9900

    FontColor #232F3E

}

' Titik Masuk Infrastruktur

node "AWS Route 53" as dns

node "AWS Application Load Balancer" as alb

dns --> alb : Rute Lalu Lintas

' Perimeter Awan Global

rectangle "Wilayah Cloud AWS" {

   

    ' Batas Klaster Kubernetes Cross-AZ

    rectangle "Klaster Amazon EKS" as eks {

       

        ' Zona Ketersediaan 1

        rectangle "Zona Ketersediaan us-east-1a" as az1 #line.dashed {

            node "Node Pekerja EC2 (AZ1)" as node1 {

                rectangle "Pod Frontend" as podWeb1 <<K8s Pod>> {

                    artifact "Kontainer Nginx" as containerWeb1

                }

                rectangle "Pod API Backend" as podApi1 <<K8s Pod>> {

                    artifact "Kontainer Aplikasi Go" as containerApi1

                }

            }

        }

        ' Zona Ketersediaan 2

        rectangle "Zona Ketersediaan us-east-1b" as az2 #line.dashed {

            node "Node Pekerja EC2 (AZ2)" as node2 {

                rectangle "Pod Frontend" as podWeb2 <<K8s Pod>> {

                    artifact "Kontainer Nginx" as containerWeb2

                }

                rectangle "Pod API Backend" as podApi2 <<K8s Pod>> {

                    artifact "Kontainer Aplikasi Go" as containerApi2

                }

            }

        }

    }

    ' Lapisan Basis Data Bersama

    rectangle "Mesin Penyimpanan Amazon Aurora" as storage {

        database "Aurora Primer (Penulis)" as dbMaster

        database "Aurora Replika (Pembaca)" as dbReplica

    }

}

' Routing & Matriks Lalu Lintas

alb --> podWeb1 : HTTP/S (Port 80/443)

alb --> podWeb2 : HTTP/S (Port 80/443)

podWeb1 --> podApi1 : gRPC (Port 50051)

podWeb2 --> podApi2 : gRPC (Port 50051)

podApi1 --> dbMaster : TCP (Port 5432)

podApi2 --> dbMaster : TCP (Port 5432)

dbMaster .right.> dbReplica : Replikasi Otomatis Penyimpanan

@enduml

Contoh: Penempatan Kubernetes berbasis awan di seluruh zona ketersediaan AWS dengan routing pembagi beban, penempatan pod bersarang, dan klaster basis data bersama. [[1]]

  1. Panduan Sintaks Diagram Waktu PlantUML: Visualisasikan durasi status yang tepat dan batasan temporal sepanjang garis waktu linear. Pelajari kuat/ringkasgaya peserta, @titikwaktupenugasan status, jamgenerasi gelombang, dan <->anotasi batasan untuk sistem tertanam dan spesifikasi protokol. [[30]]

@startuml
skinparam handwritten false
skinparam shadowing false
skinparam defaultFontName "Arial"

' Judul diagram waktu
title Timeline Sinkronisasi Register Bus Data

' Tentukan gelombang jam periodik (periode 10 unit, tinggi 5 unit)
clock "Jam Sistem" sebagai CLK dengan periode 10 pulsa 5

' Tentukan peserta kuat Bus Data
kuat "Register Bus Data" sebagai BUS

' Waktu 0: Status awal register
@0
BUS adalah Kosong

' Waktu 10: Bus data berpindah ke Membaca
@10
BUS adalah Membaca

' Waktu 20: Bus data berpindah ke Menulis
@20
BUS adalah Menulis

' Waktu 22: Tampilkan label teks khusus pada garis waktu
@22
catatan atas BUS : T_WRITE

' Waktu 30: Bus data menjadi Terkunci
@30
BUS adalah Terkunci

' Waktu 35: Tampilkan label teks khusus pada garis waktu
@35
catatan atas BUS : T_LOCK

' Waktu 40: Bus data kembali ke Kosong
@40
BUS adalah Kosong

' Tambahkan anotasi batasan temporal menggunakan titik numerik eksplisit
@22 <-> @35 : {Durasi 13 TU}

@enduml

Contoh: Garis waktu ringkas yang menunjukkan status register bus data (Kosong → Membaca → Menulis → Terkunci) yang disinkronkan dengan gelombang jam sistem periodik. [[12]]

@startuml

skinparam shadowing false

skinparam defaultFontName "Arial"

' Judul diagram waktu multi-thread

title Sinkronisasi Thread Klien Web & Pekerja Otorisasi

' Deklarasikan garis waktu menggunakan gaya peserta kuat

kuat "Thread Klien Web" sebagai CLIENT

kuat "Thread Pekerja Otorisasi" sebagai AUTH

' Waktu 0ms: Status Awal Idle

@0

CLIENT adalah Idle

AUTH adalah Idle

' Waktu 10ms: Klien memicu permintaan otorisasi

@10

CLIENT adalah "Menunggu Otorisasi"

AUTH adalah "Memverifikasi Kredensial"

' Waktu 25ms: Klien mengirim payload tambahan / Otorisasi memulai generasi token

@25

AUTH adalah "Menghasilkan Token JWT"

' Waktu 40ms: Otorisasi menyelesaikan generasi token dan merespons klien

@40

AUTH adalah Idle

CLIENT adalah "Dioptimalkan"

' Waktu 55ms: Klien kembali ke status default

@55

CLIENT adalah Idle

' Anotasi Jendela Batasan Temporal 30ms (Dari @10 ke @40)

@10 <-> @40 : {Jendela Generasi 30ms}

@enduml

Contoh: Garis waktu multi-thread kuat yang memetakan status klien web dan pekerja otorisasi dengan anotasi batasan jendela generasi 30ms. [[12]]

  1. Panduan Sintaks Diagram ERD PlantUML: Rancang diagram entitas-relationship untuk dokumentasi skema basis data. Kuasai deklarasi entitas, tipe atribut, notasi kunci primer/kunci asing, dan hubungan kardinalitas (1|o--o{) untuk pemodelan data dan perencanaan migrasi SQL.

  2. Panduan Sintaks Diagram ArchiMate PlantUML: Model lapisan arsitektur perusahaan menggunakan spesifikasi ArchiMate. Pelajari elemen lapisan bisnis/aplikasi/teknologi, konsep motivasi, dan jenis hubungan untuk perencanaan strategis TI dan dokumentasi tata kelola.

  3. Panduan Sintaks Model C4 PlantUML: Implementasikan model C4 untuk visualisasi arsitektur perangkat lunak di empat tingkat abstraksi: Konteks, Wadah, Komponen, dan Kode. Kuasai Orang, Sistem, Kontainer, dan Komponen stereotip dengan kontainer batas dan gaya hubungan untuk komunikasi arsitektur yang selaras dengan pemangku kepentingan.

Catatan tentang Diagram yang Disematkan: Semua contoh kode PlantUML dalam dokumentasi VPASCode dirender sebagai diagram interaktif dan dapat diedit langsung di browser. Tautan gambar PNG di atas menunjukkan pratinjau statis dari diagram contoh; untuk interaktivitas penuh termasuk pengeditan langsung, validasi sintaks, dan ekspor ke PNG/SVG, kunjungi URL artikel masing-masing langsung di vpascode.com/docs. [[54]]

Fitur Editor VPasCode: Setiap artikel mencakup tombol “Edit PlantUML di VPasCode” yang memunculkan contoh kode di editor berbasis browser gratis dari VPasCode—tidak diperlukan login atau instalasi. Perubahan ditampilkan langsung dengan rendering waktu nyata. [[54]]

Referensi yang dikumpulkan dari dokumentasi VPASCode. VPasCode adalah editor gratis, daring, berbasis browser untuk diagram PlantUML, Mermaid, dan Graphviz yang tidak memerlukan login atau instalasi. [[54]]