{"id":2115,"date":"2026-05-26T07:53:11","date_gmt":"2026-05-26T07:53:11","guid":{"rendered":"https:\/\/www.vpascode.com\/id\/docs\/uncategorized\/plantuml-c4-model-syntax-guide\/"},"modified":"2026-05-26T07:53:11","modified_gmt":"2026-05-26T07:53:11","slug":"plantuml-c4-model-syntax-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/plantuml-c4-model-syntax-guide\/","title":{"rendered":"Panduan Sintaks Model C4 PlantUML"},"content":{"rendered":"<h2>Apa itu Diagram Model C4?<\/h2>\n<p>The <strong>Diagram Model C4<\/strong>adalah kerangka arsitektur hierarkis dengan empat tingkatan yang dirancang untuk mendokumentasikan arsitektur perangkat lunak dengan tingkat detail yang bervariasi. Dibuat oleh Simon Brown, C4 menghindari kotak dan garis yang samar dengan menyusun peta sistem menjadi empat lensa abstraksi yang jelas: <strong>Konteks<\/strong> (lingkup tingkat sistem), <strong>Kontainer<\/strong> (Aplikasi dan penyimpanan data), <strong>Komponen<\/strong> (modul internal), dan <strong>Kode<\/strong> (implementasi tingkat kelas).<\/p>\n<p>Untuk menerapkan model ini secara efektif dalam teks, insinyur menggunakan ekstensi perpustakaan resmi <code>C4-PlantUML<\/code>ekstensi perpustakaan standar. Perpustakaan ini menggantikan bentuk UML mentah dengan makro khusus yang secara otomatis menyisipkan warna, bentuk, dan bidang metadata yang berbeda untuk pengguna, sistem, dan basis data. Dengan <strong>VPasCode<\/strong>, Anda dapat mendefinisikan lingkungan bersarang ini secara bersih dalam kode. Mesin tata letak secara dinamis mengarahkan vektor koneksi dan menyesuaikan ukuran bidang teks tanpa merusak geometri tata letak Anda.<\/p>\n<h2>Panduan Sintaks Inti: Elemen dan Konstruksi<\/h2>\n<p>Membangun model C4 yang valid menggunakan PlantUML bergantung pada mengimpor file perpustakaan yang benar, memilih makro struktural, menetapkan batas, dan menggunakan tautan hubungan khusus.<\/p>\n<h3>1. Mengimpor File Perpustakaan Standar C4<\/h3>\n<p>The <code>C4-PlantUML<\/code>ekstensi ini dibagi menjadi file-file individual yang langsung sesuai dengan tingkatan-tingkatan berbeda dalam model abstraksi. Untuk mencegah penurunan kinerja atau kesalahan kompilator, Anda hanya harus mengimpor lapisan file tertentu yang ditargetkan oleh diagram Anda:<\/p>\n<pre class=\"lang-plantuml\"><code>@startuml\r\n' Sertakan file lapisan C4 yang diperlukan\r\n!include &lt;C4\/C4_Context&gt;\r\n' Gunakan C4_Container atau C4_Component untuk peta arsitektur yang lebih mendalam<\/code><\/pre>\n<h3>2. Deklarasi Aktor dan Sistem Inti (Tingkat Konteks)<\/h3>\n<p>Pada tingkat konteks sistem tingkat tinggi, Anda memodelkan komponen internal, ketergantungan eksternal, dan pengguna manusia. Perpustakaan standar menyediakan makro khusus yang menerima ID, label visual, dan tag deskriptif opsional:<\/p>\n<ul>\n<li><code>Person(id, \"Label\", \"Deskripsi\")<\/code> \u2014 Melambangkan profil pengguna manusia atau aktor sistem.<\/li>\n<li><code>System(id, \"Label\", \"Deskripsi\")<\/code> \u2014 Melambangkan ekosistem aplikasi perangkat lunak internal utama atau layanan.<\/li>\n<li><code>System_Ext(id, \"Label\", \"Deskripsi\")<\/code> \u2014 Melambangkan sistem eksternal atau ketergantungan API pihak ketiga (ditampilkan dengan palet warna abu-abu yang jelas).<\/li>\n<\/ul>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Plantuml<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:HS_1IWD130RW-yA-GzpJ5XGlFOgemu8UXC9wNz9fMeCp6PbaRVVjdR4j7fFy-KYUr33R70EuzJG4YYIcRNF3uiEy8tXmw_ioSKcCJlRODXlAcgJtirgAb6-XUq7vOZc0kxIwqdk6Qm2ER9-0yFstXm6s9GxeVPh5kbNRZ8iQnNvxLYPTjEoxb0cky3bHsLUKNI25FGkAvw9PHb7qnadqNvk6a_KHELouuQuMC5B-OKzLUYl_v7hE-Fwn0Kd6U_PO6JYWqH6NRlKB\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit Plantuml di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">Plantuml<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:LO_1QiD034Jl1l-3ufC3XLnoBA5WJ2Z4O73lHebL8tPN3YiPuh_lRYY4d0HlPXxeImsZhS53SnnRJu74j2nsB3U_JWIVpV6GacOHeuUTogAdg8lKjrLj2HG_eEh9eymp2gJiYk9GgZSyaUGJoP6mp90xS8zynOchVLaCcng5EkCKZxffcW-SuKi9tsASlHq9PX-3HHH5fmoErYTxsSRsONL0zl-w2swOTj1cbZNdftW6MOn_sM6o3DrF3vmUZOA-sly1\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-plantuml\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">@startuml C4_Elements\r\n!include &lt;C4\/C4_Context&gt;\r\nPerson(customer, \"Pelanggan Perbankan\", \"Pelanggan dengan rekening bank pribadi\")\r\nSystem(banking_sys, \"Sistem Perbankan Inti\", \"Menangani transaksi keuangan\")\r\nSystem_Ext(mail_sys, \"Layanan Email\", \"Gerbang notifikasi SMTP internal\")<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:LO_1QiD034Jl1l-3ufC3XLnoBA5WJ2Z4O73lHebL8tPN3YiPuh_lRYY4d0HlPXxeImsZhS53SnnRJu74j2nsB3U_JWIVpV6GacOHeuUTogAdg8lKjrLj2HG_eEh9eymp2gJiYk9GgZSyaUGJoP6mp90xS8zynOchVLaCcng5EkCKZxffcW-SuKi9tsASlHq9PX-3HHH5fmoErYTxsSRsONL0zl-w2swOTj1cbZNdftW6MOn_sM6o3DrF3vmUZOA-sly1\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:HS_1IWD130RW-yA-GzpJ5XGlFOgemu8UXC9wNz9fMeCp6PbaRVVjdR4j7fFy-KYUr33R70EuzJG4YYIcRNF3uiEy8tXmw_ioSKcCJlRODXlAcgJtirgAb6-XUq7vOZc0kxIwqdk6Qm2ER9-0yFstXm6s9GxeVPh5kbNRZ8iQnNvxLYPTjEoxb0cky3bHsLUKNI25FGkAvw9PHb7qnadqNvk6a_KHELouuQuMC5B-OKzLUYl_v7hE-Fwn0Kd6U_PO6JYWqH6NRlKB\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit Plantuml di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"USSGhTV\"><img fetchpriority=\"high\" alt=\"\" class=\"alignnone size-full wp-image-608\" decoding=\"async\" fetchpriority=\"high\" height=\"316\" sizes=\"(max-width: 461px) 100vw, 461px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a1901f8a8e4e.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a1901f8a8e4e.png 461w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a1901f8a8e4e-300x206.png 300w\" width=\"461\"\/><\/p>\n<h3>3. Meledakkan Batas (Tingkat Container dan Komponen)<\/h3>\n<p>Ketika menyelami lebih dalam ke lapisan Container, Anda memodelkan aplikasi web, mikroservis, dan basis data. Anda dapat mengisolasi elemen-elemen internal ini di dalam kotak batas logis yang jelas menggunakan<code>System_Boundary()<\/code> wrapper makro:<\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Plantuml<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:NOrFQyCm3CNlWNm7DOUHmi8Oz3W6MzfR3zsyUr1iDHCujf6TbZ3stUTaVmxJHNfFqkzjs6ax6OA7TdVNxhhMkuJiI1xBeYpK71EDtREVd46PQtr_2zMXQVquacY2xpqSj6_YEbPR-2WBoFK7gg_KTnX2_bJi1alD2GU2fn0iQqpiNPLNhuGwmGsypO6K5WvfSK_YBsmemXH9u4oO9idgmWYPcZjTg-s_l7rV6qpOOwILQzSCjB3_SLUmZsaGKY_7HQdavJSaY3-p9K1dm98PilNECHymnINhymi0\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit Plantuml di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">Plantuml<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:NOrDIyDG44NtWVo7CGj9mI92boAqQQ4B1Msw3vENQHZoldWVb23-ToSK5PpDm9cvzzonLJeF1C_Dvh7PT8sp2TbIU2cBicZdcCXqEvVjW66krTC3L8V9HLuujBTrM3VE60gAgXLybWN8_FRKL-exz5w2MwzvmiXmH8q6BPop7KVKbTnEX2h1FPndJwqAxDD2tyZED31EydpXb0DuaaYs28OqwioGq7ZMSXTFjVedt_VrW0bxZ2HjEt57s0k0awGZEtkJlxkOna3jn-kFb8sNIX_SXVMVSn0M-8ep9kZpbA6dY66nVdq3\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-plantuml\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">!include &lt;C4\/C4_Container&gt;\r\n\r\nSystem_Boundary(c1, \"Ekosistem Sistem E-Commerce\") {\r\n    Container(web_app, \"Aplikasi Halaman Tunggal\", \"React &amp; TypeScript\", \"Menyediakan fitur pengguna melalui tampilan web\")\r\n    ContainerDb(database, \"Basis Data Relasional\", \"PostgreSQL\", \"Menyimpan profil pengguna dan riwayat buku besar\")\r\n}<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:NOrDIyDG44NtWVo7CGj9mI92boAqQQ4B1Msw3vENQHZoldWVb23-ToSK5PpDm9cvzzonLJeF1C_Dvh7PT8sp2TbIU2cBicZdcCXqEvVjW66krTC3L8V9HLuujBTrM3VE60gAgXLybWN8_FRKL-exz5w2MwzvmiXmH8q6BPop7KVKbTnEX2h1FPndJwqAxDD2tyZED31EydpXb0DuaaYs28OqwioGq7ZMSXTFjVedt_VrW0bxZ2HjEt57s0k0awGZEtkJlxkOna3jn-kFb8sNIX_SXVMVSn0M-8ep9kZpbA6dY66nVdq3\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:NOrFQyCm3CNlWNm7DOUHmi8Oz3W6MzfR3zsyUr1iDHCujf6TbZ3stUTaVmxJHNfFqkzjs6ax6OA7TdVNxhhMkuJiI1xBeYpK71EDtREVd46PQtr_2zMXQVquacY2xpqSj6_YEbPR-2WBoFK7gg_KTnX2_bJi1alD2GU2fn0iQqpiNPLNhuGwmGsypO6K5WvfSK_YBsmemXH9u4oO9idgmWYPcZjTg-s_l7rV6qpOOwILQzSCjB3_SLUmZsaGKY_7HQdavJSaY3-p9K1dm98PilNECHymnINhymi0\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit Plantuml di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"GZPysCa\"><img alt=\"\" class=\"alignnone size-full wp-image-609\" decoding=\"async\" height=\"223\" sizes=\"(max-width: 473px) 100vw, 473px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a1902094851f.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a1902094851f.png 473w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a1902094851f-300x141.png 300w\" width=\"473\"\/><\/p>\n<h3>4. Memetakan Hubungan Teknis<\/h3>\n<p>Alih-alih mengandalkan garis putus-putus dasar, C4 menggunakan format makro komunikasi yang eksplisit sebagai<code>Rel(ID_Dari, ID_Tujuan, \"Label\", \"Teknologi\")<\/code>. Ini menjaga peta arsitektur Anda sangat mudah dibaca dengan mewajibkan setiap koneksi menyatakan tujuannya dan protokol transportasi dasar (seperti HTTPS, gRPC, atau AMQP):<\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Plantuml<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:LPB1QkD038Rl1h-3ciFYG4DPwB4KMZVGXLrmr-uvo6FP5PtCc9bnNBFikrVZE6dZoo0XVVf_oLTib1uQWhlyzYQ_tUNM16H3xZvDqgGWvwt9rE23tPExXjKZcdSs7UHBQYMv1pWLmCZX3H3wkGyrr58Eg9GTJ5YjqwISVA1zLXyfEpzvwS-j8pY1ZnKH-uocqUIXPOD6iT22G-DH1RR6Vz5ssu-GxP7rWjjkOW0bkGChYgHV9f2BSie_LG761cvPOSH0Xu56d2Bjp7iKjGswALC_Prnkz-9DqQ8Djifk_57c6lwb2SXttbisKht3lfVEKlnesXJO4JpqlLvcHaL_IMp03wYcdahbk0ynMpXxu4Oi3rvssHA6mKbqO0IXoajZ57enxwdE6WnOewUPg-SPulLfoSvWwqFdg7pv7QCoM7SQqZlRiYQGNOEcffFK6yin7TEyulzf8inlVy2NlLSla5XAhHCr5thd-rLLKKP619pRBiHYu-V9e-CWZT_kAmPYvOaboc-gl5YjFm40\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit Plantuml di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">Plantuml<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:LP9DQzj048Rl0ls7gGz5XfPGoB4K4iKqXHZKI7SpaiPYa3Ixx0UfAFtldRKToz55CAjvtW_j9vPkYZt1z_B-hhm_b4O2if3xaMTvLf7pHeek-c1cSbzWKz64CWmee6SjoeYo-J3kITBBqKZ2Ca3w1gpZ5dlURFEiNdoWkKXZFJxunUjwpMcu8k6N14xSFGac7aDmA1v7pp1IFCrMsc7t9nGpydJ1lU22kWUxD4kOdoVm06827tb4fTJxfWAMG4vmIgWhxD54wT4jHVTDLtUZyMTt5vExhwMPjOoEDblucsUWpxMruetQ0rghYmzsEYizuuIpkcbYQkZavvMm2_0PciLItJcsuH9sePun5N3a41rOBNE8WZ1hlrFK5d2sh5M3wYJJ7yIVsgB7W2rwKjgZQdjuqW6ywhPd8sVnolWmEAf_lxoBycmLQPqvyhHgzkatyfjs6Q2DOuIMFBga-Y_F57bpBTRK-ylscY6OqO2HIHs-nqYwpqrJrGcMIDVz6_zxcblipZPcaZXfcdIyteGKw1QfYUwQijfi_mC0\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-plantuml\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">!include &lt;C4\/C4_Container&gt;\r\n\r\nPerson(customer, \"Pelanggan Perbankan\", \"Pelanggan dengan rekening bank pribadi\")\r\nSystem(banking_sys, \"Sistem Perbankan Inti\", \"Menangani transaksi keuangan\")\r\nSystem_Ext(mail_sys, \"Layanan Email\", \"Gerbang notifikasi SMTP internal\")\r\n\r\nSystem_Boundary(c1, \"Ekosistem Sistem E-Commerce\") {\r\n    Container(web_app, \"Aplikasi Halaman Tunggal\", \"React &amp; TypeScript\", \"Menyediakan fitur pengguna melalui tampilan web\")\r\n    ContainerDb(database, \"Basis Data Relasional\", \"PostgreSQL\", \"Menyimpan profil pengguna dan riwayat buku besar\")\r\n}\r\nRel(customer, web_app, \"Menggunakan fitur toko online melalui\", \"HTTPS\")\r\nRel(web_app, database, \"Membaca dan menulis data transaksional melalui\", \"SQL\/TCP\")<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:LP9DQzj048Rl0ls7gGz5XfPGoB4K4iKqXHZKI7SpaiPYa3Ixx0UfAFtldRKToz55CAjvtW_j9vPkYZt1z_B-hhm_b4O2if3xaMTvLf7pHeek-c1cSbzWKz64CWmee6SjoeYo-J3kITBBqKZ2Ca3w1gpZ5dlURFEiNdoWkKXZFJxunUjwpMcu8k6N14xSFGac7aDmA1v7pp1IFCrMsc7t9nGpydJ1lU22kWUxD4kOdoVm06827tb4fTJxfWAMG4vmIgWhxD54wT4jHVTDLtUZyMTt5vExhwMPjOoEDblucsUWpxMruetQ0rghYmzsEYizuuIpkcbYQkZavvMm2_0PciLItJcsuH9sePun5N3a41rOBNE8WZ1hlrFK5d2sh5M3wYJJ7yIVsgB7W2rwKjgZQdjuqW6ywhPd8sVnolWmEAf_lxoBycmLQPqvyhHgzkatyfjs6Q2DOuIMFBga-Y_F57bpBTRK-ylscY6OqO2HIHs-nqYwpqrJrGcMIDVz6_zxcblipZPcaZXfcdIyteGKw1QfYUwQijfi_mC0\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:LPB1QkD038Rl1h-3ciFYG4DPwB4KMZVGXLrmr-uvo6FP5PtCc9bnNBFikrVZE6dZoo0XVVf_oLTib1uQWhlyzYQ_tUNM16H3xZvDqgGWvwt9rE23tPExXjKZcdSs7UHBQYMv1pWLmCZX3H3wkGyrr58Eg9GTJ5YjqwISVA1zLXyfEpzvwS-j8pY1ZnKH-uocqUIXPOD6iT22G-DH1RR6Vz5ssu-GxP7rWjjkOW0bkGChYgHV9f2BSie_LG761cvPOSH0Xu56d2Bjp7iKjGswALC_Prnkz-9DqQ8Djifk_57c6lwb2SXttbisKht3lfVEKlnesXJO4JpqlLvcHaL_IMp03wYcdahbk0ynMpXxu4Oi3rvssHA6mKbqO0IXoajZ57enxwdE6WnOewUPg-SPulLfoSvWwqFdg7pv7QCoM7SQqZlRiYQGNOEcffFK6yin7TEyulzf8inlVy2NlLSla5XAhHCr5thd-rLLKKP619pRBiHYu-V9e-CWZT_kAmPYvOaboc-gl5YjFm40\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit Plantuml di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"OfOQvLl\"><img alt=\"\" class=\"alignnone size-full wp-image-610\" decoding=\"async\" height=\"692\" sizes=\"(max-width: 744px) 100vw, 744px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a190224848fe.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a190224848fe.png 744w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a190224848fe-300x279.png 300w\" width=\"744\"\/><\/p>\n<h2>Praktik Terbaik untuk Arsitektur C4 yang Mudah Dibaca<\/h2>\n<ul>\n<li><strong>Jangan Pernah Menggabungkan Tingkat Abstraksi:<\/strong>Pertahankan diagram Anda fokus pada satu lapisan. Jangan mencampur komponen perangkat lunak internal yang sangat rinci ke dalam peta Konteks Sistem tingkat tinggi. Jika suatu sistem menjadi terlalu kompleks, pisahkan menjadi diagram tingkat Container yang terpisah dan khusus.<\/li>\n<li><strong>Tentukan Teknologi Secara Eksplisit:<\/strong>Selalu gunakan parameter keempat dalam makro Anda<code>Rel()<\/code>untuk menyatakan teknologi atau protokol yang digunakan secara tepat (misalnya,<code>\"JSON\/HTTPS\"<\/code> atau <code>\"JDBC\"<\/code>). Ini memberikan konteks implementasi penting bagi tim Anda dalam sekali pandang.<\/li>\n<li><strong>Manfaatkan Ovveride Tata Letak Berarah:<\/strong> Jika komponen Anda mulai tumpang tindih secara tidak nyaman, gunakan makro hubungan berarah (seperti <code>Rel_D()<\/code> untuk bawah, <code>Rel_R()<\/code> untuk kanan, atau <code>Rel_L()<\/code> untuk kiri) untuk membersihkan alur arsitektur Anda secara manual.<\/li>\n<\/ul>\n<h2>Contoh Nyata PlantUML C4<\/h2>\n<h3>Contoh 1: Tata Letak Konteks Sistem Tingkat Tinggi (Tingkat 1)<\/h3>\n<p>Rancangan fungsional ini memodelkan diagram Konteks Sistem Tingkat 1 standar, menjelaskan bagaimana pelanggan berinteraksi dengan aplikasi perbankan internet dan ketergantungan eksternalnya.<\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Plantuml<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:TL9BJy904ButwNyOEM7YuyBH6BGIuy6409wRQJk52TjTiZC5_FTEoqCCyTRT-Pwp7OjYrBPnQNB3ldHjHV2KZHwpKPu5hxJNvpH94sLr1FDlKMhWE80tncN41keGuSEkeYU5L_HhziiZjkDEAKhmmx8L3Gt5EnWSRj2TmTbnDh3X2voG46hG5K5XADYnhc1p8c9PXjQhF0nkq-HWDImEOhdqHrFw9rDlubpOoTb9G0DicNPGiqTVibcmhmEWhw31DO56z58Ryi8nd-nrs22xNyl9VNU6ULl8sMjX5RYFOghKVMmYYssJVFKUkO8on4s8g0GzMIXkhRozXId4tYzDPkGkDdXLzKj887Z7dg12MHK1OsMDi6CRDvzThUTly2wC03gAAdrhYy0rbwWSl2MiJByLutUDvf-BQISyDfBzEZy0\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit Plantuml di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">Plantuml<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:TL9BQm8n4Bulx7z8FLdeuz9ZAOALKaGGxLrctN4TaipA92dsttTcxKCfFIMPR-Px39ca399B37LrHRmDfKNtE7sudpvifZrdFEQdkgghJ3cWUoRe1AAR6-AJMrFA65tXNFptOudI07jWzwfDmfXjNgkfv_6sfDn7b1itMc80xZhj-vrO2ZNGqkW2Dioro7ONzCZ4dJkSEkz6rtMr_Z3XiVKfj4d3Kod-DMJy2uo5EnqmuF0Z5Z7G7h8ZtlKI8P7pM63GRaym-68ZMO3J3kNCmMPspEC85Cuib2QTNCnk3J7bUG2jY4iextgWrTM1b0HxK6OQNC95ROtSlWYrWrfThJ2ShV9Fy8KkgoiCVd2TzaqFqhgU0p4E4K8X8rAQpUhFtYuJ61S9HNKJ6nJAi2zVo_2z_XMDG3lojgduAsivruktfQbCrBl-hqy0\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-plantuml\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">@startuml\r\n!include &lt;C4\/C4_Context&gt;\r\n\r\ntitle Diagram Konteks Sistem untuk Sistem Perbankan Internet\r\n\r\nPerson(customer, \"Pelanggan Perbankan Pribadi\", \"Pelanggan bank dengan rekening pribadi.\")\r\nSystem(banking_system, \"Sistem Perbankan Internet\", \"Memungkinkan pelanggan melihat informasi keuangan dan melakukan transfer.\")\r\nSystem_Ext(mail_system, \"Subsistem E-mail\", \"Klaster server email perusahaan internal perusahaan SendGrid.\")\r\n\r\nRel(customer, banking_system, \"Menggunakan dashboard online melalui\")\r\nRel_R(banking_system, mail_system, \"Mengirim pemberitahuan dan kode verifikasi menggunakan\", \"SMTP\")\r\n@enduml<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:TL9BQm8n4Bulx7z8FLdeuz9ZAOALKaGGxLrctN4TaipA92dsttTcxKCfFIMPR-Px39ca399B37LrHRmDfKNtE7sudpvifZrdFEQdkgghJ3cWUoRe1AAR6-AJMrFA65tXNFptOudI07jWzwfDmfXjNgkfv_6sfDn7b1itMc80xZhj-vrO2ZNGqkW2Dioro7ONzCZ4dJkSEkz6rtMr_Z3XiVKfj4d3Kod-DMJy2uo5EnqmuF0Z5Z7G7h8ZtlKI8P7pM63GRaym-68ZMO3J3kNCmMPspEC85Cuib2QTNCnk3J7bUG2jY4iextgWrTM1b0HxK6OQNC95ROtSlWYrWrfThJ2ShV9Fy8KkgoiCVd2TzaqFqhgU0p4E4K8X8rAQpUhFtYuJ61S9HNKJ6nJAi2zVo_2z_XMDG3lojgduAsivruktfQbCrBl-hqy0\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:TL9BJy904ButwNyOEM7YuyBH6BGIuy6409wRQJk52TjTiZC5_FTEoqCCyTRT-Pwp7OjYrBPnQNB3ldHjHV2KZHwpKPu5hxJNvpH94sLr1FDlKMhWE80tncN41keGuSEkeYU5L_HhziiZjkDEAKhmmx8L3Gt5EnWSRj2TmTbnDh3X2voG46hG5K5XADYnhc1p8c9PXjQhF0nkq-HWDImEOhdqHrFw9rDlubpOoTb9G0DicNPGiqTVibcmhmEWhw31DO56z58Ryi8nd-nrs22xNyl9VNU6ULl8sMjX5RYFOghKVMmYYssJVFKUkO8on4s8g0GzMIXkhRozXId4tYzDPkGkDdXLzKj887Z7dg12MHK1OsMDi6CRDvzThUTly2wC03gAAdrhYy0rbwWSl2MiJByLutUDvf-BQISyDfBzEZy0\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit Plantuml di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"NTJPRPC\"><img loading=\"lazy\" alt=\"\" class=\"alignnone size-full wp-image-611\" decoding=\"async\" height=\"439\" loading=\"lazy\" sizes=\"auto, (max-width: 561px) 100vw, 561px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a190234b2052.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a190234b2052.png 561w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a190234b2052-300x235.png 300w\" width=\"561\"\/><\/p>\n<p><strong>Analisis Sintaks:<\/strong> Diagram ini berfokus murni pada cakupan tingkat tinggi. Makro <code>System_Ext<\/code> secara otomatis menerapkan profil warna abu-abu pada layanan email, secara visual memisahkan sistem inti dari ketergantungan eksternal. Makro <code>Rel_R<\/code> memaksa mesin tata letak untuk menempatkan node email tepat di sebelah kanan blok sistem perbankan.<\/p>\n<h3>Contoh 2: Topologi Wadah Mikroservis Penyelidikan Mendalam (Tingkat 2)<\/h3>\n<p>Rancangan perusahaan canggih ini memecah suatu sistem menjadi aplikasi wadah penyusunnya dan penyimpanan data terpisah, menunjukkan bagaimana lalu lintas web melewati gateway API hingga ke mikroservis backend.<\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Plantuml<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:TLHTRzf047n7uZziUMY9b3PIbSUgIW9jIfGF5wFsqLgV5tFA-SwwMqEigF-zUxP38Kfv07bzDpExCyj5OFJSL6OyUgUjCar1y6LsVZOxpsRECcfB_kjuD1wnPaEmhy5SO-cnWhNpa61RaML8d6SqS8rCEspZhOHyS7PQaLSRj7mAaz-KmztmA1Sz2zX4wWlB981C0Mg3BB0Lg0sfHzSma2rgfoq7a2y7l27jOKTvq7B-q-GaKgLjOAgoAzVO0dqxhJinML2k9i5_qJY8Ws_AXUx6v0IUnoEGpxwvATOwA_k3SlKoMS1IP6XRGkBTKnlrtfVQFhq8zuhgJbmUsK6XCU4KfCN2I3-nAp2wqd94If2ZGQlaXNN58FyLVSERB93VQXMbBmeHhhc5Ewsy6-gH-jh1UtYubDEVu-ClDBhe9bZGbepqxI5gP_T8jgVkfl4M9J_P0yQLHnjGiNOMRgaeUujkS8kGrZxEuSevZZMPXtGIeclzW7kU2YsMKZJTPK2bP33y1l4yd_PdiY8Nk9uCviWOsFckovbJZzwXsiolkdbNjQ6UgT21lSuRfW8kPulvH-NafOx9Oimbha4IL65F-oU6v4Dd905xNA-rWhLnkm3A45hJYamPRvSnybQ2hFPfboKfYSDuj2HpaERZdAHDtdayJ2B-6eT5WAt6gFp7QfMaPpVfmttK8qZP_3Xfhtp_vwTifglYs0Sh1y1ocSp-0tNivtVdT-X5oNwZUdE30Bu6MXvduT2TkCqoyhsjqgJNj9UJ_hmzMzsc4UX2DbR-LFu2\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit Plantuml di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">Plantuml<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:TPH9Rzim48Nl1lmVfZwq3X0qG95ZKSHBaIR8uje6SXH6qbHYIP42boH2qV_U6TbEvQJLnLh8Dz-yUVH5YEXZQinuz4xPmgIIuFFY_6nndYsSZQWi-I_ZqNWKLJG4IuMLnmOUiCGQaer9moL6Ui8ELiv7DB2Y9iSEFLhPjY8Vd9qsv8iQRJo5oQsA7dbLYHNQ2XuedyXRifMoaLWzA8qMk9xIWBfM7egQ2krIXDPW_E5y0veWg9W2F54EB4uQFqvEfE2c2v6QREwIBT5tqxQdoaBXMk8wNxKBIbRynNxXdPp0h_48-7ffVOgjoghTIjwzykwvWpMZA4QVhQu4_Ox1d_SzS4SQMsZvjrA6ssWm97tAYF89hO8S8mRcBwZbEmkbB2BRaM8CsMt1kfBwRbwXf5XdWVoZAgZtKNlNFmQuAicoOHW4uzB1UxYVyUfFEwhc4OqgsLU8JfCLxhwiJp80mwtenCmy0UeP_b4xFjj1wNdI2QwJjppkBHiNK0SbjQxn4M7JUd5dxbpSrsy5D725WzE7hYiopY1FELd8HVHdB_eMO9bF3PKL-QpCPGvic6hOPPPPieqm89AQ2rUmELZKo_b-CEIn5M-3fWOXOau6EcbVEzQ9IfxPH1uHp1PNImXKC2X4yYN7nQiy1TLZ_PQGVO2PKLxq39ea5ifGztjoZhogkRtTQtOTVKKHdlep8o4NpF5eJMPmBew3rXy7hnfEKcSSbaFlM9YBzdv_ssvNcxFhpVsTeB5WjZnExElClCb2dy-XPBLUBVuZTXo2tjGKTcULpvhSl1nKJQ-rriSP6axpzZ1Du1HxDKp2a6pp_UPiUxCHmGko9Vzd_G40\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-plantuml\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">@startuml\r\n!include &lt;C4\/C4_Container&gt;\r\n\r\ntitle Diagram Wadah untuk Gateway Portal Pembayaran\r\n\r\nPerson(merchant, \"Mitra Pedagang Web\", \"Mengintegrasikan titik akhir checkout platform ke situs web mereka.\")\r\n\r\nSystem_Boundary(portal_scope, \"Ekosistem Gateway Pembayaran\") {\r\n    Container(api_gateway, \"Proxy Routing API\", \"Nginx\", \"Menangkap panggilan masuk, menangani batas kecepatan dan menyeimbangkan node.\")\r\n    Container(auth_service, \"Mikroservis Identitas\", \"Go &amp; OAuth2\", \"Memvalidasi token API dan ruang lingkup pengembang.\")\r\n    Container(txn_service, \"Buku Jurnal Transaksi\", \"Java Spring Boot\", \"Memproses pembayaran dan mengelola akun buku jurnal.\")\r\n    ContainerDb(ledger_db, \"Penyimpanan Data Buku Jurnal\", \"CockroachDB\", \"Menerapkan skema tabel yang kompatibel dengan ACID secara terdistribusi.\")\r\n}\r\n\r\n' Alirkan lalu lintas secara bersih melintasi target wadah internal\r\nRel(merchant, api_gateway, \"Mengirim payload pembayaran melalui\", \"HTTPS\/JSON\")\r\nRel_D(api_gateway, auth_service, \"Memvalidasi token masuk melalui\", \"gRPC\")\r\nRel_D(api_gateway, txn_service, \"Meneruskan tindakan checkout ke\", \"gRPC\")\r\nRel_R(txn_service, ledger_db, \"Menyimpan entri buku jurnal melalui\", \"SQL\/TLS\")\r\n@enduml<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:TPH9Rzim48Nl1lmVfZwq3X0qG95ZKSHBaIR8uje6SXH6qbHYIP42boH2qV_U6TbEvQJLnLh8Dz-yUVH5YEXZQinuz4xPmgIIuFFY_6nndYsSZQWi-I_ZqNWKLJG4IuMLnmOUiCGQaer9moL6Ui8ELiv7DB2Y9iSEFLhPjY8Vd9qsv8iQRJo5oQsA7dbLYHNQ2XuedyXRifMoaLWzA8qMk9xIWBfM7egQ2krIXDPW_E5y0veWg9W2F54EB4uQFqvEfE2c2v6QREwIBT5tqxQdoaBXMk8wNxKBIbRynNxXdPp0h_48-7ffVOgjoghTIjwzykwvWpMZA4QVhQu4_Ox1d_SzS4SQMsZvjrA6ssWm97tAYF89hO8S8mRcBwZbEmkbB2BRaM8CsMt1kfBwRbwXf5XdWVoZAgZtKNlNFmQuAicoOHW4uzB1UxYVyUfFEwhc4OqgsLU8JfCLxhwiJp80mwtenCmy0UeP_b4xFjj1wNdI2QwJjppkBHiNK0SbjQxn4M7JUd5dxbpSrsy5D725WzE7hYiopY1FELd8HVHdB_eMO9bF3PKL-QpCPGvic6hOPPPPieqm89AQ2rUmELZKo_b-CEIn5M-3fWOXOau6EcbVEzQ9IfxPH1uHp1PNImXKC2X4yYN7nQiy1TLZ_PQGVO2PKLxq39ea5ifGztjoZhogkRtTQtOTVKKHdlep8o4NpF5eJMPmBew3rXy7hnfEKcSSbaFlM9YBzdv_ssvNcxFhpVsTeB5WjZnExElClCb2dy-XPBLUBVuZTXo2tjGKTcULpvhSl1nKJQ-rriSP6axpzZ1Du1HxDKp2a6pp_UPiUxCHmGko9Vzd_G40\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:TLHTRzf047n7uZziUMY9b3PIbSUgIW9jIfGF5wFsqLgV5tFA-SwwMqEigF-zUxP38Kfv07bzDpExCyj5OFJSL6OyUgUjCar1y6LsVZOxpsRECcfB_kjuD1wnPaEmhy5SO-cnWhNpa61RaML8d6SqS8rCEspZhOHyS7PQaLSRj7mAaz-KmztmA1Sz2zX4wWlB981C0Mg3BB0Lg0sfHzSma2rgfoq7a2y7l27jOKTvq7B-q-GaKgLjOAgoAzVO0dqxhJinML2k9i5_qJY8Ws_AXUx6v0IUnoEGpxwvATOwA_k3SlKoMS1IP6XRGkBTKnlrtfVQFhq8zuhgJbmUsK6XCU4KfCN2I3-nAp2wqd94If2ZGQlaXNN58FyLVSERB93VQXMbBmeHhhc5Ewsy6-gH-jh1UtYubDEVu-ClDBhe9bZGbepqxI5gP_T8jgVkfl4M9J_P0yQLHnjGiNOMRgaeUujkS8kGrZxEuSevZZMPXtGIeclzW7kU2YsMKZJTPK2bP33y1l4yd_PdiY8Nk9uCviWOsFckovbJZzwXsiolkdbNjQ6UgT21lSuRfW8kPulvH-NafOx9Oimbha4IL65F-oU6v4Dd905xNA-rWhLnkm3A45hJYamPRvSnybQ2hFPfboKfYSDuj2HpaERZdAHDtdayJ2B-6eT5WAt6gFp7QfMaPpVfmttK8qZP_3Xfhtp_vwTifglYs0Sh1y1ocSp-0tNivtVdT-X5oNwZUdE30Bu6MXvduT2TkCqoyhsjqgJNj9UJ_hmzMzsc4UX2DbR-LFu2\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Sunting Plantuml di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"ZtGazyC\"><img loading=\"lazy\" alt=\"\" class=\"alignnone size-full wp-image-612\" decoding=\"async\" height=\"728\" loading=\"lazy\" sizes=\"auto, (max-width: 759px) 100vw, 759px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a19024586a43.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a19024586a43.png 759w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a19024586a43-300x288.png 300w\" width=\"759\"\/><\/p>\n<p><strong>Analisis Sintaks:<\/strong> Dengan menggunakan <code>System_Boundary<\/code> wrapper makro, komponen internal dikelompokkan dengan rapi di dalam kotak batas yang jelas. Makro khusus<code>ContainerDb<\/code> makro menampilkan penyimpanan data dengan ikon silinder basis data yang jelas, membuat pembagian antara runtime komputasi dan lapisan penyimpanan permanen menjadi jelas pada pandangan pertama.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Apa itu Diagram Model C4? The Diagram Model C4adalah kerangka arsitektur hierarkis dengan empat tingkatan yang dirancang untuk mendokumentasikan arsitektur perangkat lunak dengan tingkat detail yang bervariasi. Dibuat oleh Simon Brown, C4 menghindari kotak dan garis yang samar dengan menyusun&#8230;<\/p>\n","protected":false},"author":4,"featured_media":0,"parent":0,"menu_order":12,"template":"","meta":{"inline_featured_image":false,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}}},"ld_collection":[14],"class_list":["post-2115","ld_docs","type-ld_docs","status-publish","hentry","ld_collection-vpascode-docs"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>PlantUML C4 Model Syntax | VPasCode Text to Diagram Guide<\/title>\n<meta name=\"description\" content=\"Map software architecture hierarchies with PlantUML C4 diagrams in VPasCode, your free diagram-as-code tool.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/plantuml-c4-model-syntax-guide\/\" \/>\n<meta property=\"og:locale\" content=\"id_ID\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"PlantUML C4 Model Syntax | VPasCode Text to Diagram Guide\" \/>\n<meta property=\"og:description\" content=\"Map software architecture hierarchies with PlantUML C4 diagrams in VPasCode, your free diagram-as-code tool.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/plantuml-c4-model-syntax-guide\/\" \/>\n<meta property=\"og:site_name\" content=\"VPasCode\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a1901f8a8e4e.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Estimasi waktu membaca\" \/>\n\t<meta name=\"twitter:data1\" content=\"4 menit\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/plantuml-c4-model-syntax-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/plantuml-c4-model-syntax-guide\\\/\",\"name\":\"PlantUML C4 Model Syntax | VPasCode Text to Diagram Guide\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/plantuml-c4-model-syntax-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/plantuml-c4-model-syntax-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/img_6a1901f8a8e4e.png\",\"datePublished\":\"2026-05-26T07:53:11+00:00\",\"description\":\"Map software architecture hierarchies with PlantUML C4 diagrams in VPasCode, your free diagram-as-code tool.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/plantuml-c4-model-syntax-guide\\\/#breadcrumb\"},\"inLanguage\":\"id\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/plantuml-c4-model-syntax-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/plantuml-c4-model-syntax-guide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/img_6a1901f8a8e4e.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/img_6a1901f8a8e4e.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/plantuml-c4-model-syntax-guide\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Lean Docs\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/%ld_collection%\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Panduan Sintaks Model C4 PlantUML\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/#website\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/\",\"name\":\"VPasCode\",\"description\":\"by Visual Paradigm\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"id\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/#organization\",\"name\":\"VPasCode\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/wp-content\\\/uploads\\\/sites\\\/7\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/wp-content\\\/uploads\\\/sites\\\/7\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"width\":128,\"height\":138,\"caption\":\"VPasCode\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"PlantUML C4 Model Syntax | VPasCode Text to Diagram Guide","description":"Map software architecture hierarchies with PlantUML C4 diagrams in VPasCode, your free diagram-as-code tool.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/plantuml-c4-model-syntax-guide\/","og_locale":"id_ID","og_type":"article","og_title":"PlantUML C4 Model Syntax | VPasCode Text to Diagram Guide","og_description":"Map software architecture hierarchies with PlantUML C4 diagrams in VPasCode, your free diagram-as-code tool.","og_url":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/plantuml-c4-model-syntax-guide\/","og_site_name":"VPasCode","og_image":[{"url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a1901f8a8e4e.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Estimasi waktu membaca":"4 menit"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/plantuml-c4-model-syntax-guide\/","url":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/plantuml-c4-model-syntax-guide\/","name":"PlantUML C4 Model Syntax | VPasCode Text to Diagram Guide","isPartOf":{"@id":"https:\/\/www.vpascode.com\/id\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/plantuml-c4-model-syntax-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/plantuml-c4-model-syntax-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a1901f8a8e4e.png","datePublished":"2026-05-26T07:53:11+00:00","description":"Map software architecture hierarchies with PlantUML C4 diagrams in VPasCode, your free diagram-as-code tool.","breadcrumb":{"@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/plantuml-c4-model-syntax-guide\/#breadcrumb"},"inLanguage":"id","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/plantuml-c4-model-syntax-guide\/"]}]},{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/plantuml-c4-model-syntax-guide\/#primaryimage","url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a1901f8a8e4e.png","contentUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a1901f8a8e4e.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/plantuml-c4-model-syntax-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vpascode.com\/id\/"},{"@type":"ListItem","position":2,"name":"Lean Docs","item":"https:\/\/www.vpascode.com\/id\/docs\/%ld_collection%\/"},{"@type":"ListItem","position":3,"name":"Panduan Sintaks Model C4 PlantUML"}]},{"@type":"WebSite","@id":"https:\/\/www.vpascode.com\/id\/#website","url":"https:\/\/www.vpascode.com\/id\/","name":"VPasCode","description":"by Visual Paradigm","publisher":{"@id":"https:\/\/www.vpascode.com\/id\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vpascode.com\/id\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"id"},{"@type":"Organization","@id":"https:\/\/www.vpascode.com\/id\/#organization","name":"VPasCode","url":"https:\/\/www.vpascode.com\/id\/","logo":{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/www.vpascode.com\/id\/#\/schema\/logo\/image\/","url":"https:\/\/www.vpascode.com\/id\/wp-content\/uploads\/sites\/7\/2026\/06\/cropped-vp-online-logo-v1.png","contentUrl":"https:\/\/www.vpascode.com\/id\/wp-content\/uploads\/sites\/7\/2026\/06\/cropped-vp-online-logo-v1.png","width":128,"height":138,"caption":"VPasCode"},"image":{"@id":"https:\/\/www.vpascode.com\/id\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/ld_docs\/2115","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/ld_docs"}],"about":[{"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/types\/ld_docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/users\/4"}],"wp:attachment":[{"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/media?parent=2115"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/ld_collection?post=2115"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}