[{"data":1,"prerenderedAt":269},["ShallowReactive",2],{"news-item-\u002Fvi\u002Fnews\u002Fplantuml":3},{"id":4,"title":5,"body":6,"category":256,"created by":257,"date":258,"description":259,"extension":260,"meta":261,"navigation":262,"path":263,"sections":264,"seo":265,"stem":266,"thumbnail":267,"__hash__":268},"content_vi\u002Fvi\u002Fnews\u002Fplantuml.md","PlantUML- Vẽ biểu đồ UML bằng code",{"type":7,"value":8,"toc":239},"minimark",[9,14,18,21,24,28,33,36,47,50,58,67,71,74,77,91,95,99,102,112,119,126,130,133,136,139,142,146,149,164,167,173,178,187,191,194,197,200,204,213,216,220,227,234],[10,11,13],"h2",{"id":12},"giới-thiệu-plantuml","Giới thiệu PlantUML",[15,16,17],"p",{},"Trong quy trình phát triển phần mềm, dù áp dụng mô hình Waterfall hay mô hình Agile thì cũng thường hay sử dụng biểu đồ UML để giải thích yêu cầu, cấu trúc, chức năng.",[15,19,20],{},"Tuy nhiên, tài liệu biểu đồ hình vẽ  không dùng Text Editor mà thường dùng ứng dụng vẽ hình và đôi lúc khó nhận biết được sự khác biệt giữa các version.",[15,22,23],{},"Nếu dùng PlantUML thì có thể vẽ hình, biểu đồ bằng code và dễ dàng biết được sự khác biệt của các thay đổi, dễ dàng quản lý version.",[10,25,27],{"id":26},"xây-dựng-trên-môi-trường-local","Xây dựng trên môi trường local",[29,30,32],"h3",{"id":31},"khởi-động-plantuml-trên-localhost","Khởi động PlantUML trên localhost",[15,34,35],{},"Phương pháp áp dụng đơn giản có dùng Docker như sau:",[15,37,38,39,46],{},"1. Cài Docker, khởi động Docker. (Hãy tham khảo phương pháp cài Docker ",[40,41,45],"a",{"href":42,"rel":43},"https:\u002F\u002Fbriswell-vn.com\u002Fnews\u002Flaunch-with-docker\u002F",[44],"nofollow","tại đây",")",[15,48,49],{},"2. Chạy lệnh \"docker run -d -p 8080:8080 plantuml\u002Fplantuml-server:jetty\", khởi động Docker container của plantumlUML",[15,51,52,53,57],{},"3. Trên trình duyệt, truy cập vào \"",[40,54,55],{"href":55,"rel":56},"http:\u002F\u002Flocalhost:8080\u002F",[44],"\", nếu hiện ra như dưới đây là đã thành công",[59,60],"img",{"className":61,"alt":64,"src":65,"style":66},[62,63],"block","mx-auto","","https:\u002F\u002Fs3-ap-southeast-1.amazonaws.com\u002Fhomepage-media\u002Fwp-content\u002Fuploads\u002F2021\u002F11\u002F02172640\u002Fimage-20211029173703751-768x314.png","width: 50%;",[29,68,70],{"id":69},"setting-vscode","Setting VScode",[15,72,73],{},"1. Chọn Extension, cài PlantUML",[15,75,76],{},"2. Mở Extension setting của PlantUML và setting như sau:",[78,79,80,84],"ul",{},[81,82,83],"li",{},"Plantuml: Render => PlantUMLServer",[81,85,86,87],{},"Plantuml: Server => ",[40,88,89],{"href":89,"rel":90},"http:\u002F\u002Flocalhost:8080",[44],[10,92,94],{"id":93},"cách-sử-dụng","Cách sử dụng",[29,96,98],{"id":97},"vừa-edit-vừa-hiển-thị-preview","Vừa edit vừa hiển thị preview",[15,100,101],{},"1. Tạo file UML (*******.uml) bằng VScode, sau đó copy & paste đoạn code dưới đây.",[103,104,109],"pre",{"className":105,"code":107,"language":108},[106],"language-text","@startuml \nstart \nrepeat \n:Test something; \nif (Something went wrong?) then (no) \n#palegreen:OK; \nbreak \nendif \n->NOK; \n:Alert \"Error with long text\"; \nrepeat while (Something went wrong with long text?) is (yes) not (no) \n->\u002F\u002Fmerged step\u002F\u002F; \n:Alert \"Success\"; \nstop \n@enduml\n","text",[110,111,107],"code",{"__ignoreMap":64},[15,113,114,115],{},"2.  Từ Command Panel của VScode, chọn \"PlantUML:Preview Current Diagram\"\n",[59,116],{"className":117,"alt":64,"src":118,"style":66},[62,63],"https:\u002F\u002Fs3-ap-southeast-1.amazonaws.com\u002Fhomepage-media\u002Fwp-content\u002Fuploads\u002F2021\u002F11\u002F02174035\u002Fimage-20211029165031071-768x259.png",[15,120,121,122],{},"3. Màn hình preview sẽ hiện ra\n",[59,123],{"className":124,"alt":64,"src":125,"style":66},[62,63],"https:\u002F\u002Fs3-ap-southeast-1.amazonaws.com\u002Fhomepage-media\u002Fwp-content\u002Fuploads\u002F2021\u002F11\u002F02174105\u002Fimage-20211029171040393-768x749.png",[29,127,129],{"id":128},"xuất-hình-vẽ","Xuất hình vẽ",[15,131,132],{},"1. Từ Command Panel của VScode, chọn \"PlantUML: Export Current File Diagrams\"",[15,134,135],{},"2.  Chọn png",[15,137,138],{},"3. Thư mục out sẽ được tạo và file hình sẽ được xuất ra trong đó.",[15,140,141],{},"Ngoài biểu đồ hoạt động (Activity diagram), còn có thể vẽ biểu đồ tuần tự (Sequence diagram), biểu đồ use case (Use-case diagram), biểu đồ các lớp (Class diagram), v.v... Trên trang PlantUML cũng có đăng tải các ví dụ mẫu, hãy tham khảo.",[10,143,145],{"id":144},"tạo-sơ-đồ-cấu-trúc-hệ-thống-có-dùng-dịch-vụ-aws","Tạo sơ đồ cấu trúc hệ thống có dùng dịch vụ AWS",[15,147,148],{},"ICON của AWS được cung cấp trên GitHub, có thể sử dụng trong PlantUML",[15,150,151,152,157,158,163],{},"Trước đây thường dùng ",[40,153,156],{"href":154,"rel":155},"https:\u002F\u002Fgithub.com\u002Fmilo-minderbinder\u002FAWS-PlantUML",[44],"AWS-PlantUML"," nhưng gần đây dường như không có cập nhật cho nên chuyển sang dùng ",[40,159,162],{"href":160,"rel":161},"https:\u002F\u002Fgithub.com\u002Fawslabs\u002Faws-icons-for-plantuml",[44],"aws-icons-for-plantuml"," thay thế.",[15,165,166],{},"Sơ đồ cấu trúc có sử dụng tính năng này như sau.",[103,168,171],{"className":169,"code":170,"language":108},[106],"@startuml aws-sample-system-diagram  \n\n!define AWSPuml https:\u002F\u002Fraw.githubusercontent.com\u002Fawslabs\u002Faws-icons-for-plantuml\u002Fv11.1\u002Fdist \n!includeurl AWSPuml\u002FAWSCommon.puml \n!includeurl AWSPuml\u002FNetworkingContentDelivery\u002FElasticLoadBalancingApplicationLoadBalancer.puml \n!includeurl AWSPuml\u002FGroupIcons\u002FRegion.puml \n!includeurl AWSPuml\u002FNetworkingContentDelivery\u002FRoute53.puml \n!includeurl AWSPuml\u002FCompute\u002Fall.puml \n!includeurl AWSPuml\u002FStorage\u002FSimpleStorageService.puml \n!includeurl AWSPuml\u002FDatabase\u002FAuroraMySQLInstance.puml \n!includeurl AWSPuml\u002FDatabase\u002FElastiCacheElastiCacheforRedis.puml  \n\nleft to right direction  \n\nactor \"Person\" as personAlias \nRegion(cloudArea, \"Tokyo\", \"AWS\", \"\"){ \nRoute53(route53, \"Sample.com\", \"Route53\", \"\") \nElasticLoadBalancingApplicationLoadBalancer(elb, \"Production-ALB\", \"ALB\", \"\") \nEC2Instance(desktopAlias, \"Production-ec2\", \"EC2\", \"t3.micro \\n amazon linux2\") \nSimpleStorageService(storageAlias, \"Production-s3\", \"AmazonS3\", \"Host name \\n public\") \nAuroraMySQLInstance(rds,\"Database\",\"RDS Mysql\",\"Host name \\n DB name\") \nElastiCacheElastiCacheforRedis(redis,\"Redis\",\"Elastic Cache\",\"Host name\") \n}  \n    \npersonAlias --> route53 \nroute53 --> elb \nelb --> desktopAlias\nelb --> storageAlias \ndesktopAlias --> storageAlias \ndesktopAlias --> redis \nrds \u003C--> desktopAlias \n@enduml\n",[110,172,170],{"__ignoreMap":64},[59,174],{"className":175,"alt":64,"src":176,"style":177},[62,63],"https:\u002F\u002Fs3-ap-southeast-1.amazonaws.com\u002Fhomepage-media\u002Fwp-content\u002Fuploads\u002F2021\u002F11\u002F02174825\u002Faws-sample-system-diagram-768x383.png","width: 80%;",[15,179,180,181,186],{},"Danh sách các icon khác có trong ",[40,182,185],{"href":183,"rel":184},"https:\u002F\u002Fgithub.com\u002Fawslabs\u002Faws-icons-for-plantuml\u002Fblob\u002Fmain\u002FAWSSymbols.md",[44],"AWSSymbols.md"," của thư mục top",[10,188,190],{"id":189},"cảm-nhận","Cảm nhận",[15,192,193],{},"Vì có thể dùng VScode để tạo cho nên dễ dàng thao tác cùng lúc với người khác, dễ dàng quản lý version mà không cần phải bận tâm đến việc mua bản quyền phần mềm.",[15,195,196],{},"Không thể chỉnh sửa nhỏ nhặt hình vẽ mà chỉ có thể chọn vẽ từ trên xuống dưới, vẽ từ trái qua phải, v.v... Chính vì vậy, những ai đã biết điều trên và không chấp nhận thì không nên sử dụng.",[15,198,199],{},"Tuy nhiên, đối với tôi thì bỏ qua yếu tố không thể chỉnh sửa nhỏ nhặt thì có thể tạo được biểu đồ, hình vẽ, ghi những thứ cần thiết vào phần giải thích mà không cần phải suy nghĩ nhiều thứ, có thể tập trung công việc một cách hiệu quả hơn.",[10,201,203],{"id":202},"ghi-chú","Ghi chú",[15,205,206,207,212],{},"Cũng có người không muốn xây dựng môi trường local thì trên trang PlantUML có sẵn ",[40,208,211],{"href":209,"rel":210},"http:\u002F\u002Fwww.plantuml.com\u002Fplantuml\u002Fuml\u002FSyfFKj2rKt3CoKnELR1Io4ZDoSa70000",[44],"demo"," hãy dùng thử.",[15,214,215],{},"Cho dù không sử dụng Docker thì khi setting Plantuml: Render của VScode, nếu set URL của trang PlantUML thì cũng có thể sử dụng Preview. Tuy nhiên trường hợp sử dụng trang PlantUML thì cần phải cân nhắc kỹ xem những thứ sẽ tạo có phải là thông tin cơ mật hay không rồi hãy sử dụng.",[10,217,219],{"id":218},"tham-khảo","Tham khảo",[15,221,222],{},[40,223,226],{"href":224,"rel":225},"https:\u002F\u002Fplantuml.com\u002F",[44],"PlantUML",[15,228,229],{},[40,230,233],{"href":231,"rel":232},"https:\u002F\u002Fnote.com\u002Fkeyskey1021\u002Fn\u002Fn12cb62301f68",[44],"Tạo môi trường có thể vừa vẽ PlantUML vừa xem Preview trên Visual Studio Code bằng Docker",[15,235,236],{},[40,237,162],{"href":160,"rel":238},[44],{"title":64,"searchDepth":240,"depth":240,"links":241},2,[242,243,248,252,253,254,255],{"id":12,"depth":240,"text":13},{"id":26,"depth":240,"text":27,"children":244},[245,247],{"id":31,"depth":246,"text":32},3,{"id":69,"depth":246,"text":70},{"id":93,"depth":240,"text":94,"children":249},[250,251],{"id":97,"depth":246,"text":98},{"id":128,"depth":246,"text":129},{"id":144,"depth":240,"text":145},{"id":189,"depth":240,"text":190},{"id":202,"depth":240,"text":203},{"id":218,"depth":240,"text":219},"tech talk","Briswell Vietnam Co Ltd","2021-11-12","Giới thiệu PlantUML Trong quy trình phát triển phần mềm, dù áp dụng mô hình Waterfall hay mô hình Agile thì cũng thường hay sử dụng biểu đồ UML để giải thích yêu cầu, cấu trúc, chức năng. Tuy nhiên, tài liệu biểu đồ hình vẽ  không dùng Text Editor mà thường dùng ứng dụng vẽ hình và đôi lúc khó nhận biết được sự khác biệt giữa các version. Nếu dùng PlantUML thì có thể vẽ hình, biểu đồ bằng code và dễ dàng biết được sự khác biệt của các thay đổi, dễ dàng quản lý version.","md",{},true,"\u002Fvi\u002Fnews\u002Fplantuml",null,{"title":5,"description":259},"vi\u002Fnews\u002Fplantuml","https:\u002F\u002Fhomepage-media.s3.ap-southeast-1.amazonaws.com\u002Fwp-content\u002Fuploads\u002F2026\u002F06\u002F03135600\u002FPlantuml_Logo_M.png","1zOW4SH26ut_ecFMrMGrQepBWsGSB9Ua_V2xDv81fGs",1782205038187]