Diagram Jenis Apa yang Bisa Anda Buat dengan PlantUML? (Panduan Lengkap)

@startuml
  
title Sistem Manajemen Hotel

' Definisikan antarmuka
interface IReservable {
    + buatReservasi(customer: Customer, tanggal: DateRange): boolean
    + batalkanReservasi(idReservasi: String): boolean
    + cekKetersediaan(tanggal: Date): boolean
}

interface IPayable {
    + prosesPembayaran(jumlah: double): boolean
    + keluarkanRefund(idReservasi: String): boolean
    + dapatkanStatusPembayaran(): String
}

' Definisikan kelas abstrak
abstract class Person {
    - id: String
    - nama: String
    - email: String
    - telepon: String
    + getId(): String
    + getName(): String
    + dapatkanInfoKontak(): String
    + perbaruiInfoKontak(info: String): void
}

' Definisikan kelas konkret
class Customer {
    - poinLoyalitas: int
    - totalMenginap: int
    - preferensi: List
    + dapatkanPoinLoyalitas(biayaMenginap: double): void
    + tukarkanPoinLoyalitas(poin: int): boolean
    + dapatkanTingkatLoyalitas(): String
    + tambahkanPreferensi(preferensi: String): void
}

class Room {
    - nomorKamar: String
    - tipeKamar: RoomType
    - kapasitas: int
    - hargaPerMalam: double
    - fasilitas: List
    - tersedia: boolean
    + pesanKamar(customer: Customer, tanggal: DateRange): boolean
    + lepaskanKamar(): void
    + dapatkanHarga(customer: Customer): double
    + tambahkanFasilitas(fasilitas: String): void
    + dapatkanStatusKamar(): String
}

class Reservation {
    - idReservasi: String
    - tanggalCheckIn: Date
    - tanggalCheckOut: Date
    - totalHarga: double
    - status: ReservationStatus
    - permintaanKhusus: String
    + hitungTotalHarga(): double
    + konfirmasiReservasi(): void
    + checkIn(): void
    + checkOut(): boolean
    + perbaruiTanggal(tanggalBaruCheckIn: Date, tanggalBaruCheckOut: Date): boolean
    + dapatkanDurasi(): int
}

' Enumerasi
enum RoomType {
    STANDARD
    DELUXE
    SUITE
    PRESIDENTIAL
}

' Enumerasi
enum ReservationStatus {
    MENUNGGU
    TELAH_DIKONFIRMASI
    SUDAH_CHECK_IN
    SUDAH_CHECK_OUT
    DIBATALKAN
}

' Hubungan
' Implementasi antarmuka (garis putus-putus dengan segitiga)
IReservable <|.. Reservation : menerapkan
IPayable <|.. Reservation : menerapkan

' Pewarisan abstrak (garis padat dengan segitiga)
Person <|-- Customer : memperluas ' Komposisi (diamond padat) - Kamar adalah bagian dari Reservasi Reservation *-- "1..*" Room : berisi >

' Asosiasi (garis padat sederhana) dengan multiplicity
Customer "1" -- "0..*" Reservation : membuat >

' Ketergantungan (panah putus-putus) - Customer bergantung pada RoomType
Customer ..> RoomType : memiliki tingkat loyalitas berdasarkan >

' Asosiasi dengan label khusus
Reservation "1" --o "1" Customer : dipesan oleh >

' Realisasi antarmuka oleh kelas abstrak (konektor tambahan opsional)
IReservable <|.. Room : menerapkan

@enduml

@startuml
title Diagram Komponen Aplikasi Web

package "Lapisan Klien" {
    [Peramban Web] sebagai Browser
    [Aplikasi Seluler] sebagai Mobile
}

package "Server Aplikasi" {
    [Gateway API] sebagai Gateway
    [Layanan Pengguna] sebagai UserService
    [Layanan Pesanan] sebagai OrderService
    [Layanan Pembayaran] sebagai PaymentService
}

package "Lapisan Basis Data" {
    database "Basis Data Pengguna" sebagai UserDB
    database "Basis Data Pesanan" sebagai OrderDB
}

package "Layanan Pihak Ketiga" {
    [API Stripe] sebagai Stripe
}

' Koneksi
Browser --> Gateway : HTTP / REST
Mobile --> Gateway : HTTP / REST

Gateway --> UserService : REST Internal
Gateway --> OrderService : REST Internal

UserService --> UserDB : Baca / Tulis
OrderService --> OrderDB : Baca / Tulis
OrderService --> PaymentService : Proses Pembayaran

PaymentService --> Stripe : HTTPS / API
@enduml

@startuml
title Diagram Penempatan - Aplikasi Web 3-Lapisan

skinparam componentStyle rectangle

