{"id":2290,"date":"2026-08-22T07:19:42","date_gmt":"2026-08-22T07:19:42","guid":{"rendered":"https:\/\/www.vpascode.com\/vn\/mastering-architecture-visuals-how-to-build-a-c4-system-context-diagram-in-plantuml\/"},"modified":"2026-09-04T00:14:21","modified_gmt":"2026-09-04T00:14:21","slug":"mastering-architecture-visuals-how-to-build-a-c4-system-context-diagram-in-plantuml","status":"publish","type":"post","link":"https:\/\/www.vpascode.com\/vn\/mastering-architecture-visuals-how-to-build-a-c4-system-context-diagram-in-plantuml\/","title":{"rendered":"L\u00e0m ch\u1ee7 tr\u1ef1c quan ki\u1ebfn tr\u00fac: C\u00e1ch x\u00e2y d\u1ef1ng s\u01a1 \u0111\u1ed3 ng\u1eef c\u1ea3nh h\u1ec7 th\u1ed1ng C4 trong PlantUML"},"content":{"rendered":"<p class=\"lead\">Khi thi\u1ebft k\u1ebf c\u00e1c h\u1ec7 th\u1ed1ng ph\u1ea7n m\u1ec1m, vi\u1ec7c truy\u1ec1n \u0111\u1ea1t r\u00f5 r\u00e0ng c\u00e1c ranh gi\u1edbi c\u1ea5p cao cho c\u1ea3 c\u00e1c b\u00ean li\u00ean quan k\u1ef9 thu\u1eadt v\u00e0 phi k\u1ef9 thu\u1eadt l\u00e0 \u0111i\u1ec1u thi\u1ebft y\u1ebfu. Trong b\u00e0i h\u01b0\u1edbng d\u1eabn masterclass n\u00e0y, ch\u00fang ta s\u1ebd c\u00f9ng nhau t\u00ecm hi\u1ec3u c\u00e1ch x\u00e2y d\u1ef1ng m\u1ed9t s\u01a1 \u0111\u1ed3 ng\u1eef c\u1ea3nh h\u1ec7 th\u1ed1ng C4 chuy\u00ean nghi\u1ec7p t\u1eeb \u0111\u1ea7u b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng PlantUML b\u00ean trong c\u00f4ng c\u1ee5 mi\u1ec5n ph\u00ed &#8220;<a href=\"https:\/\/vpascode.com\/editor\">VPasCode&#8221;<\/a> tr\u00ecnh so\u1ea1n th\u1ea3o.<\/p>\n<p id=\"ZzKEiQY\"><img loading=\"lazy\" alt=\"S\u01a1 \u0111\u1ed3 ng\u1eef c\u1ea3nh h\u1ec7 th\u1ed1ng C4 cho m\u1ed9t c\u1eeda h\u00e0ng t\u1ea1p h\u00f3a tr\u1ef1c tuy\u1ebfn, hi\u1ec3n th\u1ecb c\u00e1c t\u01b0\u01a1ng t\u00e1c gi\u1eefa kh\u00e1ch h\u00e0ng, t\u00e0i x\u1ebf giao h\u00e0ng, c\u1ed5ng thanh to\u00e1n v\u00e0 nh\u00e0 cung c\u1ea5p d\u1ecbch v\u1ee5 h\u1eadu c\u1ea7n.\" class=\"alignnone size-full wp-image-2795\" decoding=\"async\" height=\"775\" loading=\"lazy\" sizes=\"auto, (max-width: 526px) 100vw, 526px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/08\/img_6a841bbd95ba8.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/08\/img_6a841bbd95ba8.png 526w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/08\/img_6a841bbd95ba8-204x300.png 204w\" width=\"526\"\/><\/p>\n<section>\n<h2>T\u1ea1i sao n\u00ean s\u1eed d\u1ee5ng ph\u01b0\u01a1ng ph\u00e1p s\u01a1 \u0111\u1ed3 d\u01b0\u1edbi d\u1ea1ng m\u00e3 cho c\u00e1c m\u00f4 h\u00ecnh C4?<\/h2>\n<p>C\u00e1c c\u00f4ng c\u1ee5 v\u1ebd k\u00e9o-th\u1ea3 truy\u1ec1n th\u1ed1ng th\u01b0\u1eddng d\u1eabn \u0111\u1ebfn c\u00e1c h\u1ed9p b\u1ecb c\u0103n ch\u1ec9nh sai, ki\u1ec3u d\u00e1ng kh\u00f4ng nh\u1ea5t qu\u00e1n v\u00e0 c\u00e1c c\u1eadp nh\u1eadt th\u1ee7 c\u00f4ng t\u1ed1n th\u1eddi gian m\u1ed7i khi ki\u1ebfn tr\u00fac thay \u0111\u1ed5i. B\u1eb1ng c\u00e1ch t\u1eadn d\u1ee5ng m\u1ed9t &#8220;<a href=\"https:\/\/www.visual-paradigm.com\/features\/diagram-as-code-tool\/\">c\u00f4ng c\u1ee5 s\u01a1 \u0111\u1ed3 d\u01b0\u1edbi d\u1ea1ng m\u00e3&#8221;<\/a>nh\u01b0 m\u1ed9t tr\u00ecnh so\u1ea1n th\u1ea3o PlantUML mi\u1ec5n ph\u00ed, t\u00e0i li\u1ec7u c\u1ee7a b\u1ea1n s\u1ebd lu\u00f4n \u0111\u1ed3ng b\u1ed9 v\u1edbi m\u00e3 ngu\u1ed3n, \u0111\u01b0\u1ee3c ki\u1ec3m so\u00e1t phi\u00ean b\u1ea3n v\u00e0 s\u1ea1ch s\u1ebd. S\u1eed d\u1ee5ng &#8220;<a href=\"https:\/\/vpascode.com\/editor\">VPasCode&#8221;<\/a>, b\u1ea1n s\u1ebd nh\u1eadn \u0111\u01b0\u1ee3c kh\u1ea3 n\u0103ng hi\u1ec3n th\u1ecb th\u1eddi gian th\u1ef1c v\u00e0 ph\u00e1t hi\u1ec7n \u0111\u1ecbnh d\u1ea1ng t\u1ef1 \u0111\u1ed9ng, gi\u00fap vi\u1ec7c tr\u1ef1c quan h\u00f3a ki\u1ebfn tr\u00fac ph\u1ea7n m\u1ec1m tr\u1edf n\u00ean d\u1ec5 d\u00e0ng.<\/p>\n<\/section>\n<section>\n<h2>Nghi\u00ean c\u1ee9u t\u00ecnh hu\u1ed1ng Masterclass: Ki\u1ebfn tr\u00fac c\u1eeda h\u00e0ng t\u1ea1p h\u00f3a tr\u1ef1c tuy\u1ebfn<\/h2>\n<p>\u0110\u1ec3 minh h\u1ecda c\u00e1ch x\u00e2y d\u1ef1ng m\u1ed9t s\u01a1 \u0111\u1ed3 ng\u1eef c\u1ea3nh h\u1ec7 th\u1ed1ng v\u1eefng ch\u1eafc, h\u00e3y c\u00f9ng xem x\u00e9t n\u1ec1n t\u1ea3ng C\u1eeda h\u00e0ng T\u1ea1p h\u00f3a Tr\u1ef1c tuy\u1ebfn. Ki\u1ebfn tr\u00fac n\u00e0y c\u1ea7n n\u1eafm b\u1eaft ng\u01b0\u1eddi d\u00f9ng cu\u1ed1i, t\u00e0i x\u1ebf giao h\u00e0ng b\u00ean ngo\u00e0i, h\u1ec7 th\u1ed1ng t\u1ea1p h\u00f3a c\u1ed1t l\u00f5i v\u00e0 c\u00e1c d\u1ecbch v\u1ee5 b\u00ean th\u1ee9 ba nh\u01b0 c\u1ed5ng thanh to\u00e1n v\u00e0 nh\u00e0 cung c\u1ea5p d\u1ecbch v\u1ee5 h\u1eadu c\u1ea7n.<\/p>\n<p>D\u01b0\u1edbi \u0111\u00e2y l\u00e0 to\u00e0n b\u1ed9 m\u00e3 ngu\u1ed3n PlantUML m\u00e0 ch\u00fang ta s\u1ebd ph\u00e2n t\u00edch t\u1eebng b\u01b0\u1edbc:<\/p>\n<pre><code class=\"language-plantuml\">@startuml\r\n!include https:\/\/raw.githubusercontent.com\/plantuml-stdlib\/C4-PlantUML\/master\/C4_Context.puml\r\nskinparam vpDiagramType C4modelSystemContextDiagram\r\n\r\nLAYOUT_TOP_DOWN()\r\nLAYOUT_WITH_LEGEND()\r\n\r\ntitle S\u01a1 \u0111\u1ed3 ng\u1eef c\u1ea3nh h\u1ec7 th\u1ed1ng cho C\u1eeda h\u00e0ng T\u1ea1p h\u00f3a Tr\u1ef1c tuy\u1ebfn\r\n\r\nPerson(customer, \"Kh\u00e1ch h\u00e0ng\", \"Duy\u1ec7t c\u1eeda h\u00e0ng, \u0111\u1eb7t h\u00e0ng t\u1ea1p h\u00f3a v\u00e0 l\u00ean l\u1ecbch giao h\u00e0ng\")\r\nPerson_Ext(driver, \"T\u00e0i x\u1ebf giao h\u00e0ng\", \"Giao h\u00e0ng cho kh\u00e1ch h\u00e0ng\")\r\n\r\nEnterprise_Boundary(grocery_co, \"C\u1eeda h\u00e0ng T\u1ea1p h\u00f3a Tr\u1ef1c tuy\u1ebfn\") {\r\n  System(grocery_system, \"H\u1ec7 th\u1ed1ng C\u1eeda h\u00e0ng T\u1ea1p h\u00f3a Tr\u1ef1c tuy\u1ebfn\", \"Cho ph\u00e9p kh\u00e1ch h\u00e0ng \u0111\u1eb7t h\u00e0ng t\u1ea1p h\u00f3a tr\u1ef1c tuy\u1ebfn v\u00e0 qu\u1ea3n l\u00fd vi\u1ec7c th\u1ef1c hi\u1ec7n \u0111\u01a1n h\u00e0ng\")\r\n}\r\n\r\nSystem_Ext(payment, \"C\u1ed5ng thanh to\u00e1n\", \"X\u1eed l\u00fd thanh to\u00e1n qua th\u1ebb v\u00e0 v\u00ed \u0111i\u1ec7n t\u1eed\")\r\nSystem_Ext(shipping, \"Nh\u00e0 cung c\u1ea5p d\u1ecbch v\u1ee5 h\u1eadu c\u1ea7n\", \"L\u00ean k\u1ebf ho\u1ea1ch l\u1ed9 tr\u00ecnh giao h\u00e0ng v\u00e0 s\u1eafp x\u1ebfp l\u1ecbch cho t\u00e0i x\u1ebf\")\r\n\r\nRel(customer, grocery_system, \"Duy\u1ec7t s\u1ea3n ph\u1ea9m v\u00e0 \u0111\u1eb7t h\u00e0ng\", \"HTTPS\")\r\nRel(grocery_system, payment, \"X\u1eed l\u00fd thanh to\u00e1n qua\", \"HTTPS\/API\")\r\nRel(grocery_system, shipping, \"T\u1ea1o c\u00f4ng vi\u1ec7c giao h\u00e0ng qua\", \"HTTPS\/API\")\r\nRel(driver, grocery_system, \"Xem ph\u00e2n c\u00f4ng giao h\u00e0ng\", \"HTTPS\")\r\n\r\n@enduml<\/code><\/pre>\n<\/section>\n<section>\n<h2>H\u01b0\u1edbng d\u1eabn chi ti\u1ebft t\u1eebng b\u01b0\u1edbc v\u1ec1 m\u00e3 ngu\u1ed3n<\/h2>\n<h3>1. Thi\u1ebft l\u1eadp m\u00f4i tr\u01b0\u1eddng n\u1ec1n t\u1ea3ng<\/h3>\n<p>T\u00f4i b\u1eaft \u0111\u1ea7u b\u1eb1ng c\u00e1ch kh\u1edfi t\u1ea1o script v\u1edbi c\u00e1c th\u1ebb PlantUML ti\u00eau chu\u1ea9n v\u00e0 nh\u1eadp c\u00e1c macro th\u01b0 vi\u1ec7n chu\u1ea9n ch\u00ednh th\u1ee9c C4-PlantUML. B\u1eb1ng c\u00e1ch tham chi\u1ebfu &#8220;<code>C4_Context.puml\"<\/code>, ch\u00fang ta s\u1ebd m\u1edf kh\u00f3a c\u00e1c ph\u1ea7n t\u1eed ng\u1eef ngh\u0129a \u0111\u01b0\u1ee3c thi\u1ebft k\u1ebf ri\u00eang cho s\u01a1 \u0111\u1ed3 ng\u1eef c\u1ea3nh h\u1ec7 th\u1ed1ng.<\/p>\n<ul>\n<li><strong>Bao g\u1ed3m th\u01b0 vi\u1ec7n:<\/strong> <code>!include ...\/C4_Context.puml<\/code>t\u1ea3i c\u00e1c h\u00ecnh d\u1ea1ng, m\u00e0u s\u1eafc v\u00e0 quy t\u1eafc ki\u1ec3u d\u00e1ng ti\u00eau chu\u1ea9n cho con ng\u01b0\u1eddi, h\u1ec7 th\u1ed1ng v\u00e0 ranh gi\u1edbi.<\/li>\n<li><strong>Ki\u1ec3u s\u01a1 \u0111\u1ed3 v\u00e0 b\u1ed1 c\u1ee5c:<\/strong>\u0110\u1eb7t &#8220;<code>skinparam vpDiagramType C4modelSystemContextDiagram\"<\/code>\u0111\u1ea3m b\u1ea3o t\u00edch h\u1ee3p \u0111\u00fang c\u00e1ch trong &#8220;<a href=\"https:\/\/vpascode.com\/editor\">VPasCode&#8221;<\/a>, trong khi &#8220;<code>LAYOUT_TOP_DOWN()\"<\/code>s\u1eafp x\u1ebfp ph\u00e2n c\u1ea5p tr\u1ef1c quan m\u1ed9t c\u00e1ch g\u1ecdn g\u00e0ng t\u1eeb tr\u00ean xu\u1ed1ng d\u01b0\u1edbi. T\u00f4i c\u0169ng k\u00edch ho\u1ea1t <code>LAYOUT_WITH_LEGEND()<\/code>\u0111\u1ec3 t\u1ef1 \u0111\u1ed9ng t\u1ea1o m\u1ed9t h\u01b0\u1edbng d\u1eabn tham kh\u1ea3o h\u1eefu \u00edch \u1edf g\u00f3c d\u01b0\u1edbi b\u00ean ph\u1ea3i c\u1ee7a b\u1ea3ng v\u1ebd.<\/li>\n<\/ul>\n<h3>2. X\u00e1c \u0111\u1ecbnh c\u00e1c vai tr\u00f2 v\u00e0 ng\u01b0\u1eddi d\u00f9ng<\/h3>\n<p>Ti\u1ebfp theo, t\u00f4i c\u1ea7n x\u00e1c \u0111\u1ecbnh c\u00e1c vai tr\u00f2 con ng\u01b0\u1eddi t\u01b0\u01a1ng t\u00e1c v\u1edbi h\u1ec7 sinh th\u00e1i c\u1ee7a ch\u00fang t\u00f4i. T\u00f4i ph\u00e2n bi\u1ec7t gi\u1eefa ng\u01b0\u1eddi d\u00f9ng h\u1ec7 th\u1ed1ng ti\u00eau chu\u1ea9n v\u00e0 c\u00e1c th\u1ef1c th\u1ec3 b\u00ean ngo\u00e0i b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng c\u00e1c macro C4 c\u1ee5 th\u1ec3:<\/p>\n<ul>\n<li><strong>Ng\u01b0\u1eddi d\u00f9ng c\u1ed1t l\u00f5i:<\/strong> T\u00f4i t\u1ea1o m\u1ed9t ng\u01b0\u1eddi d\u00f9ng ch\u00ednh b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng <code>Person(customer, \"Kh\u00e1ch h\u00e0ng\", ...)<\/code> ng\u01b0\u1eddi kh\u1edfi t\u1ea1o \u0111\u01a1n h\u00e0ng v\u00e0 duy\u1ec7t qua kho h\u00e0ng.<\/li>\n<li><strong>Vai tr\u00f2 b\u00ean ngo\u00e0i:<\/strong> T\u00f4i \u0111\u1ecbnh ngh\u0129a m\u1ed9t t\u00e0i x\u1ebf giao h\u00e0ng b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng <code>Person_Ext(driver, \"T\u00e0i x\u1ebf giao h\u00e0ng\", ...)<\/code> \u0111\u1ec3 nh\u1ea5n m\u1ea1nh r\u1eb1ng m\u1eb7c d\u00f9 h\u1ecd t\u01b0\u01a1ng t\u00e1c v\u1edbi quy tr\u00ecnh th\u1ef1c hi\u1ec7n \u0111\u01a1n h\u00e0ng c\u1ee7a ch\u00fang t\u00f4i, h\u1ecd t\u1ed3n t\u1ea1i b\u00ean ngo\u00e0i ph\u1ea1m vi b\u1ea3o m\u1eadt n\u1ed9i b\u1ed9 c\u1ed1t l\u00f5i c\u1ee7a ch\u00fang t\u00f4i.<\/li>\n<\/ul>\n<h3>3. Thi\u1ebft l\u1eadp ranh gi\u1edbi t\u1ed5 ch\u1ee9c v\u00e0 c\u00e1c h\u1ec7 th\u1ed1ng c\u1ed1t l\u00f5i<\/h3>\n<p>S\u1ef1 r\u00f5 r\u00e0ng v\u1ec1 ki\u1ebfn tr\u00fac \u0111\u00f2i h\u1ecfi c\u00e1c ranh gi\u1edbi r\u00f5 r\u00e0ng. \u0110\u1ec3 bao qu\u00e1t nh\u1eefng g\u00ec c\u00f4ng ty ch\u00fang t\u00f4i s\u1edf h\u1eefu so v\u1edbi nh\u1eefng g\u00ec ph\u1ee5 thu\u1ed9c v\u00e0o nh\u00e0 cung c\u1ea5p b\u00ean ngo\u00e0i, t\u00f4i thi\u1ebft l\u1eadp m\u1ed9t ranh gi\u1edbi doanh nghi\u1ec7p:<\/p>\n<ul>\n<li><strong>Ranh gi\u1edbi doanh nghi\u1ec7p:<\/strong> S\u1eed d\u1ee5ng <code>Enterprise_Boundary(grocery_co, \"C\u1eeda h\u00e0ng t\u1ea1p h\u00f3a tr\u1ef1c tuy\u1ebfn\")<\/code> t\u1ea1o ra m\u1ed9t h\u1ed9p ch\u1ee9a n\u00e9t \u0111\u1ee9t \u0111\u1ec3 nh\u00f3m tr\u1ef1c quan c\u00e1c c\u01a1 s\u1edf h\u1ea1 t\u1ea7ng n\u1ed9i b\u1ed9.<\/li>\n<li><strong>H\u1ec7 th\u1ed1ng n\u1ed9i b\u1ed9:<\/strong> B\u00ean trong ranh gi\u1edbi n\u00e0y, t\u00f4i \u0111\u1eb7t t\u00e0i s\u1ea3n ph\u1ea7n m\u1ec1m ch\u00ednh c\u1ee7a ch\u00fang t\u00f4i b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng <code>System(grocery_system, \"H\u1ec7 th\u1ed1ng c\u1eeda h\u00e0ng t\u1ea1p h\u00f3a tr\u1ef1c tuy\u1ebfn\", ...)<\/code>.<\/li>\n<\/ul>\n<h3>4. T\u00edch h\u1ee3p c\u00e1c h\u1ec7 th\u1ed1ng b\u00ean ngo\u00e0i<\/h3>\n<p>Kh\u00f4ng c\u00f3 n\u1ec1n t\u1ea3ng th\u01b0\u01a1ng m\u1ea1i \u0111i\u1ec7n t\u1eed hi\u1ec7n \u0111\u1ea1i n\u00e0o ho\u1ea1t \u0111\u1ed9ng bi\u1ec7t l\u1eadp. T\u00f4i \u0111\u1ecbnh ngh\u0129a c\u00e1c ph\u1ee5 thu\u1ed9c b\u00ean ngo\u00e0i b\u00ean ngo\u00e0i ranh gi\u1edbi doanh nghi\u1ec7p b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng c\u00e1c macro h\u1ec7 th\u1ed1ng b\u00ean ngo\u00e0i chuy\u00ean bi\u1ec7t:<\/p>\n<ul>\n<li><strong>X\u1eed l\u00fd thanh to\u00e1n:<\/strong> <code>System_Ext(payment, \"C\u1ed5ng thanh to\u00e1n\", ...)<\/code> \u0111\u1ea1i di\u1ec7n cho c\u00e1c giao d\u1ecbch t\u00e0i ch\u00ednh c\u1ee7a b\u00ean th\u1ee9 ba.<\/li>\n<li><strong>H\u1eadu c\u1ea7n v\u00e0 v\u1eadn chuy\u1ec3n:<\/strong> <code>System_Ext(shipping, \"Nh\u00e0 cung c\u1ea5p h\u1eadu c\u1ea7n\", ...)<\/code> x\u1eed l\u00fd l\u1eadp k\u1ebf ho\u1ea1ch tuy\u1ebfn \u0111\u01b0\u1eddng v\u00e0 ph\u00e2n c\u00f4ng t\u00e0i x\u1ebf.<\/li>\n<\/ul>\n<h3>5. \u00c1nh x\u1ea1 c\u00e1c m\u1ed1i quan h\u1ec7 v\u00e0 giao th\u1ee9c<\/h3>\n<p>\u0110\u1ec3 li\u00ean k\u1ebft ki\u1ebfn tr\u00fac l\u1ea1i v\u1edbi nhau, t\u00f4i \u00e1nh x\u1ea1 c\u00e1c t\u01b0\u01a1ng t\u00e1c c\u00f3 h\u01b0\u1edbng v\u00e0 c\u00e1c giao th\u1ee9c truy\u1ec1n th\u00f4ng b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng <code>Rel()<\/code> macro:<\/p>\n<ul>\n<li><strong>Lu\u1ed3ng kh\u00e1ch h\u00e0ng:<\/strong> <code>Rel(customer, grocery_system, \"Duy\u1ec7t s\u1ea3n ph\u1ea9m v\u00e0 \u0111\u1eb7t h\u00e0ng\", \"HTTPS\")<\/code> minh h\u1ecda c\u00e1ch ng\u01b0\u1eddi d\u00f9ng k\u1ebft n\u1ed1i an to\u00e0n v\u1edbi n\u1ec1n t\u1ea3ng c\u1ed1t l\u00f5i.<\/li>\n<li><strong>T\u00edch h\u1ee3p ph\u00eda m\u00e1y ch\u1ee7:<\/strong> T\u00f4i \u00e1nh x\u1ea1 c\u00e1c ph\u1ee5 thu\u1ed9c ph\u00eda m\u00e1y ch\u1ee7 nh\u01b0 x\u1eed l\u00fd thanh to\u00e1n v\u00e0 nh\u00e0 cung c\u1ea5p v\u1eadn chuy\u1ec3n v\u1edbi c\u00e1c nh\u00e3n giao th\u1ee9c r\u00f5 r\u00e0ng (<code>\"HTTPS\/API\"<\/code>) \u0111\u1ec3 cung c\u1ea5p cho c\u00e1c k\u1ef9 s\u01b0 ng\u1eef c\u1ea3nh k\u1ef9 thu\u1eadt ngay l\u1eadp t\u1ee9c.<\/li>\n<\/ul>\n<\/section>\n<section>\n<h2>K\u1ebft lu\u1eadn &amp; T\u1ef1 th\u1eed nghi\u1ec7m<\/h2>\n<p>X\u00e2y d\u1ef1ng c\u00e1c s\u01a1 \u0111\u1ed3 ki\u1ebfn tr\u00fac ph\u1ea7n m\u1ec1m s\u1ea1ch s\u1ebd kh\u00f4ng y\u00eau c\u1ea7u c\u00e1c c\u00f4ng c\u1ee5 m\u00e1y t\u00ednh c\u1ed3ng k\u1ec1nh ho\u1eb7c c\u00e1c c\u1ea5u h\u00ecnh t\u1ec7p ph\u1ee9c t\u1ea1p. B\u1eb1ng c\u00e1ch k\u1ebft h\u1ee3p c\u00fa ph\u00e1p C4 m\u1ea1nh m\u1ebd c\u1ee7a PlantUML v\u1edbi <a href=\"https:\/\/vpascode.com\/\">VPasCode<\/a>, b\u1ea1n c\u00f3 th\u1ec3 vi\u1ebft, hi\u1ec3n th\u1ecb v\u00e0 chia s\u1ebb c\u00e1c s\u01a1 \u0111\u1ed3 ki\u1ebfn tr\u00fac ch\u1ec9 trong v\u00e0i gi\u00e2y.<\/p>\n<p id=\"jnVfaiv\"><img loading=\"lazy\" alt=\"\u1ea2nh ch\u1ee5p m\u00e0n h\u00ecnh c\u1ee7a Visual Paradigm VPasCode hi\u1ec3n th\u1ecb vi\u1ec7c t\u1ea1o s\u01a1 \u0111\u1ed3 ng\u1eef c\u1ea3nh h\u1ec7 th\u1ed1ng C4\" class=\"alignnone wp-image-2794 size-full\" decoding=\"async\" height=\"788\" loading=\"lazy\" sizes=\"auto, (max-width: 1400px) 100vw, 1400px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/08\/img_6a841bb75a583.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/08\/img_6a841bb75a583.png 1400w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/08\/img_6a841bb75a583-300x169.png 300w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/08\/img_6a841bb75a583-1024x576.png 1024w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/08\/img_6a841bb75a583-768x432.png 768w\" width=\"1400\"\/><\/p>\n<p>S\u1eb5n s\u00e0ng th\u1eed x\u00e2y d\u1ef1ng ki\u1ebfn tr\u00fac h\u1ec7 th\u1ed1ng c\u1ee7a ri\u00eang b\u1ea1n? H\u00e3y truy c\u1eadp <a href=\"https:\/\/vpascode.com\/editor\">tr\u00ecnh so\u1ea1n th\u1ea3o tr\u1ef1c tuy\u1ebfn VPasCode mi\u1ec5n ph\u00ed<\/a>, d\u00e1n \u0111o\u1ea1n m\u00e3 n\u00e0y v\u00e0 xem s\u01a1 \u0111\u1ed3 c\u1ee7a b\u1ea1n \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb theo th\u1eddi gian th\u1ef1c!<\/p>\n<\/section>\n","protected":false},"excerpt":{"rendered":"Khi thi\u1ebft k\u1ebf c\u00e1c h\u1ec7 th\u1ed1ng ph\u1ea7n m\u1ec1m, vi\u1ec7c truy\u1ec1n \u0111\u1ea1t r\u00f5 r\u00e0ng c\u00e1c ranh gi\u1edbi c\u1ea5p cao cho c\u1ea3 c\u00e1c b\u00ean li\u00ean quan k\u1ef9 thu\u1eadt v\u00e0 phi k\u1ef9 thu\u1eadt l\u00e0 \u0111i\u1ec1u thi\u1ebft y\u1ebfu. Trong b\u00e0i h\u01b0\u1edbng d\u1eabn masterclass n\u00e0y,&#8230;","protected":false},"author":4,"featured_media":2291,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_yoast_wpseo_title":"X\u00e2y d\u1ef1ng s\u01a1 \u0111\u1ed3 ng\u1eef c\u1ea3nh h\u1ec7 th\u1ed1ng C4 v\u1edbi PlantUML | VPasCode","_yoast_wpseo_metadesc":"T\u00ecm hi\u1ec3u c\u00e1ch thi\u1ebft k\u1ebf s\u01a1 \u0111\u1ed3 ng\u1eef c\u1ea3nh h\u1ec7 th\u1ed1ng C4 cho m\u1ed9t c\u1eeda h\u00e0ng t\u1ea1p h\u00f3a tr\u1ef1c tuy\u1ebfn b\u1eb1ng PlantUML v\u00e0 VPasCode. H\u00e3y th\u1eed c\u00f4ng c\u1ee5 s\u01a1 \u0111\u1ed3 d\u01b0\u1edbi d\u1ea1ng m\u00e3 mi\u1ec5n ph\u00ed c\u1ee7a ch\u00fang t\u00f4i ngay h\u00f4m nay!","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":""}},"source_url":"","fifu_image_url":"","fifu_image_alt":"","_fifu_image_alt":"","fifu_alt":"","_fifu_alt":"","fifu_image_title":"","_fifu_image_title":"","fifu_input_alt":"","vp_image_hash":"","footnotes":""},"categories":[19],"tags":[],"asset-category":[],"class_list":["post-2290","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials-guides"],"source_url":"","fifu_image_url":"","fifu_image_alt":"","vp_image_hash":"","yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>X\u00e2y d\u1ef1ng s\u01a1 \u0111\u1ed3 ng\u1eef c\u1ea3nh h\u1ec7 th\u1ed1ng C4 v\u1edbi PlantUML | VPasCode<\/title>\n<meta name=\"description\" content=\"T\u00ecm hi\u1ec3u c\u00e1ch thi\u1ebft k\u1ebf s\u01a1 \u0111\u1ed3 ng\u1eef c\u1ea3nh h\u1ec7 th\u1ed1ng C4 cho m\u1ed9t c\u1eeda h\u00e0ng t\u1ea1p h\u00f3a tr\u1ef1c tuy\u1ebfn b\u1eb1ng PlantUML v\u00e0 VPasCode. H\u00e3y th\u1eed c\u00f4ng c\u1ee5 s\u01a1 \u0111\u1ed3 d\u01b0\u1edbi d\u1ea1ng m\u00e3 mi\u1ec5n ph\u00ed c\u1ee7a ch\u00fang t\u00f4i ngay h\u00f4m nay!\" \/>\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\/vn\/mastering-architecture-visuals-how-to-build-a-c4-system-context-diagram-in-plantuml\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"X\u00e2y d\u1ef1ng s\u01a1 \u0111\u1ed3 ng\u1eef c\u1ea3nh h\u1ec7 th\u1ed1ng C4 v\u1edbi PlantUML | VPasCode\" \/>\n<meta property=\"og:description\" content=\"T\u00ecm hi\u1ec3u c\u00e1ch thi\u1ebft k\u1ebf s\u01a1 \u0111\u1ed3 ng\u1eef c\u1ea3nh h\u1ec7 th\u1ed1ng C4 cho m\u1ed9t c\u1eeda h\u00e0ng t\u1ea1p h\u00f3a tr\u1ef1c tuy\u1ebfn b\u1eb1ng PlantUML v\u00e0 VPasCode. H\u00e3y th\u1eed c\u00f4ng c\u1ee5 s\u01a1 \u0111\u1ed3 d\u01b0\u1edbi d\u1ea1ng m\u00e3 mi\u1ec5n ph\u00ed c\u1ee7a ch\u00fang t\u00f4i ngay h\u00f4m nay!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vpascode.com\/vn\/mastering-architecture-visuals-how-to-build-a-c4-system-context-diagram-in-plantuml\/\" \/>\n<meta property=\"og:site_name\" content=\"VPasCode\" \/>\n<meta property=\"article:published_time\" content=\"2026-08-22T07:19:42+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-09-04T00:14:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.vpascode.com\/vn\/wp-content\/uploads\/sites\/12\/2026\/08\/build-c4-system-context-diagram-plantuml-vpascode.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1376\" \/>\n\t<meta property=\"og:image:height\" content=\"768\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"jick\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi\" \/>\n\t<meta name=\"twitter:data1\" content=\"\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 ph\u00fat\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/mastering-architecture-visuals-how-to-build-a-c4-system-context-diagram-in-plantuml\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/mastering-architecture-visuals-how-to-build-a-c4-system-context-diagram-in-plantuml\\\/\"},\"author\":{\"name\":\"jick\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/#\\\/schema\\\/person\\\/cd8aa8455bd8bc6827b3efdfa79ad3a6\"},\"headline\":\"L\u00e0m ch\u1ee7 tr\u1ef1c quan ki\u1ebfn tr\u00fac: C\u00e1ch x\u00e2y d\u1ef1ng s\u01a1 \u0111\u1ed3 ng\u1eef c\u1ea3nh h\u1ec7 th\u1ed1ng C4 trong PlantUML\",\"datePublished\":\"2026-08-22T07:19:42+00:00\",\"dateModified\":\"2026-09-04T00:14:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/mastering-architecture-visuals-how-to-build-a-c4-system-context-diagram-in-plantuml\\\/\"},\"wordCount\":1585,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/mastering-architecture-visuals-how-to-build-a-c4-system-context-diagram-in-plantuml\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/wp-content\\\/uploads\\\/sites\\\/12\\\/2026\\\/08\\\/build-c4-system-context-diagram-plantuml-vpascode.jpg\",\"articleSection\":[\"Tutorials &amp; Guides\"],\"inLanguage\":\"vi\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/mastering-architecture-visuals-how-to-build-a-c4-system-context-diagram-in-plantuml\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/mastering-architecture-visuals-how-to-build-a-c4-system-context-diagram-in-plantuml\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/mastering-architecture-visuals-how-to-build-a-c4-system-context-diagram-in-plantuml\\\/\",\"name\":\"X\u00e2y d\u1ef1ng s\u01a1 \u0111\u1ed3 ng\u1eef c\u1ea3nh h\u1ec7 th\u1ed1ng C4 v\u1edbi PlantUML | VPasCode\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/mastering-architecture-visuals-how-to-build-a-c4-system-context-diagram-in-plantuml\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/mastering-architecture-visuals-how-to-build-a-c4-system-context-diagram-in-plantuml\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/wp-content\\\/uploads\\\/sites\\\/12\\\/2026\\\/08\\\/build-c4-system-context-diagram-plantuml-vpascode.jpg\",\"datePublished\":\"2026-08-22T07:19:42+00:00\",\"dateModified\":\"2026-09-04T00:14:21+00:00\",\"description\":\"T\u00ecm hi\u1ec3u c\u00e1ch thi\u1ebft k\u1ebf s\u01a1 \u0111\u1ed3 ng\u1eef c\u1ea3nh h\u1ec7 th\u1ed1ng C4 cho m\u1ed9t c\u1eeda h\u00e0ng t\u1ea1p h\u00f3a tr\u1ef1c tuy\u1ebfn b\u1eb1ng PlantUML v\u00e0 VPasCode. H\u00e3y th\u1eed c\u00f4ng c\u1ee5 s\u01a1 \u0111\u1ed3 d\u01b0\u1edbi d\u1ea1ng m\u00e3 mi\u1ec5n ph\u00ed c\u1ee7a ch\u00fang t\u00f4i ngay h\u00f4m nay!\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/mastering-architecture-visuals-how-to-build-a-c4-system-context-diagram-in-plantuml\\\/#breadcrumb\"},\"inLanguage\":\"vi\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/mastering-architecture-visuals-how-to-build-a-c4-system-context-diagram-in-plantuml\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"vi\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/mastering-architecture-visuals-how-to-build-a-c4-system-context-diagram-in-plantuml\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/wp-content\\\/uploads\\\/sites\\\/12\\\/2026\\\/08\\\/build-c4-system-context-diagram-plantuml-vpascode.jpg\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/wp-content\\\/uploads\\\/sites\\\/12\\\/2026\\\/08\\\/build-c4-system-context-diagram-plantuml-vpascode.jpg\",\"width\":1376,\"height\":768},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/mastering-architecture-visuals-how-to-build-a-c4-system-context-diagram-in-plantuml\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"L\u00e0m ch\u1ee7 tr\u1ef1c quan ki\u1ebfn tr\u00fac: C\u00e1ch x\u00e2y d\u1ef1ng s\u01a1 \u0111\u1ed3 ng\u1eef c\u1ea3nh h\u1ec7 th\u1ed1ng C4 trong PlantUML\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/#website\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/\",\"name\":\"VPasCode\",\"description\":\"by Visual Paradigm\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"vi\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/#organization\",\"name\":\"VPasCode\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"vi\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/wp-content\\\/uploads\\\/sites\\\/12\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/wp-content\\\/uploads\\\/sites\\\/12\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"width\":128,\"height\":138,\"caption\":\"VPasCode\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/#\\\/schema\\\/person\\\/cd8aa8455bd8bc6827b3efdfa79ad3a6\",\"name\":\"jick\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"vi\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/0c89451a99649a6ebefa14a9167db0960c327e8c33ea79fdb68fc38aa18d768a?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/0c89451a99649a6ebefa14a9167db0960c327e8c33ea79fdb68fc38aa18d768a?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/0c89451a99649a6ebefa14a9167db0960c327e8c33ea79fdb68fc38aa18d768a?s=96&d=mm&r=g\",\"caption\":\"jick\"},\"url\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/author\\\/jick\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"X\u00e2y d\u1ef1ng s\u01a1 \u0111\u1ed3 ng\u1eef c\u1ea3nh h\u1ec7 th\u1ed1ng C4 v\u1edbi PlantUML | VPasCode","description":"T\u00ecm hi\u1ec3u c\u00e1ch thi\u1ebft k\u1ebf s\u01a1 \u0111\u1ed3 ng\u1eef c\u1ea3nh h\u1ec7 th\u1ed1ng C4 cho m\u1ed9t c\u1eeda h\u00e0ng t\u1ea1p h\u00f3a tr\u1ef1c tuy\u1ebfn b\u1eb1ng PlantUML v\u00e0 VPasCode. H\u00e3y th\u1eed c\u00f4ng c\u1ee5 s\u01a1 \u0111\u1ed3 d\u01b0\u1edbi d\u1ea1ng m\u00e3 mi\u1ec5n ph\u00ed c\u1ee7a ch\u00fang t\u00f4i ngay h\u00f4m nay!","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\/vn\/mastering-architecture-visuals-how-to-build-a-c4-system-context-diagram-in-plantuml\/","og_locale":"vi_VN","og_type":"article","og_title":"X\u00e2y d\u1ef1ng s\u01a1 \u0111\u1ed3 ng\u1eef c\u1ea3nh h\u1ec7 th\u1ed1ng C4 v\u1edbi PlantUML | VPasCode","og_description":"T\u00ecm hi\u1ec3u c\u00e1ch thi\u1ebft k\u1ebf s\u01a1 \u0111\u1ed3 ng\u1eef c\u1ea3nh h\u1ec7 th\u1ed1ng C4 cho m\u1ed9t c\u1eeda h\u00e0ng t\u1ea1p h\u00f3a tr\u1ef1c tuy\u1ebfn b\u1eb1ng PlantUML v\u00e0 VPasCode. H\u00e3y th\u1eed c\u00f4ng c\u1ee5 s\u01a1 \u0111\u1ed3 d\u01b0\u1edbi d\u1ea1ng m\u00e3 mi\u1ec5n ph\u00ed c\u1ee7a ch\u00fang t\u00f4i ngay h\u00f4m nay!","og_url":"https:\/\/www.vpascode.com\/vn\/mastering-architecture-visuals-how-to-build-a-c4-system-context-diagram-in-plantuml\/","og_site_name":"VPasCode","article_published_time":"2026-08-22T07:19:42+00:00","article_modified_time":"2026-09-04T00:14:21+00:00","og_image":[{"width":1376,"height":768,"url":"https:\/\/www.vpascode.com\/vn\/wp-content\/uploads\/sites\/12\/2026\/08\/build-c4-system-context-diagram-plantuml-vpascode.jpg","type":"image\/jpeg"}],"author":"jick","twitter_card":"summary_large_image","twitter_misc":{"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi":false,"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc":"3 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.vpascode.com\/vn\/mastering-architecture-visuals-how-to-build-a-c4-system-context-diagram-in-plantuml\/#article","isPartOf":{"@id":"https:\/\/www.vpascode.com\/vn\/mastering-architecture-visuals-how-to-build-a-c4-system-context-diagram-in-plantuml\/"},"author":{"name":"jick","@id":"https:\/\/www.vpascode.com\/vn\/#\/schema\/person\/cd8aa8455bd8bc6827b3efdfa79ad3a6"},"headline":"L\u00e0m ch\u1ee7 tr\u1ef1c quan ki\u1ebfn tr\u00fac: C\u00e1ch x\u00e2y d\u1ef1ng s\u01a1 \u0111\u1ed3 ng\u1eef c\u1ea3nh h\u1ec7 th\u1ed1ng C4 trong PlantUML","datePublished":"2026-08-22T07:19:42+00:00","dateModified":"2026-09-04T00:14:21+00:00","mainEntityOfPage":{"@id":"https:\/\/www.vpascode.com\/vn\/mastering-architecture-visuals-how-to-build-a-c4-system-context-diagram-in-plantuml\/"},"wordCount":1585,"commentCount":0,"publisher":{"@id":"https:\/\/www.vpascode.com\/vn\/#organization"},"image":{"@id":"https:\/\/www.vpascode.com\/vn\/mastering-architecture-visuals-how-to-build-a-c4-system-context-diagram-in-plantuml\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vpascode.com\/vn\/wp-content\/uploads\/sites\/12\/2026\/08\/build-c4-system-context-diagram-plantuml-vpascode.jpg","articleSection":["Tutorials &amp; Guides"],"inLanguage":"vi","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.vpascode.com\/vn\/mastering-architecture-visuals-how-to-build-a-c4-system-context-diagram-in-plantuml\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.vpascode.com\/vn\/mastering-architecture-visuals-how-to-build-a-c4-system-context-diagram-in-plantuml\/","url":"https:\/\/www.vpascode.com\/vn\/mastering-architecture-visuals-how-to-build-a-c4-system-context-diagram-in-plantuml\/","name":"X\u00e2y d\u1ef1ng s\u01a1 \u0111\u1ed3 ng\u1eef c\u1ea3nh h\u1ec7 th\u1ed1ng C4 v\u1edbi PlantUML | VPasCode","isPartOf":{"@id":"https:\/\/www.vpascode.com\/vn\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vpascode.com\/vn\/mastering-architecture-visuals-how-to-build-a-c4-system-context-diagram-in-plantuml\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/vn\/mastering-architecture-visuals-how-to-build-a-c4-system-context-diagram-in-plantuml\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vpascode.com\/vn\/wp-content\/uploads\/sites\/12\/2026\/08\/build-c4-system-context-diagram-plantuml-vpascode.jpg","datePublished":"2026-08-22T07:19:42+00:00","dateModified":"2026-09-04T00:14:21+00:00","description":"T\u00ecm hi\u1ec3u c\u00e1ch thi\u1ebft k\u1ebf s\u01a1 \u0111\u1ed3 ng\u1eef c\u1ea3nh h\u1ec7 th\u1ed1ng C4 cho m\u1ed9t c\u1eeda h\u00e0ng t\u1ea1p h\u00f3a tr\u1ef1c tuy\u1ebfn b\u1eb1ng PlantUML v\u00e0 VPasCode. H\u00e3y th\u1eed c\u00f4ng c\u1ee5 s\u01a1 \u0111\u1ed3 d\u01b0\u1edbi d\u1ea1ng m\u00e3 mi\u1ec5n ph\u00ed c\u1ee7a ch\u00fang t\u00f4i ngay h\u00f4m nay!","breadcrumb":{"@id":"https:\/\/www.vpascode.com\/vn\/mastering-architecture-visuals-how-to-build-a-c4-system-context-diagram-in-plantuml\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/vn\/mastering-architecture-visuals-how-to-build-a-c4-system-context-diagram-in-plantuml\/"]}]},{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/www.vpascode.com\/vn\/mastering-architecture-visuals-how-to-build-a-c4-system-context-diagram-in-plantuml\/#primaryimage","url":"https:\/\/www.vpascode.com\/vn\/wp-content\/uploads\/sites\/12\/2026\/08\/build-c4-system-context-diagram-plantuml-vpascode.jpg","contentUrl":"https:\/\/www.vpascode.com\/vn\/wp-content\/uploads\/sites\/12\/2026\/08\/build-c4-system-context-diagram-plantuml-vpascode.jpg","width":1376,"height":768},{"@type":"BreadcrumbList","@id":"https:\/\/www.vpascode.com\/vn\/mastering-architecture-visuals-how-to-build-a-c4-system-context-diagram-in-plantuml\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vpascode.com\/vn\/"},{"@type":"ListItem","position":2,"name":"L\u00e0m ch\u1ee7 tr\u1ef1c quan ki\u1ebfn tr\u00fac: C\u00e1ch x\u00e2y d\u1ef1ng s\u01a1 \u0111\u1ed3 ng\u1eef c\u1ea3nh h\u1ec7 th\u1ed1ng C4 trong PlantUML"}]},{"@type":"WebSite","@id":"https:\/\/www.vpascode.com\/vn\/#website","url":"https:\/\/www.vpascode.com\/vn\/","name":"VPasCode","description":"by Visual Paradigm","publisher":{"@id":"https:\/\/www.vpascode.com\/vn\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vpascode.com\/vn\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"vi"},{"@type":"Organization","@id":"https:\/\/www.vpascode.com\/vn\/#organization","name":"VPasCode","url":"https:\/\/www.vpascode.com\/vn\/","logo":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/www.vpascode.com\/vn\/#\/schema\/logo\/image\/","url":"https:\/\/www.vpascode.com\/vn\/wp-content\/uploads\/sites\/12\/2026\/06\/cropped-vp-online-logo-v1.png","contentUrl":"https:\/\/www.vpascode.com\/vn\/wp-content\/uploads\/sites\/12\/2026\/06\/cropped-vp-online-logo-v1.png","width":128,"height":138,"caption":"VPasCode"},"image":{"@id":"https:\/\/www.vpascode.com\/vn\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.vpascode.com\/vn\/#\/schema\/person\/cd8aa8455bd8bc6827b3efdfa79ad3a6","name":"jick","image":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/secure.gravatar.com\/avatar\/0c89451a99649a6ebefa14a9167db0960c327e8c33ea79fdb68fc38aa18d768a?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/0c89451a99649a6ebefa14a9167db0960c327e8c33ea79fdb68fc38aa18d768a?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0c89451a99649a6ebefa14a9167db0960c327e8c33ea79fdb68fc38aa18d768a?s=96&d=mm&r=g","caption":"jick"},"url":"https:\/\/www.vpascode.com\/vn\/author\/jick\/"}]}},"_links":{"self":[{"href":"https:\/\/www.vpascode.com\/vn\/wp-json\/wp\/v2\/posts\/2290","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vpascode.com\/vn\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.vpascode.com\/vn\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.vpascode.com\/vn\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vpascode.com\/vn\/wp-json\/wp\/v2\/comments?post=2290"}],"version-history":[{"count":0,"href":"https:\/\/www.vpascode.com\/vn\/wp-json\/wp\/v2\/posts\/2290\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.vpascode.com\/vn\/wp-json\/wp\/v2\/media\/2291"}],"wp:attachment":[{"href":"https:\/\/www.vpascode.com\/vn\/wp-json\/wp\/v2\/media?parent=2290"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vpascode.com\/vn\/wp-json\/wp\/v2\/categories?post=2290"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vpascode.com\/vn\/wp-json\/wp\/v2\/tags?post=2290"},{"taxonomy":"asset-category","embeddable":true,"href":"https:\/\/www.vpascode.com\/vn\/wp-json\/wp\/v2\/asset-category?post=2290"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}