{"id":2802,"date":"2023-02-26T17:34:31","date_gmt":"2023-02-26T09:34:31","guid":{"rendered":"https:\/\/blog.warbel.net\/?p=2802"},"modified":"2023-02-26T17:34:31","modified_gmt":"2023-02-26T09:34:31","slug":"learning-puml-for-project-design-and-delivery","status":"publish","type":"post","link":"https:\/\/blog.warbel.net\/index.php\/2023\/02\/26\/learning-puml-for-project-design-and-delivery\/","title":{"rendered":"Learning PUML for Project Design and Delivery"},"content":{"rendered":"<p>I stumbled across the &#8220;<a href=\"https:\/\/c4model.com\/\">C4 Model for visualising software architecture<\/a>&#8221; via a <a href=\"https:\/\/jorzel.github.io\/how-to-visualize-your-system-architecture-using-the-c4-model\/\">blogpost<\/a> I saw on <a href=\"https:\/\/news.ycombinator.com\/news\">HackerNews<\/a> back before Christmas and had been waiting for an opportunity to try out the model for myself. I&#8217;ve always hated making system design diagrams, probably because I&#8217;ve always found it:<\/p>\r\n<ul>\r\n<li>time consuming;<\/li>\r\n<li>impossible to meaningfully track changes.<\/li>\r\n<li>difficult because I lacked appropriate tooling and an methodological framework and;<\/li>\r\n<li>boring.<\/li>\r\n<\/ul>\r\n<p>I liked what I saw in the above links because it addressed the first three problems I had: I could cut down how long it took to make diagrams by writing PUML code, track changes in a git repository, and configure VSCode with plugins to generate the images and relationships programmatically for usage in documentation\/wikis. And because it meant I could write my diagrams in code, it fixed the 4th problem and now, I actually enjoy making diagrams.<\/p>\r\n<p>I now use the <a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=jebbs.plantuml\">Vscode PlantUML<\/a> Plugin which on linux also required the installation of graphviz:<\/p>\r\n<div class=\"hcb_wrap\">\r\n<pre class=\"prism undefined-numbers lang-bash\" data-lang=\"Bash\"><code>sudo apt install graphviz -y<\/code><\/pre>\r\n<\/div>\r\n<p>And after some basic configuration to get the plugin working it becomes quite easy to work on creating diagrams.<\/p>\r\n<div class=\"hcb_wrap\">\r\n<pre class=\"prism undefined-numbers lang-php\" data-lang=\"PHP\"><code>@startuml\r\n!include https:\/\/raw.githubusercontent.com\/plantuml-stdlib\/C4-PlantUML\/master\/C4_Container.puml\r\n\r\nPerson(personAlias, \"Label\", \"Optional Description\")\r\nContainer(containerAlias, \"Label\", \"Technology\", \"Optional Description\")\r\nSystem(systemAlias, \"Label\", \"Optional Description\")\r\n\r\nRel(personAlias, containerAlias, \"Label\", \"Optional Technology\")\r\n@enduml <\/code><\/pre>\r\n<\/div>\r\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blog.warbel.net\/wp-content\/uploads\/2023\/02\/example.png\" alt=\"\" width=\"367\" height=\"333\" class=\"alignnone size-full wp-image-2805\" srcset=\"https:\/\/blog.warbel.net\/wp-content\/uploads\/2023\/02\/example.png 367w, https:\/\/blog.warbel.net\/wp-content\/uploads\/2023\/02\/example-300x272.png 300w, https:\/\/blog.warbel.net\/wp-content\/uploads\/2023\/02\/example-331x300.png 331w\" sizes=\"auto, (max-width: 367px) 100vw, 367px\" \/><\/p>\r\n<p>Screenshot of VScode:<\/p>\r\n<div id=\"attachment_2806\" style=\"width: 594px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-2806\" src=\"https:\/\/blog.warbel.net\/wp-content\/uploads\/2023\/02\/Screenshot_20230226_172248-1024x479.png\" alt=\"\" width=\"584\" height=\"273\" class=\"wp-image-2806 size-large\" srcset=\"https:\/\/blog.warbel.net\/wp-content\/uploads\/2023\/02\/Screenshot_20230226_172248-1024x479.png 1024w, https:\/\/blog.warbel.net\/wp-content\/uploads\/2023\/02\/Screenshot_20230226_172248-300x140.png 300w, https:\/\/blog.warbel.net\/wp-content\/uploads\/2023\/02\/Screenshot_20230226_172248-768x360.png 768w, https:\/\/blog.warbel.net\/wp-content\/uploads\/2023\/02\/Screenshot_20230226_172248-500x234.png 500w, https:\/\/blog.warbel.net\/wp-content\/uploads\/2023\/02\/Screenshot_20230226_172248.png 1442w\" sizes=\"auto, (max-width: 584px) 100vw, 584px\" \/><p id=\"caption-attachment-2806\" class=\"wp-caption-text\">VSCode and rendering plugin<\/p><\/div>\r\n<p>Obviously I cannot include any of the diagrams I&#8217;ve made for work here on my blog, so I&#8217;ve used code and examples from the <a href=\"https:\/\/github.com\/plantuml-stdlib\/C4-PlantUML\">Git repository for the C4 Model instead<\/a>. The repository includes everything you need to generate visually pleasing models. I found that after a few days of using the examples in the repo, I&#8217;ve been able to make quite useful diagrams for our new file transfer system I&#8217;ve been designing at work that&nbsp; illustrates the system we&#8217;re designing and building. The C4 Model repository also makes use of <a href=\"https:\/\/github.com\/tupadr3\/plantuml-icon-font-sprites\/\">another repository<\/a> of images\/sprites which I&#8217;ve utilised to add some flair and <span>comprehensibility<\/span> to the diagrams.<\/p>\r\n<!-- \/wp:post-content -->","protected":false},"excerpt":{"rendered":"<p>I stumbled across the &#8220;C4 Model for visualising software architecture&#8221; via a blogpost I saw on HackerNews back before Christmas and had been waiting for an opportunity to try out the model for myself. I&#8217;ve always hated making system design &hellip; <a href=\"https:\/\/blog.warbel.net\/index.php\/2023\/02\/26\/learning-puml-for-project-design-and-delivery\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ngg_post_thumbnail":0,"footnotes":""},"categories":[114],"tags":[117,115,116],"class_list":["post-2802","post","type-post","status-publish","format-standard","hentry","category-programming","tag-c4-model","tag-puml","tag-system-design"],"_links":{"self":[{"href":"https:\/\/blog.warbel.net\/index.php\/wp-json\/wp\/v2\/posts\/2802","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.warbel.net\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.warbel.net\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.warbel.net\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.warbel.net\/index.php\/wp-json\/wp\/v2\/comments?post=2802"}],"version-history":[{"count":5,"href":"https:\/\/blog.warbel.net\/index.php\/wp-json\/wp\/v2\/posts\/2802\/revisions"}],"predecessor-version":[{"id":2809,"href":"https:\/\/blog.warbel.net\/index.php\/wp-json\/wp\/v2\/posts\/2802\/revisions\/2809"}],"wp:attachment":[{"href":"https:\/\/blog.warbel.net\/index.php\/wp-json\/wp\/v2\/media?parent=2802"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.warbel.net\/index.php\/wp-json\/wp\/v2\/categories?post=2802"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.warbel.net\/index.php\/wp-json\/wp\/v2\/tags?post=2802"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}