node "Desktop Klien" sebagai clientNode {
  node "Peramban Web" sebagai browser {
    artefak "Frontend Aplikasi Web (HTML/JS)" sebagai frontend
  }
}

node "Server Aplikasi" sebagai appServerNode {
  node "Container Servlet (Tomcat)" sebagai tomcat {
    artefak "API Backend (berkas WAR)" sebagai appApi
  }
}

node "Server Basis Data" sebagai databaseNode {
  database "PostgreSQL" sebagai postgres {
    artefak "Skema Basis Data Aplikasi" sebagai dbSchema
  }
}

clientNode -- appServerNode : HTTPS (Port 443)
appServerNode -- databaseNode : JDBC (Port 5432)

@enduml

@startuml
title Alur Otorisasi Pengguna

aktor "Pengguna" sebagai user
partisipan "Aplikasi Web" sebagai app
partisipan "API Otorisasi" sebagai auth
database "DB Pengguna" sebagai db

user -> app : Masukkan Kredensial
aktifkan app

app -> auth : POST /api/v1/login
aktifkan auth

auth -> db : Cari pengguna berdasarkan email
aktifkan db
db --> auth : Kembalikan catatan pengguna & hash
tidak aktifkan db

alt Kredensial Valid
    auth -> auth : Verifikasi kata sandi & hasilkan JWT
    auth --> app : 200 OK (Token & Profil)
    app --> user : Alihkan ke Dasbor
selain Kredensial Tidak Valid
    auth --> app : 401 Tidak Diizinkan (Kesalahan)
    app --> user : Tampilkan "Kredensial Tidak Valid"
akhir

tidak aktifkan auth
tidak aktifkan app
@enduml

@startuml
title Diagram Kasus Penggunaan Sistem Belanja Online

arah kiri ke kanan

aktor Pelanggan
aktor "Pelanggan Terdaftar" sebagai RegCustomer
aktor "Gerbang Pembayaran" sebagai PaymentSystem

Pelanggan <|-- RegCustomer persegi panjang "Sistem E-Commerce" { usecase "Telusuri Produk" sebagai UC_Browse usecase "Cari Barang" sebagai UC_Search usecase "Kelola Keranjang" sebagai UC_Cart usecase "Checkout Pesanan" sebagai UC_Checkout usecase "Gunakan Kupon Diskon" sebagai UC_Coupon usecase "Proses Pembayaran" sebagai UC_Payment usecase "Lihat Riwayat Pesanan" sebagai UC_History } Pelanggan --> UC_Browse
Pelanggan --> UC_Search
Pelanggan --> UC_Cart
Pelanggan --> UC_Checkout

RegCustomer --> UC_History

UC_Checkout .> UC_Payment : <>
UC_Checkout <.. UC_Coupon : <>

UC_Payment -- PaymentSystem
@enduml

@startuml
title Proses Pemenuhan Pesanan

|Pelanggan|
mulai
:Tempatkan Pesanan;
:Kirim Detail Pembayaran;

|Sistem Pesanan|
jika (Pembayaran Valid?) maka (ya)
  :Cadangkan Persediaan;
  
  ' Pembagian konkurensi
  fork
    |Gudang|
    :Ambil Barang dari Rak;
    :Bungkus Barang ke Dalam Kotak;
  fork lagi
    |Billing|
    :Hasilkan PDF Faktur;
    :Tagih Metode Pembayaran;
  akhiri fork

  |Pengiriman|
  :Lampirkan Label Pengiriman;
  :Serahkan ke Kurir;
  
  |Pelanggan|
  :Terima Paket;
  berhenti
selain (tidak)
  |Sistem Pesanan|
  :Kirim Pemberitahuan Gagal Pembayaran;
  |Pelanggan|
  :Perbarui Metode Pembayaran;
  berhenti
akhir jika
@enduml

@startuml
title Siklus Hidup Pesanan E-Commerce

[*] --> Menunggu : Pesanan Dibuat

state Menunggu {
  [*] --> MenungguPembayaran
  MenungguPembayaran --> GagalPembayaran : Kesalahan Pembayaran
  GagalPembayaran --> MenungguPembayaran : Ulangi Pembayaran
}

Menunggu --> Diproses : Pembayaran Diperbolehkan
Menunggu --> Dibatalkan : Pengguna Membatalkan Pesanan

state Diproses {
  [*] --> Pengemasan
  Pengemasan --> SiapDikirim : Pemeriksaan Kualitas Lulus
}

Diproses --> Dikirim : Serah Terima Kurir
Dikirim --> Diterima : Pengiriman Dikonfirmasi
Dikirim --> Dikembalikan : Pengiriman Gagal / Ditolak

Diterima --> [*]
Dibatalkan --> [*]
Dikembalikan --> [*]
@enduml

@startuml
title Diagram Waktu Transfer Data SPI

