Kami sangat senang mengumumkan peluncuran resmi Visual Paradigm VPasCode, platform terpadu baru dari Visual Paradigm diagram-sebagai-kode platform. Baik Anda seorang insinyur perangkat lunak, arsitek sistem, atau analis bisnis, VPasCode dirancang untuk menyederhanakan alur kerja Anda dengan mengubah teks menjadi diagram profesional yang indah dalam hitungan detik.
Ucapkan selamat tinggal pada perpindahan konteks antar berbagai alat. VPasCode menyatukan bahasa teks-ke-diagram open-source favorit Anda ke dalam satu lingkungan berbasis web yang mulus dan kuat.
Apa itu VPasCode?
VPasCode (Visual Paradigm as Code) adalah lingkungan terpadu yang menggabungkan editor kode gratis dan nyaman editor kode dengan renderer diagram berkinerja tinggi renderer diagram. Jika Anda menyukai kecepatan dan manfaat kontrol versi dari penulisan diagram Anda, VPasCode memberikan sandbox terbaik untuk membangun, melihat pratinjau, dan berbagi diagram secara instan.
Karena merupakan lingkungan yang sepenuhnya terpadu, VPasCode secara teoritis mendukung semuaaturan sintaks untuk mesin diagram paling populer di dunia. Pada peluncuran, kami sepenuhnya mendukung:
- Editor & Renderer PlantUML:Buat diagram arsitektur perusahaan dan perangkat lunak yang kuat.
- Editor & Renderer Mermaid.js:Render bagan dan garis waktu modern yang terinspirasi dari markdown secara native di browser Anda.
- Editor & Renderer Graphviz:Manfaatkan kekuatan bahasa DOT untuk struktur jaringan dan data yang kompleks.
…dan ini baru permulaan! Kami akan terus menambahkan lebih banyak format teks-ke-diagram di masa depan.
Jenis Diagram yang Didukung Sekilas
VPasCode mendukung perpustakaan jenis diagram yang sangat luas. Berikut adalah gambaran singkat tentang apa yang dapat Anda bangun saat ini:
Integrasi PlantUML
- Diagram Urutan, Kasus Penggunaan, Kelas, dan Objek
- Diagram Aktivitas, Komponen, Penempatan, dan Status
- Model ArchiMate & C4
- Diagram Relasi Entitas (ERD) & Chen ERD
- Diagram Jaringan, WBS (Struktur Pemecahan Kerja), dan Diagram Waktu
Integrasi Mermaid.js
- Diagram Alir, Diagram Kelas, dan Diagram Urutan
- Diagram Relasi Entitas (ERD) & Diagram Status
- Peta Pikiran, Garis Waktu, dan Peta Perjalanan Pengguna
- Diagram Gantt, Grafik Git, dan Papan Kanban
- Model C4, Diagram Kuadran, dan Diagram Persyaratan
Integrasi Graphviz
- Digraph & Graph
- Diagram Alir & Diagram Alur Data
- Diagram Organisasi & Klaster
Fitur & Kapabilitas
Kami ingin VPasCode dapat diakses oleh semua orang, itulah sebabnya kami telah menyertakan alat-alat penting dalam tier gratis kami sambil menawarkan fitur berbasis AI yang revolusioner bagi pengguna premium.
Fitur Gratis yang Tersedia untuk Semua Orang:
- Dukungan Multi-Engine: Akses penuh ke PlantUML, Mermaid.js, dan Graphviz.
- Deskripsi Teksual:Buat diagram rumit murni melalui kode yang intuitif.
- Pratinjau Real-Time:Lihat diagram Anda diperbarui secara instan di sisi layar Anda saat Anda mengetik.
- Pembagian Mudah:Buat URL unik untuk dengan mudah membagikan diagram langsung Anda kepada rekan tim atau klien.
- Ekspor Fleksibel:Unduh hasil kerja Anda sebagai gambar berkualitas tinggi PNG gambar atau grafik vektor yang dapat diskalakan SVG grafik vektor.
Tingkatkan Alur Kerja Anda dengan Fitur Berbayar:
- Perbaikan Kode Error oleh AI:Terjebak pada kesalahan sintaks? AI bawaan kami akan menganalisis kode PlantUML, Mermaid, atau Graphviz Anda dan memperbaiki kesalahan secara otomatis.
- Terjemahan AI:Terjemahkan teks dan label dalam diagram Anda ke berbagai bahasa dengan mulus hanya dengan satu kali klik.
Cara Mengakses Fitur Berbayar VPasCode
Jika Anda adalah pengguna Visual Paradigm yang sudah ada, Anda mungkin sudah memiliki akses ke fitur AI premium kami!
Fitur berbayar VPasCode disertakan dengan:
- Edisi Combo Online Visual Paradigm (atau versi yang lebih tinggi).
- Edisi Profesional Desktop Visual Paradigm (atau versi yang lebih tinggi) dengan kontrak pemeliharaan aktif.
Catatan untuk Pengguna Desktop:Pengguna Visual Paradigm Professional Edition (atau versi yang lebih tinggi) dengan pemeliharaan aktif secara otomatis diberikan akses penuh ke aplikasi web dari VP Online Combo Edition—yang berarti Anda mendapatkan akses instan ke alat AI premium VPasCode tanpa biaya tambahan!
PlantUML dan Mermaid di VPasCode – Contoh Diagram
Diagram Use Case PlantUML: Sistem E-Commerce
Diagram use case ini menggambarkan interaksi utama dalam sistem checkout e-commerce. Pelanggan dapat melihat keranjang mereka dan melanjutkan ke checkout, di mana autentikasi, penerapan kupon, dan pembayaran kartu kredit diintegrasikan melalui layanan eksternal seperti penyedia identitas dan pemroses pembayaran.
@startuml
arah kiri ke kanan
aktor "Pelanggan E-Commerce" sebagai customer
aktor "Penyedia Identitas" sebagai authPool
aktor "Pemroses Pembayaran" sebagai stripe
persegi panjang "Batas Sistem Checkout" {
usecase "Autentikasi" sebagai UC_Auth
usecase "Lihat Keranjang" sebagai UC_Cart
usecase "Checkout" sebagai UC_Check
usecase "Terapkan Kupon" sebagai UC_Promo
usecase "Bayar via Kartu Kredit" sebagai UC_Pay
}
customer --> UC_Cart
customer --> UC_Check
UC_Check ..> UC_Auth : <>
UC_Check <.. UC_Promo : <>
UC_Check ..> UC_Pay : <>
UC_Auth --> authPool
UC_Pay --> stripe
@enduml
Diagram Kelas PlantUML: Sistem Manajemen Perpustakaan
Diagram kelas ini memodelkan sistem manajemen perpustakaan, menampilkan entitas kunci yang terlibat dalam manajemen katalog, layanan anggota, dan operasi peminjaman. Desain menggunakan pewarisan untuk merepresentasikan berbagai jenis materi perpustakaan (seperti buku, majalah, dan DVD), sementara asosiasi antara anggota, pustakawan, catatan peminjaman, dan denda menggambarkan bagaimana item dipinjam, dikembalikan, dan dikelola sepanjang siklus hidupnya.
@startuml
class Library {
- name: String
- address: String
- phone: String
+ addMember(member: Member): void
+ removeMember(memberId: String): void
+ addItem(item: LibraryItem): void
+ removeItem(itemId: String): void
+ lendItem(memberId: String, itemId: String): boolean
+ returnItem(itemId: String): boolean
}
class LibraryItem {
# itemId: String
# title: String
# publisher: String
# publicationYear: int
# isAvailable: boolean
+ getDetails(): String
+ setAvailability(status: boolean): void
}
abstract class Book {
- isbn: String
- author: String
- pageCount: int
+ getAuthor(): String
}
class EBook {
- fileSizeMB: double
- format: String
- downloadUrl: String
+ download(): void
}
class PrintedBook {
- shelfLocation: String
- condition: String
+ getShelfLocation(): String
}
class Magazine {
- issueNumber: int
- volumeNumber: int
- coverDate: Date
}
class DVD {
- durationMinutes: int
- director: String
- language: String
- subtitlesAvailable: boolean
}
class Member {
- memberId: String
- name: String
- email: String
- phone: String
- membershipDate: Date
+ borrowItem(item: LibraryItem): boolean
+ returnItem(item: LibraryItem): boolean
+ getBorrowedItems(): List
}
class BorrowingRecord {
- recordId: String
- borrowDate: Date
- dueDate: Date
- returnDate: Date
- isOverdue(): boolean
- calculateFine(): double
}
class Fine {
- fineId: String
- amount: double
- issueDate: Date
- isPaid: boolean
+ payFine(): void
}
class Librarian {
- staffId: String
- department: String
+ processBorrowing(member: Member, item: LibraryItem): void
+ processReturn(item: LibraryItem): void
+ generateReport(): void
+ manageInventory(): void
}
' Hubungan Warisan
LibraryItem <|-- Book
LibraryItem <|-- Magazine
LibraryItem <|-- DVD
Book <|-- EBook
Book <|-- PrintedBook
' Komposisi dan Agregasi
Library "1" -- "banyak" Member : memiliki >
Library "1" -- "banyak" LibraryItem : berisi >
Library "1" -- "banyak" Librarian : mempekerjakan >
Member "1" -- "banyak" BorrowingRecord : memiliki >
BorrowingRecord "1" -- "1..*" LibraryItem : merujuk >
BorrowingRecord "1" -- "0..*" Fine : menghasilkan >
' Asosiasi
Librarian --> BorrowingRecord : mengelola >
Member --> BorrowingRecord : membuat >
note di atas Library : Sistem pusat yang mengelolananggota, item, dan peminjaman
note di kanan LibraryItem : Kelas dasar abstraknuntuk semua materi perpustakaan
@enduml
Diagram Urutan PlantUML: Penarikan Tunai ATM
Diagram urutan ini menggambarkan interaksi yang terlibat dalam transaksi penarikan tunai ATM, mulai dari penyisipan kartu dan validasi PIN hingga pencairan tunai dan pembaruan akun. Diagram ini menyoroti komunikasi antara pelanggan, ATM, sistem perbankan, dan basis data akun pelanggan, sambil juga memodelkan alur alternatif seperti upaya PIN yang tidak valid, dana tidak mencukupi, dan pencetakan struk opsional.
@startuml
' Judul
title Penarikan Tunai ATM - Diagram Urutan
' Aktor dan peserta
actor Pelanggan sebagai C
participant "ATM" sebagai ATM
participant "Sistem Perbankan" sebagai BS
database "Akun Pelanggan" sebagai DB
' Urutan
C -> ATM : Sisipkan Kartu
ATM -> ATM : Baca Detail Kartu
ATM -> C : Minta PIN
C -> ATM : Masukkan PIN
ATM -> BS : Validasi Kartu & PIN
BS -> DB : Periksa Kredensial
DB --> BS : Hasil Validasi
alt PIN Tidak Valid
BS --> ATM : PIN Tidak Valid
ATM -> C : PIN Tidak Valid, Coba Lagi
note di kanan: Setelah 3 kali gagal,nkartu ditahan
else PIN Valid
BS --> ATM : PIN Valid
ATM -> C : Tampilkan Menu Utama
C -> ATM : Pilih Penarikan
ATM -> C : Minta Jumlah
C -> ATM : Masukkan Jumlah
ATM -> BS : Periksa Saldo & Limit
BS -> DB : Query Saldo
DB --> BS : Saldo Saat Ini
alt Dana Tidak Mencukupi
BS --> ATM : Saldo Tidak Mencukupi
ATM -> C : Transaksi Ditolakn(Tampilkan Saldo)
C -> ATM : Batalkan Transaksi
ATM -> C : Kembalikan Kartu
else Dana Mencukupi
BS --> ATM : Disetujui
ATM -> ATM : Cairkan Tunai
ATM -> C : Cairkan Tunai
C -> ATM : Ambil Tunai
ATM -> BS : Konfirmasi Tunai Dicairkan
BS -> DB : Debit Akun & Catat Transaksi
DB --> BS : Pembaruan Selesai
BS --> ATM : Transaksi Selesai
ATM -> C : Cetak Struk
alt Struk Diminta
C -> ATM : Ambil Struk
else Tidak Ada Struk
C -> ATM : Tolak Struk
end
ATM -> C : Kembalikan Kartu
C -> ATM : Ambil Kartu
end
end
ATM -> C : Terima Kasih / Akhir Transaksi
@enduml
Diagram Aktivitas PlantUML: Sistem Klaim Asuransi
Diagram aktivitas ini memodelkan alur kerja end-to-end dari sistem pemrosesan klaim asuransi, mulai dari pengajuan klaim melalui validasi, penyelidikan, hingga penyelesaian. Diagram ini menangkap titik keputusan kunci seperti kelayakan polis, kelengkapan dokumen, validitas klaim, dan penerimaan penyelesaian, sambil menggambarkan jalur sukses dan penanganan pengecualian, termasuk penolakan klaim dan penyelesaian sengketa.
@startuml InsuranceClaimSystem
start
:Pemegang polis mengajukan klaim;
:Klaim dicatat ke dalam sistem;
if (Apakah polis aktif dan valid?) then (ya)
:Tetapkan klaim kepada penilai;
:Beritahu penilai tentang klaim baru;
else (tidak)
:Kirim pemberitahuan penolakan kepada pemegang polis;
:Catat alasan: Polis tidak aktif/tidak valid;
stop
endif
:Penilai meninjau dokumen yang diajukan;
if (Apakah semua dokumen yang diperlukan ada?) then (ya)
:Penilai memulai validasi klaim;
else (tidak)
:Minta dokumen yang hilang dari pemegang polis;
:Tunggu dokumen tambahan;
:Periksa ulang dokumen;
note di kanan
Sistem menunggu
respons pemegang polis
end note
-> kembali ke "Penilai meninjau dokumen yang diajukan";
endif
:Penilai menyelidiki klaim;
:
Hubungi saksi/ahli jika diperlukan;
:Perkirakan jumlah kerusakan/kerugian;
if (Apakah klaim valid berdasarkan ketentuan polis?) then (ya)
:Hitung jumlah yang disetujui;
:Terapkan deductible jika berlaku;
else (tidak)
:Kirim pemberitahuan penolakan dengan alasan;
:Catat keputusan dalam sistem;
stop
endif
:Buat penawaran penyelesaian;
:Kirim penawaran penyelesaian kepada pemegang polis;
:Pemegang polis meninjau penawaran;
if (Apakah pemegang polis menerima penawaran?) then (ya)
:Proses pembayaran;
:Perbarui status klaim menjadi "Selesai";
:Kirim konfirmasi kepada pemegang polis;
:Catat detail penutupan;
else (tidak)
:Teruskan ke penyelesaian sengketa;
:Negosiasikan penyelesaian;
:Perbarui penawaran;
-> kembali ke "Kirim penawaran penyelesaian kepada pemegang polis";
endif
stop
@enduml
Diagram Status PlantUML: Sistem Deteksi Asap
Diagram status ini menggambarkan perilaku sistem deteksi asap saat beralih antara keadaan operasional seperti siaga, pemantauan, deteksi asap, aktivasi alarm, dan penanganan kesalahan. Diagram ini menunjukkan bagaimana sistem merespons peristiwa termasuk perubahan daya, hasil pemeriksaan diri, deteksi asap, kondisi baterai rendah, dan reset yang diinisiasi pengguna untuk memastikan pemantauan dan peringatan kebakaran yang andal.
@startuml SmokeDetectionSystem
title Diagram Status - Sistem Deteksi Asap
[*] --> PowerOff
state PowerOff {
[*] --> NoPower
NoPower : Perangkat mati
NoPower --> PowerOn : Tombol daya ditekan
}
state PowerOn {
[*] --> Standby
Standby : Sistem siap
Standby --> SelfCheck : Tes mandiri berkala (setiap 24 jam)
Standby --> Monitoring : Mulai pemantauan (sensor aktif)
state SelfCheck {
[*] --> TestingSensors
TestingSensors --> TestPass : Semua sensor OK
TestingSensors --> TestFail : Terdeteksi kesalahan sensor
TestPass --> Standby : Kembali ke siaga
TestFail --> ErrorState : Laporkan kesalahan
}
state Monitoring {
[*] --> NoSmoke
NoSmoke : Operasi normal
NoSmoke --> SmokeDetected : Tingkat asap > ambang batas
NoSmoke --> LowBattery : Baterai rendah (nirkabel)
LowBattery --> NoSmoke : Baterai diganti
state SmokeDetected {
[*] --> InitialAlert
InitialAlert --> ConfirmedSmoke : Asap bertahan > 5 detik
InitialAlert --> FalseAlarm : Asap hilang < 5 detik FalseAlarm --> NoSmoke : Reset
ConfirmedSmoke --> AlarmActive
}
state AlarmActive {
[*] --> SoundAlarm : Aktifkan sirene & lampu
SoundAlarm --> SendNotification : Beri tahu panel kontrol / aplikasi
SendNotification --> WaitForReset
WaitForReset --> AlarmActive : Asap masih ada
WaitForReset --> ResetSystem : Tombol reset ditekan
ResetSystem --> NoSmoke : Sistem direset
}
}
}
state ErrorState {
[*] --> FaultIndicator : Kedipkan LED kesalahan
FaultIndicator --> PowerOff : Siklus daya manual diperlukan
}
PowerOn --> ErrorState : Kegagalan pemeriksaan mandiri
ErrorState --> PowerOff : Siklus daya
PowerOff --> [*] : Sistem dicabut / baterai dilepas
@enduml
Diagram Komponen PlantUML: Sistem Kurir
Diagram komponen ini menyajikan arsitektur tingkat tinggi dari sistem manajemen kurir, menunjukkan bagaimana aplikasi klien, layanan backend, infrastruktur pesan, cache, dan database berinteraksi untuk mendukung operasi pengiriman paket. Diagram ini mengilustrasikan pemisahan tanggung jawab di berbagai layanan seperti manajemen pesanan, penjadwalan, pelacakan, pembayaran, notifikasi, dan manajemen pengguna, sambil menyoroti baik komunikasi API sinkron maupun pemrosesan berbasis peristiwa asinkron.
@startuml CourierSystem
title Sistem Kurir - Diagram Komponen
' === Komponen ===
component "Aplikasi Pelanggan" as CustomerApp
component "Aplikasi Seluler Kurir" as CourierApp
component "Dashboard Web Admin" as AdminWeb
component "Gerbang API" as ApiGateway
component "Layanan Pesanan" as OrderService
component "Layanan Penjadwalan" as DispatchService
component "Layanan Pelacakan" as TrackingService
component "Layanan Pembayaran" as PaymentService
component "Layanan Notifikasi" as NotificationService
component "Layanan Pengguna" as UserService
component "Antrian Pesann(RabbitMQ/Kafka)" as MessageQueue
component "Cache Redis" as RedisCache
database "DB PostgreSQL" as SQLDB
database "MongoDBn(Log/Pelacakan Sejarah)" as MongoLogs
' === Antarmuka / Port ===
CustomerApp --> ApiGateway : "REST / WebSocket"
CourierApp --> ApiGateway : "REST / WebSocket"
AdminWeb --> ApiGateway : "REST"
ApiGateway --> OrderService
ApiGateway --> TrackingService
ApiGateway --> PaymentService
ApiGateway --> UserService
' === Ketergantungan Layanan ===
OrderService --> DispatchService : "gRPC / REST"
OrderService --> PaymentService
OrderService --> NotificationService
OrderService --> SQLDB : "JDBC"
OrderService --> RedisCache : "Cache"
DispatchService --> MessageQueue : "Publikasikan peristiwa"
DispatchService --> CourierApp : "Dorong melalui Gerbang API"
DispatchService --> SQLDB
TrackingService --> MessageQueue : "Berlangganan pembaruan lokasi"
TrackingService --> MongoLogs : "Tulis sejarah pelacakan"
TrackingService --> RedisCache : "Cache lokasi saat ini"
PaymentService --> SQLDB
PaymentService --> NotificationService
NotificationService --> MessageQueue : "Konsumsi notifikasi"
NotificationService --> CustomerApp : "Dorong melalui Gerbang API"
UserService --> SQLDB
UserService --> RedisCache
' === Catatan ===
note kanan dari OrderService
Menangani pembuatan paket,
penetapan harga, dan status pesanan
end note
note kanan dari DispatchService
Mencocokkan pesanan dengan kurir,
mengoptimalkan rute
end note
note bawah dari MessageQueue
Peristiwa asinkron: order_created,
location_updated,
delivery_status_changed
end note
@enduml
Diagram Deployemen PlantUML: Arsitektur Contoh
@startuml
node "AWS Cloud Route53" sebagai DNS
node "VPC (10.0.0.0/16)" {
node "Subnet Publik" {
artifact "Load Balancer NGINX" sebagai ALB
}
node "Klaster Subnet Privat" {
node "Instan EC2 1" {
component "API Node.js [Pod 1]" sebagai Pod1
}
node "Instan EC2 2" {
component "API Node.js [Pod 2]" sebagai Pod2
}
}
node "Subnet Database" {
database "Amazon RDS (Multi-AZ Aurora)" sebagai Aurora
}
}
DNS --> ALB : Menyelesaikan lalu lintas
ALB --> Pod1 : Penyeimbangan round-robin
ALB --> Pod2
Pod1 --> Aurora : Kolam Koneksi
Pod2 --> Aurora
@enduml
Contoh ArchiMate PlantUML: Peramban Internet
Diagram ArchiMate ini mengilustrasikan bagaimana lapisan bisnis, aplikasi, dan teknologi berinteraksi untuk mendukung fungsionalitas bisnis berbasis web melalui peramban internet. Diagram ini menunjukkan hubungan antara proses bisnis, komponen dan data halaman web yang dihasilkan secara dinamis, layanan dan plugin peramban, serta infrastruktur server web dasar yang mengirimkan dan mendukung pengalaman aplikasi.
@startuml Contoh Peramban Internet
!include <archimate/Archimate>
title Contoh Archimate - Peramban Internet
'LAYOUT_AS_SKETCH()
'LAYOUT_LEFT_RIGHT()
'LAYOUT_TOP_DOWN()
Grouping(bisnis, "Bisnis"){
Business_Object(businessObject, "Objek Bisnis")
Business_Process(someBusinessProcess,"Proses Bisnis Tertentu")
Business_Service(itSupportService, "Dukungan IT untuk Bisnis (Layanan Aplikasi)")
}
Grouping(aplikasi, "Aplikasi"){
Application_DataObject(dataObject, "Data Halaman Web n 'secara dinamis'")
Application_Function(webpageBehaviour, "Perilaku halaman web")
Application_Component(ActivePartWebPage, "Bagian Aktif dari halaman web n 'secara dinamis'")
}
Grouping(teknologi, "Teknologi"){
Technology_Artifact(inMemoryItem,"dalam memori / 'secara dinamis' html/javascript")
Technology_Service(internetBrowser, "Peramban Internet Umum & Plugin")
Technology_Service(internetBrowserPlugin, "Plugin Peramban Internet Tertentu")
Technology_Service(webServer, "Server web tertentu")
}
Rel_Flow_Left(someBusinessProcess, businessObject, "")
Rel_Serving_Up(itSupportService, someBusinessProcess, "")
Rel_Specialization_Up(webpageBehaviour, itSupportService, "")
Rel_Flow_Right(dataObject, webpageBehaviour, "")
Rel_Specialization_Up(dataObject, businessObject, "")
Rel_Assignment_Left(ActivePartWebPage, webpageBehaviour, "")
Rel_Specialization_Up(inMemoryItem, dataObject, "")
Rel_Realization_Up(inMemoryItem, ActivePartWebPage, "")
Rel_Specialization_Right(inMemoryItem,internetBrowser, "")
Rel_Serving_Up(internetBrowser, webpageBehaviour, "")
Rel_Serving_Up(internetBrowserPlugin, webpageBehaviour, "")
Rel_Aggregation_Right(internetBrowser, internetBrowserPlugin, "")
Rel_Access_Up(webServer, inMemoryItem, "")
Rel_Serving_Up(webServer, internetBrowser, "")
@enduml
Contoh ERD PlantUML: Sistem Tiket Bioskop
@startuml
entity "Pelanggan" sebagai pelanggan {
* customer_id : UUID <>
--
* first_name : VARCHAR(50)
* last_name : VARCHAR(50)
* email : VARCHAR(100) <>
* phone : VARCHAR(20)
* loyalty_points : INT
* registration_date : TIMESTAMP
}
entity "Film" sebagai film {
* movie_id : UUID <>
--
* title : VARCHAR(200)
* description : TEXT
* duration_minutes : INT
* genre : VARCHAR(50)
* release_date : DATE
* rating : VARCHAR(10)
}
entity "Bioskop" sebagai bioskop {
* theater_id : UUID <>
--
* theater_name : VARCHAR(100)
* total_seats : INT
* seat_layout : JSON
}
entity "Penayangan" sebagai penayangan {
* show_id : UUID <>
--
* movie_id : UUID <>
* theater_id : UUID <>
* show_time : TIMESTAMP
* end_time : TIMESTAMP
* language : VARCHAR(50)
* subtitle : BOOLEAN
* price_regular : DECIMAL(10,2)
* price_vip : DECIMAL(10,2)
}
entity "Kursi" sebagai kursi {
* seat_id : UUID <>
--
* theater_id : UUID <>
* row_label : CHAR(2)
* seat_number : INT
* seat_type : VARCHAR(20)
* is_accessible : BOOLEAN
}
entity "Pemesanan" sebagai pemesanan {
* booking_id : UUID <>
--
* customer_id : UUID <>
* show_id : UUID <>
* booking_time : TIMESTAMP
* total_amount : DECIMAL(10,2)
* status : VARCHAR(20)
* payment_method : VARCHAR(30)
* transaction_id : VARCHAR(100)
}
entity "KursiPemesanan" sebagai booking_seat {
* booking_id : UUID <<FK,PK>>
* seat_id : UUID <<FK,PK>>
--
* ticket_price : DECIMAL(10,2)
* discount_applied : DECIMAL(10,2)
}
entity "Pembayaran" sebagai pembayaran {
* payment_id : UUID <>
--
* booking_id : UUID <>
* amount : DECIMAL(10,2)
* payment_date : TIMESTAMP
* payment_status : VARCHAR(20)
* payment_gateway : VARCHAR(30)
* gateway_reference : VARCHAR(200)
}
entity "Ulasan" sebagai ulasan {
* review_id : UUID <>
--
* customer_id : UUID <>
* movie_id : UUID <>
* rating : INT
* comment : TEXT
* review_date : TIMESTAMP
}
' Relasi
pelanggan ||--o{ pemesanan : "melakukan"
film ||--o{ penayangan : "dijadwalkan sebagai"
bioskop ||--o{ penayangan : "menjamak"
penayangan ||--o{ pemesanan : "memiliki"
pemesanan ||--|{ booking_seat : "mengandung"
kursi ||--o{ booking_seat : "ditugaskan ke"
pemesanan ||--|| pembayaran : "memiliki"
pelanggan ||--o{ ulasan : "menulis"
film ||--o{ ulasan : "menerima"
note right of pemesanan : Status: PENDING, CONFIRMED, CANCELLED, EXPIRED
note left of kursi : seat_type: REGULAR, VIP, COUPLES
note right of pembayaran : payment_status: PENDING, SUCCESS, FAILED, REFUNDED
@enduml
Diagram Alur Mermaid: Temui Dokter
Diagram alur ini menggambarkan proses pengambilan keputusan kesehatan yang khas, membimbing pasien dari pengenalan awal gejala melalui diagnosis, pengujian, pengobatan, hingga pemulihan. Diagram ini menyoroti titik-titik keputusan kunci, termasuk penilaian darurat, evaluasi diagnostik, dan efektivitas pengobatan, sambil menunjukkan bagaimana gejala yang belum terselesaikan mungkin memerlukan konsultasi medis tambahan dan penilaian ulang.
flowchart TD
A[Rasa Tidak Sehat atau Butuh Nasihat Medis] --> B{Apakah Ini Darurat?}
B -->|Ya| C[Hubungi Layanan Darurat atau Pergi ke IGD]
B -->|Tidak| D[Jadwalkan Janji Temu dengan Dokter]
D --> E[Hadir ke Janji Temu]
E --> F[Evaluasi oleh Dokter]
F --> G{Diagnosis Sudah Dibuat?}
G -->|Ya| H[Rencana Pengobatan]
G -->|Tidak| I[Perintahkan Tes]
I --> J[Menerima Hasil Tes]
J --> F
H --> K[Ikuti Pengobatan]
K --> L{Gejala Membaik?}
L -->|Ya| M[Pemulihan / Tindak Lanjut Rutin]
L -->|Tidak| N[Kembali ke Dokter]
N --> F
Grafik Graphviz
Diagram ini merepresentasikan topologi jaringan pusat data yang disederhanakan, menggambarkan bagaimana host terhubung melalui tulang punggung switch yang saling terhubung. Diagram ini menyoroti jalur komunikasi utama antar perangkat jaringan, termasuk tautan trunk antar switch dan koneksi failover sekunder yang menyediakan redundansi dan ketahanan jika terjadi gangguan jaringan.
graph UndirectedSpanningTree {
fontname="Helvetica,Arial,sans-serif"
label="Topologi Jaringan Mesh Pusat Data Infrastruktur Tulang Punggung"
labelloc="b"
fontsize=14
node [fontname="Helvetica,Arial,sans-serif", shape=circle, style=filled, color="#475569", fillcolor="#f1f5f9", width=0.8, fixedsize=true]
edge [color="#94a3b8", penwidth=2.5]
SwitchAlpha [label="SW_A", fillcolor="#cbd5e1"]
SwitchBeta [label="SW_B", fillcolor="#cbd5e1"]
Node1 [label="Host_01"]
Node2 [label="Host_02"]
Node3 [label="Host_03"]
Node4 [label="Host_04"]
SwitchAlpha -- SwitchBeta [label=" Tautan Trunking", weight=5]
SwitchAlpha -- Node1
SwitchAlpha -- Node2
SwitchBeta -- Node3
SwitchBeta -- Node4
Node1 -- Node2 [style=dashed, color="#cbd5e1", label=" Interkoneksi Failover"]
}
Mulai Hari Ini
Siap merasakan kecepatan diagram-sebagai-kode? Apakah Anda memerlukan editor yang andal,editor PlantUML, editor cepat,editor Mermaid, atau kompiler Graphviz yang kuat, VPasCode siap untuk Anda.
Kunjungi platform kami sekarang di:
Coba editor real-time, dan revolusionalkan cara Anda merancang perangkat lunak dan sistem!