{"id":11968,"date":"2026-03-05T12:00:41","date_gmt":"2026-03-05T04:00:41","guid":{"rendered":"https:\/\/www.cybermedian.com\/vn\/zooming-all-the-way-in-understanding-c4-code-diagrams-what-they-are-when-they-add-value-and-practical-plantuml-examples\/"},"modified":"2026-03-05T12:00:41","modified_gmt":"2026-03-05T04:00:41","slug":"zooming-all-the-way-in-understanding-c4-code-diagrams-what-they-are-when-they-add-value-and-practical-plantuml-examples","status":"publish","type":"post","link":"https:\/\/www.cybermedian.com\/vn\/zooming-all-the-way-in-understanding-c4-code-diagrams-what-they-are-when-they-add-value-and-practical-plantuml-examples\/","title":{"rendered":"Thu nh\u1ecf T\u1ed1i \u0110a: Hi\u1ec3u V\u1ec1 S\u01a1 \u0110\u1ed3 M\u00e3 Ngu\u1ed3n C4 \u2013 Ch\u00fang L\u00e0 G\u00ec, Khi N\u00e0o T\u1ea1o Gi\u00e1 Tr\u1ecb, V\u00e0 C\u00e1c V\u00ed D\u1ee5 Th\u1ef1c T\u1ebf V\u1edbi PlantUML"},"content":{"rendered":"<h3>S\u01a1 \u0111\u1ed3 m\u00e3 ngu\u1ed3n C4 l\u00e0 g\u00ec?<\/h3>\n<p>S\u01a1 \u0111\u1ed3 m\u00e3 ngu\u1ed3n l\u00e0<strong>M\u1ee9c 4<\/strong>\u2014 m\u1ee9c s\u00e2u nh\u1ea5t, chi ti\u1ebft nh\u1ea5t trong m\u00f4 h\u00ecnh C4 c\u1ee7a Simon Brown.<\/p>\n<p><img alt=\"The Ultimate Guide to C4 Model Visualization with Visual Paradigm's AI Tools - ArchiMetric\" decoding=\"async\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/c4-static.png\"\/><\/p>\n<p>N\u00f3 th\u1ec3 hi\u1ec7n:<\/p>\n<ul>\n<li>\n<p><strong>L\u1edbp<\/strong>,\u00a0<strong>giao di\u1ec7n<\/strong>,\u00a0<strong>enum<\/strong>,\u00a0<strong>b\u1ea3n ghi<\/strong>, ho\u1eb7c c\u00e1c c\u1ea5u tr\u00fac c\u1ea5p m\u00e3 ngu\u1ed3n kh\u00e1c th\u1ef1c hi\u1ec7n m\u1ed9t th\u00e0nh ph\u1ea7n c\u1ee5 th\u1ec3<strong>th\u00e0nh ph\u1ea7n<\/strong> (t\u1eeb M\u1ee9c 3).<\/p>\n<\/li>\n<li>\n<p><strong>M\u1ed1i quan h\u1ec7<\/strong> gi\u1eefa c\u00e1c l\u1edbp \u0111\u00f3 (k\u1ebf th\u1eeba, t\u1ed5ng h\u1ee3p, ph\u1ee5 thu\u1ed9c, th\u1ef1c hi\u1ec7n giao di\u1ec7n, v.v.).<\/p>\n<\/li>\n<li>\n<p>C\u00e1c y\u1ebfu t\u1ed1 thi\u1ebft k\u1ebf ch\u00ednh<strong>y\u1ebfu t\u1ed1 thi\u1ebft k\u1ebf<\/strong> nh\u01b0 c\u00e1c m\u1eabu \u0111\u01b0\u1ee3c \u00e1p d\u1ee5ng b\u00ean trong th\u00e0nh ph\u1ea7n (v\u00ed d\u1ee5: kho l\u01b0u tr\u1eef, d\u1ecbch v\u1ee5, DTO, th\u1ef1c th\u1ec3 mi\u1ec1n, nh\u00e0 m\u00e1y).<\/p>\n<\/li>\n<\/ul>\n<p>Trong th\u1ef1c t\u1ebf, m\u1ee9c n\u00e0y g\u1ea7n nh\u01b0 lu\u00f4n l\u00e0 m\u1ed9t<strong>s\u01a1 \u0111\u1ed3 l\u1edbp UML<\/strong> (ho\u1eb7c m\u1ed9t bi\u1ebfn th\u1ec3 \u0111\u01a1n gi\u1ea3n h\u00f3a) t\u1eadp trung v\u00e0o m\u1ed9t (ho\u1eb7c r\u1ea5t \u00edt) th\u00e0nh ph\u1ea7n.<\/p>\n<p>L\u01b0u \u00fd quan tr\u1ecdng:<\/p>\n<ul>\n<li>\n<p>M\u1ee9c 4 l\u00e0<strong>kh\u00f4ng<\/strong> v\u1ec1 to\u00e0n b\u1ed9 c\u01a1 s\u1edf m\u00e3 ngu\u1ed3n.<\/p>\n<\/li>\n<li>\n<p>N\u00f3 l\u00e0<strong>kh\u00f4ng<\/strong>b\u1eaft bu\u1ed9c ph\u1ea3i hi\u1ec3n th\u1ecb m\u1ecdi l\u1edbp.<\/p>\n<\/li>\n<li>\n<p>N\u00f3 \u00e1nh x\u1ea1\u00a0<strong>ch\u1ec9 c\u1ea5u tr\u00fac thi\u1ebft y\u1ebfu<\/strong>c\u1ea7n thi\u1ebft \u0111\u1ec3 hi\u1ec3u c\u00e1ch m\u1ed9t th\u00e0nh ph\u1ea7n ph\u1ee9c t\u1ea1p ho\u1eb7c quan tr\u1ecdng th\u1ef1c s\u1ef1 \u0111\u01b0\u1ee3c x\u00e2y d\u1ef1ng.<\/p>\n<\/li>\n<li>\n<p>Khuy\u1ebfn ngh\u1ecb ch\u00ednh th\u1ee9c c\u1ee7a C4:\u00a0<strong>l\u00fd t\u01b0\u1edfng l\u00e0 \u0111\u01b0\u1ee3c sinh t\u1ef1 \u0111\u1ed9ng<\/strong>t\u1eeb m\u00e3 ngu\u1ed3n (th\u00f4ng qua c\u00e1c c\u00f4ng c\u1ee5 nh\u01b0 Doxygen, Javadoc + plugin UML, yWorks, Structurizr, CodeSee, v.v.) thay v\u00ec v\u1ebd tay.<\/p>\n<\/li>\n<\/ul>\n<h3>Khi n\u00e0o n\u00ean t\u1ea1o s\u01a1 \u0111\u1ed3 m\u00e3 ngu\u1ed3n<\/h3>\n<p><strong>T\u1ea1o s\u01a1 \u0111\u1ed3 c\u1ea5p \u0111\u1ed9 4 m\u1ed9t c\u00e1ch ti\u1ebft ki\u1ec7m \u2014 ch\u1ec9 trong nh\u1eefng t\u00ecnh hu\u1ed1ng n\u00e0y:<\/strong><\/p>\n<ul>\n<li>\n<p>Th\u00e0nh ph\u1ea7n n\u00e0y l\u00e0\u00a0<strong>r\u1ea5t ph\u1ee9c t\u1ea1p<\/strong>,\u00a0<strong>chi\u1ebfn l\u01b0\u1ee3c, quan tr\u1ecdng<\/strong>, ho\u1eb7c\u00a0<strong>kh\u00f3 hi\u1ec3u<\/strong>ch\u1ec9 t\u1eeb m\u00e3 ngu\u1ed3n (v\u00ed d\u1ee5: logic mi\u1ec1n ph\u1ee9c t\u1ea1p, s\u1eed d\u1ee5ng n\u1eb7ng c\u00e1c m\u1eabu thi\u1ebft k\u1ebf, lu\u1ed3ng m\u00e3 h\u00f3a, m\u00e1y tr\u1ea1ng th\u00e1i, m\u00e3 ngu\u1ed3n c\u0169 \u0111\u1ea7y n\u1ee3 k\u1ef9 thu\u1eadt).<\/p>\n<\/li>\n<li>\n<p>B\u1ea1n \u0111ang l\u00e0m vi\u1ec7c trong m\u1ed9t\u00a0<strong>ng\u00e0nh c\u00f4ng nghi\u1ec7p b\u1ecb qu\u1ea3n l\u00fd nghi\u00eam ng\u1eb7t<\/strong> (t\u00e0i ch\u00ednh, y t\u1ebf, h\u00e0ng kh\u00f4ng v\u0169 tr\u1ee5, qu\u1ed1c ph\u00f2ng) n\u01a1i c\u00e1c ki\u1ec3m to\u00e1n vi\u00ean ho\u1eb7c nh\u00f3m tu\u00e2n th\u1ee7 y\u00eau c\u1ea7u \u00e1nh x\u1ea1 r\u00f5 r\u00e0ng t\u1eeb ki\u1ebfn tr\u00fac \u2192 thi\u1ebft k\u1ebf \u2192 tri\u1ec3n khai.<\/p>\n<\/li>\n<li>\n<p>Trong qu\u00e1 tr\u00ecnh\u00a0<strong>t\u00e1i c\u1ea5u tr\u00fac l\u1edbn<\/strong>,\u00a0<strong>l\u00e0m suy y\u1ebfu m\u1ed9t th\u00e0nh ph\u1ea7n c\u0169<\/strong>, ho\u1eb7c\u00a0<strong>gi\u1edbi thi\u1ec7u m\u1ed9t m\u1eabu ki\u1ebfn tr\u00fac m\u1edbi<\/strong> (h\u00ecnh ch\u1eef nh\u1eadt, s\u1ea1ch, l\u00e1t d\u1ecdc, t\u1eadp h\u1ee3p DDD) \u2014 c\u00e1c h\u00ecnh \u1ea3nh tr\u01b0\u1edbc\/sau gi\u00fap truy\u1ec1n \u0111\u1ea1t s\u1ef1 thay \u0111\u1ed5i.<\/p>\n<\/li>\n<li>\n<p>Ch\u00e0o \u0111\u00f3n\u00a0<strong>l\u1eadp tr\u00ecnh vi\u00ean c\u1ea5p cao<\/strong> ho\u1eb7c\u00a0<strong>ki\u1ebfn tr\u00fac s\u01b0<\/strong>nh\u1eefng ng\u01b0\u1eddi c\u1ea7n n\u1eafm nhanh c\u1ea5u tr\u00fac n\u1ed9i b\u1ed9 kh\u00f4ng r\u00f5 r\u00e0ng c\u1ee7a m\u1ed9t \u0111o\u1ea1n m\u00e3 c\u00f3 r\u1ee7i ro cao.<\/p>\n<\/li>\n<li>\n<p>B\u1ea1n \u0111\u00e3 \u0111\u1ea7u t\u01b0 v\u00e0o\u00a0<strong>t\u1ef1 \u0111\u1ed9ng sinh<\/strong>c\u00f4ng c\u1ee5 \u2014 do \u0111\u00f3 vi\u1ec7c duy tr\u00ec c\u1ea5p \u0111\u1ed9 4 g\u1ea7n nh\u01b0 kh\u00f4ng t\u1ed1n k\u00e9m g\u00ec.<\/p>\n<\/li>\n<li>\n<p>\u0110\u1ed9i \u0111\u00e3 \u0111\u1ed3ng \u00fd r\u1eb1ng\u00a0<strong>\u201ct\u00e0i li\u1ec7u s\u1ed1ng\u201d<\/strong>\u1edf c\u1ea5p \u0111\u1ed9 l\u1edbp l\u00e0 c\u00f3 gi\u00e1 tr\u1ecb \u0111\u1ed1i v\u1edbi h\u1ec7 th\u1ed1ng con c\u1ee5 th\u1ec3 n\u00e0y.<\/p>\n<\/li>\n<\/ul>\n<p><strong>Kh\u00f4ng t\u1ea1o s\u01a1 \u0111\u1ed3 c\u1ea5p \u0111\u1ed9 4 khi:<\/strong><\/p>\n<ul>\n<li>\n<p>C\u1ea5u tr\u00fac th\u00e0nh ph\u1ea7n r\u00f5 r\u00e0ng t\u1eeb t\u00ean g\u1ecdi t\u1ed1t, k\u00edch th\u01b0\u1edbc nh\u1ecf, ho\u1eb7c m\u00e3 s\u1ea1ch (h\u1ea7u h\u1ebft d\u1ecbch v\u1ee5 vi m\u00f4 hi\u1ec7n \u0111\u1ea1i \u0111\u1ec1u thu\u1ed9c nh\u00f3m n\u00e0y).<\/p>\n<\/li>\n<li>\n<p>B\u1ea1n \u0111\u00e3 c\u00f3 s\u1eb5n\u00a0<strong>b\u1ed9 ki\u1ec3m th\u1eed \u0111\u01a1n v\u1ecb\/t\u00edch h\u1ee3p t\u1ed1t<\/strong>,\u00a0<strong>giao di\u1ec7n r\u00f5 r\u00e0ng<\/strong>, v\u00e0\u00a0<strong>c\u00e1c nh\u1eadn x\u00e9t gi\u1ea3i th\u00edch<\/strong>.<\/p>\n<\/li>\n<li>\n<p>H\u1ea7u h\u1ebft th\u00e0nh vi\u00ean trong \u0111\u1ed9i c\u00f3 th\u1ec3 di chuy\u1ec3n qua m\u00e3 ngu\u1ed3n m\u1ed9t c\u00e1ch d\u1ec5 d\u00e0ng.<\/p>\n<\/li>\n<li>\n<p>Chi ph\u00ed b\u1ea3o tr\u00ec v\u01b0\u1ee3t qu\u00e1 l\u1ee3i \u00edch (s\u01a1 \u0111\u1ed3 l\u1edbp v\u1ebd tay nhanh l\u1ed7i th\u1eddi).<\/p>\n<\/li>\n<\/ul>\n<p>Simon Brown v\u00e0 ph\u1ea7n l\u1edbn c\u00e1c chuy\u00ean gia nh\u1ea5n m\u1ea1nh:\u00a0<strong>H\u1ea7u h\u1ebft c\u00e1c \u0111\u1ed9i kh\u00f4ng bao gi\u1edd c\u1ea7n c\u1ea5p \u0111\u1ed9 4<\/strong>.\u00a0<strong>C\u1ea5p \u0111\u1ed9 1 + 2<\/strong>ph\u1ee7 kho\u1ea3ng 80\u201390% nhu c\u1ea7u giao ti\u1ebfp;\u00a0<strong>C\u1ea5p \u0111\u1ed9 3<\/strong>x\u1eed l\u00fd ph\u1ea7n l\u1edbn ph\u1ea7n c\u00f2n l\u1ea1i. C\u1ea5p \u0111\u1ed9 4 l\u00e0 ngo\u1ea1i l\u1ec7, kh\u00f4ng ph\u1ea3i quy lu\u1eadt.<\/p>\n<h3>T\u1ea1i sao n\u00ean s\u1eed d\u1ee5ng s\u01a1 \u0111\u1ed3 m\u00e3 ngu\u1ed3n? (Khi ch\u00fang mang l\u1ea1i gi\u00e1 tr\u1ecb)<\/h3>\n<ul>\n<li>\n<p><strong>C\u1ea7u n\u1ed1i gi\u1eefa ki\u1ebfn tr\u00fac \u2194 tri\u1ec3n khai<\/strong>\u00a0\u2014 Cho th\u1ea5y c\u00e1ch c\u00e1c th\u00e0nh ph\u1ea7n c\u1ea5p cao th\u1ef1c s\u1ef1 \u0111\u01b0\u1ee3c tri\u1ec3n khai trong m\u00e3 ngu\u1ed3n.<\/p>\n<\/li>\n<li>\n<p><strong>L\u00e0m r\u00f5 thi\u1ebft k\u1ebf n\u1ed9i b\u1ed9 ph\u1ee9c t\u1ea1p<\/strong>\u00a0\u2014 B\u1ed9c l\u1ed9 vi\u1ec7c s\u1eed d\u1ee5ng c\u00e1c m\u1eabu (Chi\u1ebfn l\u01b0\u1ee3c, Nh\u00e0 m\u00e1y, B\u1ed9 trang tr\u00ed, Kho l\u01b0u tr\u1eef), vi ph\u1ea1m ph\u00e2n l\u1edbp, s\u1ef1 g\u1eafn k\u1ebft ch\u1eb7t ch\u1ebd, ho\u1eb7c m\u00f4 h\u00ecnh h\u00f3a mi\u1ec1n th\u00f4ng minh.<\/p>\n<\/li>\n<li>\n<p><strong>H\u1ed7 tr\u1ee3 ki\u1ec3m to\u00e1n v\u00e0 tu\u00e2n th\u1ee7<\/strong>\u00a0\u2014 Ch\u1ee9ng minh r\u1eb1ng c\u00e1c quy\u1ebft \u0111\u1ecbnh ki\u1ebfn tr\u00fac \u0111\u01b0\u1ee3c th\u1ef1c hi\u1ec7n \u0111\u00fang trong m\u00e3 ngu\u1ed3n.<\/p>\n<\/li>\n<li>\n<p><strong>H\u1ed7 tr\u1ee3 c\u00e1c cu\u1ed9c th\u1ea3o lu\u1eadn v\u1ec1 t\u00e1i c\u1ea5u tr\u00fac v\u00e0 di chuy\u1ec3n<\/strong>\u00a0\u2014 C\u1ea5u tr\u00fac l\u1edbp tr\u01b0\u1edbc\/sau gi\u00fap c\u00e1c \u0111\u1ec1 xu\u1ea5t tr\u1edf n\u00ean c\u1ee5 th\u1ec3 h\u01a1n.<\/p>\n<\/li>\n<li>\n<p><strong>Gi\u1ea3m thi\u1ec3u \u201cki\u1ebfn th\u1ee9c d\u00e2n t\u1ed9c\u201d<\/strong>\u00a0\u2014 Gi\u00fap nh\u1eefng nh\u00e2n vi\u00ean c\u1ea5p cao m\u1edbi hi\u1ec3u nhanh c\u00e1c ph\u1ea7n ph\u1ee9c t\u1ea1p h\u01a1n so v\u1edbi vi\u1ec7c \u0111\u1ecdc t\u1ea5t c\u1ea3 c\u00e1c t\u1ec7p ngu\u1ed3n.<\/p>\n<\/li>\n<li>\n<p><strong>C\u00e1c phi\u00ean b\u1ea3n \u0111\u01b0\u1ee3c t\u1ea1o t\u1ef1 \u0111\u1ed9ng tr\u1edf th\u00e0nh &#8220;t\u00e0i li\u1ec7u s\u1ed1ng&#8221;<\/strong>\u00a0\u2014 N\u1ebfu c\u00f4ng c\u1ee5 \u0111\u00e3 \u0111\u01b0\u1ee3c tri\u1ec3n khai, ch\u00fang s\u1ebd lu\u00f4n ch\u00ednh x\u00e1c v\u1edbi g\u1ea7n nh\u01b0 kh\u00f4ng c\u1ea7n n\u1ed7 l\u1ef1c.<\/p>\n<\/li>\n<\/ul>\n<h3>L\u00e0m th\u1ebf n\u00e0o \u0111\u1ec3 t\u1ea1o m\u1ed9t s\u01a1 \u0111\u1ed3 m\u00e3 ngu\u1ed3n tuy\u1ec7t v\u1eddi (B\u01b0\u1edbc t\u1eebng b\u01b0\u1edbc + Th\u1ef1c h\u00e0nh t\u1ed1t nh\u1ea5t)<\/h3>\n<ol>\n<li>\n<p><strong>Ch\u1ecdn M\u1ed8T th\u00e0nh ph\u1ea7n<\/strong>\u00a0\u2014 Th\u01b0\u1eddng \u0111\u1ebfn t\u1eeb s\u01a1 \u0111\u1ed3 c\u1ea5p 3, n\u01a1i \u0111\u1ed9 ph\u1ee9c t\u1ea1p b\u00ean trong l\u00fd gi\u1ea3i \u0111\u01b0\u1ee3c vi\u1ec7c ph\u00f3ng to.<\/p>\n<\/li>\n<li>\n<p><strong>Quy\u1ebft \u0111\u1ecbnh: v\u1ebd tay hay t\u1ea1o t\u1ef1 \u0111\u1ed9ng?<\/strong><\/p>\n<ul>\n<li>\n<p>V\u1ebd tay \u2192 ch\u1ec9 d\u00f9ng cho c\u00e1c bu\u1ed5i l\u00e0m vi\u1ec7c nh\u00f3m, \u0111\u1ec1 xu\u1ea5t, ho\u1eb7c c\u00e1c khu v\u1ef1c qu\u00e1 l\u1ed9n x\u1ed9n \u0111\u1ec3 c\u00f4ng c\u1ee5 t\u1ef1 \u0111\u1ed9ng x\u1eed l\u00fd.<\/p>\n<\/li>\n<li>\n<p>T\u1ea1o t\u1ef1 \u0111\u1ed9ng \u2192 \u0111\u01b0\u1ee3c \u01b0u ti\u00ean (PlantUML v\u1eabn c\u00f3 th\u1ec3 d\u00f9ng \u0111\u1ec3 \u0111\u1ecbnh d\u1ea1ng\/tinh ch\u1ec9nh \u0111\u1ea7u ra).<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><strong>T\u1eadp trung v\u00e0o nh\u1eefng \u0111i\u1ec1u thi\u1ebft y\u1ebfu<\/strong>\u00a0\u2014 Hi\u1ec3n th\u1ecb:<\/p>\n<ul>\n<li>\n<p>L\u1edbp v\u00e0 giao di\u1ec7n ch\u00ednh<\/p>\n<\/li>\n<li>\n<p>C\u00e1c m\u1ed1i quan h\u1ec7 quan tr\u1ecdng (\u2192 ph\u1ee5 thu\u1ed9c, \u2014 k\u1ebft h\u1ee3p, &lt;| th\u1ef1c hi\u1ec7n, ^ k\u1ebf th\u1eeba)<\/p>\n<\/li>\n<li>\n<p>C\u00e1c t\u1eadp h\u1ee3p, th\u1ef1c th\u1ec3, \u0111\u1ed1i t\u01b0\u1ee3ng gi\u00e1 tr\u1ecb (theo phong c\u00e1ch DDD)<\/p>\n<\/li>\n<li>\n<p>C\u00e1c m\u1eabu ho\u1eb7c m\u1eabu sai b\u1ea1n mu\u1ed1n l\u00e0m n\u1ed5i b\u1eadt<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><strong>Gi\u1eef cho nh\u1ecf g\u1ecdn<\/strong>\u00a0\u2014 T\u1ed1i \u0111a 8\u201315 l\u1edbp. N\u1ebfu l\u1edbn h\u01a1n \u2192 chia th\u00e0nh c\u00e1c s\u01a1 \u0111\u1ed3 t\u1eadp trung (v\u00ed d\u1ee5: \u201cm\u1ea3nh X\u00e1c th\u1ef1c\u201d, \u201cth\u1ef1c th\u1ec3 x\u1eed l\u00fd \u0111\u01a1n h\u00e0ng\u201d).<\/p>\n<\/li>\n<li>\n<p><strong>Th\u1ef1c h\u00e0nh t\u1ed1t nh\u1ea5t<\/strong><\/p>\n<ul>\n<li>\n<p>\u01afu ti\u00ean\u00a0<strong>t\u1ea1o t\u1ef1 \u0111\u1ed9ng<\/strong>\u00a0m\u1ecdi l\u00fac c\u00f3 th\u1ec3 (\u00edt l\u1ed7i th\u1eddi h\u01a1n).<\/p>\n<\/li>\n<li>\n<p>S\u1eed d\u1ee5ng\u00a0<strong>c\u00fa ph\u00e1p PlantUML classDiagram<\/strong>\u00a0c\u00fa ph\u00e1p \u2014 s\u1ea1ch s\u1ebd v\u00e0 c\u00f3 th\u1ec3 ki\u1ec3m so\u00e1t phi\u00ean b\u1ea3n.<\/p>\n<\/li>\n<li>\n<p>Th\u00eam\u00a0<strong>ghi ch\u00fa<\/strong>\u00a0\u0111\u1ed1i v\u1edbi c\u00e1c quy\u1ebft \u0111\u1ecbnh kh\u00f4ng r\u00f5 r\u00e0ng (v\u00ed d\u1ee5: \u201cS\u1eed d\u1ee5ng M\u00f4 h\u00ecnh mi\u1ec1n m\u1ecfng \u2013 \u0111\u00e3 l\u00ean k\u1ebf ho\u1ea1ch t\u00e1i c\u1ea5u tr\u00fac\u201d).<\/p>\n<\/li>\n<li>\n<p>Tr\u00e1nh hi\u1ec3n th\u1ecb\u00a0<strong>m\u1ecdi th\u1ee9<\/strong>\u00a0\u2014 b\u1ecf qua c\u00e1c ph\u01b0\u01a1ng th\u1ee9c truy xu\u1ea5t\/\u0111\u1eb7t gi\u00e1 tr\u1ecb \u0111\u01a1n gi\u1ea3n, c\u00e1c l\u1edbp ti\u1ec7n \u00edch.<\/p>\n<\/li>\n<li>\n<p>L\u01b0u trong kho \u2192 x\u1eed l\u00fd nh\u01b0 m\u00e3 ngu\u1ed3n (g\u1eedi t\u1ec7p .puml g\u1ea7n th\u00e0nh ph\u1ea7n).<\/p>\n<\/li>\n<li>\n<p>S\u1eed d\u1ee5ng h\u1ea1n ch\u1ebf \u2014 m\u1ed9t cho m\u1ed7i th\u00e0nh ph\u1ea7n ph\u1ee9c t\u1ea1p, kh\u00f4ng ph\u1ea3i m\u1ed7i microservice.<\/p>\n<\/li>\n<li>\n<p>K\u1ebft h\u1ee3p v\u1edbi\u00a0<strong>c\u00e1c ch\u1ebf \u0111\u1ed9 xem \u0111\u1ed9ng<\/strong>\u00a0(sequence\/collaboration) n\u1ebfu lu\u1ed3ng th\u1eddi gian ch\u1ea1y quan tr\u1ecdng h\u01a1n c\u1ea5u tr\u00fac t\u0129nh.<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<h3>V\u00ed d\u1ee5 PlantUML \u2013 Th\u00e0nh ph\u1ea7n X\u00e1c th\u1ef1c (m\u1edf r\u1ed9ng theo phong c\u00e1ch Big Bank plc)<\/h3>\n<p>D\u01b0\u1edbi \u0111\u00e2y l\u00e0 m\u1ed9t v\u00ed d\u1ee5 c\u1ea5p \u0111\u1ed9 4 th\u1ef1c t\u1ebf, ph\u00f3ng to v\u00e0o\u00a0<strong>Th\u00e0nh ph\u1ea7n B\u1ea3o m\u1eadt \/ X\u00e1c th\u1ef1c<\/strong>\u00a0t\u1eeb c\u00e1c s\u01a1 \u0111\u1ed3 \u1ee8ng d\u1ee5ng API tr\u01b0\u1edbc \u0111\u00f3.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/uml.planttext.com\/plantuml\/png\/fLNRRjD047sFb7-O9sXKKWbKNg8eQjeAsWAYQehwlB77yTBrhZKxJXG14l_07_8bpFhIsha9gM_sd9apbpExU-PP4HUPwVTOiq6uE8NFk4G3f_3tzn-uS372fLOBKja8fWMdQ5b7YhMpeAtN0azlhs6QvwOsztlzdd_KDbSI0vcpBah9PGXC1ROXdwhOhRHTGAACxq2HKTx3ZtuFu5n5ZmjoXOqld7443wbcB057CL9bF3VY5OnJ8hVgs7w5UjJSCwc8Q-9k7xVabj87LVcEGJsZU1GHnk57AXni3g0chpXlLdo8TWZi7l79E0h-zsrBvLHuf4jafOsV8IrrX2FujcLxOPsTl4rv7eM2F-5w13CcKQKoBvNHiURrjVsYZT7YvMpiHs1SvN4C2xH8KaB9UjHgOD1cEgwOdlpAQOZ7t3c3oZPK79grAiCFiZ9TpuQhx4LRHafKX3kcq-Xed8e3UhvkIClgmiUWCzNEV2uLgxdok8-tqkWES-SrErfNJC__BydTPMhwIBIDT_DypOEyoem3EDcYQXSS8hhAvkAsaZDqfNpQHKWa4ObdoECx-PmStlDI9HYFuUZ-ZQCerV5WywAOJ9fISiaIwLoPZI44hBN2qjhyEqPS0M7H7MdMeIevt4OGeHr_92Lh44zhUDqK-Xhkq9IPVQfpOTz_DeT5FfnidubHcDb_1EvOaYRqm1wT5Fd9prt11wE6TRxMWZIvDioDf-1of0koFanbZt1rCPitHhzd7IEGNgGCBjb_lGM9RabdIXAhhko9SIj8v2g-URWVXgvYaEU6KRRBottZVL2etqCRGqZsb7Jkc5rMPzsw96TwOJsyWYMIJcGb0hkNGOI7v6hs_ksxBkEP_CZxzWy0\"\/><\/p>\n<pre class=\"lang-plantuml\"><code data-language=\"plantuml\">@startuml\r\ntitle C4 C\u1ea5p \u0111\u1ed9 4 \u2013 S\u01a1 \u0111\u1ed3 M\u00e3 ngu\u1ed3n: X\u00e1c th\u1ef1c b\u00ean trong \u1ee8ng d\u1ee5ng API\r\n\r\nskinparam monochrome true\r\nskinparam shadowing false\r\nskinparam class {\r\n  BackgroundColor White\r\n  BorderColor Black\r\n  ArrowColor Black\r\n}\r\n\r\nabstract class AuthenticationProvider {\r\n  + authenticate(credentials): Authentication\r\n}\r\n\r\nclass JwtAuthenticationProvider {\r\n  - tokenProvider: JwtTokenProvider\r\n  - userDetailsService: UserDetailsService\r\n  + authenticate(credentials): Authentication\r\n}\r\n\r\nclass JwtTokenProvider {\r\n  - secretKey: String\r\n  - validityInMilliseconds: long\r\n  + generateToken(userDetails): String\r\n  + validateToken(token): boolean\r\n  + getUsernameFromToken(token): String\r\n}\r\n\r\ninterface UserDetailsService {\r\n  + loadUserByUsername(username): UserDetails\r\n}\r\n\r\nclass DatabaseUserDetailsService {\r\n  - userRepository: UserRepository\r\n  + loadUserByUsername(username): UserDetails\r\n}\r\n\r\nclass UserRepository {\r\n  + findByUsername(username): Optional&lt;User&gt;\r\n}\r\n\r\nclass User {\r\n  - username: String\r\n  - passwordHash: String\r\n  - roles: Set&lt;Role&gt;\r\n}\r\n\r\nclass JwtAuthenticationToken &lt;&lt; (T,orchid) Authentication &gt;&gt; {\r\n  - principal: UserDetails\r\n  - credentials: Object\r\n  - authorities: Collection&lt;GrantedAuthority&gt;\r\n}\r\n\r\n' M\u1ed1i quan h\u1ec7\r\nJwtAuthenticationProvider -up-&gt; JwtTokenProvider : s\u1eed d\u1ee5ng\r\nJwtAuthenticationProvider -up-&gt; UserDetailsService : s\u1eed d\u1ee5ng\r\nDatabaseUserDetailsService .up.|&gt; UserDetailsService\r\nDatabaseUserDetailsService --&gt; UserRepository : s\u1eed d\u1ee5ng\r\nUserRepository --&gt; User : tr\u1ea3 v\u1ec1\r\n\r\nJwtAuthenticationToken .up.|&gt; Authentication\r\n\r\nnote right of JwtAuthenticationProvider\r\n  Lu\u1ed3ng x\u00e1c th\u1ef1c ch\u00ednh cho c\u00e1c phi\u00ean kh\u00f4ng tr\u1ea1ng th\u00e1i d\u1ef1a tr\u00ean JWT\r\nend note\r\n\r\nnote bottom of JwtTokenProvider\r\n  K\u00fd v\u00e0 x\u00e1c minh JWT b\u1eb1ng HS512\r\nend note\r\n\r\n@enduml\r\n<\/code><\/pre>\n<p>S\u01a1 \u0111\u1ed3 nh\u1ecf n\u00e0y:<\/p>\n<ul>\n<li>\n<p>Ch\u1ec9 t\u1eadp trung v\u00e0o n\u1ed9i b\u1ed9 x\u00e1c th\u1ef1c<\/p>\n<\/li>\n<li>\n<p>Hi\u1ec3n th\u1ecb c\u00e1c l\u1edbp ch\u00ednh, giao di\u1ec7n v\u00e0 ph\u1ee5 thu\u1ed9c<\/p>\n<\/li>\n<li>\n<p>Nh\u1ea5n m\u1ea1nh c\u00e1c m\u1eabu (cung c\u1ea5p, kho l\u01b0u tr\u1eef)<\/p>\n<\/li>\n<li>\n<p>S\u1eed d\u1ee5ng ghi ch\u00fa \u0111\u1ec3 cung c\u1ea5p b\u1ed1i c\u1ea3nh<\/p>\n<\/li>\n<\/ul>\n<p>D\u00e1n v\u00e0o b\u1ea5t k\u1ef3 tr\u00ecnh render PlantUML n\u00e0o \u2014 t\u00f9y ch\u1ec9nh cho mi\u1ec1n c\u1ee7a b\u1ea1n (v\u00ed d\u1ee5: thay JWT b\u1eb1ng OAuth2, th\u00eam l\u1edbp MFA, v.v.).<\/p>\n<p class=\"\"><strong>L\u1eddi nh\u1eafc t\u00f3m t\u1eaft<\/strong>: C\u1ea5p \u0111\u1ed9 4 r\u1ea5t m\u1ea1nh m\u1ebd nh\u01b0ng\u00a0<strong>hi\u1ebfm<\/strong>. S\u1eed d\u1ee5ng m\u1ed9t c\u00e1ch c\u00f3 ch\u1ee7 \u00fd, \u01b0u ti\u00ean t\u1ef1 \u0111\u1ed9ng h\u00f3a, v\u00e0 \u0111\u1eebng \u0111\u1ec3 n\u00f3 tr\u1edf th\u00e0nh c\u00f4ng vi\u1ec7c v\u00f4 b\u1ed5. Ph\u1ea7n l\u1edbn gi\u00e1 tr\u1ecb trong C4 \u0111\u1ebfn t\u1eeb c\u00e1c c\u1ea5p \u0111\u1ed9 1\u20133. Ch\u00fac b\u1ea1n (ch\u1ecdn l\u1ecdc) m\u00f4 h\u00ecnh h\u00f3a vui v\u1ebb!<\/p>\n<h3>\nT\u00e0i nguy\u00ean<\/h3>\n<ul>\n<li><a href=\"https:\/\/www.archimetric.com\/the-ultimate-guide-to-c4-model-visualization-with-visual-paradigms-ai-tools\/\"><strong>H\u01b0\u1edbng d\u1eabn to\u00e0n di\u1ec7n v\u1ec1 Tr\u1ef1c quan h\u00f3a M\u00f4 h\u00ecnh C4 b\u1eb1ng C\u00f4ng c\u1ee5 AI c\u1ee7a Visual Paradigm<\/strong><\/a>: H\u01b0\u1edbng d\u1eabn n\u00e0y gi\u1ea3i th\u00edch c\u00e1ch t\u1eadn d\u1ee5ng c\u00e1c c\u00f4ng c\u1ee5 \u0111\u01b0\u1ee3c h\u1ed7 tr\u1ee3 AI \u0111\u1ec3 t\u1ef1 \u0111\u1ed9ng h\u00f3a v\u00e0 n\u00e2ng cao tr\u1ef1c quan h\u00f3a m\u00f4 h\u00ecnh C4 nh\u1eb1m thi\u1ebft k\u1ebf ki\u1ebfn tr\u00fac ph\u1ea7n m\u1ec1m nhanh h\u01a1n.<\/li>\n<li><a href=\"https:\/\/www.archimetric.com\/leveraging-visual-paradigms-ai-c4-studio-a-comprehensive-guide-to-streamlined-architectural-documentation\/\"><strong>T\u1eadn d\u1ee5ng Studio C4 AI c\u1ee7a Visual Paradigm \u0111\u1ec3 t\u00e0i li\u1ec7u h\u00f3a ki\u1ebfn tr\u00fac \u0111\u01b0\u1ee3c \u0111\u01a1n gi\u1ea3n h\u00f3a<\/strong><\/a>: B\u00e0i vi\u1ebft n\u00e0y chi ti\u1ebft c\u00e1ch s\u1eed d\u1ee5ng studio \u0111\u01b0\u1ee3c t\u0103ng c\u01b0\u1eddng AI \u0111\u1ec3 t\u1ea1o t\u00e0i li\u1ec7u h\u00f3a ki\u1ebfn tr\u00fac ph\u1ea7n m\u1ec1m s\u1ea1ch s\u1ebd, d\u1ec5 m\u1edf r\u1ed9ng v\u00e0 d\u1ec5 b\u1ea3o tr\u00ec.<\/li>\n<li><a href=\"https:\/\/blog.visual-paradigm.com\/the-ultimate-guide-to-c4-plantuml-studio-revolutionizing-software-architecture-design\/\"><strong>H\u01b0\u1edbng d\u1eabn to\u00e0n di\u1ec7n v\u1ec1 C4-PlantUML Studio: C\u00e1ch m\u1ea1ng h\u00f3a thi\u1ebft k\u1ebf ki\u1ebfn tr\u00fac ph\u1ea7n m\u1ec1m<\/strong><\/a>: T\u00e0i nguy\u00ean n\u00e0y kh\u00e1m ph\u00e1 vi\u1ec7c k\u1ebft h\u1ee3p t\u1ef1 \u0111\u1ed9ng h\u00f3a d\u1ef1a tr\u00ean AI, s\u1ef1 r\u00f5 r\u00e0ng c\u1ee7a m\u00f4 h\u00ecnh C4 v\u00e0 t\u00ednh linh ho\u1ea1t c\u1ee7a PlantUML th\u00e0nh m\u1ed9t c\u00f4ng c\u1ee5 m\u1ea1nh m\u1ebd duy nh\u1ea5t.<\/li>\n<li><a href=\"https:\/\/www.cybermedian.com\/%F0%9F%A7%A0-a-comprehensive-guide-to-visual-paradigms-ai-powered-c4-plantuml-studio\/\"><strong>H\u01b0\u1edbng d\u1eabn to\u00e0n di\u1ec7n v\u1ec1 Studio C4 PlantUML \u0111\u01b0\u1ee3c t\u00edch h\u1ee3p AI c\u1ee7a Visual Paradigm<\/strong><\/a>: H\u01b0\u1edbng d\u1eabn n\u00e0y m\u00f4 t\u1ea3 m\u1ed9t c\u00f4ng c\u1ee5 \u0111\u01b0\u1ee3c thi\u1ebft k\u1ebf ri\u00eang, ra m\u1eaft v\u00e0o cu\u1ed1i n\u0103m 2025, c\u00f3 kh\u1ea3 n\u0103ng chuy\u1ec3n \u0111\u1ed5i c\u00e1c l\u1eddi nh\u1eafc b\u1eb1ng ng\u00f4n ng\u1eef t\u1ef1 nhi\u00ean th\u00e0nh c\u00e1c s\u01a1 \u0111\u1ed3 C4 nhi\u1ec1u l\u1edbp.<\/li>\n<li><a href=\"https:\/\/www.visual-paradigm.com\/features\/c4-plantuml-studio\/\"><strong>Studio C4-PlantUML | Tr\u00ecnh sinh s\u01a1 \u0111\u1ed3 C4 \u0111\u01b0\u1ee3c t\u00edch h\u1ee3p AI<\/strong><\/a>: B\u1ea3n t\u1ed5ng quan t\u00ednh n\u0103ng nh\u1ea5n m\u1ea1nh m\u1ed9t c\u00f4ng c\u1ee5 \u0111\u01b0\u1ee3c \u0111i\u1ec1u khi\u1ec3n b\u1edfi AI, \u0111\u01b0\u1ee3c thi\u1ebft k\u1ebf \u0111\u1ec3 t\u1ea1o s\u01a1 \u0111\u1ed3 ki\u1ebfn tr\u00fac ph\u1ea7n m\u1ec1m C4 t\u1eeb c\u00e1c m\u00f4 t\u1ea3 v\u0103n b\u1ea3n \u0111\u01a1n gi\u1ea3n.<\/li>\n<li><a href=\"https:\/\/www.archimetric.com\/comprehensive-tutorial-generating-and-modifying-c4-component-diagrams-with-visual-paradigm-ai-chatbot\/\"><strong>T\u1ea1o v\u00e0 ch\u1ec9nh s\u1eeda s\u01a1 \u0111\u1ed3 th\u00e0nh ph\u1ea7n C4 b\u1eb1ng tr\u1ee3 l\u00fd chatbot AI c\u1ee7a Visual Paradigm<\/strong><\/a>: B\u00e0i h\u01b0\u1edbng d\u1eabn n\u00e0y minh h\u1ecda c\u00e1ch s\u1eed d\u1ee5ng tr\u1ee3 l\u00fd chatbot \u0111\u01b0\u1ee3c t\u00edch h\u1ee3p AI \u0111\u1ec3 t\u1ea1o v\u00e0 tinh ch\u1ec9nh ki\u1ebfn tr\u00fac c\u1ea5p th\u00e0nh ph\u1ea7n cho c\u00e1c h\u1ec7 th\u1ed1ng ph\u1ee9c t\u1ea1p m\u1ed9t c\u00e1ch l\u1eb7p l\u1ea1i.<\/li>\n<li><a href=\"https:\/\/ai.visual-paradigm.com\/tool\/ai-powered-c4-plantuml-studio\/about-the-diagrams\/\"><strong>Tr\u00ecnh sinh s\u01a1 \u0111\u1ed3 C4 \u0111\u01b0\u1ee3c t\u00edch h\u1ee3p AI: C\u00e1c c\u1ea5p ch\u00ednh v\u00e0 c\u00e1c ch\u1ebf \u0111\u1ed9 xem h\u1ed7 tr\u1ee3<\/strong><\/a>: Trang n\u00e0y gi\u1ea3i th\u00edch c\u00e1ch tr\u00ecnh sinh AI h\u1ed7 tr\u1ee3 b\u1ed1n c\u1ea5p ch\u00ednh c\u1ee7a m\u00f4 h\u00ecnh C4\u2014B\u1ed1i c\u1ea3nh, Container, Th\u00e0nh ph\u1ea7n v\u00e0 Tri\u1ec3n khai\u2014\u0111\u1ec3 cung c\u1ea5p t\u00e0i li\u1ec7u to\u00e0n di\u1ec7n.<\/li>\n<li><a href=\"https:\/\/updates.visual-paradigm.com\/releases\/ai-diagram-generator-complete-c4-model\/\"><strong>Tr\u00ecnh sinh s\u01a1 \u0111\u1ed3 AI: Phi\u00ean b\u1ea3n h\u1ed7 tr\u1ee3 \u0111\u1ea7y \u0111\u1ee7 m\u00f4 h\u00ecnh C4<\/strong><\/a>: B\u1ea3n c\u1eadp nh\u1eadt n\u00e0y chi ti\u1ebft v\u1ec1 vi\u1ec7c t\u00edch h\u1ee3p c\u00e1c t\u00ednh n\u0103ng \u0111\u01b0\u1ee3c h\u1ed7 tr\u1ee3 b\u1edfi AI nh\u1eb1m t\u1ea1o t\u1ef1 \u0111\u1ed9ng c\u00e1c s\u01a1 \u0111\u1ed3 m\u00f4 h\u00ecnh C4 ph\u00e2n c\u1ea5p.<\/li>\n<li><a href=\"https:\/\/www.ez-knowledge.com\/beyond-the-code-how-ai-automates-c4-model-diagrams-for-devops-and-cloud-teams\/\"><strong>Tr\u00ecnh sinh m\u00f4 h\u00ecnh C4 AI: T\u1ef1 \u0111\u1ed9ng h\u00f3a to\u00e0n b\u1ed9 v\u00f2ng \u0111\u1eddi m\u00f4 h\u00ecnh h\u00f3a<\/strong><\/a>: T\u00e0i nguy\u00ean n\u00e0y nh\u1ea5n m\u1ea1nh c\u00e1ch m\u1ed9t tr\u1ee3 l\u00fd chatbot AI chuy\u00ean bi\u1ec7t s\u1eed d\u1ee5ng c\u00e1c l\u1eddi nh\u1eafc t\u01b0\u01a1ng t\u00e1c \u0111\u1ec3 \u0111\u1ea3m b\u1ea3o t\u00ednh nh\u1ea5t qu\u00e1n trong t\u00e0i li\u1ec7u ki\u1ebfn tr\u00fac cho c\u00e1c \u0111\u1ed9i DevOps.<\/li>\n<li><a href=\"https:\/\/www.archimetric.com\/comprehensive-review-generic-ai-chatbots-vs-visual-paradigms-c4-tools\/\"><strong>B\u00e0i \u0111\u00e1nh gi\u00e1 to\u00e0n di\u1ec7n: Tr\u1ee3 l\u00fd chatbot AI th\u00f4ng th\u01b0\u1eddng so v\u1edbi c\u00e1c c\u00f4ng c\u1ee5 C4 c\u1ee7a Visual Paradigm<\/strong><\/a>: So s\u00e1nh n\u00e0y gi\u1ea3i th\u00edch l\u00fd do t\u1ea1i sao c\u00e1c c\u00f4ng c\u1ee5 chuy\u00ean bi\u1ec7t nh\u01b0 Studio C4 PlantUML cung c\u1ea5p k\u1ebft qu\u1ea3 c\u00f3 c\u1ea5u tr\u00fac h\u01a1n v\u00e0 ch\u1ea5t l\u01b0\u1ee3ng chuy\u00ean nghi\u1ec7p h\u01a1n so v\u1edbi c\u00e1c m\u00f4 h\u00ecnh ng\u00f4n ng\u1eef ph\u1ed5 th\u00f4ng.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>S\u01a1 \u0111\u1ed3 m\u00e3 ngu\u1ed3n C4 l\u00e0 g\u00ec? S\u01a1 \u0111\u1ed3 m\u00e3 ngu\u1ed3n l\u00e0M\u1ee9c 4\u2014 m\u1ee9c s\u00e2u nh\u1ea5t, chi ti\u1ebft nh\u1ea5t trong<\/p>\n","protected":false},"author":11,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_yoast_wpseo_title":"","_yoast_wpseo_metadesc":"","footnotes":""},"categories":[108],"tags":[],"class_list":["post-11968","post","type-post","status-publish","format-standard","hentry","category-c4-model"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Thu nh\u1ecf T\u1ed1i \u0110a: Hi\u1ec3u V\u1ec1 S\u01a1 \u0110\u1ed3 M\u00e3 Ngu\u1ed3n C4 \u2013 Ch\u00fang L\u00e0 G\u00ec, Khi N\u00e0o T\u1ea1o Gi\u00e1 Tr\u1ecb, V\u00e0 C\u00e1c V\u00ed D\u1ee5 Th\u1ef1c T\u1ebf V\u1edbi PlantUML - Cybermedian<\/title>\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.cybermedian.com\/vn\/zooming-all-the-way-in-understanding-c4-code-diagrams-what-they-are-when-they-add-value-and-practical-plantuml-examples\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Thu nh\u1ecf T\u1ed1i \u0110a: Hi\u1ec3u V\u1ec1 S\u01a1 \u0110\u1ed3 M\u00e3 Ngu\u1ed3n C4 \u2013 Ch\u00fang L\u00e0 G\u00ec, Khi N\u00e0o T\u1ea1o Gi\u00e1 Tr\u1ecb, V\u00e0 C\u00e1c V\u00ed D\u1ee5 Th\u1ef1c T\u1ebf V\u1edbi PlantUML - Cybermedian\" \/>\n<meta property=\"og:description\" content=\"S\u01a1 \u0111\u1ed3 m\u00e3 ngu\u1ed3n C4 l\u00e0 g\u00ec? S\u01a1 \u0111\u1ed3 m\u00e3 ngu\u1ed3n l\u00e0M\u1ee9c 4\u2014 m\u1ee9c s\u00e2u nh\u1ea5t, chi ti\u1ebft nh\u1ea5t trong\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.cybermedian.com\/vn\/zooming-all-the-way-in-understanding-c4-code-diagrams-what-they-are-when-they-add-value-and-practical-plantuml-examples\/\" \/>\n<meta property=\"og:site_name\" content=\"Cybermedian\" \/>\n<meta property=\"article:published_time\" content=\"2026-03-05T04:00:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/uml.planttext.com\/plantuml\/png\/fLNRRjD047sFb7-O9sXKKWbKNg8eQjeAsWAYQehwlB77yTBrhZKxJXG14l_07_8bpFhIsha9gM_sd9apbpExU-PP4HUPwVTOiq6uE8NFk4G3f_3tzn-uS372fLOBKja8fWMdQ5b7YhMpeAtN0azlhs6QvwOsztlzdd_KDbSI0vcpBah9PGXC1ROXdwhOhRHTGAACxq2HKTx3ZtuFu5n5ZmjoXOqld7443wbcB057CL9bF3VY5OnJ8hVgs7w5UjJSCwc8Q-9k7xVabj87LVcEGJsZU1GHnk57AXni3g0chpXlLdo8TWZi7l79E0h-zsrBvLHuf4jafOsV8IrrX2FujcLxOPsTl4rv7eM2F-5w13CcKQKoBvNHiURrjVsYZT7YvMpiHs1SvN4C2xH8KaB9UjHgOD1cEgwOdlpAQOZ7t3c3oZPK79grAiCFiZ9TpuQhx4LRHafKX3kcq-Xed8e3UhvkIClgmiUWCzNEV2uLgxdok8-tqkWES-SrErfNJC__BydTPMhwIBIDT_DypOEyoem3EDcYQXSS8hhAvkAsaZDqfNpQHKWa4ObdoECx-PmStlDI9HYFuUZ-ZQCerV5WywAOJ9fISiaIwLoPZI44hBN2qjhyEqPS0M7H7MdMeIevt4OGeHr_92Lh44zhUDqK-Xhkq9IPVQfpOTz_DeT5FfnidubHcDb_1EvOaYRqm1wT5Fd9prt11wE6TRxMWZIvDioDf-1of0koFanbZt1rCPitHhzd7IEGNgGCBjb_lGM9RabdIXAhhko9SIj8v2g-URWVXgvYaEU6KRRBottZVL2etqCRGqZsb7Jkc5rMPzsw96TwOJsyWYMIJcGb0hkNGOI7v6hs_ksxBkEP_CZxzWy0\" \/><meta property=\"og:image\" content=\"https:\/\/uml.planttext.com\/plantuml\/png\/fLNRRjD047sFb7-O9sXKKWbKNg8eQjeAsWAYQehwlB77yTBrhZKxJXG14l_07_8bpFhIsha9gM_sd9apbpExU-PP4HUPwVTOiq6uE8NFk4G3f_3tzn-uS372fLOBKja8fWMdQ5b7YhMpeAtN0azlhs6QvwOsztlzdd_KDbSI0vcpBah9PGXC1ROXdwhOhRHTGAACxq2HKTx3ZtuFu5n5ZmjoXOqld7443wbcB057CL9bF3VY5OnJ8hVgs7w5UjJSCwc8Q-9k7xVabj87LVcEGJsZU1GHnk57AXni3g0chpXlLdo8TWZi7l79E0h-zsrBvLHuf4jafOsV8IrrX2FujcLxOPsTl4rv7eM2F-5w13CcKQKoBvNHiURrjVsYZT7YvMpiHs1SvN4C2xH8KaB9UjHgOD1cEgwOdlpAQOZ7t3c3oZPK79grAiCFiZ9TpuQhx4LRHafKX3kcq-Xed8e3UhvkIClgmiUWCzNEV2uLgxdok8-tqkWES-SrErfNJC__BydTPMhwIBIDT_DypOEyoem3EDcYQXSS8hhAvkAsaZDqfNpQHKWa4ObdoECx-PmStlDI9HYFuUZ-ZQCerV5WywAOJ9fISiaIwLoPZI44hBN2qjhyEqPS0M7H7MdMeIevt4OGeHr_92Lh44zhUDqK-Xhkq9IPVQfpOTz_DeT5FfnidubHcDb_1EvOaYRqm1wT5Fd9prt11wE6TRxMWZIvDioDf-1of0koFanbZt1rCPitHhzd7IEGNgGCBjb_lGM9RabdIXAhhko9SIj8v2g-URWVXgvYaEU6KRRBottZVL2etqCRGqZsb7Jkc5rMPzsw96TwOJsyWYMIJcGb0hkNGOI7v6hs_ksxBkEP_CZxzWy0\" \/>\n<meta name=\"author\" content=\"curtis\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/uml.planttext.com\/plantuml\/png\/fLNRRjD047sFb7-O9sXKKWbKNg8eQjeAsWAYQehwlB77yTBrhZKxJXG14l_07_8bpFhIsha9gM_sd9apbpExU-PP4HUPwVTOiq6uE8NFk4G3f_3tzn-uS372fLOBKja8fWMdQ5b7YhMpeAtN0azlhs6QvwOsztlzdd_KDbSI0vcpBah9PGXC1ROXdwhOhRHTGAACxq2HKTx3ZtuFu5n5ZmjoXOqld7443wbcB057CL9bF3VY5OnJ8hVgs7w5UjJSCwc8Q-9k7xVabj87LVcEGJsZU1GHnk57AXni3g0chpXlLdo8TWZi7l79E0h-zsrBvLHuf4jafOsV8IrrX2FujcLxOPsTl4rv7eM2F-5w13CcKQKoBvNHiURrjVsYZT7YvMpiHs1SvN4C2xH8KaB9UjHgOD1cEgwOdlpAQOZ7t3c3oZPK79grAiCFiZ9TpuQhx4LRHafKX3kcq-Xed8e3UhvkIClgmiUWCzNEV2uLgxdok8-tqkWES-SrErfNJC__BydTPMhwIBIDT_DypOEyoem3EDcYQXSS8hhAvkAsaZDqfNpQHKWa4ObdoECx-PmStlDI9HYFuUZ-ZQCerV5WywAOJ9fISiaIwLoPZI44hBN2qjhyEqPS0M7H7MdMeIevt4OGeHr_92Lh44zhUDqK-Xhkq9IPVQfpOTz_DeT5FfnidubHcDb_1EvOaYRqm1wT5Fd9prt11wE6TRxMWZIvDioDf-1of0koFanbZt1rCPitHhzd7IEGNgGCBjb_lGM9RabdIXAhhko9SIj8v2g-URWVXgvYaEU6KRRBottZVL2etqCRGqZsb7Jkc5rMPzsw96TwOJsyWYMIJcGb0hkNGOI7v6hs_ksxBkEP_CZxzWy0\" \/>\n<meta name=\"twitter:label1\" content=\"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi\" \/>\n\t<meta name=\"twitter:data1\" content=\"curtis\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 ph\u00fat\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.cybermedian.com\/vn\/zooming-all-the-way-in-understanding-c4-code-diagrams-what-they-are-when-they-add-value-and-practical-plantuml-examples\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.cybermedian.com\/vn\/zooming-all-the-way-in-understanding-c4-code-diagrams-what-they-are-when-they-add-value-and-practical-plantuml-examples\/\"},\"author\":{\"name\":\"curtis\",\"@id\":\"https:\/\/www.cybermedian.com\/vn\/#\/schema\/person\/016578d8c88d35825fd3fbafc4f76b4d\"},\"headline\":\"Thu nh\u1ecf T\u1ed1i \u0110a: Hi\u1ec3u V\u1ec1 S\u01a1 \u0110\u1ed3 M\u00e3 Ngu\u1ed3n C4 \u2013 Ch\u00fang L\u00e0 G\u00ec, Khi N\u00e0o T\u1ea1o Gi\u00e1 Tr\u1ecb, V\u00e0 C\u00e1c V\u00ed D\u1ee5 Th\u1ef1c T\u1ebf V\u1edbi PlantUML\",\"datePublished\":\"2026-03-05T04:00:41+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.cybermedian.com\/vn\/zooming-all-the-way-in-understanding-c4-code-diagrams-what-they-are-when-they-add-value-and-practical-plantuml-examples\/\"},\"wordCount\":2728,\"image\":{\"@id\":\"https:\/\/www.cybermedian.com\/vn\/zooming-all-the-way-in-understanding-c4-code-diagrams-what-they-are-when-they-add-value-and-practical-plantuml-examples\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/c4-static.png\",\"articleSection\":[\"C4 Model\"],\"inLanguage\":\"vi\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.cybermedian.com\/vn\/zooming-all-the-way-in-understanding-c4-code-diagrams-what-they-are-when-they-add-value-and-practical-plantuml-examples\/\",\"url\":\"https:\/\/www.cybermedian.com\/vn\/zooming-all-the-way-in-understanding-c4-code-diagrams-what-they-are-when-they-add-value-and-practical-plantuml-examples\/\",\"name\":\"Thu nh\u1ecf T\u1ed1i \u0110a: Hi\u1ec3u V\u1ec1 S\u01a1 \u0110\u1ed3 M\u00e3 Ngu\u1ed3n C4 \u2013 Ch\u00fang L\u00e0 G\u00ec, Khi N\u00e0o T\u1ea1o Gi\u00e1 Tr\u1ecb, V\u00e0 C\u00e1c V\u00ed D\u1ee5 Th\u1ef1c T\u1ebf V\u1edbi PlantUML - Cybermedian\",\"isPartOf\":{\"@id\":\"https:\/\/www.cybermedian.com\/vn\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.cybermedian.com\/vn\/zooming-all-the-way-in-understanding-c4-code-diagrams-what-they-are-when-they-add-value-and-practical-plantuml-examples\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.cybermedian.com\/vn\/zooming-all-the-way-in-understanding-c4-code-diagrams-what-they-are-when-they-add-value-and-practical-plantuml-examples\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/c4-static.png\",\"datePublished\":\"2026-03-05T04:00:41+00:00\",\"author\":{\"@id\":\"https:\/\/www.cybermedian.com\/vn\/#\/schema\/person\/016578d8c88d35825fd3fbafc4f76b4d\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.cybermedian.com\/vn\/zooming-all-the-way-in-understanding-c4-code-diagrams-what-they-are-when-they-add-value-and-practical-plantuml-examples\/#breadcrumb\"},\"inLanguage\":\"vi\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.cybermedian.com\/vn\/zooming-all-the-way-in-understanding-c4-code-diagrams-what-they-are-when-they-add-value-and-practical-plantuml-examples\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"vi\",\"@id\":\"https:\/\/www.cybermedian.com\/vn\/zooming-all-the-way-in-understanding-c4-code-diagrams-what-they-are-when-they-add-value-and-practical-plantuml-examples\/#primaryimage\",\"url\":\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/c4-static.png\",\"contentUrl\":\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/c4-static.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.cybermedian.com\/vn\/zooming-all-the-way-in-understanding-c4-code-diagrams-what-they-are-when-they-add-value-and-practical-plantuml-examples\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.cybermedian.com\/vn\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Thu nh\u1ecf T\u1ed1i \u0110a: Hi\u1ec3u V\u1ec1 S\u01a1 \u0110\u1ed3 M\u00e3 Ngu\u1ed3n C4 \u2013 Ch\u00fang L\u00e0 G\u00ec, Khi N\u00e0o T\u1ea1o Gi\u00e1 Tr\u1ecb, V\u00e0 C\u00e1c V\u00ed D\u1ee5 Th\u1ef1c T\u1ebf V\u1edbi PlantUML\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.cybermedian.com\/vn\/#website\",\"url\":\"https:\/\/www.cybermedian.com\/vn\/\",\"name\":\"Cybermedian\",\"description\":\"H\u1ecdc m\u1ed9t \u0111i\u1ec1u m\u1edbi m\u1ed7i ng\u00e0y\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.cybermedian.com\/vn\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"vi\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.cybermedian.com\/vn\/#\/schema\/person\/016578d8c88d35825fd3fbafc4f76b4d\",\"name\":\"curtis\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"vi\",\"@id\":\"https:\/\/www.cybermedian.com\/vn\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/6910084565fcc601ec03c6693bb8ea480c1e52ccaa0efb299eb038bb6a1edc87?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/6910084565fcc601ec03c6693bb8ea480c1e52ccaa0efb299eb038bb6a1edc87?s=96&d=mm&r=g\",\"caption\":\"curtis\"},\"url\":\"https:\/\/www.cybermedian.com\/vn\/author\/curtis\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Thu nh\u1ecf T\u1ed1i \u0110a: Hi\u1ec3u V\u1ec1 S\u01a1 \u0110\u1ed3 M\u00e3 Ngu\u1ed3n C4 \u2013 Ch\u00fang L\u00e0 G\u00ec, Khi N\u00e0o T\u1ea1o Gi\u00e1 Tr\u1ecb, V\u00e0 C\u00e1c V\u00ed D\u1ee5 Th\u1ef1c T\u1ebf V\u1edbi PlantUML - Cybermedian","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.cybermedian.com\/vn\/zooming-all-the-way-in-understanding-c4-code-diagrams-what-they-are-when-they-add-value-and-practical-plantuml-examples\/","og_locale":"vi_VN","og_type":"article","og_title":"Thu nh\u1ecf T\u1ed1i \u0110a: Hi\u1ec3u V\u1ec1 S\u01a1 \u0110\u1ed3 M\u00e3 Ngu\u1ed3n C4 \u2013 Ch\u00fang L\u00e0 G\u00ec, Khi N\u00e0o T\u1ea1o Gi\u00e1 Tr\u1ecb, V\u00e0 C\u00e1c V\u00ed D\u1ee5 Th\u1ef1c T\u1ebf V\u1edbi PlantUML - Cybermedian","og_description":"S\u01a1 \u0111\u1ed3 m\u00e3 ngu\u1ed3n C4 l\u00e0 g\u00ec? S\u01a1 \u0111\u1ed3 m\u00e3 ngu\u1ed3n l\u00e0M\u1ee9c 4\u2014 m\u1ee9c s\u00e2u nh\u1ea5t, chi ti\u1ebft nh\u1ea5t trong","og_url":"https:\/\/www.cybermedian.com\/vn\/zooming-all-the-way-in-understanding-c4-code-diagrams-what-they-are-when-they-add-value-and-practical-plantuml-examples\/","og_site_name":"Cybermedian","article_published_time":"2026-03-05T04:00:41+00:00","og_image":[{"url":"https:\/\/uml.planttext.com\/plantuml\/png\/fLNRRjD047sFb7-O9sXKKWbKNg8eQjeAsWAYQehwlB77yTBrhZKxJXG14l_07_8bpFhIsha9gM_sd9apbpExU-PP4HUPwVTOiq6uE8NFk4G3f_3tzn-uS372fLOBKja8fWMdQ5b7YhMpeAtN0azlhs6QvwOsztlzdd_KDbSI0vcpBah9PGXC1ROXdwhOhRHTGAACxq2HKTx3ZtuFu5n5ZmjoXOqld7443wbcB057CL9bF3VY5OnJ8hVgs7w5UjJSCwc8Q-9k7xVabj87LVcEGJsZU1GHnk57AXni3g0chpXlLdo8TWZi7l79E0h-zsrBvLHuf4jafOsV8IrrX2FujcLxOPsTl4rv7eM2F-5w13CcKQKoBvNHiURrjVsYZT7YvMpiHs1SvN4C2xH8KaB9UjHgOD1cEgwOdlpAQOZ7t3c3oZPK79grAiCFiZ9TpuQhx4LRHafKX3kcq-Xed8e3UhvkIClgmiUWCzNEV2uLgxdok8-tqkWES-SrErfNJC__BydTPMhwIBIDT_DypOEyoem3EDcYQXSS8hhAvkAsaZDqfNpQHKWa4ObdoECx-PmStlDI9HYFuUZ-ZQCerV5WywAOJ9fISiaIwLoPZI44hBN2qjhyEqPS0M7H7MdMeIevt4OGeHr_92Lh44zhUDqK-Xhkq9IPVQfpOTz_DeT5FfnidubHcDb_1EvOaYRqm1wT5Fd9prt11wE6TRxMWZIvDioDf-1of0koFanbZt1rCPitHhzd7IEGNgGCBjb_lGM9RabdIXAhhko9SIj8v2g-URWVXgvYaEU6KRRBottZVL2etqCRGqZsb7Jkc5rMPzsw96TwOJsyWYMIJcGb0hkNGOI7v6hs_ksxBkEP_CZxzWy0","type":"","width":"","height":""},{"url":"https:\/\/uml.planttext.com\/plantuml\/png\/fLNRRjD047sFb7-O9sXKKWbKNg8eQjeAsWAYQehwlB77yTBrhZKxJXG14l_07_8bpFhIsha9gM_sd9apbpExU-PP4HUPwVTOiq6uE8NFk4G3f_3tzn-uS372fLOBKja8fWMdQ5b7YhMpeAtN0azlhs6QvwOsztlzdd_KDbSI0vcpBah9PGXC1ROXdwhOhRHTGAACxq2HKTx3ZtuFu5n5ZmjoXOqld7443wbcB057CL9bF3VY5OnJ8hVgs7w5UjJSCwc8Q-9k7xVabj87LVcEGJsZU1GHnk57AXni3g0chpXlLdo8TWZi7l79E0h-zsrBvLHuf4jafOsV8IrrX2FujcLxOPsTl4rv7eM2F-5w13CcKQKoBvNHiURrjVsYZT7YvMpiHs1SvN4C2xH8KaB9UjHgOD1cEgwOdlpAQOZ7t3c3oZPK79grAiCFiZ9TpuQhx4LRHafKX3kcq-Xed8e3UhvkIClgmiUWCzNEV2uLgxdok8-tqkWES-SrErfNJC__BydTPMhwIBIDT_DypOEyoem3EDcYQXSS8hhAvkAsaZDqfNpQHKWa4ObdoECx-PmStlDI9HYFuUZ-ZQCerV5WywAOJ9fISiaIwLoPZI44hBN2qjhyEqPS0M7H7MdMeIevt4OGeHr_92Lh44zhUDqK-Xhkq9IPVQfpOTz_DeT5FfnidubHcDb_1EvOaYRqm1wT5Fd9prt11wE6TRxMWZIvDioDf-1of0koFanbZt1rCPitHhzd7IEGNgGCBjb_lGM9RabdIXAhhko9SIj8v2g-URWVXgvYaEU6KRRBottZVL2etqCRGqZsb7Jkc5rMPzsw96TwOJsyWYMIJcGb0hkNGOI7v6hs_ksxBkEP_CZxzWy0","type":"","width":"","height":""}],"author":"curtis","twitter_card":"summary_large_image","twitter_image":"https:\/\/uml.planttext.com\/plantuml\/png\/fLNRRjD047sFb7-O9sXKKWbKNg8eQjeAsWAYQehwlB77yTBrhZKxJXG14l_07_8bpFhIsha9gM_sd9apbpExU-PP4HUPwVTOiq6uE8NFk4G3f_3tzn-uS372fLOBKja8fWMdQ5b7YhMpeAtN0azlhs6QvwOsztlzdd_KDbSI0vcpBah9PGXC1ROXdwhOhRHTGAACxq2HKTx3ZtuFu5n5ZmjoXOqld7443wbcB057CL9bF3VY5OnJ8hVgs7w5UjJSCwc8Q-9k7xVabj87LVcEGJsZU1GHnk57AXni3g0chpXlLdo8TWZi7l79E0h-zsrBvLHuf4jafOsV8IrrX2FujcLxOPsTl4rv7eM2F-5w13CcKQKoBvNHiURrjVsYZT7YvMpiHs1SvN4C2xH8KaB9UjHgOD1cEgwOdlpAQOZ7t3c3oZPK79grAiCFiZ9TpuQhx4LRHafKX3kcq-Xed8e3UhvkIClgmiUWCzNEV2uLgxdok8-tqkWES-SrErfNJC__BydTPMhwIBIDT_DypOEyoem3EDcYQXSS8hhAvkAsaZDqfNpQHKWa4ObdoECx-PmStlDI9HYFuUZ-ZQCerV5WywAOJ9fISiaIwLoPZI44hBN2qjhyEqPS0M7H7MdMeIevt4OGeHr_92Lh44zhUDqK-Xhkq9IPVQfpOTz_DeT5FfnidubHcDb_1EvOaYRqm1wT5Fd9prt11wE6TRxMWZIvDioDf-1of0koFanbZt1rCPitHhzd7IEGNgGCBjb_lGM9RabdIXAhhko9SIj8v2g-URWVXgvYaEU6KRRBottZVL2etqCRGqZsb7Jkc5rMPzsw96TwOJsyWYMIJcGb0hkNGOI7v6hs_ksxBkEP_CZxzWy0","twitter_misc":{"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi":"curtis","\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc":"6 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.cybermedian.com\/vn\/zooming-all-the-way-in-understanding-c4-code-diagrams-what-they-are-when-they-add-value-and-practical-plantuml-examples\/#article","isPartOf":{"@id":"https:\/\/www.cybermedian.com\/vn\/zooming-all-the-way-in-understanding-c4-code-diagrams-what-they-are-when-they-add-value-and-practical-plantuml-examples\/"},"author":{"name":"curtis","@id":"https:\/\/www.cybermedian.com\/vn\/#\/schema\/person\/016578d8c88d35825fd3fbafc4f76b4d"},"headline":"Thu nh\u1ecf T\u1ed1i \u0110a: Hi\u1ec3u V\u1ec1 S\u01a1 \u0110\u1ed3 M\u00e3 Ngu\u1ed3n C4 \u2013 Ch\u00fang L\u00e0 G\u00ec, Khi N\u00e0o T\u1ea1o Gi\u00e1 Tr\u1ecb, V\u00e0 C\u00e1c V\u00ed D\u1ee5 Th\u1ef1c T\u1ebf V\u1edbi PlantUML","datePublished":"2026-03-05T04:00:41+00:00","mainEntityOfPage":{"@id":"https:\/\/www.cybermedian.com\/vn\/zooming-all-the-way-in-understanding-c4-code-diagrams-what-they-are-when-they-add-value-and-practical-plantuml-examples\/"},"wordCount":2728,"image":{"@id":"https:\/\/www.cybermedian.com\/vn\/zooming-all-the-way-in-understanding-c4-code-diagrams-what-they-are-when-they-add-value-and-practical-plantuml-examples\/#primaryimage"},"thumbnailUrl":"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/c4-static.png","articleSection":["C4 Model"],"inLanguage":"vi"},{"@type":"WebPage","@id":"https:\/\/www.cybermedian.com\/vn\/zooming-all-the-way-in-understanding-c4-code-diagrams-what-they-are-when-they-add-value-and-practical-plantuml-examples\/","url":"https:\/\/www.cybermedian.com\/vn\/zooming-all-the-way-in-understanding-c4-code-diagrams-what-they-are-when-they-add-value-and-practical-plantuml-examples\/","name":"Thu nh\u1ecf T\u1ed1i \u0110a: Hi\u1ec3u V\u1ec1 S\u01a1 \u0110\u1ed3 M\u00e3 Ngu\u1ed3n C4 \u2013 Ch\u00fang L\u00e0 G\u00ec, Khi N\u00e0o T\u1ea1o Gi\u00e1 Tr\u1ecb, V\u00e0 C\u00e1c V\u00ed D\u1ee5 Th\u1ef1c T\u1ebf V\u1edbi PlantUML - Cybermedian","isPartOf":{"@id":"https:\/\/www.cybermedian.com\/vn\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.cybermedian.com\/vn\/zooming-all-the-way-in-understanding-c4-code-diagrams-what-they-are-when-they-add-value-and-practical-plantuml-examples\/#primaryimage"},"image":{"@id":"https:\/\/www.cybermedian.com\/vn\/zooming-all-the-way-in-understanding-c4-code-diagrams-what-they-are-when-they-add-value-and-practical-plantuml-examples\/#primaryimage"},"thumbnailUrl":"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/c4-static.png","datePublished":"2026-03-05T04:00:41+00:00","author":{"@id":"https:\/\/www.cybermedian.com\/vn\/#\/schema\/person\/016578d8c88d35825fd3fbafc4f76b4d"},"breadcrumb":{"@id":"https:\/\/www.cybermedian.com\/vn\/zooming-all-the-way-in-understanding-c4-code-diagrams-what-they-are-when-they-add-value-and-practical-plantuml-examples\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.cybermedian.com\/vn\/zooming-all-the-way-in-understanding-c4-code-diagrams-what-they-are-when-they-add-value-and-practical-plantuml-examples\/"]}]},{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/www.cybermedian.com\/vn\/zooming-all-the-way-in-understanding-c4-code-diagrams-what-they-are-when-they-add-value-and-practical-plantuml-examples\/#primaryimage","url":"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/c4-static.png","contentUrl":"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/c4-static.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.cybermedian.com\/vn\/zooming-all-the-way-in-understanding-c4-code-diagrams-what-they-are-when-they-add-value-and-practical-plantuml-examples\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.cybermedian.com\/vn\/"},{"@type":"ListItem","position":2,"name":"Thu nh\u1ecf T\u1ed1i \u0110a: Hi\u1ec3u V\u1ec1 S\u01a1 \u0110\u1ed3 M\u00e3 Ngu\u1ed3n C4 \u2013 Ch\u00fang L\u00e0 G\u00ec, Khi N\u00e0o T\u1ea1o Gi\u00e1 Tr\u1ecb, V\u00e0 C\u00e1c V\u00ed D\u1ee5 Th\u1ef1c T\u1ebf V\u1edbi PlantUML"}]},{"@type":"WebSite","@id":"https:\/\/www.cybermedian.com\/vn\/#website","url":"https:\/\/www.cybermedian.com\/vn\/","name":"Cybermedian","description":"H\u1ecdc m\u1ed9t \u0111i\u1ec1u m\u1edbi m\u1ed7i ng\u00e0y","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.cybermedian.com\/vn\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"vi"},{"@type":"Person","@id":"https:\/\/www.cybermedian.com\/vn\/#\/schema\/person\/016578d8c88d35825fd3fbafc4f76b4d","name":"curtis","image":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/www.cybermedian.com\/vn\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6910084565fcc601ec03c6693bb8ea480c1e52ccaa0efb299eb038bb6a1edc87?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6910084565fcc601ec03c6693bb8ea480c1e52ccaa0efb299eb038bb6a1edc87?s=96&d=mm&r=g","caption":"curtis"},"url":"https:\/\/www.cybermedian.com\/vn\/author\/curtis\/"}]}},"_links":{"self":[{"href":"https:\/\/www.cybermedian.com\/vn\/wp-json\/wp\/v2\/posts\/11968","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cybermedian.com\/vn\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cybermedian.com\/vn\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cybermedian.com\/vn\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cybermedian.com\/vn\/wp-json\/wp\/v2\/comments?post=11968"}],"version-history":[{"count":0,"href":"https:\/\/www.cybermedian.com\/vn\/wp-json\/wp\/v2\/posts\/11968\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.cybermedian.com\/vn\/wp-json\/wp\/v2\/media?parent=11968"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cybermedian.com\/vn\/wp-json\/wp\/v2\/categories?post=11968"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cybermedian.com\/vn\/wp-json\/wp\/v2\/tags?post=11968"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}