kuat "Jam (SCLK)" sebagai CLK
biner "Pemilih Chip (CS)" sebagai CS
biner "Keluaran Utama (MOSI)" sebagai MOSI
ringkas "Bis Data (MISO)" sebagai MISO

@0
CS adalah Tinggi
CLK adalah Rendah
MOSI adalah Rendah
MISO adalah "Idle"

@1
CS adalah Rendah
MISO adalah "Header"

@2
CLK adalah Tinggi
MOSI adalah Tinggi

@3
CLK adalah Rendah

@4
CLK adalah Tinggi
MOSI adalah Rendah
MISO adalah "Payload"

@5
CLK adalah Rendah

@6
CS adalah Tinggi
CLK adalah Rendah
MOSI adalah Rendah
MISO adalah "Idle"

@enduml

@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml

JUDUL Diagram Konteks Sistem untuk Sistem Perbankan Internet

Orang(customer, "Pelanggan Perbankan Pribadi", "Seorang pelanggan bank, dengan rekening bank pribadi.")
Sistem(banking_system, "Sistem Perbankan Internet", "Memungkinkan pelanggan untuk melihat informasi tentang rekening bank mereka, dan melakukan pembayaran.")

Sistem_Ext(mainframe, "Sistem Perbankan Mainframe", "Menyimpan semua informasi inti perbankan tentang pelanggan, rekening, transaksi, dll.")
Sistem_Ext(email_system, "Sistem E-mail", "Sistem e-mail internal Microsoft Exchange.")

Rel(customer, banking_system, "Melihat saldo rekening, dan melakukan pembayaran menggunakan")
Rel(banking_system, mainframe, "Mendapatkan informasi rekening dari, dan melakukan pembayaran menggunakan")
Rel(banking_system, email_system, "Mengirim e-mail menggunakan")
Rel_Back(email_system, customer, "Mengirim e-mail ke")
@enduml

@startuml
!include <archimate/Archimate>

judul Contoh ArchiMate - Pembayaran Tagihan Online

Kelompok(business, "Lapisan Bisnis"){
  Proses_Bisnis(payBillProcess, "Proses Pembayaran Tagihan")
  Objek_Bisnis(bankAccount, "Rekening Bank Pelanggan")
  Layanan_Bisnis(paymentService, "Layanan Bisnis Pembayaran Tagihan")
}

Kelompok(application, "Lapisan Aplikasi"){
  Komponen_Aplikasi(bankingApp, "Aplikasi Perbankan Mobile")
  Fungsi_Aplikasi(paymentProcessing, "Logika Pemrosesan Pembayaran")
  Objek_Data_Aplikasi(transactionRecord, "Payload Data Transaksi")
}

Kelompok(technology, "Lapisan Teknologi"){
  Artefak_Teknologi(jwtToken, "Token Sesi Terenkripsi")
  Layanan_Teknologi(apiGateway, "Layanan API Gateway")
  Layanan_Teknologi(dbService, "Layanan Basis Data Inti")
}

Rel_Flow_Right(payBillProcess, bankAccount, "")
Rel_Serving_Up(paymentService, payBillProcess, "")
Rel_Specialization_Up(paymentProcessing, paymentService, "")
Rel_Flow_Right(transactionRecord, paymentProcessing, "")
Rel_Assignment_Left(bankingApp, paymentProcessing, "")
Rel_Realization_Up(jwtToken, transactionRecord, "")
Rel_Serving_Up(apiGateway, paymentProcessing, "")
Rel_Serving_Up(dbService, apiGateway, "")
@enduml

@startuml
judul Skema Basis Data E-Commerce (Kaki Burung)

' Sembunyikan ikon lingkaran untuk entitas
sembunyikan lingkaran
skinparam linetype ortho

entitas "Pengguna" sebagai user {
  * user_id : INT <>
  --
  * email : VARCHAR(255)
  * password_hash : VARCHAR(255)
  * created_at : TIMESTAMP
}

entitas "Profil Pelanggan" sebagai profile {
  * profile_id : INT <>
  --
  * user_id : INT <>
  * first_name : VARCHAR(100)
  * last_name : VARCHAR(100)
    phone : VARCHAR(20)
}

entitas "Pesanan" sebagai order {
  * order_id : INT <>
  --
  * user_id : INT <>
  * order_date : TIMESTAMP
  * total_amount : DECIMAL(10,2)
  * status : VARCHAR(50)
}

entitas "Item Pesanan" sebagai item {
  * order_item_id : INT <>
  --
  * order_id : INT <>
  * product_id : INT <>
  * quantity : INT
  * unit_price : DECIMAL(10,2)
}

entitas "Produk" sebagai product {
  * product_id : INT <>
  --
  * sku : VARCHAR(50)
  * name : VARCHAR(150)
    description : TEXT
  * price : DECIMAL(10,2)
}

