How to use PlantUML with Visual Studio Code (created on October 30, 2020)

Here's a note on how to use PlantUML with Visual Studio Code by October 30, 2020. I created it based on this person's article. (Https://qiita.com/couzie/items/9dedb834c5aff09ea7b2)

The procedure is as follows. Environment introduction

1. Install Visual Studio Code
2. Java installation
3. 3. Graphvis installation Four. PlantUML installation

Operation check

1. 1. File creation and preview display
2. Image file output

How to deal with each error

Reference information

Environment introduction

1. Install Visual Studio Code

• If you have already installed Visual Studio Code, this step is not necessary.

1. 1. Open Visual Studio Code (https://code.visualstudio.com/)
2. Press Download for Windows to download the installer
3. 3. Run the instrument roller

2. Java installation

Install Java as an effective environment for PlantUML.

1. Click the [Download Free Java] button from java.com (https://java.com/ja/)
2. Press [Agree and start free download] to download the installer
3. 3. Run the instrument roller

3. 3. Install Graphviz

This is the software used to draw UML with PlantUML.

• Graphviz's official website installer-location may change. This article shows the installation method as of October 31, 2020.

1. 1. Open Graphviz (http://www.graphviz.org/)
2. Open [Download] from the bar on the site
3. 3. Click ** Development Windows install packages ** from Windows on the Download page
4. Then click ** 10 / → cmake / → Release / → x64 / ** to download ** [graphviz-install-2.44.2] ** It is in the location of the image below

• If you don't understand, please download graphviz-install-2.44.2 from this link (https://www2.graphviz.org/Packages/development/windows/10/cmake/Release/x64/).

5. Run the downloaded installer.

• The following screen will appear during installation, but select [Do not add Graphviz to the system PATH].

If such a screen is displayed, press ** [Execute] **.

4. Install PlantUML

Install PlantUML as an extension of Visual Studio Code.

** * Precautions If you install the extension in the remote state, it will not work, so make sure that you are not connected remotely. ** ** From the bottom left of VS Code, make sure you are not remote OK if the green mark is in this state

1. Launch Visual Studio Code
2. Search for ** PlantUML ** from the extension and install
3. After the installation is complete, press Reload to restart VS Code

This completes the environment introduction

Check operation and save UML image

1. Create file and display preview

1. 1. Launch Visual Studio Code
2. From the file on the upper left of VS Code, select ** File → New File **
3. After creating a new file, save the file with the extension **. Pu **.

• This time, the file name is UML1 Four. To check the operation of Graphviz, enter the following in the file and enter ** "Alt + D" ** to preview it.

@startuml

(*) --> "Find Event"
"Find Event" -> "Attend Event"

if "Capacity?" then
  ->[ok] "Create Ticket"
else
  -->[full] if "Standby?" then
    ->[ok] "Standby Ticket"
  else
    -->[no] "Cancel Ticket"
    "Cancel Ticket" --> (*)
  endif
endif

"Create Ticket" --> ==show==
"Standby Ticket" --> ==show==
==show== --> "Show Ticket"
"Show Ticket" --> (*)

@enduml

OK if a preview screen like the above image is displayed

• If it is not displayed, check ** [How to deal with each error] **.

2. Image file output

Output the created UML as an image

1. Open the command palette with ** "Ctrl + Shift + P" **

2. Enter ** PlantUML: Export Current Diagram **

3. Select the output format from ** png, svg, eps, pdf, vdx, xmi, scxml, html **

Four. The image is saved in the directory where the code is saved. (You can check the save destination from the terminal)

*** Installation is complete if possible. However, if the error image is displayed, see how to deal with each error ***

How to deal with each error

Describe the cause and remedy when an error image is output when ** "Alt + D" ** is entered. The error is mainly output when the Graphviz or PlantUML installation is incorrect.

Output failure example 1

In case of such output, Graphviz has not been installed. Check the save destination to see if Graphviz is installed.

Output failure example 2

In the case of the above image, it is possible that Graphviz's PATH does not pass. Such an image does not appear in the version installed this time, but it may be output in the case of another version. As a workaround

1. 1. (https://qiita.com/BARANCE_TW/items/c3f7816d38cc9e746bbd) Set the ** path ** in the article.
2. Open a command prompt with administrator privileges (right-click on the command prompt)
3. 3. Enter the code below

 dot -c

4. Preview again

Output failure example 3

This image shows PlantUML running in a remote environment. Or you may have PlantUML installed in a remote environment. Make sure you are not in a remote environment and install PlantUML.

Last resort

If you cannot use PlantUML by all means, online server (http://www.plantuml.com/plantuml/uml/SyfFKj2rKt3CoKnELR1Io4ZDoSa70000) To use. However, the code cannot be saved, so be careful to save it separately.

Reference information / reference materials

Regarding environment introduction https://qiita.com/couzie/items/9dedb834c5aff09ea7b2 https://qiita.com/BARANCE_TW/items/c3f7816d38cc9e746bbd https://qiita.com/walkerjito/items/a7dd3fece3c6414867b2

Article on how to write PlantUML

PlantUML Check Sheet(https://qiita.com/ogomr/items/0b5c4de7f38fd1482a48) UML drawing life at PlantUML (https://qiita.com/qualitia_cdev/items/55644b15eaf7e8328ac1) PlantUML Overview (https://plantuml.com/ja/)

If you search for [PlantUML] etc., it will be quite good