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
    1. Graphvis installation Four. PlantUML installation

Operation check

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

How to deal with each error

Reference information

Environment introduction

1. Install Visual Studio Code

    1. Open Visual Studio Code (https://code.visualstudio.com/)
  1. Press Download for Windows to download the installer
    1. 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
    1. Run the instrument roller

3. 3. Install Graphviz

This is the software used to draw UML with PlantUML.

    1. Open Graphviz (http://www.graphviz.org/)
  1. Open [Download] from the bar on the site
    1. Click ** Development Windows install packages ** from Windows on the Download page
  2. Then click ** 10 / → cmake / → Release / → x64 / ** to download ** [graphviz-install-2.44.2] ** It is in the location of the image below スクリーンショット 2020-10-31 221429.png
  1. Run the downloaded installer.

If such a screen is displayed, press ** [Execute] **. スクリーンショット 2020-11-03 224155.png

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 スクリーンショット 2020-10-31 223501.png OK if the green mark is in this state

  1. Launch Visual Studio Code
  2. Search for ** PlantUML ** from the extension and install スクリーンショット 2020-10-31 222515.png
  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. Launch Visual Studio Code
  1. From the file on the upper left of VS Code, select ** File → New File **
  2. After creating a new file, save the file with the extension **. Pu **.
@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

スクリーンショット 2020-10-31 230635.png

OK if a preview screen like the above image is displayed

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 ** スクリーンショット 2020-10-31 232032.png

  3. Select the output format from ** png, svg, eps, pdf, vdx, xmi, scxml, html ** スクリーンショット 2020-10-31 232103.png

Four. The image is saved in the directory where the code is saved. (You can check the save destination from the terminal)![UML1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/837080/783ecf61-9030-ec65-7a05 -386717e43e18.png)

*** 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

スクリーンショット 2020-10-31 233143.png In case of such output, Graphviz has not been installed. Check the save destination to see if Graphviz is installed.

Output failure example 2

Untitle1.png 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. (https://qiita.com/BARANCE_TW/items/c3f7816d38cc9e746bbd) Set the ** path ** in the article.
  1. Open a command prompt with administrator privileges (right-click on the command prompt) スクリーンショット 2020-10-31 235625.png
    1. Enter the code below
 dot -c
  1. Preview again

Output failure example 3

スクリーンショット 2020-11-01 000123.png 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

Recommended Posts

How to use PlantUML with Visual Studio Code (created on October 30, 2020)
Use PlantUML with Visual Studio Code
How to use Ruby on Rails
How to use Bio-Formats on Ubuntu 20.04
How to use mssql-tools with alpine
A memorandum on how to use Eclipse
How to use Apache Derby on Eclipse
[Ruby on Rails] How to use CarrierWave
How to use BootStrap with Play Framework
[Rails] How to use rails console with docker
[Ruby on Rails] How to use redirect_to
[Ruby on Rails] How to use kaminari
How to use ExpandableListView in Android Studio
Experience .NET 5 with Docker and Visual Studio Code
Fastest installation of Visual Studio Code on Ubuntu
How to use MyBatis2 (iBatis) with Spring Boot 1.4 (Spring 4)
How to use built-in h2db with spring boot
How to use Java framework with AWS Lambda! ??
Notes on how to use each JUnit Rule
How to use Java API with lambda expression
How to write test code with Basic authentication
How to use nfs protocol version 2 with ubuntu 18.04
How to use docker compose with NVIDIA Jetson
How to use nginx-ingress-controller with Docker for Mac
[Ruby on Rails] How to use session method
How to use Eclipse on my PC with 32bit and 2GB of memory
How to implement UICollectionView in Swift with code only
Getting started with Java programs using Visual Studio Code
Installing Visual Studio Code on Ubuntu 20.04 (automatic update support)
How to use Map
How to run javafx with Raspberry Pi Posted on 2020/07/12
How to use rbenv
How to use Oracle JDK 9 EA with Travis CI
How to use letter_opener_web
How to use with_option
How to use fields_for
How to use java.util.logging
Try to quit Eclipse and switch to Visual Studio Code
[Ruby On Rails] How to use simple_format to display the entered text with line breaks
How to use java non-standard library on IntelliJ IDEA
How to use map
Output settings to debug console in Visual Studio Code
How to use Z3 library in Scala with Eclipse
How to use collection_select
Why can I develop Java with Visual Studio Code?
How to use Twitter4J
How to use active_hash! !!
How to use MapStruct
How to use hidden_field_tag
How to use TreeSet
[How to use label]
How to use identity
[Android Studio] I want to use Maven library on Android
How to use hashes
How to use JDD library in Scala with Eclipse
How to use JUnit 5
How to build Java development environment with VS Code
How to use RealSense with ubuntu 20.04 and ROS Noetic
How to use Dozer.mapper
How to use Gradle
Build Java program development environment with Visual Studio Code