[{"data":1,"prerenderedAt":265},["ShallowReactive",2],{"news-item-\u002Fja\u002Fnews\u002Fplantuml":3},{"id":4,"title":5,"body":6,"category":252,"created by":253,"date":254,"description":255,"extension":256,"meta":257,"navigation":258,"path":259,"sections":260,"seo":261,"stem":262,"thumbnail":263,"__hash__":264},"content_ja\u002Fja\u002Fnews\u002Fplantuml.md","PlantUML- コードでUML図を書く",{"type":7,"value":8,"toc":235},"minimark",[9,14,18,21,24,27,32,35,46,49,57,66,70,73,76,90,93,96,99,109,112,116,119,123,126,129,132,135,138,142,145,160,163,169,174,183,186,189,192,195,198,201,210,213,216,223,230],[10,11,13],"h2",{"id":12},"plantumlについて","PlantUMLについて",[15,16,17],"p",{},"ウォータフロー、アジャイルを問わずソフトウェア開発においてUML図を用いて要件や構成、機能の説明を行うことは多々あります。",[15,19,20],{},"ただ、図を用いたドキュメントはテキストエディタではなく、描画用のアプリケーションを用いられることが多く、バージョン毎の差異がわかりにくいといったことがあります。",[15,22,23],{},"PlantUMLを使うとコードベースで作成でき、それを元に図を作成するため差分がわかりやすく、バージョン管理を行いやすいと思われます。",[10,25,26],{"id":26},"ローカル環境構築",[28,29,31],"h3",{"id":30},"plantumlをローカルホストで起動","PlantUMLをローカルホストで起動",[15,33,34],{},"Dockerを使った簡単な導入方法を説明します。",[15,36,37,38,45],{},"1. Dockerをインストールし、Dockerを起動します。（Dockerのインストール方法は",[39,40,44],"a",{"href":41,"rel":42},"https:\u002F\u002Fbriswell-vn.com\u002Fen\u002Fnews\u002Flaunch-with-docker\u002F",[43],"nofollow","こちら","を参考にしてください。）",[15,47,48],{},"2. \"docker run -d -p 8080:8080 plantuml\u002Fplantuml-server:jetty\"のコマンドを実行し、plantumlUMLのDocker containerを起動してください。",[15,50,51,52],{},"3. ブラウザで\"",[39,53,56],{"href":54,"rel":55},"http:\u002F\u002Flocalhost:8080\u002F%22%E3%81%AB%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9%E3%81%97%E3%80%81%E4%B8%8B%E8%A8%98%E3%81%AE%E3%82%88%E3%81%86%E3%81%AB%E8%A1%A8%E7%A4%BA%E3%81%95%E3%82%8C%E3%82%8B%E3%81%A8%E6%88%90%E5%8A%9F%E3%81%A7%E3%81%99%E3%80%82",[43],"http:\u002F\u002Flocalhost:8080\u002F\"にアクセスし、下記のように表示されると成功です。",[58,59],"img",{"className":60,"alt":63,"src":64,"style":65},[61,62],"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%;",[28,67,69],{"id":68},"vscodeの設定","VScodeの設定",[15,71,72],{},"1. Extensionを選択し、PlantUMLをインストールします。",[15,74,75],{},"2. PlantUMLのExtension settingを開き、下記のように設定します。",[77,78,79,83],"ul",{},[80,81,82],"li",{},"Plantuml: Render => PlantUMLServer",[80,84,85,86],{},"Plantuml: Server => ",[39,87,88],{"href":88,"rel":89},"http:\u002F\u002Flocalhost:8080",[43],[10,91,92],{"id":92},"使い方",[28,94,95],{"id":95},"編集をしながらプレビューを表示",[15,97,98],{},"1. UMLファイル(*******.uml)をVScodeで作成し、下記のコードをコピーペーストしてください。",[100,101,106],"pre",{"className":102,"code":104,"language":105},[103],"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",[107,108,104],"code",{"__ignoreMap":63},[15,110,111],{},"2. VScodeのコマンドパネルから\"PlantUML:Preview Current Diagram\"を選択します。",[58,113],{"className":114,"alt":63,"src":115,"style":65},[61,62],"https:\u002F\u002Fs3-ap-southeast-1.amazonaws.com\u002Fhomepage-media\u002Fwp-content\u002Fuploads\u002F2021\u002F11\u002F02174035\u002Fimage-20211029165031071-768x259.png",[15,117,118],{},"3. プレビュー画面が表示されます。",[58,120],{"className":121,"alt":63,"src":122,"style":65},[61,62],"https:\u002F\u002Fs3-ap-southeast-1.amazonaws.com\u002Fhomepage-media\u002Fwp-content\u002Fuploads\u002F2021\u002F11\u002F02174105\u002Fimage-20211029171040393-768x749.png",[28,124,125],{"id":125},"図を出力",[15,127,128],{},"1. VScodeのコマンドパネルから\"PlantUML: Export Current File Diagrams\"を選択します。",[15,130,131],{},"2. pngを選択します。",[15,133,134],{},"3. outフォルダが作成されその下に画像ファイルが出力されます。",[15,136,137],{},"アクティビティ図以外にも、シーケンス図やユースケース図、クラス図も作成可能でサンプルもPlantUMLのサイトに記載されているので、参考にしてください。",[10,139,141],{"id":140},"awsサービスを使ったシステム構成図の作成","AWSサービスを使ったシステム構成図の作成",[15,143,144],{},"PlantUML上でAWSのICONが使用できるようGitHubで提供してくれています。",[15,146,147,148,153,154,159],{},"以前は",[39,149,152],{"href":150,"rel":151},"https:\u002F\u002Fgithub.com\u002Fmilo-minderbinder\u002FAWS-PlantUML",[43],"AWS-PlantUML","が使用されていたようですが、最近更新が行われていないようです。その代わりとして、",[39,155,158],{"href":156,"rel":157},"https:\u002F\u002Fgithub.com\u002Fawslabs\u002Faws-icons-for-plantuml",[43],"aws-icons-for-plantuml","を使用したいと思います。",[15,161,162],{},"こちらを利用した構成図は下記となっています。",[100,164,167],{"className":165,"code":166,"language":105},[103],"@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",[107,168,166],{"__ignoreMap":63},[58,170],{"className":171,"alt":63,"src":172,"style":173},[61,62],"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,175,176,177,182],{},"その他使用したいアイコンの一覧はトップフォルダの",[39,178,181],{"href":179,"rel":180},"https:\u002F\u002Fgithub.com\u002Fawslabs\u002Faws-icons-for-plantuml\u002Fblob\u002Fmain\u002FAWSSymbols.md",[43],"AWSSymbols.md","に記載されています。",[10,184,185],{"id":185},"感想",[15,187,188],{},"VScodeで作成できることからソフトウェアライセンスの購入を気にせず、他者と共同作業が行いやすいです。またバージョン管理もしやすくなります。",[15,190,191],{},"図の微調整ができず、上から下に書くか、左から右に書くかといった選択しかできないです。",[15,193,194],{},"そのため、説明を受ける人が許容できなければ利用はしない方が良いでしょう。",[15,196,197],{},"ただ、私としては細かい調整ができないということで割り切って図を作成することができ、余計なことを考えず説明に必要なものだけを書き、効率よく集中して作業ができると考えてます。",[10,199,200],{"id":200},"補足",[15,202,203,204,209],{},"ローカルに環境を構築したくないという人はPlantUMLのサイトの",[39,205,208],{"href":206,"rel":207},"http:\u002F\u002Fwww.plantuml.com\u002Fplantuml\u002Fuml\u002FSyfFKj2rKt3CoKnELR1Io4ZDoSa70000",[43],"demo","があるため、そちらを試してもらえればと思います。",[15,211,212],{},"また、Dockerを使わなくてもVScodeのPlantuml: Renderの設定で、PlantUMLのサイトのURLを設定すればPreviewを使用することができます。ただ、PlantUMLのサイトを使う場合、作成するものが機密情報として扱われているものかどうか考えてから利用される方が良いと思います。",[10,214,215],{"id":215},"参照",[15,217,218],{},[39,219,222],{"href":220,"rel":221},"https:\u002F\u002Fplantuml.com\u002F",[43],"PlantUML",[15,224,225],{},[39,226,229],{"href":227,"rel":228},"https:\u002F\u002Fnote.com\u002Fkeyskey1021\u002Fn\u002Fn12cb62301f68",[43],"Visual Studio Codeでプレビューを見ながらPlantUMLを書ける環境をDockerで作る",[15,231,232],{},[39,233,158],{"href":156,"rel":234},[43],{"title":63,"searchDepth":236,"depth":236,"links":237},2,[238,239,244,248,249,250,251],{"id":12,"depth":236,"text":13},{"id":26,"depth":236,"text":26,"children":240},[241,243],{"id":30,"depth":242,"text":31},3,{"id":68,"depth":242,"text":69},{"id":92,"depth":236,"text":92,"children":245},[246,247],{"id":95,"depth":242,"text":95},{"id":125,"depth":242,"text":125},{"id":140,"depth":236,"text":141},{"id":185,"depth":236,"text":185},{"id":200,"depth":236,"text":200},{"id":215,"depth":236,"text":215},"tech talk","Briswell Vietnam Co Ltd","2021-11-12","PlantUMLについて ウォータフロー、アジャイルを問わずソフトウェア開発においてUML図を用いて要件や構成、機能の説明を行うことは多々あります。 ただ、図を用いたドキュメントはテキストエディタではなく、描画用のアプリケーションを用いられることが多く、バージョン毎の差異がわかりにくいといったことがあります。 PlantUMLを使うとコードベースで作成でき、それを元に図を作成するため差分がわかりやすく、バージョン管理を行いやすいと思われます。","md",{},true,"\u002Fja\u002Fnews\u002Fplantuml",null,{"title":5,"description":255},"ja\u002Fnews\u002Fplantuml","https:\u002F\u002Fhomepage-media.s3.ap-southeast-1.amazonaws.com\u002Fwp-content\u002Fuploads\u002F2026\u002F06\u002F03135600\u002FPlantuml_Logo_M.png","dj0TdyRE9HCAEdK2a9pOAsGJAZYEv33dB0zLspWH12g",1784703338318]