{"id":9453,"date":"2026-09-24T01:29:47","date_gmt":"2026-09-24T01:29:47","guid":{"rendered":"https:\/\/www.learn-vp.com\/id\/gallery\/mastering-browser-based-modeling-vpascode-architecture-workflow\/"},"modified":"2026-10-09T04:18:46","modified_gmt":"2026-10-09T04:18:46","slug":"mastering-browser-based-modeling-vpascode-architecture-workflow","status":"publish","type":"gallery","link":"https:\/\/www.learn-vp.com\/id\/gallery\/mastering-browser-based-modeling-vpascode-architecture-workflow\/","title":{"rendered":"Mastering Browser-Based Modeling: A Guide to VPasCode Architecture and Workflow"},"content":{"rendered":"<div class=\"vpg-article-wrapper\" style=\"max-width: 100% !important; width: 100% !important; box-sizing: border-box !important; overflow-wrap: break-word !important; word-break: break-word !important; min-width: 0 !important;\">\n<p style=\"max-width: 100% !important; box-sizing: border-box !important; text-align: center !important; margin: 1.5rem 0 !important;\"><img decoding=\"async\" src=\"https:\/\/guides.visual-paradigm.com\/wp-content\/uploads\/2026\/09\/img_6ab4761e9ed09.png\" alt=\"VPasCode browser workspace screenshot showing PlantUML editing and AI features\" title=\"VPasCode browser workspace screenshot showing PlantUML editing and AI features\" data-fifu-alt=\"VPasCode browser workspace screenshot showing PlantUML editing and AI features\" fifu-alt=\"VPasCode browser workspace screenshot showing PlantUML editing and AI features\" style=\"max-width: 100% !important; height: auto !important; display: block !important; margin: 0 auto !important; box-sizing: border-box !important; border-radius: 6px !important;\" \/><\/p>\n<p>In the rapidly evolving landscape of software engineering, the gap between high-level conceptual thinking and concrete implementation has often been bridged by <strong>Model-Driven Architecture (MDA)<\/strong>. However, traditional modeling tools frequently suffer from a &#8220;heavy&#8221; user experience, requiring steep learning curves and expensive licenses. <strong>VPasCode<\/strong> represents a paradigm shift by offering a lightweight, browser-based workspace that unifies multiple diagram languages with intelligent AI capabilities.<\/p>\n<p>This tutorial explores the architectural pillars of VPasCode, focusing on the synergy between Visual Paradigm&#8217;s robust AI engines and the VPasCode editor. We will dissect how this system transforms text-based inputs into complex visualizations and how you can leverage its core features for efficient system modeling.<\/p>\n<h2>The Core Architecture: Text as the Source of Truth<\/h2>\n<p>At the heart of VPasCode is the philosophy of <strong>Diagram-as-Code (DaC)<\/strong>. Unlike WYSIWYG (What You See Is What You Get) tools where you drag and drop boxes with a mouse, VPasCode treats the diagram definition as a text file. This approach brings the stability and version control benefits of software development to system design.<\/p>\n<p>The system supports a polyglot environment, meaning it does not restrict you to a single syntax. Instead, it provides an abstract layer that automatically detects and renders various standards. This is evident in the <strong>Multiple diagram engines<\/strong> capability, which includes:<\/p>\n<ul>\n<li><strong>PlantUML:<\/strong> The industry standard for UML diagrams.<\/li>\n<li><strong>Mermaid:<\/strong> Popular for documentation and markdown-based workflows.<\/li>\n<li><strong>D2:<\/strong> A declarative diagram language known for readability.<\/li>\n<li><strong>Graphviz:<\/strong> Best for graph theory and flowcharts.<\/li>\n<li><strong>Markmap:<\/strong> For converting Markdown to mind maps.<\/li>\n<\/ul>\n<h3>How Automatic Format Detection Works<\/h3>\n<p>One of the most critical features of the VPasCode architecture is its ability to recognize syntax without manual configuration. When you paste code into the workspace, the system analyzes the content to determine the language. This is particularly useful for ad-hoc modeling where you might have snippets from different sources.<\/p>\n<aside class='vpg-callout-box vpg-did-you-know'>\n<h4>\ud83d\udca1 Did You Know?<\/h4>\n<p>In VPasCode, you can switch between supported engines seamlessly. If you write code in Mermaid but need a UML Sequence diagram, you don&#8217;t need to rewrite the logic manually; the engine can often parse the intent and render it within the appropriate framework context.<\/p>\n<\/aside>\n<h2>The AI Integration: From Natural Language to Syntax<\/h2>\n<p>The integration of AI into the modeling workflow is not merely a &#8220;nice-to-have&#8221; feature in VPasCode; it is a fundamental pillar of its utility. The system bridges the gap between natural language requirements and strict coding syntax.<\/p>\n<h3>1. AI Generation (Natural Language to PlantUML)<\/h3>\n<p>Traditionally, writing a valid PlantUML script requires memorizing specific syntax rules (e.g., defining actors, participants, and arrows). VPasCode allows you to describe a diagram in plain English. The AI engine parses your intent and generates the corresponding code block.<\/p>\n<pre style=\"max-width: 100%; overflow-x: auto; white-space: pre-wrap; word-break: break-word; background: #f8fafc; padding: 12px 14px; border-radius: 8px; border: 1px solid #e2e8f0;\"><code class='language-plantuml'>\n@startuml\nactor User\nparticipant \"Web App\" as Web\nparticipant \"API Server\" as API\ndatabase \"Database\" as DB\n\nUser -> Web : Open dashboard\nWeb -> API : GET \/data\nAPI -> DB : Query data\nDB --> API : Results\nAPI --> Web : JSON data\nWeb --> User : Render dashboard\n@enduml\n<\/code><\/pre>\n<h3>2. AI Modification and Error Fixing<\/h3>\n<p>Even experienced modelers make syntax errors. VPasCode provides an <strong>AI error fixing<\/strong> capability that analyzes broken syntax and suggests corrections. Furthermore, <strong>AI modification<\/strong> allows for dynamic changes to the diagram structure. You can request the AI to:<\/p>\n<ul>\n<li><strong>Add:<\/strong> Insert new components into an existing flow.<\/li>\n<li><strong>Remove:<\/strong> Eliminate obsolete steps from a process.<\/li>\n<li><strong>Reorganize:<\/strong> Simplify the layout for better readability.<\/li>\n<\/ul>\n<h2>The Live Preview Workflow<\/h2>\n<p>VPasCode is designed as a <strong>real-time, reactive workspace<\/strong>. The architecture separates the &#8220;Editor&#8221; (where code is written) from the &#8220;Renderer&#8221; (where the diagram is visualized), but they are tightly coupled via a live preview mechanism.<\/p>\n<ol>\n<li><strong>Input:<\/strong> You type PlantUML or Mermaid code in the left pane.<\/li>\n<li><strong>Processing:<\/strong> The engine parses the text.<\/li>\n<li><strong>Rendering:<\/strong> The diagram is instantly redrawn in the right pane.<\/li>\n<\/ol>\n<p>This &#8220;Live preview&#8221; capability is crucial for iterative design. It eliminates the traditional &#8220;compile-and-view&#8221; cycle found in older tools, allowing for immediate visual feedback on architectural decisions.<\/p>\n<h3>Code Structure Example<\/h3>\n<p>When working with the editor, you will notice specific directives that control the rendering. The following example demonstrates the structure of a standard sequence diagram within the VPasCode workspace:<\/p>\n<pre style=\"max-width: 100%; overflow-x: auto; white-space: pre-wrap; word-break: break-word; background: #f8fafc; padding: 12px 14px; border-radius: 8px; border: 1px solid #e2e8f0;\"><code class='language-plantuml'>\n@startuml\ntitle Web Application Data Flow\n\nautonumber\nactor User\nparticipant \"Web App\" as Web\nparticipant \"API Server\" as API\ndatabase \"Database\" as DB\n\nUser -> Web : Open dashboard\nactivate Web\nWeb -> API : GET \/data\nactivate API\nAPI -> DB : Query data\nactivate DB\nDB --> API : Results\ndeactivate DB\nAPI --> Web : JSON data\ndeactivate API\nWeb --> User : Render dashboard\ndeactivate Web\n\n@enduml\n<\/code><\/pre>\n<h2>Collaboration and Exporting<\/h2>\n<p>While the core editor is free, the ecosystem of VPasCode extends beyond the browser window. It supports modern software development workflows through:<\/p>\n<ul>\n<li><strong>Sharing:<\/strong> Creating shareable links allows teams to view diagrams without installing software.<\/li>\n<li><strong>Export:<\/strong> Diagrams can be downloaded in high-fidelity formats like <strong>SVG, PNG, and PDF<\/strong>, ensuring they look perfect in technical documentation.<\/li>\n<li><strong>AI Translation:<\/strong> For international teams, labels can be translated automatically, ensuring that diagrams remain accessible across different languages.<\/li>\n<\/ul>\n<h2>Conclusion<\/h2>\n<p>VPasCode effectively democratizes system modeling by combining the power of visual diagramming with the precision of code. By leveraging its AI capabilities for generation and correction, and its flexible engine support for various formats, it offers a robust environment for architects and developers to design, document, and share complex system architectures.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Learn how VPaCode&#8217;s Diagram-as-Code architecture combines AI with PlantUML and C4 to transform text into complex system models without heavy desktop tools.<\/p>\n","protected":false},"author":1,"featured_media":9454,"template":"","meta":{"_yoast_wpseo_title":"Mastering Browser-Based Modeling: A Guide to VPasCode Architecture and Workflow","_yoast_wpseo_metadesc":"Learn how VPaCode's Diagram-as-Code architecture combines AI with PlantUML and C4 to transform text into complex system models without heavy desktop tools.","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":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","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":""}},"source_url":"https:\/\/guides.visual-paradigm.com\/vpascode-ai-assisted-diagram-as-code-with-plantuml\/","source_h1_title":"VPasCode: AI-Assisted Diagram-as-Code with PlantUML","fifu_image_url":"","fifu_image_alt":"","_fifu_image_alt":"","fifu_alt":"","_fifu_alt":"","fifu_image_title":"","_fifu_image_title":"","fifu_input_alt":"","vp_image_hash":"ebcd33b815392c9d35147e9e2a0e51fd28d8b5c7102a48b3ca9b59d9245a3509"},"asset-category":[32,18],"class_list":["post-9453","gallery","type-gallery","status-publish","has-post-thumbnail","hentry","asset-category-ai","asset-category-vpascode"],"source_url":"https:\/\/guides.visual-paradigm.com\/vpascode-ai-assisted-diagram-as-code-with-plantuml\/","source_h1_title":"VPasCode: AI-Assisted Diagram-as-Code with PlantUML","fifu_image_url":"","fifu_image_alt":"","vp_image_hash":"ebcd33b815392c9d35147e9e2a0e51fd28d8b5c7102a48b3ca9b59d9245a3509","yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Mastering Browser-Based Modeling: A Guide to VPasCode Architecture and Workflow<\/title>\n<meta name=\"description\" content=\"Learn how VPaCode&#039;s Diagram-as-Code architecture combines AI with PlantUML and C4 to transform text into complex system models without heavy desktop tools.\" \/>\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.learn-vp.com\/id\/gallery\/mastering-browser-based-modeling-vpascode-architecture-workflow\/\" \/>\n<meta property=\"og:locale\" content=\"id_ID\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mastering Browser-Based Modeling: A Guide to VPasCode Architecture and Workflow\" \/>\n<meta property=\"og:description\" content=\"Learn how VPaCode&#039;s Diagram-as-Code architecture combines AI with PlantUML and C4 to transform text into complex system models without heavy desktop tools.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.learn-vp.com\/id\/gallery\/mastering-browser-based-modeling-vpascode-architecture-workflow\/\" \/>\n<meta property=\"og:site_name\" content=\"Learn VP\" \/>\n<meta property=\"article:modified_time\" content=\"2026-10-09T04:18:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/guides.visual-paradigm.com\/wp-content\/uploads\/2026\/09\/img_6ab4761e9ed09.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"1024\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\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.learn-vp.com\\\/id\\\/gallery\\\/mastering-browser-based-modeling-vpascode-architecture-workflow\\\/\",\"url\":\"https:\\\/\\\/www.learn-vp.com\\\/id\\\/gallery\\\/mastering-browser-based-modeling-vpascode-architecture-workflow\\\/\",\"name\":\"Mastering Browser-Based Modeling: A Guide to VPasCode Architecture and Workflow\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.learn-vp.com\\\/id\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.learn-vp.com\\\/id\\\/gallery\\\/mastering-browser-based-modeling-vpascode-architecture-workflow\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.learn-vp.com\\\/id\\\/gallery\\\/mastering-browser-based-modeling-vpascode-architecture-workflow\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/guides.visual-paradigm.com\\\/wp-content\\\/uploads\\\/2026\\\/09\\\/img_6ab4761e9ed09.png\",\"datePublished\":\"2026-09-24T01:29:47+00:00\",\"dateModified\":\"2026-10-09T04:18:46+00:00\",\"description\":\"Learn how VPaCode's Diagram-as-Code architecture combines AI with PlantUML and C4 to transform text into complex system models without heavy desktop tools.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.learn-vp.com\\\/id\\\/gallery\\\/mastering-browser-based-modeling-vpascode-architecture-workflow\\\/#breadcrumb\"},\"inLanguage\":\"id\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.learn-vp.com\\\/id\\\/gallery\\\/mastering-browser-based-modeling-vpascode-architecture-workflow\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\\\/\\\/www.learn-vp.com\\\/id\\\/gallery\\\/mastering-browser-based-modeling-vpascode-architecture-workflow\\\/#primaryimage\",\"url\":\"https:\\\/\\\/guides.visual-paradigm.com\\\/wp-content\\\/uploads\\\/2026\\\/09\\\/img_6ab4761e9ed09.png\",\"contentUrl\":\"https:\\\/\\\/guides.visual-paradigm.com\\\/wp-content\\\/uploads\\\/2026\\\/09\\\/img_6ab4761e9ed09.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.learn-vp.com\\\/id\\\/gallery\\\/mastering-browser-based-modeling-vpascode-architecture-workflow\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.learn-vp.com\\\/id\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Mastering Browser-Based Modeling: A Guide to VPasCode Architecture and Workflow\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.learn-vp.com\\\/id\\\/#website\",\"url\":\"https:\\\/\\\/www.learn-vp.com\\\/id\\\/\",\"name\":\"Learn VP\",\"description\":\"Learn VP\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.learn-vp.com\\\/id\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.learn-vp.com\\\/id\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"id\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.learn-vp.com\\\/id\\\/#organization\",\"name\":\"Learn VP\",\"url\":\"https:\\\/\\\/www.learn-vp.com\\\/id\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\\\/\\\/www.learn-vp.com\\\/id\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.learn-vp.com\\\/id\\\/wp-content\\\/uploads\\\/sites\\\/8\\\/2026\\\/08\\\/cropped-Gemini_Generated_Image_n6bgztn6bgztn6bg-clean-e1787131920742.png\",\"contentUrl\":\"https:\\\/\\\/www.learn-vp.com\\\/id\\\/wp-content\\\/uploads\\\/sites\\\/8\\\/2026\\\/08\\\/cropped-Gemini_Generated_Image_n6bgztn6bgztn6bg-clean-e1787131920742.png\",\"width\":463,\"height\":404,\"caption\":\"Learn VP\"},\"image\":{\"@id\":\"https:\\\/\\\/www.learn-vp.com\\\/id\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Mastering Browser-Based Modeling: A Guide to VPasCode Architecture and Workflow","description":"Learn how VPaCode's Diagram-as-Code architecture combines AI with PlantUML and C4 to transform text into complex system models without heavy desktop tools.","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.learn-vp.com\/id\/gallery\/mastering-browser-based-modeling-vpascode-architecture-workflow\/","og_locale":"id_ID","og_type":"article","og_title":"Mastering Browser-Based Modeling: A Guide to VPasCode Architecture and Workflow","og_description":"Learn how VPaCode's Diagram-as-Code architecture combines AI with PlantUML and C4 to transform text into complex system models without heavy desktop tools.","og_url":"https:\/\/www.learn-vp.com\/id\/gallery\/mastering-browser-based-modeling-vpascode-architecture-workflow\/","og_site_name":"Learn VP","article_modified_time":"2026-10-09T04:18:46+00:00","og_image":[{"url":"https:\/\/guides.visual-paradigm.com\/wp-content\/uploads\/2026\/09\/img_6ab4761e9ed09.png","width":1024,"height":1024,"type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"Estimasi waktu membaca":"4 menit"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.learn-vp.com\/id\/gallery\/mastering-browser-based-modeling-vpascode-architecture-workflow\/","url":"https:\/\/www.learn-vp.com\/id\/gallery\/mastering-browser-based-modeling-vpascode-architecture-workflow\/","name":"Mastering Browser-Based Modeling: A Guide to VPasCode Architecture and Workflow","isPartOf":{"@id":"https:\/\/www.learn-vp.com\/id\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.learn-vp.com\/id\/gallery\/mastering-browser-based-modeling-vpascode-architecture-workflow\/#primaryimage"},"image":{"@id":"https:\/\/www.learn-vp.com\/id\/gallery\/mastering-browser-based-modeling-vpascode-architecture-workflow\/#primaryimage"},"thumbnailUrl":"https:\/\/guides.visual-paradigm.com\/wp-content\/uploads\/2026\/09\/img_6ab4761e9ed09.png","datePublished":"2026-09-24T01:29:47+00:00","dateModified":"2026-10-09T04:18:46+00:00","description":"Learn how VPaCode's Diagram-as-Code architecture combines AI with PlantUML and C4 to transform text into complex system models without heavy desktop tools.","breadcrumb":{"@id":"https:\/\/www.learn-vp.com\/id\/gallery\/mastering-browser-based-modeling-vpascode-architecture-workflow\/#breadcrumb"},"inLanguage":"id","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.learn-vp.com\/id\/gallery\/mastering-browser-based-modeling-vpascode-architecture-workflow\/"]}]},{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/www.learn-vp.com\/id\/gallery\/mastering-browser-based-modeling-vpascode-architecture-workflow\/#primaryimage","url":"https:\/\/guides.visual-paradigm.com\/wp-content\/uploads\/2026\/09\/img_6ab4761e9ed09.png","contentUrl":"https:\/\/guides.visual-paradigm.com\/wp-content\/uploads\/2026\/09\/img_6ab4761e9ed09.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.learn-vp.com\/id\/gallery\/mastering-browser-based-modeling-vpascode-architecture-workflow\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.learn-vp.com\/id\/"},{"@type":"ListItem","position":2,"name":"Mastering Browser-Based Modeling: A Guide to VPasCode Architecture and Workflow"}]},{"@type":"WebSite","@id":"https:\/\/www.learn-vp.com\/id\/#website","url":"https:\/\/www.learn-vp.com\/id\/","name":"Learn VP","description":"Learn VP","publisher":{"@id":"https:\/\/www.learn-vp.com\/id\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.learn-vp.com\/id\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"id"},{"@type":"Organization","@id":"https:\/\/www.learn-vp.com\/id\/#organization","name":"Learn VP","url":"https:\/\/www.learn-vp.com\/id\/","logo":{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/www.learn-vp.com\/id\/#\/schema\/logo\/image\/","url":"https:\/\/www.learn-vp.com\/id\/wp-content\/uploads\/sites\/8\/2026\/08\/cropped-Gemini_Generated_Image_n6bgztn6bgztn6bg-clean-e1787131920742.png","contentUrl":"https:\/\/www.learn-vp.com\/id\/wp-content\/uploads\/sites\/8\/2026\/08\/cropped-Gemini_Generated_Image_n6bgztn6bgztn6bg-clean-e1787131920742.png","width":463,"height":404,"caption":"Learn VP"},"image":{"@id":"https:\/\/www.learn-vp.com\/id\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/www.learn-vp.com\/id\/wp-json\/wp\/v2\/gallery\/9453","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.learn-vp.com\/id\/wp-json\/wp\/v2\/gallery"}],"about":[{"href":"https:\/\/www.learn-vp.com\/id\/wp-json\/wp\/v2\/types\/gallery"}],"author":[{"embeddable":true,"href":"https:\/\/www.learn-vp.com\/id\/wp-json\/wp\/v2\/users\/1"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.learn-vp.com\/id\/wp-json\/wp\/v2\/media\/9454"}],"wp:attachment":[{"href":"https:\/\/www.learn-vp.com\/id\/wp-json\/wp\/v2\/media?parent=9453"}],"wp:term":[{"taxonomy":"asset-category","embeddable":true,"href":"https:\/\/www.learn-vp.com\/id\/wp-json\/wp\/v2\/asset-category?post=9453"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}