{"id":1948,"date":"2026-06-20T02:33:55","date_gmt":"2026-06-20T02:33:55","guid":{"rendered":"https:\/\/www.vpascode.com\/id\/your-first-diagram-in-vpascode-a-5-minute-quickstart-2\/"},"modified":"2026-06-20T02:33:55","modified_gmt":"2026-06-20T02:33:55","slug":"your-first-diagram-in-vpascode-a-5-minute-quickstart-2","status":"publish","type":"post","link":"https:\/\/www.vpascode.com\/id\/your-first-diagram-in-vpascode-a-5-minute-quickstart-2\/","title":{"rendered":"Diagram Pertama Anda di VPasCode \u2013 Panduan Cepat 5 Menit"},"content":{"rendered":"<article>\n<header>\n<p class=\"intro\">VPasCode adalah alat yang intuitif<a href=\"\/overview\">alat diagram sebagai kode<\/a> dan terpadu<a href=\"\/overview\">teks ke diagram<\/a>platform yang memungkinkan Anda membuat diagram menggunakan format populer seperti PlantUML, Mermaid, dan Graphviz.<\/p>\n<\/header>\n<section>\n<h2>Apa itu VPasCode?<\/h2>\n<p>VPasCode (platform diagram sebagai kode dari Visual Paradigm) adalah platform terpadu teks ke diagram yang memungkinkan Anda membuat diagram menggunakan format populer seperti PlantUML, Mermaid, dan Graphviz. Baik Anda sedang mendokumentasikan arsitektur perangkat lunak, merencanakan proyek, atau memvisualisasikan alur data, VPasCode menyediakan editor kode gratis dan renderer diagram instan untuk mewujudkan ide-ide Anda.<\/p>\n<p>Bagian terbaiknya? Anda bisa langsung mulai membuat diagram di<a href=\"https:\/\/www.vpascode.com\/\" rel=\"noopener\" target=\"_blank\">www.vpascode.com<\/a> \u2013 tidak perlu pendaftaran untuk fitur dasar.<\/p>\n<\/section>\n<section>\n<h2>Langkah 1: Akses VPasCode<\/h2>\n<p>Navigasi ke<a href=\"https:\/\/www.vpascode.com\/\" rel=\"noopener\" target=\"_blank\">www.vpascode.com<\/a> di browser web Anda. Anda akan melihat antarmuka yang bersih dengan editor kode di sisi kiri dan panel pratinjau langsung di sisi kanan. Platform ini langsung dimuat dengan diagram contoh untuk membantu Anda memahami sintaksnya.<br \/>\n<!-- Image Placeholder 1 --><\/p>\n<figure><img fetchpriority=\"high\" alt=\"VPasCode diagram-as-code tool interface showing live text to diagram preview\" class=\"alignnone\" decoding=\"async\" fetchpriority=\"high\" height=\"792\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/06\/img_6a35fc55c2e8b.png\" width=\"1264\"\/><figcaption>Antarmuka intuitif VPasCode dengan pengeditan kode berdampingan dan pratinjau real-time<\/figcaption><\/figure>\n<p><strong>Petunjuk Gambar:<\/strong> Tangkapan layar antarmuka web VPasCode yang menunjukkan tata letak layar terbagi dengan editor kode di sisi kiri menampilkan sintaks Mermaid dan diagram alur yang dirender di sisi kanan, tampilan UI modern bersih dengan bilah alat di bagian atas<\/p>\n<\/section>\n<section>\n<h2>Langkah 1: Tulis Kode Diagram Alur Anda<\/h2>\n<p>VPasCode berfungsi sebagai alat diagram sebagai kode yang serbaguna dan mendukung berbagai format. Untuk panduan cepat teks ke diagram ini, kita akan menggunakan Mermaid, salah satu pilihan paling populer untuk diagram alur.<\/p>\n<p>Hapus kode contoh dan tempel contoh diagram alur sederhana ini:<\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/#mermaid:eNpLL0osyFAIceHlUgACx+jgksSiklgFXV07Badqz2KFzBKF8vyi7My8dPtaiBonkGRNZGpxjYJztHtRamKJYiyyjF9+jYJLtEtqUmk6VNwFYhyE4wzmuEa75qXEAgB5USCB\" 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 Mermaid 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\">Mermaid<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLL0osyFAIceHlUgACx+jgksSiklgFXV07Badqx4LE7MQMhaTUorTSvPTiTPtaiDInkHxNZGKNgnO0U2J6abFiLLJESGZKYnaNgku0S2pSaTpUygViJoTjDOa4Rgen5qQWJ2bGAgDp+SQ5\" \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 Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-mermaid\"><code class=\"language-mermaid\" data-language=\"mermaid\" class=\"language-mermaid\">graph TD\r\n    A[Start] --&gt; B{Apakah berfungsi?}\r\n    B --&gt;|Ya| C[Bagus!]\r\n    B --&gt;|Tidak| D[Debug]\r\n    D --&gt; B\r\n    C --&gt; E[Selesai]<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLL0osyFAIceHlUgACx+jgksSiklgFXV07Badqx4LE7MQMhaTUorTSvPTiTPtaiDInkHxNZGKNgnO0U2J6abFiLLJESGZKYnaNgku0S2pSaTpUygViJoTjDOa4Rgen5qQWJ2bGAgDp+SQ5\" \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 Mermaid 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\/#mermaid:eNpLL0osyFAIceHlUgACx+jgksSiklgFXV07Badqz2KFzBKF8vyi7My8dPtaiBonkGRNZGpxjYJztHtRamKJYiyyjF9+jYJLtEtqUmk6VNwFYhyE4wzmuEa75qXEAgB5USCB\" 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 Mermaid di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p>Sintaks Mermaid ini membuat diagram alur keputusan dasar. Berikut artinya:<\/p>\n<ul>\n<li><code>graph TD<\/code> \u2013 Menciptakan grafik dari atas ke bawah<\/li>\n<li><code>A[Start]<\/code> \u2013 Menentukan node yang diberi label \u201cStart\u201d<\/li>\n<li><code>--&gt;<\/code> \u2013 Menciptakan koneksi panah<\/li>\n<li><code>B{Apakah berfungsi?}<\/code> \u2013 Menciptakan berlian keputusan<\/li>\n<li><code>|Ya|<\/code> dan <code>|Tidak|<\/code> \u2013 Label untuk jalur keputusan<\/li>\n<\/ul>\n<figure><img alt=\"Mermaid code editor in VPasCode diagram-as-code tool for text to diagram creation\" class=\"alignnone\" decoding=\"async\" height=\"792\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/06\/img_6a35fcf72021e.png\" width=\"1264\"\/><figcaption>Kode flowchart Mermaid sederhana yang menciptakan diagram keputusan<\/figcaption><\/figure>\n<p><strong>Petunjuk Gambar:<\/strong>Zoom dekat editor VPasCode yang menampilkan kode flowchart Mermaid dengan penyorotan sintaks, kursor berada di area kode, font monospace bersih<\/p>\n<\/section>\n<section>\n<h2>Langkah 2: Lihat Pratinjau Secara Real-Time<\/h2>\n<p>Saat Anda mengetik, alat diagram sebagai kode ini langsung merender visual Anda di sisi kanan. Tidak perlu mengklik tombol &#8216;kompilasi&#8217; atau &#8216;segarkan&#8217; \u2013 mesin konversi teks ke diagram secara real-time akan diperbarui otomatis setiap kali Anda mengetik.<\/p>\n<\/section>\n<section>\n<h2>Langkah 3: Ekspor dan Bagikan Diagram Anda<\/h2>\n<p>Setelah Anda puas dengan flowchart Anda, Anda memiliki beberapa pilihan:<\/p>\n<h3>Ekspor sebagai Gambar<\/h3>\n<p>Klik tombol &#8216;Ekspor&#8217; dan pilih format yang Anda sukai:<\/p>\n<ul>\n<li><strong>SVG<\/strong> \u2013 Format vektor sempurna untuk presentasi dan dokumentasi (dapat diskalakan tanpa kehilangan kualitas)<\/li>\n<li><strong>PNG<\/strong> \u2013 Format gambar raster yang kompatibel dengan semua aplikasi<\/li>\n<\/ul>\n<h3>Bagikan melalui URL<\/h3>\n<p>VPasCode menghasilkan URL unik untuk diagram Anda. Cukup salin tautan dari bilah alamat browser Anda dan bagikan dengan rekan kerja. Siapa pun yang memiliki tautan dapat melihat diagram Anda \u2013 tidak perlu akun.<\/p>\n<\/section>\n<section>\n<h2>Bonus: Perbaiki Kesalahan dengan AI<\/h2>\n<p>Buat kesalahan sintaks? Tidak masalah. VPasCode menyertakan<a href=\"https:\/\/www.vpascode.com\/never-get-stuck-on-syntax-again-ai-error-fixing-in-vpascode\/\">perbaikan kesalahan berbasis AI<\/a>. Saat parser mendeteksi kesalahan, cukup klik tombol &#8216;Perbaiki dengan AI&#8217;. AI tidak hanya akan memperbaiki kode Anda tetapi juga menjelaskan apa yang salah, membantu Anda mempelajari sintaks saat Anda mengerjakan.<\/p>\n<p>Fitur ini sangat membantu ketika Anda baru mengenal format diagram sebagai kode atau sedang mengerjakan diagram yang kompleks. AI memahami sintaks PlantUML, Mermaid, dan Graphviz secara mendalam, memberikan perbaikan yang akurat dan penjelasan yang jelas.<\/p>\n<\/section>\n<section>\n<h2>Apa Selanjutnya?<\/h2>\n<p>Anda baru saja membuat diagram pertama Anda di VPasCode! Berikut beberapa ide untuk melanjutkan perjalanan Anda:<\/p>\n<ul>\n<li><strong>Jelajahi jenis diagram yang berbeda<\/strong> \u2013 Coba buat diagram urutan, diagram kelas, atau diagram Gantt<\/li>\n<li><strong>Coba format lainnya<\/strong> \u2013 Ganti antara Mermaid, PlantUML, dan Graphviz untuk menemukan favorit Anda<\/li>\n<li><strong>Gunakan terjemahan AI<\/strong> \u2013 <a href=\"https:\/\/www.vpascode.com\/ai-translation-diagrams-global-teams-vpascode\/\">Terjemahkan diagram Anda<\/a> label ke berbagai bahasa dengan bantuan AI<\/li>\n<li><strong>Terintegrasi dengan dokumentasi<\/strong> \u2013 <a href=\"https:\/\/www.vpascode.com\/seamlessly-connect-diagrams-to-documentation-with-opendocs\/\">Kirim diagram Anda ke Visual Paradigm OpenDocs<\/a> untuk dokumentasi yang komprehensif<\/li>\n<\/ul>\n<p>Ingat, semua fitur inti \u2013 pengeditan diagram, tampilan langsung, dan ekspor \u2013 sepenuhnya gratis. Fitur lanjutan seperti perbaikan kesalahan AI dan terjemahan AI tersedia dengan Visual Paradigm Online Combo Edition atau Visual Paradigm Desktop Professional Edition dengan pemeliharaan aktif.<\/p>\n<\/section>\n<section class=\"cta\">\n<h2>Mulai Buat Diagram Hari Ini<\/h2>\n<p>Siap mengalami kekuatan alat diagram-as-code modern? Kunjungi www.vpascode.com untuk mengubah teks menjadi diagram dalam hitungan detik. Tidak perlu instalasi, tidak perlu pendaftaran \u2013 hanya produktivitas diagram yang murni.<\/p>\n<p>Apakah Anda seorang pengembang yang mendokumentasikan kode, manajer proyek yang membuat timeline, atau analis bisnis yang memetakan proses, VPasCode menyediakan alat yang Anda butuhkan untuk menyampaikan ide secara visual melalui kode.<\/p>\n<h2>Buat Diagram Pertama Anda dalam Hitungan Detik<\/h2>\n<p>Coba alat diagram-as-code gratis kami hari ini. Ubah teks Anda menjadi diagram dengan mudah menggunakan pratinjau langsung, pemeriksaan kesalahan, dan opsi ekspor yang mulus.<\/p>\n<p><a href=\"https:\/\/www.vpascode.com\/\" style=\"display: inline-block; background-color: #0066cc; color: #ffffff; padding: 12px 24px; text-decoration: none; border-radius: 4px; font-weight: bold;\">Mulai Diagram-as-Code Secara Gratis<\/a><\/p>\n<\/section>\n<\/article>\n","protected":false},"excerpt":{"rendered":"<p>VPasCode adalah alat yang intuitifalat diagram sebagai kode dan terpaduteks ke diagramplatform yang memungkinkan Anda membuat diagram menggunakan format populer seperti PlantUML, Mermaid, dan Graphviz. Apa itu VPasCode? VPasCode (platform diagram sebagai kode dari Visual Paradigm) adalah platform terpadu teks&#8230;<\/p>\n","protected":false},"author":4,"featured_media":1949,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","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":""}},"fifu_image_url":"","fifu_image_alt":"","footnotes":""},"categories":[17],"tags":[],"class_list":["post-1948","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-getting-started"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>5-Minute Quickstart Guide | Text to Diagram with VPasCode<\/title>\n<meta name=\"description\" content=\"Get started with VPasCode in just five minutes. Learn how to create, preview, and export visual charts using this free diagram-as-code tool and text to diagram editor.\" \/>\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\/your-first-diagram-in-vpascode-a-5-minute-quickstart-2\/\" \/>\n<meta property=\"og:locale\" content=\"id_ID\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"5-Minute Quickstart Guide | Text to Diagram with VPasCode\" \/>\n<meta property=\"og:description\" content=\"Get started with VPasCode in just five minutes. Learn how to create, preview, and export visual charts using this free diagram-as-code tool and text to diagram editor.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vpascode.com\/id\/your-first-diagram-in-vpascode-a-5-minute-quickstart-2\/\" \/>\n<meta property=\"og:site_name\" content=\"VPasCode\" \/>\n<meta property=\"article:published_time\" content=\"2026-06-20T02:33:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.vpascode.com\/id\/wp-content\/uploads\/sites\/7\/2026\/06\/img_6a35fcf72021e-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1264\" \/>\n\t<meta property=\"og:image:height\" content=\"792\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"jick\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Ditulis oleh\" \/>\n\t<meta name=\"twitter:data1\" content=\"\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimasi waktu membaca\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 menit\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/your-first-diagram-in-vpascode-a-5-minute-quickstart-2\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/your-first-diagram-in-vpascode-a-5-minute-quickstart-2\\\/\"},\"author\":{\"name\":\"jick\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/#\\\/schema\\\/person\\\/cd8aa8455bd8bc6827b3efdfa79ad3a6\"},\"headline\":\"Diagram Pertama Anda di VPasCode \u2013 Panduan Cepat 5 Menit\",\"datePublished\":\"2026-06-20T02:33:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/your-first-diagram-in-vpascode-a-5-minute-quickstart-2\\\/\"},\"wordCount\":733,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/your-first-diagram-in-vpascode-a-5-minute-quickstart-2\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/wp-content\\\/uploads\\\/sites\\\/7\\\/2026\\\/06\\\/img_6a35fcf72021e-1.png\",\"articleSection\":[\"Getting Started\"],\"inLanguage\":\"id\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/id\\\/your-first-diagram-in-vpascode-a-5-minute-quickstart-2\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/your-first-diagram-in-vpascode-a-5-minute-quickstart-2\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/your-first-diagram-in-vpascode-a-5-minute-quickstart-2\\\/\",\"name\":\"5-Minute Quickstart Guide | Text to Diagram with VPasCode\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/your-first-diagram-in-vpascode-a-5-minute-quickstart-2\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/your-first-diagram-in-vpascode-a-5-minute-quickstart-2\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/wp-content\\\/uploads\\\/sites\\\/7\\\/2026\\\/06\\\/img_6a35fcf72021e-1.png\",\"datePublished\":\"2026-06-20T02:33:55+00:00\",\"description\":\"Get started with VPasCode in just five minutes. Learn how to create, preview, and export visual charts using this free diagram-as-code tool and text to diagram editor.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/your-first-diagram-in-vpascode-a-5-minute-quickstart-2\\\/#breadcrumb\"},\"inLanguage\":\"id\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/id\\\/your-first-diagram-in-vpascode-a-5-minute-quickstart-2\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/your-first-diagram-in-vpascode-a-5-minute-quickstart-2\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/wp-content\\\/uploads\\\/sites\\\/7\\\/2026\\\/06\\\/img_6a35fcf72021e-1.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/wp-content\\\/uploads\\\/sites\\\/7\\\/2026\\\/06\\\/img_6a35fcf72021e-1.png\",\"width\":1264,\"height\":792},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/your-first-diagram-in-vpascode-a-5-minute-quickstart-2\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Diagram Pertama Anda di VPasCode \u2013 Panduan Cepat 5 Menit\"}]},{\"@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\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/#\\\/schema\\\/person\\\/cd8aa8455bd8bc6827b3efdfa79ad3a6\",\"name\":\"jick\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/0c89451a99649a6ebefa14a9167db0960c327e8c33ea79fdb68fc38aa18d768a?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/0c89451a99649a6ebefa14a9167db0960c327e8c33ea79fdb68fc38aa18d768a?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/0c89451a99649a6ebefa14a9167db0960c327e8c33ea79fdb68fc38aa18d768a?s=96&d=mm&r=g\",\"caption\":\"jick\"},\"url\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/author\\\/jick\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"5-Minute Quickstart Guide | Text to Diagram with VPasCode","description":"Get started with VPasCode in just five minutes. Learn how to create, preview, and export visual charts using this free diagram-as-code tool and text to diagram editor.","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\/your-first-diagram-in-vpascode-a-5-minute-quickstart-2\/","og_locale":"id_ID","og_type":"article","og_title":"5-Minute Quickstart Guide | Text to Diagram with VPasCode","og_description":"Get started with VPasCode in just five minutes. Learn how to create, preview, and export visual charts using this free diagram-as-code tool and text to diagram editor.","og_url":"https:\/\/www.vpascode.com\/id\/your-first-diagram-in-vpascode-a-5-minute-quickstart-2\/","og_site_name":"VPasCode","article_published_time":"2026-06-20T02:33:55+00:00","og_image":[{"width":1264,"height":792,"url":"https:\/\/www.vpascode.com\/id\/wp-content\/uploads\/sites\/7\/2026\/06\/img_6a35fcf72021e-1.png","type":"image\/png"}],"author":"jick","twitter_card":"summary_large_image","twitter_misc":{"Ditulis oleh":false,"Estimasi waktu membaca":"4 menit"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.vpascode.com\/id\/your-first-diagram-in-vpascode-a-5-minute-quickstart-2\/#article","isPartOf":{"@id":"https:\/\/www.vpascode.com\/id\/your-first-diagram-in-vpascode-a-5-minute-quickstart-2\/"},"author":{"name":"jick","@id":"https:\/\/www.vpascode.com\/id\/#\/schema\/person\/cd8aa8455bd8bc6827b3efdfa79ad3a6"},"headline":"Diagram Pertama Anda di VPasCode \u2013 Panduan Cepat 5 Menit","datePublished":"2026-06-20T02:33:55+00:00","mainEntityOfPage":{"@id":"https:\/\/www.vpascode.com\/id\/your-first-diagram-in-vpascode-a-5-minute-quickstart-2\/"},"wordCount":733,"commentCount":0,"publisher":{"@id":"https:\/\/www.vpascode.com\/id\/#organization"},"image":{"@id":"https:\/\/www.vpascode.com\/id\/your-first-diagram-in-vpascode-a-5-minute-quickstart-2\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vpascode.com\/id\/wp-content\/uploads\/sites\/7\/2026\/06\/img_6a35fcf72021e-1.png","articleSection":["Getting Started"],"inLanguage":"id","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.vpascode.com\/id\/your-first-diagram-in-vpascode-a-5-minute-quickstart-2\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.vpascode.com\/id\/your-first-diagram-in-vpascode-a-5-minute-quickstart-2\/","url":"https:\/\/www.vpascode.com\/id\/your-first-diagram-in-vpascode-a-5-minute-quickstart-2\/","name":"5-Minute Quickstart Guide | Text to Diagram with VPasCode","isPartOf":{"@id":"https:\/\/www.vpascode.com\/id\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vpascode.com\/id\/your-first-diagram-in-vpascode-a-5-minute-quickstart-2\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/id\/your-first-diagram-in-vpascode-a-5-minute-quickstart-2\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vpascode.com\/id\/wp-content\/uploads\/sites\/7\/2026\/06\/img_6a35fcf72021e-1.png","datePublished":"2026-06-20T02:33:55+00:00","description":"Get started with VPasCode in just five minutes. Learn how to create, preview, and export visual charts using this free diagram-as-code tool and text to diagram editor.","breadcrumb":{"@id":"https:\/\/www.vpascode.com\/id\/your-first-diagram-in-vpascode-a-5-minute-quickstart-2\/#breadcrumb"},"inLanguage":"id","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/id\/your-first-diagram-in-vpascode-a-5-minute-quickstart-2\/"]}]},{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/www.vpascode.com\/id\/your-first-diagram-in-vpascode-a-5-minute-quickstart-2\/#primaryimage","url":"https:\/\/www.vpascode.com\/id\/wp-content\/uploads\/sites\/7\/2026\/06\/img_6a35fcf72021e-1.png","contentUrl":"https:\/\/www.vpascode.com\/id\/wp-content\/uploads\/sites\/7\/2026\/06\/img_6a35fcf72021e-1.png","width":1264,"height":792},{"@type":"BreadcrumbList","@id":"https:\/\/www.vpascode.com\/id\/your-first-diagram-in-vpascode-a-5-minute-quickstart-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vpascode.com\/id\/"},{"@type":"ListItem","position":2,"name":"Diagram Pertama Anda di VPasCode \u2013 Panduan Cepat 5 Menit"}]},{"@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\/"}},{"@type":"Person","@id":"https:\/\/www.vpascode.com\/id\/#\/schema\/person\/cd8aa8455bd8bc6827b3efdfa79ad3a6","name":"jick","image":{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/secure.gravatar.com\/avatar\/0c89451a99649a6ebefa14a9167db0960c327e8c33ea79fdb68fc38aa18d768a?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/0c89451a99649a6ebefa14a9167db0960c327e8c33ea79fdb68fc38aa18d768a?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0c89451a99649a6ebefa14a9167db0960c327e8c33ea79fdb68fc38aa18d768a?s=96&d=mm&r=g","caption":"jick"},"url":"https:\/\/www.vpascode.com\/id\/author\/jick\/"}]}},"_links":{"self":[{"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/posts\/1948","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/comments?post=1948"}],"version-history":[{"count":0,"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/posts\/1948\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/media\/1949"}],"wp:attachment":[{"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/media?parent=1948"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/categories?post=1948"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/tags?post=1948"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}