Setting up PlantUML for coding C4 architecture diagrams in Visual Studio Code

hi this is joy and welcome to my first video tutorial experiment since I have not a native English speaker, I am making use of Polly service. It is a text-to-speech service provided by Amazon AWS cloud platform this tutorial is about setting up PlantUML for coding C4 architecture diagrams. Why C4 architecture model and what is solves and software architecture is already available in the blog post. The URL is present in the description section for easy access. Here we will be seeing how to set up the environment as described in the post. Let's start first install Java. That will make sure the path variable is set properly. Then install GraphViz. There is no issue installing in different order as those are not dependent. Now let's install GraphViz. It is easy as double-clicking the installer and pressing some next buttons in the wizard. During the installation, let's see where to download the Graphviz software. It is free to use thanks to the developers of graph is find and graphviz in Internet is easy Just fire up an existing or new browser session. Google the term download graphViz. windows. Mostly the first link would be the place to go in case we are not seeing it the specific URL is https://graphviz.gitlab.io/download/ It is mentioned in description as well. We can get the source code if needed. The Installer used in this video is Windows install package. Let's go back to installation and check how far it completed the installation process. Yes it is completed we can see the graph is software installed in the programs and features view of control panel. We now have Java runtime and Graphviz installed in our system. We will be using Microsoft Visual Studio code for coding the architecture diagrams. It doesn't have out of box support for plant UML diagrams but we can get it by using extensions. Let's see what is next step. The next step is to download an install Visual Studio code this machine already has Visual Studio code installed. If it is not it can be easily located by Google search let's fire up VS code and see the plant UML extension. Visual Studio code takes time based on the machine config and resource availability. Usually it's really fast to load up once we get the VS Code is ready to use we need to add the PlantUML extension to do so let's go to extensions view. Simply search for PlantUML. Mostly the first one is what we need in case there are more in future please note the extension author named Jebb's which is used in this tutorial Big thanks to Jebb's for making a good extension for the community There is one more step left. PlantUML doesn't support c4 architecture diagrams out-of-the-box in order to get the support we need c4 architecture library Libraries are similar to CSS stylesheets if we consider plant UML as HTML let's open c4 architecture library in github. It has all different types of diagrams such as context container and component as separate libraries. But if we get container library, it would be having the shapes for context as well. Let's download the container library from github. To download click on the raw button. This opens the raw file. Press ctrl+ s button this opens the file saved dialog box. Give a location where to download as we do for any download operation in browser. Here the path used is little long and typing takes time Once the location is set hit the Save button to complete the download process Let's see how all this works together next. The c4 architecture library github site has good documentation on how to use the library.First is about how to include the library into our code. We can download and include from our local folder. Another way is to refer to the original file in this repository. The next interesting thing here in this repository is the sample PlantUML code for c4 architecture diagram. Let's see how this sample can be used in our machine. In order to see the sample code in action, we need the editor and it's Visual Studio code. We are back in Visual Studio code. First, we need a file to copy paste the code from the c4 library's github repository.Let's create a file named container the extension used here is .puml. Once the file editing window is available paste the sample code next we need to see the diagram. The magic shortcut is Alt + T. Press Alt + D. It will open the preview pane at the right side it shows processing.Till the processing is completed in the background remember we installed couple of software. All has to work to get this preview working. Let's talk some internal how all these are working. PlantUML extension running inside Visual Studio code triggers Java with corresponding plantuml jar file included within the plug-in also passes the text we just copy/paste that into the editor. It understand the diagram text in uses graphviz software to find the right graphical points for the shapes. Finally diagram rendered. Let's do some changes to diagram text. First we are changing the system in this example to represent www.Joymononline.in website. It is just a personal profile site. All static contents. Nothing fancy. It normally updates automatically the diagram shown in right side of the screen.If not we can press the shortcut key Alt + D. The system has two properties to change the name in the description. Though this diagram contains container and relation objects let's take person to modify. We are now changing the person's label to Internet user. By this time the system details change to joymononline.in. As we are seeing the person person details are not yet reflected in the diagram. Without waiting for the automatic refresh of diagram, let's try the Alt + D shortcut this triggers command to refresh the right-side diagram from the textual contents in the left side. It's taking some time. This time as it is a demo a bit more than the usual time.But at last the right side will be changed and show the latest diagram text. Yes we got it changed.

Channel: Joymon v/s Code

Views: 20,926

Keywords: PlantUML, Software Architecture, Visual Studio Code, puml

Id: Zt3Bj1HMJ8g

Length: 6min 16sec (376 seconds)

Published: Wed Jul 24 2019