Hello! In this video I'm going to show you in VisualStudio Code how to use PlantUML We're going to use the PlantUML extension in VSCode (I'm showing it to you now). It's called PlantUML. It has a lot of users and it has five stars, and I like this plug-in a lot. So let's get started! I've created an empty folder
called "PlantUML tutorial" and I've opened that folder in Visual Studio Code. We're just going to start by creating a simple document. We'll call it "sequence.plantuml" -- "plantuml" is the extension that the plug-in for Visual Studio Code will recognize. So we'll start off with the standard syntax for PlantUML, which is "startuml" I can use code completion to complete my document. I will also look at the syntax and it will tell me that this diagram is unnamed. I should give a name to the
document. It is optional to give this name, but it's useful. So we'll call it
"hello world". I'll show you the ending syntax, "enduml" which is also recognized
here. I'll take the code completion. So basically every PlantUML document
starts off with "@startuml" and "@enduml".
The "@" signs are at the beginning of each line. So let's do a sequence diagram. There's the object A sending to the object B the message: "Hello" The editor is okay with the syntax. I will show you how to preview the diagram.
That's the best part about UML. It is visual. The show preview option
shows me a preview of my diagram, and I can actually modify it, "hello world", and the preview will update even without saving. Pretty cool! I'll show you some presentation options here, with skin parameters. skinparam is an option you can use to change the look of your diagram So one of the features I prefer is not to see the objects at the bottom of the diagram because that's not the strictest form of UML So what I'm going to use is the style option with strictuml which is basically saying keep it "classic"
in terms of the format of UML so now you don't see the objects
at the bottom of the diagram Let's do something else.
We'll add a message from B to A. A return message that is "Hi" and you
can see it's updated. You might notice that these messages are aligned at the left side of the arrows and I want them to be centered. I will show you how to do
that with another skinparam option. If you forget what the syntax is, the cool thing about the plug-in is you can say, Okay it's something to do with messages so I type the
word message. I see a list of options and I'm going to scroll down to take the one that says SequenceMessageAlignment and I want it to be centered. so now you see that the messages are centered over the arrows that's kind of a cool style. So we'll save this. Let's look at another feature that let's you export your current diagram. We're going to export this.
The plug-in creates the diagram in a
file because the preview isn't a file. The plug-in is going to create a file in
your project that's called Hello World.png Now you'll note here that the name of your diagram was used for the name of the file. When I click on that I will see that it's a PNG file, and PNG files are bitmapped. So you will lose a little bit of detail
in your diagrams when you zoom in Whereas the preview will show you that it's actually a vector format So PlantUML supports both vector and bitmap formats. There's also GIF and JPEG. So let's see another useful feature to generate a URL for your current diagram. It's useful if you're using GitHub. I'm going to tell it to use SVG as the format. What it did here is it generated a URL
inside of a markdown for an image. If you know markdown from GitHub "readme" files, markdown has a very simple syntax to show an image. This is what the tool generates for you. You could copy this markdown snippet, paste it inside your GitHub readme file to show this diagram. It's actually what I do for a lot of my courses. Okay so I hope this is little tutorial is useful. I'm going to be doing some other videos to show how to do different diagrams in PlantUML. Thanks for watching!
