{"id":88,"date":"2026-05-26T07:53:11","date_gmt":"2026-05-26T07:53:11","guid":{"rendered":"https:\/\/www.vpascode.com\/ja\/docs\/uncategorized\/plantuml-playbook\/plantuml-c4-diagram-syntax-guide\/"},"modified":"2026-07-29T08:31:01","modified_gmt":"2026-07-29T08:31:01","slug":"plantuml-c4-model-syntax-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/ja\/docs\/vpascode-docs\/plantuml-playbook\/plantuml-c4-model-syntax-guide\/","title":{"rendered":"PlantUML C4 Model Syntax Guide"},"content":{"rendered":"<h2>What is the C4 Model Diagram?<\/h2>\n<p>The <strong>C4 Model Diagram<\/strong> is a hierarchical, four-level architectural framework designed to document software architecture with varying degrees of granular detail. Created by Simon Brown, C4 avoids vague boxes and lines by structuring system maps into four explicit abstraction lenses: <strong>Context<\/strong> (System-level scope), <strong>Container<\/strong> (Applications and data stores), <strong>Component<\/strong> (Internal modules), and <strong>Code<\/strong> (Class-level implementations).<\/p>\n<p>To implement this model effectively in text, engineers use the official <code>C4-PlantUML<\/code> standard library extension. This library replaces raw UML shapes with specialized macros that auto-inject distinct colors, shapes, and metadata fields for users, systems, and databases. With <strong>VPasCode<\/strong>, you can define these nested environments cleanly in code. The layout engine dynamically routes connection vectors and scales text fields without ruining your layout geometry.<\/p>\n<h2>Core Syntax Guide: Elements and Constructs<\/h2>\n<p>Building a valid C4 model using PlantUML relies on importing the correct library files, selecting structural macros, establishing boundaries, and using specialized relationship links.<\/p>\n<h3>1. Importing the C4 Standard Library Files<\/h3>\n<p>The <code>C4-PlantUML<\/code> extension is broken up into individual files that map directly to the distinct levels of the abstraction model. To prevent performance slowdowns or compiler errors, you should only import the specific file layer your diagram targets:<\/p>\n<pre class=\"lang-plantuml\"><code>@startuml\r\n' Include the specific C4 layer file required\r\n!include &lt;C4\/C4_Context&gt;\r\n' Use C4_Container or C4_Component for deeper architectural maps<\/code><\/pre>\n<h3>2. Declaring Core Actors and Systems (Context Level)<\/h3>\n<p>At the high-level System Context tier, you model internal components, external dependencies, and human end-users. The standard library provides specific macros that accept an ID, a visual label, and an optional descriptive tag:<\/p>\n<ul>\n<li><code>Person(id, \"Label\", \"Description\")<\/code> \u2014 Represents a human user profile or system actor.<\/li>\n<li><code>System(id, \"Label\", \"Description\")<\/code> \u2014 Represents a primary internal software application or service ecosystem.<\/li>\n<li><code>System_Ext(id, \"Label\", \"Description\")<\/code> \u2014 Represents an external system or third-party API dependency (renders in an explicit grey color palette).<\/li>\n<\/ul>\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\/#plantuml:HS_1IWD130RW-yA-GzpJ5XGlFOgemu8UXC9wNz9fMeCp6PbaRVVjdR4j7fFy-KYUr33R70EuzJG4YYIcRNF3uiEy8tXmw_ioSKcCJlRODXlAcgJtirgAb6-XUq7vOZc0kxIwqdk6Qm2ER9-0yFstXm6s9GxeVPh5kbNRZ8iQnNvxLYPTjEoxb0cky3bHsLUKNI25FGkAvw9PHb7qnadqNvk6a_KHELouuQuMC5B-OKzLUYl_v7hE-Fwn0Kd6U_PO6JYWqH6NRlKB\" \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 data-language=\"plantuml\" class=\"language-plantuml\">@startuml C4_Elements\r\n!include &lt;C4\/C4_Context&gt;\r\nPerson(customer, \"Banking Customer\", \"A customer with a personal bank account\")\r\nSystem(banking_sys, \"Core Banking System\", \"Handles financial transactions\")\r\nSystem_Ext(mail_sys, \"E-mail Service\", \"Internal SMTP notification gateway\")<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/#plantuml:HS_1IWD130RW-yA-GzpJ5XGlFOgemu8UXC9wNz9fMeCp6PbaRVVjdR4j7fFy-KYUr33R70EuzJG4YYIcRNF3uiEy8tXmw_ioSKcCJlRODXlAcgJtirgAb6-XUq7vOZc0kxIwqdk6Qm2ER9-0yFstXm6s9GxeVPh5kbNRZ8iQnNvxLYPTjEoxb0cky3bHsLUKNI25FGkAvw9PHb7qnadqNvk6a_KHELouuQuMC5B-OKzLUYl_v7hE-Fwn0Kd6U_PO6JYWqH6NRlKB\" \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 id=\"USSGhTV\"><img fetchpriority=\"high\" decoding=\"async\" width=\"461\" height=\"316\" class=\"alignnone size-full wp-image-608 \" src=\"https:\/\/www.vpascode.com\/ja\/wp-content\/uploads\/sites\/8\/2026\/05\/img_6a1901f8a8e4e.png\" alt=\"\" srcset=\"https:\/\/www.vpascode.com\/ja\/wp-content\/uploads\/sites\/8\/2026\/05\/img_6a1901f8a8e4e.png 461w, https:\/\/www.vpascode.com\/ja\/wp-content\/uploads\/sites\/8\/2026\/05\/img_6a1901f8a8e4e-300x206.png 300w\" sizes=\"(max-width: 461px) 100vw, 461px\" \/><\/p>\n<h3>3. Exploding Boundaries (Container &amp; Component Levels)<\/h3>\n<p>When diving deeper into the Container layer, you model web apps, microservices, and databases. You can isolate these internal elements inside an explicit logical boundary box using the <code>System_Boundary()<\/code> macro wrapper:<\/p>\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\/#plantuml:NOrFQyCm3CNlWNm7DOUHmi8Oz3W6MzfR3zsyUr1iDHCujf6TbZ3stUTaVmxJHNfFqkzjs6ax6OA7TdVNxhhMkuJiI1xBeYpK71EDtREVd46PQtr_2zMXQVquacY2xpqSj6_YEbPR-2WBoFK7gg_KTnX2_bJi1alD2GU2fn0iQqpiNPLNhuGwmGsypO6K5WvfSK_YBsmemXH9u4oO9idgmWYPcZjTg-s_l7rV6qpOOwILQzSCjB3_SLUmZsaGKY_7HQdavJSaY3-p9K1dm98PilNECHymnINhymi0\" \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 data-language=\"plantuml\" class=\"language-plantuml\">!include &lt;C4\/C4_Container&gt;\r\n\r\nSystem_Boundary(c1, \"E-Commerce System Eco-system\") {\r\n    Container(web_app, \"Single-Page Application\", \"React &amp; TypeScript\", \"Provides user features via web view\")\r\n    ContainerDb(database, \"Relational Database\", \"PostgreSQL\", \"Stores user profile and ledger histories\")\r\n}<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/#plantuml:NOrFQyCm3CNlWNm7DOUHmi8Oz3W6MzfR3zsyUr1iDHCujf6TbZ3stUTaVmxJHNfFqkzjs6ax6OA7TdVNxhhMkuJiI1xBeYpK71EDtREVd46PQtr_2zMXQVquacY2xpqSj6_YEbPR-2WBoFK7gg_KTnX2_bJi1alD2GU2fn0iQqpiNPLNhuGwmGsypO6K5WvfSK_YBsmemXH9u4oO9idgmWYPcZjTg-s_l7rV6qpOOwILQzSCjB3_SLUmZsaGKY_7HQdavJSaY3-p9K1dm98PilNECHymnINhymi0\" \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 id=\"GZPysCa\"><img decoding=\"async\" width=\"473\" height=\"223\" class=\"alignnone size-full wp-image-609 \" src=\"https:\/\/www.vpascode.com\/ja\/wp-content\/uploads\/sites\/8\/2026\/05\/img_6a1902094851f.png\" alt=\"\" srcset=\"https:\/\/www.vpascode.com\/ja\/wp-content\/uploads\/sites\/8\/2026\/05\/img_6a1902094851f.png 473w, https:\/\/www.vpascode.com\/ja\/wp-content\/uploads\/sites\/8\/2026\/05\/img_6a1902094851f-300x141.png 300w\" sizes=\"(max-width: 473px) 100vw, 473px\" \/><\/p>\n<h3>4. Mapping Technical Relationships<\/h3>\n<p>Instead of relying on basic dashed lines, C4 utilizes explicit communication macros format as <code>Rel(From_ID, To_ID, \"Label\", \"Technology\")<\/code>. This keeps your architecture maps highly readable by enforcing that every connection states its purpose and underlying transport protocol (such as HTTPS, gRPC, or AMQP):<\/p>\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\/#plantuml:LPB1QkD038Rl1h-3ciFYG4DPwB4KMZVGXLrmr-uvo6FP5PtCc9bnNBFikrVZE6dZoo0XVVf_oLTib1uQWhlyzYQ_tUNM16H3xZvDqgGWvwt9rE23tPExXjKZcdSs7UHBQYMv1pWLmCZX3H3wkGyrr58Eg9GTJ5YjqwISVA1zLXyfEpzvwS-j8pY1ZnKH-uocqUIXPOD6iT22G-DH1RR6Vz5ssu-GxP7rWjjkOW0bkGChYgHV9f2BSie_LG761cvPOSH0Xu56d2Bjp7iKjGswALC_Prnkz-9DqQ8Djifk_57c6lwb2SXttbisKht3lfVEKlnesXJO4JpqlLvcHaL_IMp03wYcdahbk0ynMpXxu4Oi3rvssHA6mKbqO0IXoajZ57enxwdE6WnOewUPg-SPulLfoSvWwqFdg7pv7QCoM7SQqZlRiYQGNOEcffFK6yin7TEyulzf8inlVy2NlLSla5XAhHCr5thd-rLLKKP619pRBiHYu-V9e-CWZT_kAmPYvOaboc-gl5YjFm40\" \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 data-language=\"plantuml\" class=\"language-plantuml\">!include &lt;C4\/C4_Container&gt;\r\n\r\nPerson(customer, \"Banking Customer\", \"A customer with a personal bank account\")\r\nSystem(banking_sys, \"Core Banking System\", \"Handles financial transactions\")\r\nSystem_Ext(mail_sys, \"E-mail Service\", \"Internal SMTP notification gateway\")\r\n\r\nSystem_Boundary(c1, \"E-Commerce System Eco-system\") {\r\n    Container(web_app, \"Single-Page Application\", \"React &amp; TypeScript\", \"Provides user features via web view\")\r\n    ContainerDb(database, \"Relational Database\", \"PostgreSQL\", \"Stores user profile and ledger histories\")\r\n}\r\nRel(customer, web_app, \"Uses storefront features via\", \"HTTPS\")\r\nRel(web_app, database, \"Reads and writes transactional data via\", \"SQL\/TCP\")<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/#plantuml:LPB1QkD038Rl1h-3ciFYG4DPwB4KMZVGXLrmr-uvo6FP5PtCc9bnNBFikrVZE6dZoo0XVVf_oLTib1uQWhlyzYQ_tUNM16H3xZvDqgGWvwt9rE23tPExXjKZcdSs7UHBQYMv1pWLmCZX3H3wkGyrr58Eg9GTJ5YjqwISVA1zLXyfEpzvwS-j8pY1ZnKH-uocqUIXPOD6iT22G-DH1RR6Vz5ssu-GxP7rWjjkOW0bkGChYgHV9f2BSie_LG761cvPOSH0Xu56d2Bjp7iKjGswALC_Prnkz-9DqQ8Djifk_57c6lwb2SXttbisKht3lfVEKlnesXJO4JpqlLvcHaL_IMp03wYcdahbk0ynMpXxu4Oi3rvssHA6mKbqO0IXoajZ57enxwdE6WnOewUPg-SPulLfoSvWwqFdg7pv7QCoM7SQqZlRiYQGNOEcffFK6yin7TEyulzf8inlVy2NlLSla5XAhHCr5thd-rLLKKP619pRBiHYu-V9e-CWZT_kAmPYvOaboc-gl5YjFm40\" \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 id=\"OfOQvLl\"><img decoding=\"async\" width=\"744\" height=\"692\" class=\"alignnone size-full wp-image-610 \" src=\"https:\/\/www.vpascode.com\/ja\/wp-content\/uploads\/sites\/8\/2026\/05\/img_6a190224848fe.png\" alt=\"\" srcset=\"https:\/\/www.vpascode.com\/ja\/wp-content\/uploads\/sites\/8\/2026\/05\/img_6a190224848fe.png 744w, https:\/\/www.vpascode.com\/ja\/wp-content\/uploads\/sites\/8\/2026\/05\/img_6a190224848fe-300x279.png 300w\" sizes=\"(max-width: 744px) 100vw, 744px\" \/><\/p>\n<h2>Best Practices for Readable C4 Architectures<\/h2>\n<ul>\n<li><strong>Never Mix Abstraction Levels:<\/strong> Keep your diagrams focused on a single layer. Do not mix fine-grained internal software components into a high-level System Context map. If a system gets too complex, break it out into a separate, dedicated Container-level diagram.<\/li>\n<li><strong>Explicitly Define Technologies:<\/strong> Always make use of the fourth parameter in your <code>Rel()<\/code> macros to state the exact technology or protocol being used (e.g., <code>\"JSON\/HTTPS\"<\/code> or <code>\"JDBC\"<\/code>). This gives your team crucial implementation context at a glance.<\/li>\n<li><strong>Leverage Directional Layout Overrides:<\/strong> If your components begin to stack up awkwardly, use directional relationship macros (like <code>Rel_D()<\/code> for down, <code>Rel_R()<\/code> for right, or <code>Rel_L()<\/code> for left) to manually clean up your architectural flow.<\/li>\n<\/ul>\n<h2>Real-World PlantUML C4 Examples<\/h2>\n<h3>Example 1: High-Level System Context Layout (Level 1)<\/h3>\n<p>This functional blueprint models a standard Level 1 System Context diagram, detailing how a customer interacts with an internet banking application and its external dependencies.<\/p>\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\/#plantuml:TL9BJy904ButwNyOEM7YuyBH6BGIuy6409wRQJk52TjTiZC5_FTEoqCCyTRT-Pwp7OjYrBPnQNB3ldHjHV2KZHwpKPu5hxJNvpH94sLr1FDlKMhWE80tncN41keGuSEkeYU5L_HhziiZjkDEAKhmmx8L3Gt5EnWSRj2TmTbnDh3X2voG46hG5K5XADYnhc1p8c9PXjQhF0nkq-HWDImEOhdqHrFw9rDlubpOoTb9G0DicNPGiqTVibcmhmEWhw31DO56z58Ryi8nd-nrs22xNyl9VNU6ULl8sMjX5RYFOghKVMmYYssJVFKUkO8on4s8g0GzMIXkhRozXId4tYzDPkGkDdXLzKj887Z7dg12MHK1OsMDi6CRDvzThUTly2wC03gAAdrhYy0rbwWSl2MiJByLutUDvf-BQISyDfBzEZy0\" \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 data-language=\"plantuml\" class=\"language-plantuml\">@startuml\r\n!include &lt;C4\/C4_Context&gt;\r\n\r\ntitle System Context Diagram for Internet Banking System\r\n\r\nPerson(customer, \"Personal Banking Customer\", \"A customer of the bank with personal accounts.\")\r\nSystem(banking_system, \"Internet Banking System\", \"Allows customers to view financial info and make transfers.\")\r\nSystem_Ext(mail_system, \"E-mail Subsystem\", \"The internal enterprise SendGrid corporate mail server cluster.\")\r\n\r\nRel(customer, banking_system, \"Uses online dashboard via\")\r\nRel_R(banking_system, mail_system, \"Sends alerts and verification codes using\", \"SMTP\")\r\n@enduml<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/#plantuml:TL9BJy904ButwNyOEM7YuyBH6BGIuy6409wRQJk52TjTiZC5_FTEoqCCyTRT-Pwp7OjYrBPnQNB3ldHjHV2KZHwpKPu5hxJNvpH94sLr1FDlKMhWE80tncN41keGuSEkeYU5L_HhziiZjkDEAKhmmx8L3Gt5EnWSRj2TmTbnDh3X2voG46hG5K5XADYnhc1p8c9PXjQhF0nkq-HWDImEOhdqHrFw9rDlubpOoTb9G0DicNPGiqTVibcmhmEWhw31DO56z58Ryi8nd-nrs22xNyl9VNU6ULl8sMjX5RYFOghKVMmYYssJVFKUkO8on4s8g0GzMIXkhRozXId4tYzDPkGkDdXLzKj887Z7dg12MHK1OsMDi6CRDvzThUTly2wC03gAAdrhYy0rbwWSl2MiJByLutUDvf-BQISyDfBzEZy0\" \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 id=\"NTJPRPC\"><img loading=\"lazy\" decoding=\"async\" width=\"561\" height=\"439\" class=\"alignnone size-full wp-image-611 \" src=\"https:\/\/www.vpascode.com\/ja\/wp-content\/uploads\/sites\/8\/2026\/05\/img_6a190234b2052.png\" alt=\"\" srcset=\"https:\/\/www.vpascode.com\/ja\/wp-content\/uploads\/sites\/8\/2026\/05\/img_6a190234b2052.png 561w, https:\/\/www.vpascode.com\/ja\/wp-content\/uploads\/sites\/8\/2026\/05\/img_6a190234b2052-300x235.png 300w\" sizes=\"(max-width: 561px) 100vw, 561px\" \/><\/p>\n<p><strong>Syntax Breakdown:<\/strong> This diagram focuses purely on high-level scope. The <code>System_Ext<\/code> macro automatically applies a grey color profile to the e-mail service, visually separating the core system from external dependencies. The <code>Rel_R<\/code> macro forces the layout engine to place the email node directly to the right of the banking system block.<\/p>\n<h3>Example 2: Deep-Dive Microservice Container Topology (Level 2)<\/h3>\n<p>This advanced enterprise blueprint breaks down a system into its constituent container applications and isolated data stores, showing how web traffic routes through an API gateway down to backend microservices.<\/p>\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\/#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\" \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 data-language=\"plantuml\" class=\"language-plantuml\">@startuml\r\n!include &lt;C4\/C4_Container&gt;\r\n\r\ntitle Container Diagram for Payment Portal Gateway\r\n\r\nPerson(merchant, \"Web Merchant Partner\", \"Integrates platform checkout endpoints into their websites.\")\r\n\r\nSystem_Boundary(portal_scope, \"Payment Gateway Ecosystem\") {\r\n    Container(api_gateway, \"API Routing Proxy\", \"Nginx\", \"Intercepts inbound calls, handles rate limits and balances nodes.\")\r\n    Container(auth_service, \"Identity Microservice\", \"Go &amp; OAuth2\", \"Validates developer API tokens and scopes.\")\r\n    Container(txn_service, \"Transaction Ledger\", \"Java Spring Boot\", \"Processes payments and manages ledger accounts.\")\r\n    ContainerDb(ledger_db, \"Ledger Datastore\", \"CockroachDB\", \"Implements distributed ACID-compliant table schemas.\")\r\n}\r\n\r\n' Route traffic flows cleanly across internal container targets\r\nRel(merchant, api_gateway, \"Submits payment payloads via\", \"HTTPS\/JSON\")\r\nRel_D(api_gateway, auth_service, \"Validates incoming tokens via\", \"gRPC\")\r\nRel_D(api_gateway, txn_service, \"Forwards checkout actions to\", \"gRPC\")\r\nRel_R(txn_service, ledger_db, \"Persists ledger entries via\", \"SQL\/TLS\")\r\n@enduml<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/#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\" \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 id=\"ZtGazyC\"><img loading=\"lazy\" decoding=\"async\" width=\"759\" height=\"728\" class=\"alignnone size-full wp-image-612 \" src=\"https:\/\/www.vpascode.com\/ja\/wp-content\/uploads\/sites\/8\/2026\/05\/img_6a19024586a43.png\" alt=\"\" srcset=\"https:\/\/www.vpascode.com\/ja\/wp-content\/uploads\/sites\/8\/2026\/05\/img_6a19024586a43.png 759w, https:\/\/www.vpascode.com\/ja\/wp-content\/uploads\/sites\/8\/2026\/05\/img_6a19024586a43-300x288.png 300w\" sizes=\"(max-width: 759px) 100vw, 759px\" \/><\/p>\n<p><strong>Syntax Breakdown:<\/strong> By using the <code>System_Boundary<\/code> macro wrapper, internal components are cleanly grouped together inside a clear perimeter box. The specialized <code>ContainerDb<\/code> macro renders the data store with an explicit database cylinder icon, making the division between compute runtimes and persistent storage layers clear at a glance.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>What is the C4 Model Diagram? The C4 Mod&#8230;<\/p>\n","protected":false},"author":4,"featured_media":0,"parent":47,"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-88","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\/ja\/docs\/vpascode-docs\/plantuml-playbook\/plantuml-c4-model-syntax-guide\/\" \/>\n<meta property=\"og:locale\" content=\"ja_JP\" \/>\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\/ja\/docs\/vpascode-docs\/plantuml-playbook\/plantuml-c4-model-syntax-guide\/\" \/>\n<meta property=\"og:site_name\" content=\"VPasCode\" \/>\n<meta property=\"article:modified_time\" content=\"2026-07-29T08:31:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.vpascode.com\/ja\/wp-content\/uploads\/sites\/8\/2026\/05\/img_6a1901f8a8e4e.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u63a8\u5b9a\u8aad\u307f\u53d6\u308a\u6642\u9593\" \/>\n\t<meta name=\"twitter:data1\" content=\"4\u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/ja\\\/docs\\\/vpascode-docs\\\/plantuml-playbook\\\/plantuml-c4-model-syntax-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/ja\\\/docs\\\/vpascode-docs\\\/plantuml-playbook\\\/plantuml-c4-model-syntax-guide\\\/\",\"name\":\"PlantUML C4 Model Syntax | VPasCode Text to Diagram Guide\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/ja\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/ja\\\/docs\\\/vpascode-docs\\\/plantuml-playbook\\\/plantuml-c4-model-syntax-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/ja\\\/docs\\\/vpascode-docs\\\/plantuml-playbook\\\/plantuml-c4-model-syntax-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.vpascode.com\\\/ja\\\/wp-content\\\/uploads\\\/sites\\\/8\\\/2026\\\/05\\\/img_6a1901f8a8e4e.png\",\"datePublished\":\"2026-05-26T07:53:11+00:00\",\"dateModified\":\"2026-07-29T08:31:01+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\\\/ja\\\/docs\\\/vpascode-docs\\\/plantuml-playbook\\\/plantuml-c4-model-syntax-guide\\\/#breadcrumb\"},\"inLanguage\":\"ja\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/ja\\\/docs\\\/vpascode-docs\\\/plantuml-playbook\\\/plantuml-c4-model-syntax-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"ja\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/ja\\\/docs\\\/vpascode-docs\\\/plantuml-playbook\\\/plantuml-c4-model-syntax-guide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/ja\\\/wp-content\\\/uploads\\\/sites\\\/8\\\/2026\\\/05\\\/img_6a1901f8a8e4e.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/ja\\\/wp-content\\\/uploads\\\/sites\\\/8\\\/2026\\\/05\\\/img_6a1901f8a8e4e.png\",\"width\":461,\"height\":316},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/ja\\\/docs\\\/vpascode-docs\\\/plantuml-playbook\\\/plantuml-c4-model-syntax-guide\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/ja\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Lean Docs\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/ja\\\/docs\\\/%ld_collection%\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"PlantUML Playbook\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/ja\\\/docs\\\/vpascode-docs\\\/plantuml-playbook\\\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"PlantUML C4 Model Syntax Guide\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/ja\\\/#website\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/ja\\\/\",\"name\":\"VPasCode\",\"description\":\"by Visual Paradigm\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/ja\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.vpascode.com\\\/ja\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ja\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/ja\\\/#organization\",\"name\":\"VPasCode\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/ja\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ja\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/ja\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/ja\\\/wp-content\\\/uploads\\\/sites\\\/8\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/ja\\\/wp-content\\\/uploads\\\/sites\\\/8\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"width\":128,\"height\":138,\"caption\":\"VPasCode\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/ja\\\/#\\\/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\/ja\/docs\/vpascode-docs\/plantuml-playbook\/plantuml-c4-model-syntax-guide\/","og_locale":"ja_JP","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\/ja\/docs\/vpascode-docs\/plantuml-playbook\/plantuml-c4-model-syntax-guide\/","og_site_name":"VPasCode","article_modified_time":"2026-07-29T08:31:01+00:00","og_image":[{"url":"https:\/\/www.vpascode.com\/ja\/wp-content\/uploads\/sites\/8\/2026\/05\/img_6a1901f8a8e4e.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"\u63a8\u5b9a\u8aad\u307f\u53d6\u308a\u6642\u9593":"4\u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vpascode.com\/ja\/docs\/vpascode-docs\/plantuml-playbook\/plantuml-c4-model-syntax-guide\/","url":"https:\/\/www.vpascode.com\/ja\/docs\/vpascode-docs\/plantuml-playbook\/plantuml-c4-model-syntax-guide\/","name":"PlantUML C4 Model Syntax | VPasCode Text to Diagram Guide","isPartOf":{"@id":"https:\/\/www.vpascode.com\/ja\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vpascode.com\/ja\/docs\/vpascode-docs\/plantuml-playbook\/plantuml-c4-model-syntax-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/ja\/docs\/vpascode-docs\/plantuml-playbook\/plantuml-c4-model-syntax-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vpascode.com\/ja\/wp-content\/uploads\/sites\/8\/2026\/05\/img_6a1901f8a8e4e.png","datePublished":"2026-05-26T07:53:11+00:00","dateModified":"2026-07-29T08:31:01+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\/ja\/docs\/vpascode-docs\/plantuml-playbook\/plantuml-c4-model-syntax-guide\/#breadcrumb"},"inLanguage":"ja","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/ja\/docs\/vpascode-docs\/plantuml-playbook\/plantuml-c4-model-syntax-guide\/"]}]},{"@type":"ImageObject","inLanguage":"ja","@id":"https:\/\/www.vpascode.com\/ja\/docs\/vpascode-docs\/plantuml-playbook\/plantuml-c4-model-syntax-guide\/#primaryimage","url":"https:\/\/www.vpascode.com\/ja\/wp-content\/uploads\/sites\/8\/2026\/05\/img_6a1901f8a8e4e.png","contentUrl":"https:\/\/www.vpascode.com\/ja\/wp-content\/uploads\/sites\/8\/2026\/05\/img_6a1901f8a8e4e.png","width":461,"height":316},{"@type":"BreadcrumbList","@id":"https:\/\/www.vpascode.com\/ja\/docs\/vpascode-docs\/plantuml-playbook\/plantuml-c4-model-syntax-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vpascode.com\/ja\/"},{"@type":"ListItem","position":2,"name":"Lean Docs","item":"https:\/\/www.vpascode.com\/ja\/docs\/%ld_collection%\/"},{"@type":"ListItem","position":3,"name":"PlantUML Playbook","item":"https:\/\/www.vpascode.com\/ja\/docs\/vpascode-docs\/plantuml-playbook\/"},{"@type":"ListItem","position":4,"name":"PlantUML C4 Model Syntax Guide"}]},{"@type":"WebSite","@id":"https:\/\/www.vpascode.com\/ja\/#website","url":"https:\/\/www.vpascode.com\/ja\/","name":"VPasCode","description":"by Visual Paradigm","publisher":{"@id":"https:\/\/www.vpascode.com\/ja\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vpascode.com\/ja\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ja"},{"@type":"Organization","@id":"https:\/\/www.vpascode.com\/ja\/#organization","name":"VPasCode","url":"https:\/\/www.vpascode.com\/ja\/","logo":{"@type":"ImageObject","inLanguage":"ja","@id":"https:\/\/www.vpascode.com\/ja\/#\/schema\/logo\/image\/","url":"https:\/\/www.vpascode.com\/ja\/wp-content\/uploads\/sites\/8\/2026\/06\/cropped-vp-online-logo-v1.png","contentUrl":"https:\/\/www.vpascode.com\/ja\/wp-content\/uploads\/sites\/8\/2026\/06\/cropped-vp-online-logo-v1.png","width":128,"height":138,"caption":"VPasCode"},"image":{"@id":"https:\/\/www.vpascode.com\/ja\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/www.vpascode.com\/ja\/wp-json\/wp\/v2\/ld_docs\/88","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vpascode.com\/ja\/wp-json\/wp\/v2\/ld_docs"}],"about":[{"href":"https:\/\/www.vpascode.com\/ja\/wp-json\/wp\/v2\/types\/ld_docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.vpascode.com\/ja\/wp-json\/wp\/v2\/users\/4"}],"up":[{"embeddable":true,"href":"https:\/\/www.vpascode.com\/ja\/wp-json\/wp\/v2\/ld_docs\/47"}],"wp:attachment":[{"href":"https:\/\/www.vpascode.com\/ja\/wp-json\/wp\/v2\/media?parent=88"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/ja\/wp-json\/wp\/v2\/ld_collection?post=88"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}