' Hubungan
user ||--o| profile : "memiliki"
user ||--o{ order : "tempatkan"
order ||--|{ item : "berisi"
product ||--o{ item : "muncul dalam"

@enduml

@startnwdiag
judul Topologi Jaringan Perusahaan

nwdiag {
  jaringan External_Internet {
    address = "0.0.0.0/0"
    user_client [address = "203.0.113.15", description = "Pengguna Jarak Jauh"];
    edge_firewall [address = "192.168.1.1", description = "FW Perimeter"];
  }

  jaringan DMZ_Zone {
    address = "192.168.1.0/24"
    edge_firewall;
    load_balancer [address = "192.168.1.10", description = "Load Balancer Nginx"];
    mail_server [address = "192.168.1.25", description = "Server SMTP"];
    internal_firewall [address = "192.168.1.254", description = "FW Internal"];
  }

  jaringan Private_LAN {
    address = "10.0.1.0/24"
    internal_firewall;
    app_server_01 [address = "10.0.1.50", description = "Node API 1"];
    app_server_02 [address = "10.0.1.51", description = "Node API 2"];
    db_master [address = "10.0.1.100", description = "Utama PostgreSQL"];
  }

  jaringan Management_Subnet {
    address = "10.0.99.0/24"
    internal_firewall;
    admin_bastion [address = "10.0.99.5", description = "Host Bastion SSH"];
    monitoring_node [address = "10.0.99.20", description = "Host Prometheus"];
  }
}
@endnwdiag

gantt
    judul Jadwal Rilis Produk Perangkat Lunak
    dateFormat  YYYY-MM-DD
    axisFormat  %b %d

    bagian Perencanaan & Desain
    Pengumpulan Kebutuhan   :a1, 2026-09-01, 10d
    Desain Arsitektur      :a2, setelah a1, 10d

    bagian Pengembangan
    Pengembangan API Backend  :b1, setelah a2, 15d
    Pengembangan UI Frontend  :b2, setelah a2, 15d

    bagian Pengujian & Rilis
    Pengujian Integrasi      :c1, setelah b1 b2, 8d
    Audit Keamanan           :c2, setelah c1, 5d
    Rilis Produksi       :tahapan, m1, setelah c2, 0d

@startwbs
title WBS Desain Ulang Website

* Proyek Desain Ulang Website
** 1. Penemuan & Strategi
*** 1.1 Wawancara Stakeholder
*** 1.2 Audit Kompetitor
*** 1.3 Persetujuan Lingkup & Strategi
** 2. Desain UX/UI
*** 2.1 Wireframing
**** 2.1.1 Tata Letak Desktop
**** 2.1.2 Tata Letak Mobile
*** 2.2 Sistem Desain
**** 2.2.1 Perpustakaan Komponen
**** 2.2.2 Tipografi & Panduan Gaya
** 3. Pengembangan Teknis
*** 3.1 Frontend
**** 3.1.1 Templat Halaman
**** 3.1.2 Integrasi API
*** 3.2 CMS & Backend
**** 3.2.1 Jenis Posting Kustom
**** 3.2.2 Migrasi Basis Data
** 4. QA & Peluncuran
*** 4.1 Pengujian Multi-Browser
*** 4.2 Migrasi Konten
*** 4.3 Pemindahan DNS & Siap Rilis
@endwbs

@startmindmap
title Peta Fitur Platform E-Commerce

* Platform E-Commerce
** Manajemen Akun Pengguna
*** Otentikasi Sosial (Google, Apple)
*** Otentikasi Faktor Ganda
*** Riwayat Pesanan & Pelacakan
** Katalog Produk & Pencarian
*** Pencarian Berbasis Faset & Filter
*** Sinkronisasi Persediaan
*** Ulasan & Penilaian Produk
** Checkout & Pembayaran
*** Gerbang Pembayaran (Stripe, PayPal)
*** Mesin Kupon & Promo
*** Checkout Langsung untuk Tamu
** Dukungan Pelanggan
*** Asisten Obrolan Langsung
*** Portal Pengembalian Otomatis
@endmindmap

@startuml
autonumber
aktor Pengguna
partisipan "Editor VPasCode" sebagai Editor
partisipan "Mesin AI" sebagai AI

Pengguna -> Editor: Tempel Kode PlantUML
Editor -> Editor: Deteksi Otomatis Format & Tampilkan Langsung
alt Terdeteksi Kesalahan Sintaks
    Pengguna -> Editor: Klik "Perbaiki oleh AI"
    Editor -> AI: Kirim Kode Rusak
    AI --> Editor: Kembalikan Kode yang Diperbaiki & Perbandingan
end
Editor --> Pengguna: Tampilkan Diagram Vektor Bersih (SVG/PNG)
@enduml