\n
![\"\"](\"https:\/\/briswell-vn.com\/wp-content\/uploads\/2021\/11\/image-20211029173703751-300x123.png\")
<\/li>\n<\/ol>\nSetting VScode<\/h3>\n\n- Click Extension and\u3001Install “PlantUML” plug-in.<\/li>\n
- Open Extension setting of it and set it as below’s.\n
\n- Plantuml: Render => PlantUMLServer<\/li>\n
- Plantuml: Server => http:\/\/localhost:8080<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n
How to use<\/h2>\nShow preview while editting<\/h3>\n\n- Create an UML file, *****.uml, and copy below’s code and paste to the file.
\n@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->\/\/merged step\/\/;
\n:Alert \"Success\";
\nstop
\n@enduml<\/code><\/li>\n- Choose “PlantUML:Preview Current Diagram” on the command pannel.
\n![\"\"](\"https:\/\/briswell-vn.com\/wp-content\/uploads\/2021\/11\/image-20211029165031071-300x101.png\")
<\/li>\n - Show the preview window
\n![\"\"](\"https:\/\/briswell-vn.com\/wp-content\/uploads\/2021\/11\/image-20211029171040393-300x293.png\")
<\/li>\n<\/ol>\nOutput diagram<\/h3>\n\n- Choose “PlantUML: Export Current File Diagrams” on the command panel.<\/li>\n
- Choose png.<\/li>\n
- Created “out” folder and created the image file under this folder.<\/li>\n<\/ol>\n
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.<\/p>\n
Create system configuration diagram using AWS services<\/h2>\n
Give us the icons of AWS for PlantUML on GitHub.<\/p>\n
Previously, AWS-PlantUML<\/a> was often used to. But recently it is not updated. For this reason I use aws-icons-for-plantuml<\/a> as alternative.<\/p>\nThe diagram using it is below’s.<\/p>\n
\n@startuml aws-sample-system-diagram<\/p>\n!define AWSPuml https:\/\/raw.githubusercontent.com\/awslabs\/aws-icons-for-plantuml\/v11.1\/dist
\n!includeurl AWSPuml\/AWSCommon.puml
\n!includeurl AWSPuml\/NetworkingContentDelivery\/ElasticLoadBalancingApplicationLoadBalancer.puml
\n!includeurl AWSPuml\/GroupIcons\/Region.puml
\n!includeurl AWSPuml\/NetworkingContentDelivery\/Route53.puml
\n!includeurl AWSPuml\/Compute\/all.puml
\n!includeurl AWSPuml\/Storage\/SimpleStorageService.puml
\n!includeurl AWSPuml\/Database\/AuroraMySQLInstance.puml
\n!includeurl AWSPuml\/Database\/ElastiCacheElastiCacheforRedis.puml<\/p>\n
left to right direction<\/p>\n
actor \"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}<\/p>\n
personAlias --> route53
\nroute53 --> elb
\nelb --> desktopAlias
\nelb --> storageAlias
\ndesktopAlias --> storageAlias
\ndesktopAlias --> redis
\nrds <--> desktopAlias
\n@enduml<\/p>\n
<\/code><\/p>\n
![\"\"](\"https:\/\/briswell-vn.com\/wp-content\/uploads\/2021\/11\/aws-sample-system-diagram-300x150.png\")
<\/p>\n
The icons you want to use besides are written AWSSymbols.md<\/a> under the top folder.<\/p>\nImpression<\/h2>\n
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.<\/p>\n
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.
\nFor that reason, it is better to avoid using it if the people who are got explanations can not be accepted.<\/p>\n
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.<\/p>\n
Note<\/h2>\n
If you don’t want to create the local environment, try to use demo<\/a> of PlantUML site.<\/p>\nAnd 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.<\/p>\n
Refer to<\/h2>\n
PlantUML<\/a>
\nVisual Studio Code\u3067\u30d7\u30ec\u30d3\u30e5\u30fc\u3092\u898b\u306a\u304c\u3089PlantUML\u3092\u66f8\u3051\u308b\u74b0\u5883\u3092Docker\u3067\u4f5c\u308b<\/a>
\naws-icons-for-plantuml<\/a><\/p>","protected":false},"excerpt":{"rendered":"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. PlantUML helps us to create them by coding so it is easy to understand the differences […]<\/p>\n","protected":false},"author":2,"featured_media":6316,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_mi_skip_tracking":false,"footnotes":""},"categories":[4,9,71],"tags":[],"class_list":["post-6283","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-news","category-general","category-it-tec"],"_links":{"self":[{"href":"https:\/\/www.briswell-vn.com\/en\/wp-json\/wp\/v2\/posts\/6283","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.briswell-vn.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.briswell-vn.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.briswell-vn.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.briswell-vn.com\/en\/wp-json\/wp\/v2\/comments?post=6283"}],"version-history":[{"count":0,"href":"https:\/\/www.briswell-vn.com\/en\/wp-json\/wp\/v2\/posts\/6283\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.briswell-vn.com\/en\/wp-json\/wp\/v2\/media\/6316"}],"wp:attachment":[{"href":"https:\/\/www.briswell-vn.com\/en\/wp-json\/wp\/v2\/media?parent=6283"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.briswell-vn.com\/en\/wp-json\/wp\/v2\/categories?post=6283"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.briswell-vn.com\/en\/wp-json\/wp\/v2\/tags?post=6283"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- \n
- Plantuml: Render => PlantUMLServer<\/li>\n
- Plantuml: Server => http:\/\/localhost:8080<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n
How to use<\/h2>\n
Show preview while editting<\/h3>\n
- \n
- Create an UML file, *****.uml, and copy below’s code and paste to the file.
\n@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->\/\/merged step\/\/;
\n:Alert \"Success\";
\nstop
\n@enduml<\/code><\/li>\n- Choose “PlantUML:Preview Current Diagram” on the command pannel.
\n<\/li>\n- Show the preview window
\n<\/li>\n<\/ol>\nOutput diagram<\/h3>\n
- \n
- Choose “PlantUML: Export Current File Diagrams” on the command panel.<\/li>\n
- Choose png.<\/li>\n
- Created “out” folder and created the image file under this folder.<\/li>\n<\/ol>\n
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.<\/p>\n
Create system configuration diagram using AWS services<\/h2>\n
Give us the icons of AWS for PlantUML on GitHub.<\/p>\n
Previously, AWS-PlantUML<\/a> was often used to. But recently it is not updated. For this reason I use aws-icons-for-plantuml<\/a> as alternative.<\/p>\n
The diagram using it is below’s.<\/p>\n
\n@startuml aws-sample-system-diagram<\/p>\n!define AWSPuml https:\/\/raw.githubusercontent.com\/awslabs\/aws-icons-for-plantuml\/v11.1\/dist
\n!includeurl AWSPuml\/AWSCommon.puml
\n!includeurl AWSPuml\/NetworkingContentDelivery\/ElasticLoadBalancingApplicationLoadBalancer.puml
\n!includeurl AWSPuml\/GroupIcons\/Region.puml
\n!includeurl AWSPuml\/NetworkingContentDelivery\/Route53.puml
\n!includeurl AWSPuml\/Compute\/all.puml
\n!includeurl AWSPuml\/Storage\/SimpleStorageService.puml
\n!includeurl AWSPuml\/Database\/AuroraMySQLInstance.puml
\n!includeurl AWSPuml\/Database\/ElastiCacheElastiCacheforRedis.puml<\/p>\nleft to right direction<\/p>\n
actor \"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}<\/p>\npersonAlias --> route53
\nroute53 --> elb
\nelb --> desktopAlias
\nelb --> storageAlias
\ndesktopAlias --> storageAlias
\ndesktopAlias --> redis
\nrds <--> desktopAlias
\n@enduml<\/p>\n<\/code><\/p>\n
<\/p>\nThe icons you want to use besides are written AWSSymbols.md<\/a> under the top folder.<\/p>\n
Impression<\/h2>\n
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.<\/p>\n
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.
\nFor that reason, it is better to avoid using it if the people who are got explanations can not be accepted.<\/p>\nBut 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.<\/p>\n
Note<\/h2>\n
If you don’t want to create the local environment, try to use demo<\/a> of PlantUML site.<\/p>\n
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.<\/p>\n
Refer to<\/h2>\n
PlantUML<\/a>
\nVisual Studio Code\u3067\u30d7\u30ec\u30d3\u30e5\u30fc\u3092\u898b\u306a\u304c\u3089PlantUML\u3092\u66f8\u3051\u308b\u74b0\u5883\u3092Docker\u3067\u4f5c\u308b<\/a>
\naws-icons-for-plantuml<\/a><\/p>","protected":false},"excerpt":{"rendered":"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. PlantUML helps us to create them by coding so it is easy to understand the differences […]<\/p>\n","protected":false},"author":2,"featured_media":6316,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_mi_skip_tracking":false,"footnotes":""},"categories":[4,9,71],"tags":[],"class_list":["post-6283","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-news","category-general","category-it-tec"],"_links":{"self":[{"href":"https:\/\/www.briswell-vn.com\/en\/wp-json\/wp\/v2\/posts\/6283","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.briswell-vn.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.briswell-vn.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.briswell-vn.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.briswell-vn.com\/en\/wp-json\/wp\/v2\/comments?post=6283"}],"version-history":[{"count":0,"href":"https:\/\/www.briswell-vn.com\/en\/wp-json\/wp\/v2\/posts\/6283\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.briswell-vn.com\/en\/wp-json\/wp\/v2\/media\/6316"}],"wp:attachment":[{"href":"https:\/\/www.briswell-vn.com\/en\/wp-json\/wp\/v2\/media?parent=6283"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.briswell-vn.com\/en\/wp-json\/wp\/v2\/categories?post=6283"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.briswell-vn.com\/en\/wp-json\/wp\/v2\/tags?post=6283"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- Choose “PlantUML:Preview Current Diagram” on the command pannel.
- Create an UML file, *****.uml, and copy below’s code and paste to the file.