{"id":2283,"date":"2026-05-26T07:53:11","date_gmt":"2026-05-26T07:53:11","guid":{"rendered":"https:\/\/www.vpascode.com\/tw\/docs\/uncategorized\/plantuml-c4-model-syntax-guide\/"},"modified":"2026-05-26T07:53:11","modified_gmt":"2026-05-26T07:53:11","slug":"plantuml-c4-model-syntax-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/tw\/docs\/vpascode-docs\/plantuml-c4-model-syntax-guide\/","title":{"rendered":"PlantUML C4 \u6a21\u578b\u8a9e\u6cd5\u6307\u5357"},"content":{"rendered":"<h2>\u4ec0\u9ebc\u662f C4 \u6a21\u578b\u5716\uff1f<\/h2>\n<p>\u9019\u500b<strong>C4 \u6a21\u578b\u5716<\/strong>\u662f\u4e00\u500b\u5206\u5c64\u7684\u56db\u5c64\u67b6\u69cb\u6846\u67b6\uff0c\u65e8\u5728\u4ee5\u4e0d\u540c\u7d30\u7dfb\u7a0b\u5ea6\u8a18\u9304\u8edf\u9ad4\u67b6\u69cb\u3002\u7531\u897f\u8499\u00b7\u5e03\u6717\u6240\u5275\u5efa\uff0cC4 \u900f\u904e\u5c07\u7cfb\u7d71\u5730\u5716\u7d50\u69cb\u5316\u70ba\u56db\u500b\u660e\u78ba\u7684\u62bd\u8c61\u93e1\u982d\uff0c\u907f\u514d\u6a21\u7cca\u7684\u65b9\u6846\u8207\u7dda\u689d\uff1a<strong>\u4e0a\u4e0b\u6587<\/strong>\uff08\u7cfb\u7d71\u5c64\u7d1a\u7bc4\u570d\uff09\uff0c<strong>\u5bb9\u5668<\/strong>\uff08\u61c9\u7528\u7a0b\u5f0f\u8207\u8cc7\u6599\u5132\u5b58\uff09\uff0c<strong>\u7d44\u4ef6<\/strong>\uff08\u5167\u90e8\u6a21\u7d44\uff09\uff0c\u4ee5\u53ca<strong>\u7a0b\u5f0f\u78bc<\/strong>\uff08\u985e\u5225\u5c64\u7d1a\u7684\u5be6\u4f5c\uff09\u3002<\/p>\n<p>\u70ba\u4e86\u5728\u6587\u5b57\u4e2d\u6709\u6548\u5be6\u73fe\u6b64\u6a21\u578b\uff0c\u5de5\u7a0b\u5e2b\u4f7f\u7528\u5b98\u65b9\u7684<code>C4-PlantUML<\/code>\u6a19\u6e96\u51fd\u5f0f\u5eab\u64f4\u5145\u3002\u6b64\u51fd\u5f0f\u5eab\u4ee5\u5c08\u7528\u5de8\u96c6\u53d6\u4ee3\u539f\u59cb\u7684 UML \u5f62\u72c0\uff0c\u81ea\u52d5\u6ce8\u5165\u4f7f\u7528\u8005\u3001\u7cfb\u7d71\u8207\u8cc7\u6599\u5eab\u7684\u7368\u7279\u984f\u8272\u3001\u5f62\u72c0\u8207\u5143\u8cc7\u6599\u6b04\u4f4d\u3002\u4f7f\u7528<strong>VPasCode<\/strong>\uff0c\u60a8\u53ef\u4ee5\u5728\u7a0b\u5f0f\u78bc\u4e2d\u4e7e\u6de8\u5730\u5b9a\u7fa9\u9019\u4e9b\u5de2\u72c0\u74b0\u5883\u3002\u4f48\u5c40\u5f15\u64ce\u6703\u52d5\u614b\u8def\u7531\u9023\u63a5\u5411\u91cf\u4e26\u8abf\u6574\u6587\u5b57\u6b04\u4f4d\u5927\u5c0f\uff0c\u800c\u4e0d\u6703\u7834\u58de\u60a8\u7684\u4f48\u5c40\u5e7e\u4f55\u3002<\/p>\n<h2>\u6838\u5fc3\u8a9e\u6cd5\u6307\u5357\uff1a\u5143\u7d20\u8207\u69cb\u9020<\/h2>\n<p>\u4f7f\u7528 PlantUML \u5efa\u7acb\u6709\u6548\u7684 C4 \u6a21\u578b\uff0c\u53d6\u6c7a\u65bc\u532f\u5165\u6b63\u78ba\u7684\u51fd\u5f0f\u5eab\u6a94\u6848\u3001\u9078\u64c7\u7d50\u69cb\u5de8\u96c6\u3001\u5efa\u7acb\u908a\u754c\uff0c\u4ee5\u53ca\u4f7f\u7528\u5c08\u7528\u7684\u95dc\u4fc2\u9023\u7d50\u3002<\/p>\n<h3>1. \u532f\u5165 C4 \u6a19\u6e96\u51fd\u5f0f\u5eab\u6a94\u6848<\/h3>\n<p>\u9019\u500b<code>C4-PlantUML<\/code>\u64f4\u5145\u529f\u80fd\u88ab\u62c6\u5206\u6210\u55ae\u7368\u7684\u6a94\u6848\uff0c\u76f4\u63a5\u5c0d\u61c9\u5230\u62bd\u8c61\u6a21\u578b\u7684\u5404\u500b\u4e0d\u540c\u5c64\u7d1a\u3002\u70ba\u907f\u514d\u6548\u80fd\u4e0b\u964d\u6216\u7de8\u8b6f\u932f\u8aa4\uff0c\u60a8\u61c9\u50c5\u532f\u5165\u5716\u8868\u6240\u91dd\u5c0d\u7684\u7279\u5b9a\u6a94\u6848\u5c64\u7d1a\uff1a<\/p>\n<pre class=\"lang-plantuml\"><code>@startuml\r\n' \u532f\u5165\u6240\u9700\u7684\u7279\u5b9a C4 \u5c64\u7d1a\u6a94\u6848\r\n!include &lt;C4\/C4_Context&gt;\r\n' \u4f7f\u7528 C4_Container \u6216 C4_Component \u4ee5\u5efa\u7acb\u66f4\u6df1\u5165\u7684\u67b6\u69cb\u5730\u5716<\/code><\/pre>\n<h3>2. \u8072\u660e\u6838\u5fc3\u53c3\u8207\u8005\u8207\u7cfb\u7d71\uff08\u4e0a\u4e0b\u6587\u5c64\u7d1a\uff09<\/h3>\n<p>\u5728\u9ad8\u968e\u7684\u7cfb\u7d71\u4e0a\u4e0b\u6587\u5c64\u7d1a\u4e2d\uff0c\u60a8\u6703\u6a21\u64ec\u5167\u90e8\u7d44\u4ef6\u3001\u5916\u90e8\u76f8\u4f9d\u6027\u4ee5\u53ca\u4eba\u985e\u7d42\u7aef\u4f7f\u7528\u8005\u3002\u6a19\u6e96\u51fd\u5f0f\u5eab\u63d0\u4f9b\u7279\u5b9a\u5de8\u96c6\uff0c\u63a5\u53d7 ID\u3001\u8996\u89ba\u6a19\u7c64\u8207\u53ef\u9078\u7684\u63cf\u8ff0\u6a19\u7c64\uff1a<\/p>\n<ul>\n<li><code>Person(id, \"\u6a19\u7c64\", \"\u63cf\u8ff0\")<\/code> \u2014 \u4ee3\u8868\u4eba\u985e\u4f7f\u7528\u8005\u8f2a\u5ed3\u6216\u7cfb\u7d71\u53c3\u8207\u8005\u3002<\/li>\n<li><code>System(id, \"\u6a19\u7c64\", \"\u63cf\u8ff0\")<\/code> \u2014 \u4ee3\u8868\u4e3b\u8981\u7684\u5167\u90e8\u8edf\u9ad4\u61c9\u7528\u7a0b\u5f0f\u6216\u670d\u52d9\u751f\u614b\u7cfb\u3002<\/li>\n<li><code>System_Ext(id, \"\u6a19\u7c64\", \"\u63cf\u8ff0\")<\/code> \u2014 \u4ee3\u8868\u5916\u90e8\u7cfb\u7d71\u6216\u7b2c\u4e09\u65b9 API \u4f9d\u8cf4\uff08\u4ee5\u660e\u78ba\u7684\u7070\u8272\u8abf\u5448\u73fe\uff09\u3002<\/li>\n<\/ul>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Plantuml<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:HS_1IWD130RW-yA-GzpJ5XGlFOgemu8UXC9wNz9fMeCp6PbaRVVjdR4j7fFy-KYUr33R70EuzJG4YYIcRNF3uiEy8tXmw_ioSKcCJlRODXlAcgJtirgAb6-XUq7vOZc0kxIwqdk6Qm2ER9-0yFstXm6s9GxeVPh5kbNRZ8iQnNvxLYPTjEoxb0cky3bHsLUKNI25FGkAvw9PHb7qnadqNvk6a_KHELouuQuMC5B-OKzLUYl_v7hE-Fwn0Kd6U_PO6JYWqH6NRlKB\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>\u5728 VPasCode \u4e2d\u7de8\u8f2f Plantuml<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">Plantuml<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:SoWkIImgAStDKN0sYNVDISrDpIifvkLIpCnBpYbDILMmSJRH1yeuv-ULf5QKsF5o1QGM5UVdQIIN5fVavwOMwIWelUngUB6mv-cwHSywjYa1-SycDpwRq_cqeVl9hbrGkHsRWNBFPxL05MdoSWLN5fUavcea9UPbP-QbnnTN5eDqBjZnT7ypHC_ppRkVRzq8Ck_5pAdF9xIzR9_uObxlarrBdisOZ30WthMYH2CtCJC7QiBBsRkVhftmiddhaztRditfVTez4sJ2qzRbBvjNA0JxXWGel6oOzNp-qkVRDhsSFaT94m00\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-plantuml\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">@startuml C4_Elements\r\n!include &lt;C4\/C4_Context&gt;\r\nPerson(customer, \"\u9280\u884c\u5ba2\u6236\", \"\u64c1\u6709\u500b\u4eba\u9280\u884c\u5e33\u6236\u7684\u5ba2\u6236\")\r\nSystem(banking_sys, \"\u6838\u5fc3\u9280\u884c\u7cfb\u7d71\", \"\u8655\u7406\u91d1\u878d\u4ea4\u6613\")\r\nSystem_Ext(mail_sys, \"\u96fb\u5b50\u90f5\u4ef6\u670d\u52d9\", \"\u5167\u90e8 SMTP \u901a\u77e5\u7db2\u95dc\")<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:SoWkIImgAStDKN0sYNVDISrDpIifvkLIpCnBpYbDILMmSJRH1yeuv-ULf5QKsF5o1QGM5UVdQIIN5fVavwOMwIWelUngUB6mv-cwHSywjYa1-SycDpwRq_cqeVl9hbrGkHsRWNBFPxL05MdoSWLN5fUavcea9UPbP-QbnnTN5eDqBjZnT7ypHC_ppRkVRzq8Ck_5pAdF9xIzR9_uObxlarrBdisOZ30WthMYH2CtCJC7QiBBsRkVhftmiddhaztRditfVTez4sJ2qzRbBvjNA0JxXWGel6oOzNp-qkVRDhsSFaT94m00\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:HS_1IWD130RW-yA-GzpJ5XGlFOgemu8UXC9wNz9fMeCp6PbaRVVjdR4j7fFy-KYUr33R70EuzJG4YYIcRNF3uiEy8tXmw_ioSKcCJlRODXlAcgJtirgAb6-XUq7vOZc0kxIwqdk6Qm2ER9-0yFstXm6s9GxeVPh5kbNRZ8iQnNvxLYPTjEoxb0cky3bHsLUKNI25FGkAvw9PHb7qnadqNvk6a_KHELouuQuMC5B-OKzLUYl_v7hE-Fwn0Kd6U_PO6JYWqH6NRlKB\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>\u5728 VPasCode \u4e2d\u7de8\u8f2f Plantuml<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"USSGhTV\"><img fetchpriority=\"high\" alt=\"\" class=\"alignnone size-full wp-image-608\" decoding=\"async\" fetchpriority=\"high\" height=\"316\" sizes=\"(max-width: 461px) 100vw, 461px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a1901f8a8e4e.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a1901f8a8e4e.png 461w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a1901f8a8e4e-300x206.png 300w\" width=\"461\"\/><\/p>\n<h3>3. \u7206\u70b8\u908a\u754c\uff08\u5bb9\u5668\u8207\u7d44\u4ef6\u5c64\u7d1a\uff09<\/h3>\n<p>\u6df1\u5165\u63a2\u8a0e\u5bb9\u5668\u5c64\u6642\uff0c\u60a8\u6703\u5efa\u6a21\u7db2\u9801\u61c9\u7528\u7a0b\u5f0f\u3001\u5fae\u670d\u52d9\u548c\u8cc7\u6599\u5eab\u3002\u60a8\u53ef\u4ee5\u4f7f\u7528\u300c<code>System_Boundary()<\/code>\u300d\u5de8\u96c6\u5305\u88dd\u5668\uff0c\u5c07\u9019\u4e9b\u5167\u90e8\u5143\u4ef6\u9694\u96e2\u65bc\u660e\u78ba\u7684\u908f\u8f2f\u908a\u754c\u6846\u5167\uff1a<\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Plantuml<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:NOrFQyCm3CNlWNm7DOUHmi8Oz3W6MzfR3zsyUr1iDHCujf6TbZ3stUTaVmxJHNfFqkzjs6ax6OA7TdVNxhhMkuJiI1xBeYpK71EDtREVd46PQtr_2zMXQVquacY2xpqSj6_YEbPR-2WBoFK7gg_KTnX2_bJi1alD2GU2fn0iQqpiNPLNhuGwmGsypO6K5WvfSK_YBsmemXH9u4oO9idgmWYPcZjTg-s_l7rV6qpOOwILQzSCjB3_SLUmZsaGKY_7HQdavJSaY3-p9K1dm98PilNECHymnINhymi0\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>\u5728 VPasCode \u4e2d\u7de8\u8f2f Plantuml<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">Plantuml<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:KypCIyufJKbLi74sqNSsYNVEpoj9pCnBBRBZvUBb2guiBadDZNVAByrBIIogr4Wsr55GUZbxzzEr4vvERNlQFVFvvjtFjsvyFcN-izPk85j9Kw6Qbqi12E3cQ9Id9iKd5XG0DJwTjkxbWiPdxPtFfwnulgBxwPv-9Q1eK6fYSed2YuvsXP3AWjJWvABCWXAG-Ck6_fUDVS-tRGBfMRNenR9fp_edFDat-ydU_K3zBnfQdtRDVz6yLqaJpKAN98sKn9B4fCJYL90fq-UyQ5mFjEh5vlPdqsO-tRKQP7P0Vd59Ub5gSA0FYFUqPTFJjJCGvZPqFzcr2w8UwAodEpO_dxtksThjJ_itlLWnusLF2yZAMW00\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-plantuml\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">!include &lt;C4\/C4_Container&gt;\r\n\r\nSystem_Boundary(c1, \"\u96fb\u5b50\u5546\u52d9\u7cfb\u7d71\u751f\u614b\u7cfb\") {\r\n    Container(web_app, \"\u55ae\u9801\u61c9\u7528\u7a0b\u5f0f\", \"React \u8207 TypeScript\", \"\u900f\u904e\u7db2\u9801\u6aa2\u8996\u63d0\u4f9b\u4f7f\u7528\u8005\u529f\u80fd\")\r\n    ContainerDb(database, \"\u95dc\u806f\u5f0f\u8cc7\u6599\u5eab\", \"PostgreSQL\", \"\u5132\u5b58\u4f7f\u7528\u8005\u500b\u4eba\u8cc7\u6599\u8207\u5e33\u76ee\u6b77\u53f2\u8a18\u9304\")\r\n}<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:KypCIyufJKbLi74sqNSsYNVEpoj9pCnBBRBZvUBb2guiBadDZNVAByrBIIogr4Wsr55GUZbxzzEr4vvERNlQFVFvvjtFjsvyFcN-izPk85j9Kw6Qbqi12E3cQ9Id9iKd5XG0DJwTjkxbWiPdxPtFfwnulgBxwPv-9Q1eK6fYSed2YuvsXP3AWjJWvABCWXAG-Ck6_fUDVS-tRGBfMRNenR9fp_edFDat-ydU_K3zBnfQdtRDVz6yLqaJpKAN98sKn9B4fCJYL90fq-UyQ5mFjEh5vlPdqsO-tRKQP7P0Vd59Ub5gSA0FYFUqPTFJjJCGvZPqFzcr2w8UwAodEpO_dxtksThjJ_itlLWnusLF2yZAMW00\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:NOrFQyCm3CNlWNm7DOUHmi8Oz3W6MzfR3zsyUr1iDHCujf6TbZ3stUTaVmxJHNfFqkzjs6ax6OA7TdVNxhhMkuJiI1xBeYpK71EDtREVd46PQtr_2zMXQVquacY2xpqSj6_YEbPR-2WBoFK7gg_KTnX2_bJi1alD2GU2fn0iQqpiNPLNhuGwmGsypO6K5WvfSK_YBsmemXH9u4oO9idgmWYPcZjTg-s_l7rV6qpOOwILQzSCjB3_SLUmZsaGKY_7HQdavJSaY3-p9K1dm98PilNECHymnINhymi0\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>\u5728 VPasCode \u4e2d\u7de8\u8f2f Plantuml<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"GZPysCa\"><img alt=\"\" class=\"alignnone size-full wp-image-609\" decoding=\"async\" height=\"223\" sizes=\"(max-width: 473px) 100vw, 473px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a1902094851f.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a1902094851f.png 473w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a1902094851f-300x141.png 300w\" width=\"473\"\/><\/p>\n<h3>4. \u5efa\u7acb\u6280\u8853\u95dc\u4fc2<\/h3>\n<p>\u4e0d\u4f9d\u8cf4\u57fa\u672c\u7684\u865b\u7dda\uff0cC4 \u4f7f\u7528\u660e\u78ba\u7684\u901a\u8a0a\u5de8\u96c6\u683c\u5f0f\uff0c\u5982<code>Rel(\u4f86\u6e90ID, \u76ee\u6a19ID, \"\u6a19\u7c64\", \"\u6280\u8853\")<\/code>\u3002\u9019\u80fd\u8b93\u60a8\u7684\u67b6\u69cb\u5716\u9ad8\u5ea6\u6613\u8b80\uff0c\u56e0\u70ba\u5f37\u5236\u8981\u6c42\u6bcf\u500b\u9023\u63a5\u90fd\u660e\u78ba\u8aaa\u660e\u5176\u76ee\u7684\u8207\u5e95\u5c64\u50b3\u8f38\u5354\u5b9a\uff08\u4f8b\u5982 HTTPS\u3001gRPC \u6216 AMQP\uff09\uff1a<\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Plantuml<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:LPB1QkD038Rl1h-3ciFYG4DPwB4KMZVGXLrmr-uvo6FP5PtCc9bnNBFikrVZE6dZoo0XVVf_oLTib1uQWhlyzYQ_tUNM16H3xZvDqgGWvwt9rE23tPExXjKZcdSs7UHBQYMv1pWLmCZX3H3wkGyrr58Eg9GTJ5YjqwISVA1zLXyfEpzvwS-j8pY1ZnKH-uocqUIXPOD6iT22G-DH1RR6Vz5ssu-GxP7rWjjkOW0bkGChYgHV9f2BSie_LG761cvPOSH0Xu56d2Bjp7iKjGswALC_Prnkz-9DqQ8Djifk_57c6lwb2SXttbisKht3lfVEKlnesXJO4JpqlLvcHaL_IMp03wYcdahbk0ynMpXxu4Oi3rvssHA6mKbqO0IXoajZ57enxwdE6WnOewUPg-SPulLfoSvWwqFdg7pv7QCoM7SQqZlRiYQGNOEcffFK6yin7TEyulzf8inlVy2NlLSla5XAhHCr5thd-rLLKKP619pRBiHYu-V9e-CWZT_kAmPYvOaboc-gl5YjFm40\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>\u5728 VPasCode \u4e2d\u7de8\u8f2f Plantuml<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">Plantuml<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:LP5FQnf16CRl2_iTjfvMA8H2ZgM7sa8F3MooUvTn7S9ItPNTbLH2O4MDIKog9OdHA3KDRIej6gh416sQBxFpxrjq9igQpcbctkVzFS_C-yoopKm-3PMNYTMLn6eouTW-i6pelf8bMTAWwpcsQkOztyb2zxaIOmS1_Ng8XfTuRnBZPtnSnDrz5DJ2wNHHknlp6ZalBqHnMT8BdW-pQWhO7onxC-aLFD5vSOSUIlCUCfwHcz-2HzkdfB7Bgf_fbwDm-WstZfU0vDkFlfe5LcP1O9qP6ZHOwIQSJN3t2DNQWe0gFrYfh-XhXgQmu9pqlfF9Y9rr1ISYlNRoTXgu1TLy4O7GwIv7pAEGanwkrFW-5bUsPKdXA_ePTGkcaY2N4rxD8Rieuke-EUcJVWtzgOi46n2OlaBtgefHo47TTAsSB-vPK6V5Jo8Dx_bvIQ-QkDu8_tR2-mVUJuCAEkZHqhq8-f_XcvIQ1Zv80GyAobcN5g-v5HrNSREDfhy4MtCyVzE5-lhxnpyeZz2WjUG-ZcUkvx7uX4XdY0Utg3wY_HOxB0lB7LdQW9adiru-SnvSWDyPXgOBjP16WgVf8YcFic8aj5Zy7m00\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-plantuml\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">!include &lt;C4\/C4_Container&gt;\r\n\r\nPerson(customer, \"\u9280\u884c\u5ba2\u6236\", \"\u64c1\u6709\u500b\u4eba\u9280\u884c\u5e33\u6236\u7684\u5ba2\u6236\")\r\nSystem(banking_sys, \"\u6838\u5fc3\u9280\u884c\u7cfb\u7d71\", \"\u8655\u7406\u91d1\u878d\u4ea4\u6613\")\r\nSystem_Ext(mail_sys, \"\u96fb\u5b50\u90f5\u4ef6\u670d\u52d9\", \"\u5167\u90e8 SMTP \u901a\u77e5\u7db2\u95dc\")\r\n\r\nSystem_Boundary(c1, \"\u96fb\u5b50\u5546\u52d9\u7cfb\u7d71\u751f\u614b\u7cfb\") {\r\n    Container(web_app, \"\u55ae\u9801\u61c9\u7528\u7a0b\u5f0f\", \"React \u8207 TypeScript\", \"\u900f\u904e\u7db2\u9801\u6aa2\u8996\u63d0\u4f9b\u4f7f\u7528\u8005\u529f\u80fd\")\r\n    ContainerDb(database, \"\u95dc\u806f\u5f0f\u8cc7\u6599\u5eab\", \"PostgreSQL\", \"\u5132\u5b58\u4f7f\u7528\u8005\u500b\u4eba\u8cc7\u6599\u8207\u5e33\u76ee\u6b77\u53f2\u8a18\u9304\")\r\n}\r\nRel(customer, web_app, \"\u900f\u904e\", \"HTTPS\")\r\nRel(web_app, database, \"\u900f\u904e\", \"SQL\/TCP\")<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:LP5FQnf16CRl2_iTjfvMA8H2ZgM7sa8F3MooUvTn7S9ItPNTbLH2O4MDIKog9OdHA3KDRIej6gh416sQBxFpxrjq9igQpcbctkVzFS_C-yoopKm-3PMNYTMLn6eouTW-i6pelf8bMTAWwpcsQkOztyb2zxaIOmS1_Ng8XfTuRnBZPtnSnDrz5DJ2wNHHknlp6ZalBqHnMT8BdW-pQWhO7onxC-aLFD5vSOSUIlCUCfwHcz-2HzkdfB7Bgf_fbwDm-WstZfU0vDkFlfe5LcP1O9qP6ZHOwIQSJN3t2DNQWe0gFrYfh-XhXgQmu9pqlfF9Y9rr1ISYlNRoTXgu1TLy4O7GwIv7pAEGanwkrFW-5bUsPKdXA_ePTGkcaY2N4rxD8Rieuke-EUcJVWtzgOi46n2OlaBtgefHo47TTAsSB-vPK6V5Jo8Dx_bvIQ-QkDu8_tR2-mVUJuCAEkZHqhq8-f_XcvIQ1Zv80GyAobcN5g-v5HrNSREDfhy4MtCyVzE5-lhxnpyeZz2WjUG-ZcUkvx7uX4XdY0Utg3wY_HOxB0lB7LdQW9adiru-SnvSWDyPXgOBjP16WgVf8YcFic8aj5Zy7m00\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:LPB1QkD038Rl1h-3ciFYG4DPwB4KMZVGXLrmr-uvo6FP5PtCc9bnNBFikrVZE6dZoo0XVVf_oLTib1uQWhlyzYQ_tUNM16H3xZvDqgGWvwt9rE23tPExXjKZcdSs7UHBQYMv1pWLmCZX3H3wkGyrr58Eg9GTJ5YjqwISVA1zLXyfEpzvwS-j8pY1ZnKH-uocqUIXPOD6iT22G-DH1RR6Vz5ssu-GxP7rWjjkOW0bkGChYgHV9f2BSie_LG761cvPOSH0Xu56d2Bjp7iKjGswALC_Prnkz-9DqQ8Djifk_57c6lwb2SXttbisKht3lfVEKlnesXJO4JpqlLvcHaL_IMp03wYcdahbk0ynMpXxu4Oi3rvssHA6mKbqO0IXoajZ57enxwdE6WnOewUPg-SPulLfoSvWwqFdg7pv7QCoM7SQqZlRiYQGNOEcffFK6yin7TEyulzf8inlVy2NlLSla5XAhHCr5thd-rLLKKP619pRBiHYu-V9e-CWZT_kAmPYvOaboc-gl5YjFm40\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>\u5728 VPasCode \u4e2d\u7de8\u8f2f Plantuml<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"OfOQvLl\"><img alt=\"\" class=\"alignnone size-full wp-image-610\" decoding=\"async\" height=\"692\" sizes=\"(max-width: 744px) 100vw, 744px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a190224848fe.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a190224848fe.png 744w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a190224848fe-300x279.png 300w\" width=\"744\"\/><\/p>\n<h2>\u53ef\u8b80\u6027\u826f\u597d\u7684 C4 \u67b6\u69cb\u6700\u4f73\u5be6\u52d9<\/h2>\n<ul>\n<li><strong>\u7d55\u4e0d\u6df7\u5408\u62bd\u8c61\u5c64\u7d1a\uff1a<\/strong> \u8b93\u60a8\u7684\u5716\u8868\u5c08\u6ce8\u65bc\u55ae\u4e00\u5c64\u7d1a\u3002\u4e0d\u8981\u5c07\u7d30\u7c92\u5ea6\u7684\u5167\u90e8\u8edf\u9ad4\u5143\u4ef6\u6df7\u5165\u9ad8\u968e\u7684\u7cfb\u7d71\u4e0a\u4e0b\u6587\u5716\u4e2d\u3002\u5982\u679c\u7cfb\u7d71\u904e\u65bc\u8907\u96dc\uff0c\u61c9\u5c07\u5176\u62c6\u5206\u70ba\u7368\u7acb\u7684\u3001\u5c08\u7528\u7684\u5bb9\u5668\u5c64\u7d1a\u5716\u8868\u3002<\/li>\n<li><strong>\u660e\u78ba\u5b9a\u7fa9\u6280\u8853\uff1a<\/strong> \u59cb\u7d42\u5584\u7528\u60a8\u300c<code>Rel()<\/code>\u300d\u5de8\u96c6\u7684\u7b2c\u56db\u500b\u53c3\u6578\uff0c\u4ee5\u660e\u78ba\u6307\u51fa\u6240\u4f7f\u7528\u7684\u7cbe\u78ba\u6280\u8853\u6216\u5354\u5b9a\uff08\u4f8b\u5982\uff0c<code>\"JSON\/HTTPS\"<\/code> \u6216 <code>\"JDBC\"<\/code>). \u9019\u80fd\u8b93\u4f60\u7684\u5718\u968a\u4e00\u76ee\u4e86\u7136\u5730\u638c\u63e1\u95dc\u9375\u7684\u5be6\u4f5c\u80cc\u666f\u3002<\/li>\n<li><strong>\u5229\u7528\u65b9\u5411\u6027\u4f48\u5c40\u8986\u5beb\uff1a<\/strong> \u5982\u679c\u4f60\u7684\u5143\u4ef6\u958b\u59cb\u51fa\u73fe\u5806\u758a\u4e0d\u81ea\u7136\u7684\u60c5\u6cc1\uff0c\u8acb\u4f7f\u7528\u65b9\u5411\u6027\u95dc\u4fc2\u5de8\u96c6\uff08\u4f8b\u5982 <code>Rel_D()<\/code> \u8868\u793a\u5411\u4e0b\uff0c <code>Rel_R()<\/code> \u8868\u793a\u5411\u53f3\uff0c\u6216 <code>Rel_L()<\/code> \u8868\u793a\u5411\u5de6\uff09\u624b\u52d5\u6574\u7406\u4f60\u7684\u67b6\u69cb\u6d41\u7a0b\u3002<\/li>\n<\/ul>\n<h2>\u771f\u5be6\u4e16\u754c\u7684 PlantUML C4 \u7bc4\u4f8b<\/h2>\n<h3>\u7bc4\u4f8b 1\uff1a\u9ad8\u968e\u7cfb\u7d71\u8108\u7d61\u4f48\u5c40\uff08\u7b2c 1 \u5c64\uff09<\/h3>\n<p>\u6b64\u529f\u80fd\u85cd\u5716\u6a21\u64ec\u6a19\u6e96\u7684\u7b2c 1 \u5c64\u7cfb\u7d71\u8108\u7d61\u5716\uff0c\u8a73\u7d30\u8aaa\u660e\u5ba2\u6236\u5982\u4f55\u8207\u7db2\u8def\u9280\u884c\u61c9\u7528\u7a0b\u5f0f\u53ca\u5176\u5916\u90e8\u4f9d\u8cf4\u9805\u4e92\u52d5\u3002<\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Plantuml<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:TL9BJy904ButwNyOEM7YuyBH6BGIuy6409wRQJk52TjTiZC5_FTEoqCCyTRT-Pwp7OjYrBPnQNB3ldHjHV2KZHwpKPu5hxJNvpH94sLr1FDlKMhWE80tncN41keGuSEkeYU5L_HhziiZjkDEAKhmmx8L3Gt5EnWSRj2TmTbnDh3X2voG46hG5K5XADYnhc1p8c9PXjQhF0nkq-HWDImEOhdqHrFw9rDlubpOoTb9G0DicNPGiqTVibcmhmEWhw31DO56z58Ryi8nd-nrs22xNyl9VNU6ULl8sMjX5RYFOghKVMmYYssJVFKUkO8on4s8g0GzMIXkhRozXId4tYzDPkGkDdXLzKj887Z7dg12MHK1OsMDi6CRDvzThUTly2wC03gAAdrhYy0rbwWSl2MiJByLutUDvf-BQISyDfBzEZy0\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>\u5728 VPasCode \u4e2d\u7de8\u8f2f Plantuml<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">Plantuml<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:PL7DIm915BylxF-mUJ88kdYC42Gw1QBT5zCXbdPNs1t1RcjQ-L4P686w4WhMNZHI_C0F_6EQsPdvBvfj1HLlxxtvVRqtOHCc39ZHL54uKFIacaa1wIGIEew4v4XQXo0BJqL15A02LI2HyO1ElbdPekqdCfoJqGzf5Fo25efarCRskuUE0iDCwy5aneHf3HX7KW1R5JIR-KpSxxZ5SO1FtLhEjKl-6vuE-PJhROD-hRl0eIZ4Rqq8jE1LGhzHz6lP_6yvVp-FfqhxDP_jVdI9NQ63DgxKwV2HEcKq_MJMWAFfiiGDT-JbiomCQWb5tUYpvXptNbb-XEPZNcmiyFqNopjeaNExFIaEzDIveQGal_VXQ35pxMTSTt2rmveFQoTHY05rwovx6p6hod8lPD90qp8kyBqSjxL2onLvSpm-PyknlJliXbwZUHM_k8nwh30Fo7_u3m00\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-plantuml\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">@startuml\r\n!include &lt;C4\/C4_Context&gt;\r\n\r\ntitle \u7db2\u8def\u9280\u884c\u7cfb\u7d71\u7684\u7cfb\u7d71\u8108\u7d61\u5716\r\n\r\nPerson(customer, \"\u500b\u4eba\u9280\u884c\u5ba2\u6236\", \"\u64c1\u6709\u500b\u4eba\u5e33\u6236\u7684\u9280\u884c\u5ba2\u6236\u3002\")\r\nSystem(banking_system, \"\u7db2\u8def\u9280\u884c\u7cfb\u7d71\", \"\u8b93\u5ba2\u6236\u67e5\u770b\u8ca1\u52d9\u8cc7\u8a0a\u4e26\u9032\u884c\u8f49\u5e33\u3002\")\r\nSystem_Ext(mail_system, \"\u96fb\u5b50\u90f5\u4ef6\u5b50\u7cfb\u7d71\", \"\u5167\u90e8\u4f01\u696d SendGrid \u4f01\u696d\u90f5\u4ef6\u4f3a\u670d\u5668\u53e2\u96c6\u3002\")\r\n\r\nRel(customer, banking_system, \"\u900f\u904e\u7dda\u4e0a\u5100\u8868\u677f\u4f7f\u7528\")\r\nRel_R(banking_system, mail_system, \"\u4f7f\u7528\", \"SMTP\")\r\n@enduml<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:PL7DIm915BylxF-mUJ88kdYC42Gw1QBT5zCXbdPNs1t1RcjQ-L4P686w4WhMNZHI_C0F_6EQsPdvBvfj1HLlxxtvVRqtOHCc39ZHL54uKFIacaa1wIGIEew4v4XQXo0BJqL15A02LI2HyO1ElbdPekqdCfoJqGzf5Fo25efarCRskuUE0iDCwy5aneHf3HX7KW1R5JIR-KpSxxZ5SO1FtLhEjKl-6vuE-PJhROD-hRl0eIZ4Rqq8jE1LGhzHz6lP_6yvVp-FfqhxDP_jVdI9NQ63DgxKwV2HEcKq_MJMWAFfiiGDT-JbiomCQWb5tUYpvXptNbb-XEPZNcmiyFqNopjeaNExFIaEzDIveQGal_VXQ35pxMTSTt2rmveFQoTHY05rwovx6p6hod8lPD90qp8kyBqSjxL2onLvSpm-PyknlJliXbwZUHM_k8nwh30Fo7_u3m00\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:TL9BJy904ButwNyOEM7YuyBH6BGIuy6409wRQJk52TjTiZC5_FTEoqCCyTRT-Pwp7OjYrBPnQNB3ldHjHV2KZHwpKPu5hxJNvpH94sLr1FDlKMhWE80tncN41keGuSEkeYU5L_HhziiZjkDEAKhmmx8L3Gt5EnWSRj2TmTbnDh3X2voG46hG5K5XADYnhc1p8c9PXjQhF0nkq-HWDImEOhdqHrFw9rDlubpOoTb9G0DicNPGiqTVibcmhmEWhw31DO56z58Ryi8nd-nrs22xNyl9VNU6ULl8sMjX5RYFOghKVMmYYssJVFKUkO8on4s8g0GzMIXkhRozXId4tYzDPkGkDdXLzKj887Z7dg12MHK1OsMDi6CRDvzThUTly2wC03gAAdrhYy0rbwWSl2MiJByLutUDvf-BQISyDfBzEZy0\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>\u5728 VPasCode \u4e2d\u7de8\u8f2f Plantuml<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"NTJPRPC\"><img loading=\"lazy\" alt=\"\" class=\"alignnone size-full wp-image-611\" decoding=\"async\" height=\"439\" loading=\"lazy\" sizes=\"auto, (max-width: 561px) 100vw, 561px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a190234b2052.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a190234b2052.png 561w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a190234b2052-300x235.png 300w\" width=\"561\"\/><\/p>\n<p><strong>\u8a9e\u6cd5\u89e3\u6790\uff1a<\/strong> \u6b64\u5716\u50c5\u8457\u91cd\u65bc\u9ad8\u968e\u7bc4\u570d\u3002<code>System_Ext<\/code> \u5de8\u96c6\u6703\u81ea\u52d5\u70ba\u96fb\u5b50\u90f5\u4ef6\u670d\u52d9\u5957\u7528\u7070\u8272\u8272\u8abf\uff0c\u8996\u89ba\u4e0a\u5c07\u6838\u5fc3\u7cfb\u7d71\u8207\u5916\u90e8\u4f9d\u8cf4\u9805\u5206\u96e2\u3002<code>Rel_R<\/code> \u5de8\u96c6\u6703\u5f37\u5236\u4f48\u5c40\u5f15\u64ce\u5c07\u90f5\u4ef6\u7bc0\u9ede\u76f4\u63a5\u7f6e\u65bc\u9280\u884c\u7cfb\u7d71\u5340\u584a\u7684\u53f3\u5074\u3002<\/p>\n<h3>\u7bc4\u4f8b 2\uff1a\u6df1\u5165\u63a2\u8a0e\u5fae\u670d\u52d9\u5bb9\u5668\u62d3\u64b2\uff08\u7b2c 2 \u5c64\uff09<\/h3>\n<p>\u6b64\u9032\u968e\u4f01\u696d\u85cd\u5716\u5c07\u7cfb\u7d71\u62c6\u89e3\u70ba\u5176\u7d44\u6210\u7684\u5bb9\u5668\u61c9\u7528\u7a0b\u5f0f\u8207\u7368\u7acb\u7684\u8cc7\u6599\u5132\u5b58\uff0c\u5c55\u793a\u7db2\u8def\u6d41\u91cf\u5982\u4f55\u900f\u904e API \u7db2\u95dc\u50b3\u905e\u81f3\u5f8c\u7aef\u5fae\u670d\u52d9\u3002<\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Plantuml<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:TLHTRzf047n7uZziUMY9b3PIbSUgIW9jIfGF5wFsqLgV5tFA-SwwMqEigF-zUxP38Kfv07bzDpExCyj5OFJSL6OyUgUjCar1y6LsVZOxpsRECcfB_kjuD1wnPaEmhy5SO-cnWhNpa61RaML8d6SqS8rCEspZhOHyS7PQaLSRj7mAaz-KmztmA1Sz2zX4wWlB981C0Mg3BB0Lg0sfHzSma2rgfoq7a2y7l27jOKTvq7B-q-GaKgLjOAgoAzVO0dqxhJinML2k9i5_qJY8Ws_AXUx6v0IUnoEGpxwvATOwA_k3SlKoMS1IP6XRGkBTKnlrtfVQFhq8zuhgJbmUsK6XCU4KfCN2I3-nAp2wqd94If2ZGQlaXNN58FyLVSERB93VQXMbBmeHhhc5Ewsy6-gH-jh1UtYubDEVu-ClDBhe9bZGbepqxI5gP_T8jgVkfl4M9J_P0yQLHnjGiNOMRgaeUujkS8kGrZxEuSevZZMPXtGIeclzW7kU2YsMKZJTPK2bP33y1l4yd_PdiY8Nk9uCviWOsFckovbJZzwXsiolkdbNjQ6UgT21lSuRfW8kPulvH-NafOx9Oimbha4IL65F-oU6v4Dd905xNA-rWhLnkm3A45hJYamPRvSnybQ2hFPfboKfYSDuj2HpaERZdAHDtdayJ2B-6eT5WAt6gFp7QfMaPpVfmttK8qZP_3Xfhtp_vwTifglYs0Sh1y1ocSp-0tNivtVdT-X5oNwZUdE30Bu6MXvduT2TkCqoyhsjqgJNj9UJ_hmzMzsc4UX2DbR-LFu2\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>\u5728 VPasCode \u4e2d\u7de8\u8f2f Plantuml<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">Plantuml<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:TLFVJzfG67qduN-uus73P8d9ukEog91i6gDCU6ygt60pR4afJhCimKsWoXJC1ArhDfc_S2WuKQQ2xeyPtxtjq_u5xnKonRW-DBtj-Rvplk-SziSqKTNYKn6duv4a1oFn44RFFNszdZx1eyYQACbOVU5qE1sQf4Km8glLLcFTBYI8NgVrOtlDf1lpK3a7emHcWUDyM8qfidiAgy59KTQU8XV3MR-ga4z1fGuvlNLfmlPEgtdYOj_WA0tdDSWUqTCSdDLekMetlfBy2SDPwHeaEGaj6tyI7rmzlBj_DgRXAM5GYSiXKPrrHnLL4oD2BAX4CMlNbjSHjlgD93Eqrd3re7TE1sBNludSObGImgA6tugph6p0DuIOHBhwizNOehaKLpOQbkGP_a3q7tJf698xJ0UiD25R_jlyP1bvXhCt6tGvRHivqEkjirqsYLKiqcg2pT1HV8yrhaqACQnEIq6krheeWvwozzUimmMugX1p2J86ftofeCTeR82Xd_5Z6s4NCjHeMeaaud99QeMzi_GqELXa0cXr7iob1qcr6VaEP-jYcwn_PgicvW7lFInEYyWVLIKvZ0OLHUFlsiEnHPA3ApOMhHJPiLt2xthz8HxlX3k2Gs6i2g49RkmDtAgbIS60-MCuNEUTFKhmZQg8mKdlu8txrLsU1Zr5yblGpA81pv0NSUjtionMLh54Dfii66Glqs5yppFmfECLEPspqrbxCqKsleDvHFT_M_L5IExP7qljHD8l5L8od8vn7BcJnsxhxKJMdblcObu50Zv_xx1_R9GpiHh1snsJU-xTLeR7VPx_r7GltxfSO1QsemwPF9kTXVn-X_5kn-ukzPRI_tgaDp3YvpNzM0wn__SQ\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-plantuml\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">@startuml\r\n!include &lt;C4\/C4_Container&gt;\r\n\r\ntitle \u652f\u4ed8\u9580\u6236\u7db2\u95dc\u7684\u5bb9\u5668\u5716\r\n\r\nPerson(merchant, \"\u7db2\u8def\u5546\u5bb6\u5408\u4f5c\u5925\u4f34\", \"\u5c07\u5e73\u53f0\u7d50\u5e33\u7aef\u9ede\u6574\u5408\u81f3\u5176\u7db2\u7ad9\u3002\")\r\n\r\nSystem_Boundary(portal_scope, \"\u652f\u4ed8\u7db2\u95dc\u751f\u614b\u7cfb\") {\r\n    Container(api_gateway, \"API \u8def\u7531\u4ee3\u7406\", \"Nginx\", \"\u622a\u7372\u5165\u7ad9\u547c\u53eb\uff0c\u8655\u7406\u983b\u7387\u9650\u5236\u4e26\u5e73\u8861\u7bc0\u9ede\u3002\")\r\n    Container(auth_service, \"\u8eab\u5206\u9a57\u8b49\u5fae\u670d\u52d9\", \"Go &amp; OAuth2\", \"\u9a57\u8b49\u958b\u767c\u8005 API \u6191\u8b49\u8207\u6b0a\u9650\u7bc4\u570d\u3002\")\r\n    Container(txn_service, \"\u4ea4\u6613\u5e33\u672c\", \"Java Spring Boot\", \"\u8655\u7406\u4ed8\u6b3e\u4e26\u7ba1\u7406\u5e33\u672c\u5e33\u6236\u3002\")\r\n    ContainerDb(ledger_db, \"\u5e33\u672c\u8cc7\u6599\u5132\u5b58\", \"CockroachDB\", \"\u5be6\u4f5c\u5206\u6563\u5f0f ACID \u5408\u898f\u7684\u8868\u683c\u7d50\u69cb\u3002\")\r\n}\r\n\r\n' \u8def\u7531\u6d41\u91cf\u9806\u66a2\u5730\u7a7f\u8d8a\u5167\u90e8\u5bb9\u5668\u76ee\u6a19\r\nRel(merchant, api_gateway, \"\u900f\u904e\", \"HTTPS\/JSON\")\r\nRel_D(api_gateway, auth_service, \"\u900f\u904e\", \"gRPC\")\r\nRel_D(api_gateway, txn_service, \"\u8f49\u767c\u7d50\u5e33\u52d5\u4f5c\u81f3\", \"gRPC\")\r\nRel_R(txn_service, ledger_db, \"\u900f\u904e\", \"SQL\/TLS\")\r\n@enduml<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:TLFVJzfG67qduN-uus73P8d9ukEog91i6gDCU6ygt60pR4afJhCimKsWoXJC1ArhDfc_S2WuKQQ2xeyPtxtjq_u5xnKonRW-DBtj-Rvplk-SziSqKTNYKn6duv4a1oFn44RFFNszdZx1eyYQACbOVU5qE1sQf4Km8glLLcFTBYI8NgVrOtlDf1lpK3a7emHcWUDyM8qfidiAgy59KTQU8XV3MR-ga4z1fGuvlNLfmlPEgtdYOj_WA0tdDSWUqTCSdDLekMetlfBy2SDPwHeaEGaj6tyI7rmzlBj_DgRXAM5GYSiXKPrrHnLL4oD2BAX4CMlNbjSHjlgD93Eqrd3re7TE1sBNludSObGImgA6tugph6p0DuIOHBhwizNOehaKLpOQbkGP_a3q7tJf698xJ0UiD25R_jlyP1bvXhCt6tGvRHivqEkjirqsYLKiqcg2pT1HV8yrhaqACQnEIq6krheeWvwozzUimmMugX1p2J86ftofeCTeR82Xd_5Z6s4NCjHeMeaaud99QeMzi_GqELXa0cXr7iob1qcr6VaEP-jYcwn_PgicvW7lFInEYyWVLIKvZ0OLHUFlsiEnHPA3ApOMhHJPiLt2xthz8HxlX3k2Gs6i2g49RkmDtAgbIS60-MCuNEUTFKhmZQg8mKdlu8txrLsU1Zr5yblGpA81pv0NSUjtionMLh54Dfii66Glqs5yppFmfECLEPspqrbxCqKsleDvHFT_M_L5IExP7qljHD8l5L8od8vn7BcJnsxhxKJMdblcObu50Zv_xx1_R9GpiHh1snsJU-xTLeR7VPx_r7GltxfSO1QsemwPF9kTXVn-X_5kn-ukzPRI_tgaDp3YvpNzM0wn__SQ\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:TLHTRzf047n7uZziUMY9b3PIbSUgIW9jIfGF5wFsqLgV5tFA-SwwMqEigF-zUxP38Kfv07bzDpExCyj5OFJSL6OyUgUjCar1y6LsVZOxpsRECcfB_kjuD1wnPaEmhy5SO-cnWhNpa61RaML8d6SqS8rCEspZhOHyS7PQaLSRj7mAaz-KmztmA1Sz2zX4wWlB981C0Mg3BB0Lg0sfHzSma2rgfoq7a2y7l27jOKTvq7B-q-GaKgLjOAgoAzVO0dqxhJinML2k9i5_qJY8Ws_AXUx6v0IUnoEGpxwvATOwA_k3SlKoMS1IP6XRGkBTKnlrtfVQFhq8zuhgJbmUsK6XCU4KfCN2I3-nAp2wqd94If2ZGQlaXNN58FyLVSERB93VQXMbBmeHhhc5Ewsy6-gH-jh1UtYubDEVu-ClDBhe9bZGbepqxI5gP_T8jgVkfl4M9J_P0yQLHnjGiNOMRgaeUujkS8kGrZxEuSevZZMPXtGIeclzW7kU2YsMKZJTPK2bP33y1l4yd_PdiY8Nk9uCviWOsFckovbJZzwXsiolkdbNjQ6UgT21lSuRfW8kPulvH-NafOx9Oimbha4IL65F-oU6v4Dd905xNA-rWhLnkm3A45hJYamPRvSnybQ2hFPfboKfYSDuj2HpaERZdAHDtdayJ2B-6eT5WAt6gFp7QfMaPpVfmttK8qZP_3Xfhtp_vwTifglYs0Sh1y1ocSp-0tNivtVdT-X5oNwZUdE30Bu6MXvduT2TkCqoyhsjqgJNj9UJ_hmzMzsc4UX2DbR-LFu2\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>\u5728 VPasCode \u4e2d\u7de8\u8f2f Plantuml<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"ZtGazyC\"><img loading=\"lazy\" alt=\"\" class=\"alignnone size-full wp-image-612\" decoding=\"async\" height=\"728\" loading=\"lazy\" sizes=\"auto, (max-width: 759px) 100vw, 759px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a19024586a43.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a19024586a43.png 759w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a19024586a43-300x288.png 300w\" width=\"759\"\/><\/p>\n<p><strong>\u8a9e\u6cd5\u5206\u89e3\uff1a<\/strong> \u900f\u904e\u4f7f\u7528 <code>System_Boundary<\/code> \u5b8f\u5305\u88dd\u5668\uff0c\u5167\u90e8\u7d44\u4ef6\u6703\u4e7e\u6de8\u5730\u805a\u96c6\u5728\u4e00\u500b\u6e05\u6670\u7684\u908a\u754c\u6846\u5167\u3002\u5c08\u7528\u7684 <code>ContainerDb<\/code> \u5b8f\u6703\u4ee5\u660e\u78ba\u7684\u8cc7\u6599\u5eab\u5713\u67f1\u5716\u793a\u5448\u73fe\u8cc7\u6599\u5132\u5b58\uff0c\u8b93\u8a08\u7b97\u57f7\u884c\u74b0\u5883\u8207\u6301\u4e45\u5316\u5132\u5b58\u5c64\u4e4b\u9593\u7684\u5340\u5206\u4e00\u76ee\u4e86\u7136\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u4ec0\u9ebc\u662f C4 \u6a21\u578b\u5716\uff1f \u9019\u500bC4 \u6a21\u578b\u5716\u662f\u4e00\u500b\u5206\u5c64\u7684\u56db\u5c64\u67b6\u69cb\u6846\u67b6\uff0c\u65e8\u5728\u4ee5\u4e0d\u540c\u7d30\u7dfb&#8230;<\/p>\n","protected":false},"author":4,"featured_media":0,"parent":0,"menu_order":12,"template":"","meta":{"inline_featured_image":false,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}}},"ld_collection":[14],"class_list":["post-2283","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\/tw\/docs\/vpascode-docs\/plantuml-c4-model-syntax-guide\/\" \/>\n<meta property=\"og:locale\" content=\"zh_TW\" \/>\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\/tw\/docs\/vpascode-docs\/plantuml-c4-model-syntax-guide\/\" \/>\n<meta property=\"og:site_name\" content=\"VPasCode\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a1901f8a8e4e.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u9810\u4f30\u95b1\u8b80\u6642\u9593\" \/>\n\t<meta name=\"twitter:data1\" content=\"4 \u5206\u9418\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/tw\\\/docs\\\/vpascode-docs\\\/plantuml-c4-model-syntax-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/tw\\\/docs\\\/vpascode-docs\\\/plantuml-c4-model-syntax-guide\\\/\",\"name\":\"PlantUML C4 Model Syntax | VPasCode Text to Diagram Guide\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/tw\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/tw\\\/docs\\\/vpascode-docs\\\/plantuml-c4-model-syntax-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/tw\\\/docs\\\/vpascode-docs\\\/plantuml-c4-model-syntax-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/img_6a1901f8a8e4e.png\",\"datePublished\":\"2026-05-26T07:53:11+00:00\",\"description\":\"Map software architecture hierarchies with PlantUML C4 diagrams in VPasCode, your free diagram-as-code tool.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/tw\\\/docs\\\/vpascode-docs\\\/plantuml-c4-model-syntax-guide\\\/#breadcrumb\"},\"inLanguage\":\"zh-TW\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/tw\\\/docs\\\/vpascode-docs\\\/plantuml-c4-model-syntax-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-TW\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/tw\\\/docs\\\/vpascode-docs\\\/plantuml-c4-model-syntax-guide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/img_6a1901f8a8e4e.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/img_6a1901f8a8e4e.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/tw\\\/docs\\\/vpascode-docs\\\/plantuml-c4-model-syntax-guide\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/tw\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Lean Docs\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/tw\\\/docs\\\/%ld_collection%\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"PlantUML C4 \u6a21\u578b\u8a9e\u6cd5\u6307\u5357\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/tw\\\/#website\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/tw\\\/\",\"name\":\"VPasCode\",\"description\":\"by Visual Paradigm\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/tw\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.vpascode.com\\\/tw\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"zh-TW\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/tw\\\/#organization\",\"name\":\"VPasCode\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/tw\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-TW\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/tw\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/tw\\\/wp-content\\\/uploads\\\/sites\\\/2\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/tw\\\/wp-content\\\/uploads\\\/sites\\\/2\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"width\":128,\"height\":138,\"caption\":\"VPasCode\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/tw\\\/#\\\/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\/tw\/docs\/vpascode-docs\/plantuml-c4-model-syntax-guide\/","og_locale":"zh_TW","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\/tw\/docs\/vpascode-docs\/plantuml-c4-model-syntax-guide\/","og_site_name":"VPasCode","og_image":[{"url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a1901f8a8e4e.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"\u9810\u4f30\u95b1\u8b80\u6642\u9593":"4 \u5206\u9418"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vpascode.com\/tw\/docs\/vpascode-docs\/plantuml-c4-model-syntax-guide\/","url":"https:\/\/www.vpascode.com\/tw\/docs\/vpascode-docs\/plantuml-c4-model-syntax-guide\/","name":"PlantUML C4 Model Syntax | VPasCode Text to Diagram Guide","isPartOf":{"@id":"https:\/\/www.vpascode.com\/tw\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vpascode.com\/tw\/docs\/vpascode-docs\/plantuml-c4-model-syntax-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/tw\/docs\/vpascode-docs\/plantuml-c4-model-syntax-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a1901f8a8e4e.png","datePublished":"2026-05-26T07:53:11+00:00","description":"Map software architecture hierarchies with PlantUML C4 diagrams in VPasCode, your free diagram-as-code tool.","breadcrumb":{"@id":"https:\/\/www.vpascode.com\/tw\/docs\/vpascode-docs\/plantuml-c4-model-syntax-guide\/#breadcrumb"},"inLanguage":"zh-TW","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/tw\/docs\/vpascode-docs\/plantuml-c4-model-syntax-guide\/"]}]},{"@type":"ImageObject","inLanguage":"zh-TW","@id":"https:\/\/www.vpascode.com\/tw\/docs\/vpascode-docs\/plantuml-c4-model-syntax-guide\/#primaryimage","url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a1901f8a8e4e.png","contentUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a1901f8a8e4e.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.vpascode.com\/tw\/docs\/vpascode-docs\/plantuml-c4-model-syntax-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vpascode.com\/tw\/"},{"@type":"ListItem","position":2,"name":"Lean Docs","item":"https:\/\/www.vpascode.com\/tw\/docs\/%ld_collection%\/"},{"@type":"ListItem","position":3,"name":"PlantUML C4 \u6a21\u578b\u8a9e\u6cd5\u6307\u5357"}]},{"@type":"WebSite","@id":"https:\/\/www.vpascode.com\/tw\/#website","url":"https:\/\/www.vpascode.com\/tw\/","name":"VPasCode","description":"by Visual Paradigm","publisher":{"@id":"https:\/\/www.vpascode.com\/tw\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vpascode.com\/tw\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"zh-TW"},{"@type":"Organization","@id":"https:\/\/www.vpascode.com\/tw\/#organization","name":"VPasCode","url":"https:\/\/www.vpascode.com\/tw\/","logo":{"@type":"ImageObject","inLanguage":"zh-TW","@id":"https:\/\/www.vpascode.com\/tw\/#\/schema\/logo\/image\/","url":"https:\/\/www.vpascode.com\/tw\/wp-content\/uploads\/sites\/2\/2026\/06\/cropped-vp-online-logo-v1.png","contentUrl":"https:\/\/www.vpascode.com\/tw\/wp-content\/uploads\/sites\/2\/2026\/06\/cropped-vp-online-logo-v1.png","width":128,"height":138,"caption":"VPasCode"},"image":{"@id":"https:\/\/www.vpascode.com\/tw\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/www.vpascode.com\/tw\/wp-json\/wp\/v2\/ld_docs\/2283","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vpascode.com\/tw\/wp-json\/wp\/v2\/ld_docs"}],"about":[{"href":"https:\/\/www.vpascode.com\/tw\/wp-json\/wp\/v2\/types\/ld_docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.vpascode.com\/tw\/wp-json\/wp\/v2\/users\/4"}],"wp:attachment":[{"href":"https:\/\/www.vpascode.com\/tw\/wp-json\/wp\/v2\/media?parent=2283"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/tw\/wp-json\/wp\/v2\/ld_collection?post=2283"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}