[{"data":1,"prerenderedAt":269},["ShallowReactive",2],{"news-item-\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_en\u002Fnews\u002Fplantuml.md","PlantUML to write UML diagram by code",{"type":7,"value":8,"toc":239},"minimark",[9,14,18,21,24,28,33,36,47,50,67,71,74,77,91,95,99,102,112,119,122,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},"about-plantuml","About PlantUML",[15,16,17],"p",{},"There are many situations to explain requirements, configurations, and functions using UML diagrams in the software developments regardless of Waterfall or Agile model.",[15,19,20],{},"But the diagram documents are not created by text editors, by drawing applications so it is difficult to understand the gap in every version.",[15,22,23],{},"PlantUML helps us to create them by coding so it is easy to understand the differences by text. That is easy to manage versions.",[10,25,27],{"id":26},"create-local-environment","Create Local Environment",[29,30,32],"h3",{"id":31},"start-plantuml-in-local-host","Start PlantUML in local host",[15,34,35],{},"Explain the easy installation using Docker.",[15,37,38,39,46],{},"1. Install Docker and start it.（Check ",[40,41,45],"a",{"href":42,"rel":43},"https:\u002F\u002Fbriswell-vn.com\u002Fen\u002Fnews\u002Flaunch-with-docker\u002F",[44],"nofollow","here"," to install Docker.）",[15,48,49],{},"2. Execute this command \"docker run -d -p 8080:8080 plantuml\u002Fplantuml-server:jetty\" and start the Docker container of PlantUML.",[15,51,52,53,57,58],{},"3. Access to \"",[40,54,55],{"href":55,"rel":56},"http:\u002F\u002Flocalhost:8080\u002F",[44],"\" in your browser. It success when it is shown like below's screen. ",[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. Click Extension and、Install \"PlantUML\" plug-in.",[15,75,76],{},"2. Open Extension setting of it and set it as below's.",[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},"how-to-use","How to use",[29,96,98],{"id":97},"show-preview-while-editting","Show preview while editting",[15,100,101],{},"1. Create an UML file, *****.uml, and copy below's code and paste to the file.",[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. Choose \"PlantUML:Preview Current Diagram\" on the command pannel.\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],{},"3. Show the preview window",[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},"output-diagram","Output diagram",[15,131,132],{},"1. Choose \"PlantUML: Export Current File Diagrams\" on the command panel.",[15,134,135],{},"2. Choose png.",[15,137,138],{},"3. Created \"out\" folder and created the image file under this folder.",[15,140,141],{},"It is possible for us to create the Sequence diagram, the Use-case diagrams, the Class diagram, and etc besides the Activity diagram and the site has samples to create them so check up this site.",[10,143,145],{"id":144},"create-system-configuration-diagram-using-aws-services","Create system configuration diagram using AWS services",[15,147,148],{},"Give us the icons of AWS for PlantUML on GitHub.",[15,150,151,152,157,158,163],{},"Previously, ",[40,153,156],{"href":154,"rel":155},"https:\u002F\u002Fgithub.com\u002Fmilo-minderbinder\u002FAWS-PlantUML",[44],"AWS-PlantUML"," was often used to. But recently it is not updated. For this reason I use ",[40,159,162],{"href":160,"rel":161},"https:\u002F\u002Fgithub.com\u002Fawslabs\u002Faws-icons-for-plantuml",[44],"aws-icons-for-plantuml"," as alternative.",[15,165,166],{},"The diagram using it is below's.",[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],{},"The icons you want to use besides are written ",[40,182,185],{"href":183,"rel":184},"https:\u002F\u002Fgithub.com\u002Fawslabs\u002Faws-icons-for-plantuml\u002Fblob\u002Fmain\u002FAWSSymbols.md",[44],"AWSSymbols.md"," under the top folder.",[10,188,190],{"id":189},"impression","Impression",[15,192,193],{},"Creating them by VScode causes no need to buy software licenses to create the diagrams and it is easy to work with others. And it is easy to manage the version also.",[15,195,196],{},"We can not adjust the position of diagrams. The setting of the position is only drawn from top to down or from left to right. For that reason, it is better to avoid using it if the people who are got explanations can not be accepted.",[15,198,199],{},"But for me, It is possible to focus to create the diagrams efficiently by not mind adust the position in detail and writing only important things. I think.",[10,201,203],{"id":202},"note","Note",[15,205,206,207,212],{},"If you don't want to create the local environment, try to use ",[40,208,211],{"href":209,"rel":210},"http:\u002F\u002Fwww.plantuml.com\u002Fplantuml\u002Fuml\u002FSyfFKj2rKt3CoKnELR1Io4ZDoSa70000",[44],"demo"," of PlantUML site.",[15,214,215],{},"And then you can use Preview of VScode without Docker when you set the URL of PlantUML to \"Plantuml: Render\". But It is better to use it considering the documents that you create are confidential or not.",[10,217,219],{"id":218},"refer-to","Refer to",[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],"Visual Studio Codeでプレビューを見ながらPlantUMLを書ける環境を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","About PlantUML There are many situations to explain requirements, configurations, and functions using UML diagrams in the software developments regardless of Waterfall or Agile model. But the diagram documents are not created by text editors, by drawing applications so it is difficult to understand the gap in every version.","md",{},true,"\u002Fnews\u002Fplantuml",null,{"title":5,"description":259},"news\u002Fplantuml","https:\u002F\u002Fhomepage-media.s3.ap-southeast-1.amazonaws.com\u002Fwp-content\u002Fuploads\u002F2026\u002F06\u002F03135600\u002FPlantuml_Logo_M.png","guDDlMe9wnlVuPFRum7a7RdOlbhL8-qt7MFMrFkr-xY",1782263086441]