[JAVA] Verwendung von PlantUML mit Visual Studio Code (erstellt am 30. Oktober 2020)

Hier finden Sie einen Hinweis zur Verwendung von PlantUML mit Visual Studio Code bis zum 30. Oktober 2020. Ich habe es basierend auf dem Artikel dieser Person erstellt. (Https://qiita.com/couzie/items/9dedb834c5aff09ea7b2)

Das Verfahren ist wie folgt. Einführung in die Umwelt

1. Installieren Sie Visual Studio Code
2. Java-Installation
3. 3. Graphvis-Installation Vier. Anlagen-UML-Installation

Funktionsprüfung

1. 1. Dateierstellung und Vorschau anzeigen
2. Ausgabe der Bilddatei

Wie man mit jedem Fehler umgeht

Referenzinformationen

Einführung in die Umwelt

1. Installieren Sie Visual Studio Code

• Wenn Sie Visual Studio Code bereits installiert haben, ist dieser Schritt nicht erforderlich.

1. 1. Öffnen Sie Visual Studio Code (https://code.visualstudio.com/).
2. Klicken Sie auf Download für Windows, um das Installationsprogramm herunterzuladen
3. 3. Lassen Sie die Instrumentenrolle laufen

2. Java-Installation

Installieren Sie Java als effektive Umgebung für PlantUML.

1. Klicken Sie auf die Schaltfläche [Free Java herunterladen] von java.com (https://java.com/ja/).
2. Drücken Sie [Zustimmen und kostenlosen Download starten], um das Installationsprogramm herunterzuladen
3. 3. Lassen Sie die Instrumentenrolle laufen

3. 3. Graphviz-Installation

Dies ist die Software zum Zeichnen von UML mit PlantUML.

• Graphviz ist ein Installationsprogramm auf der offiziellen Website. Der Speicherort kann sich ändern. Dieser Artikel zeigt die Installationsmethode zum 31. Oktober 2020.

1. 1. Öffnen Sie Graphviz (http://www.graphviz.org/)
2. Öffnen Sie [Download] in der Leiste auf der Website
3. 3. Klicken Sie auf der Download-Seite auf ** Entwicklungs-Windows-Installationspakete ** von Windows
4. Klicken Sie dann auf ** 10 / → cmake / → Release / → x64 / **, um ** [graphviz-install-2.44.2] ** herunterzuladen Es befindet sich an der Stelle des Bildes unten

• Wenn Sie dies nicht verstehen, laden Sie bitte graphviz-install-2.44.2 über diesen Link herunter (https://www2.graphviz.org/Packages/development/windows/10/cmake/Release/x64/).

5. Führen Sie das heruntergeladene Installationsprogramm aus.

• Der folgende Bildschirm wird während der Installation angezeigt, wählen Sie jedoch [Graphviz nicht zum Systempfad hinzufügen].

Wenn ein solcher Bildschirm angezeigt wird, drücken Sie ** [Ausführen] **.

4. Installieren Sie PlantUML

Installieren Sie PlantUML als Erweiterung von Visual Studio Code.

** * Vorsichtsmaßnahmen Wenn Sie die Erweiterung im Remote-Status installieren, funktioniert sie nicht. Stellen Sie daher sicher, dass Sie nicht remote verbunden sind. ** **. Überprüfen Sie unten links im VS-Code, ob Sie nicht remote sind OK, wenn sich die grüne Markierung in diesem Zustand befindet

1. Starten Sie Visual Studio Code
2. Suchen Sie in der Erweiterung nach ** PlantUML ** und installieren Sie es
3. Drücken Sie nach Abschluss der Installation auf Neu laden, um VS Code neu zu starten

Damit ist die Einführung in die Umgebung abgeschlossen

Überprüfen Sie den Betrieb und speichern Sie das UML-Image

1. Datei erstellen und Vorschau anzeigen

1. 1. Starten Sie Visual Studio Code
2. Wählen Sie in der Datei oben links im VS-Code ** Datei → Neue Datei ** aus.
3. Speichern Sie nach dem Erstellen einer neuen Datei die Datei mit der Erweiterung **. Pu **.

• Diesmal lautet der Dateiname UML1 Vier. Um die Funktion von Graphviz zu überprüfen, geben Sie Folgendes in die Datei ein und geben Sie ** "Alt + D" ** ein, um eine Vorschau anzuzeigen.

@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, wenn ein Vorschaubildschirm wie das obige Bild angezeigt wird

• Wenn es nicht angezeigt wird, aktivieren Sie ** [Umgang mit jedem Fehler] **.

2. Ausgabe der Bilddatei

Geben Sie die erstellte UML als Bild aus

1. Öffnen Sie die Befehlspalette mit ** "Strg + Umschalt + P" **

2. Geben Sie ** PlantUML: Aktuelles Diagramm exportieren ** ein

3. Wählen Sie das Ausgabeformat aus ** png, svg, eps, pdf, vdx, xmi, scxml, html **

Vier. Das Bild wird im Zielverzeichnis zum Speichern des Codes gespeichert. (Sie können das Speicherziel vom Terminal aus überprüfen.) [UML1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/837080/783ecf61-9030-ec65-7a05 -386717e43e18.png)

*** Die Installation ist nach Möglichkeit abgeschlossen. Wenn jedoch das Fehlerbild angezeigt wird, lesen Sie die Abhilfe für jeden Fehler ***

Wie man mit jedem Fehler umgeht

Beschreiben Sie die Ursache und Abhilfe, wenn ein Fehlerbild ausgegeben wird, wenn ** "Alt + D" ** eingegeben wird. Der Fehler wird hauptsächlich ausgegeben, wenn die Installation von Graphviz oder PlantUML falsch ist.

Beispiel für einen Ausgabefehler 1

Im Falle einer solchen Ausgabe, wenn Graphviz nicht installiert ist. Überprüfen Sie das Speicherziel, um festzustellen, ob Graphviz installiert ist.

Beispiel für einen Ausgabefehler 2

Im Fall des obigen Bildes ist es möglich, dass Graphviz 'PATH nicht bestanden wird. Ein solches Image wird in der diesmal installierten Version nicht angezeigt, kann jedoch bei einer anderen Version ausgegeben werden. Als Workaround

1. 1. (https://qiita.com/BARANCE_TW/items/c3f7816d38cc9e746bbd) Legen Sie den ** Pfad ** im Artikel fest.
2. Öffnen Sie die Eingabeaufforderung mit Administratorrechten (klicken Sie mit der rechten Maustaste auf die Eingabeaufforderung).
3. 3. Geben sie den untenstehenden Code ein

 dot -c

4. Vorschau erneut

Beispiel für einen Ausgabefehler 3

Dieses Bild zeigt PlantUML in einer Remote-Umgebung. Oder Sie haben PlantUML in einer Remote-Umgebung installiert. Stellen Sie sicher, dass Sie sich nicht in einer Remote-Umgebung befinden, und installieren Sie PlantUML.

Letzter Ausweg

Wenn Sie PlantUML nicht auf jeden Fall verwenden können, Online-Server (http://www.plantuml.com/plantuml/uml/SyfFKj2rKt3CoKnELR1Io4ZDoSa70000) Benutzen. Der Code kann jedoch nicht gespeichert werden. Achten Sie daher darauf, ihn separat zu speichern.

Referenzinformationen / Referenzmaterialien

In Bezug auf die Einführung in die Umwelt https://qiita.com/couzie/items/9dedb834c5aff09ea7b2 https://qiita.com/BARANCE_TW/items/c3f7816d38cc9e746bbd https://qiita.com/walkerjito/items/a7dd3fece3c6414867b2

Artikel zum Schreiben von PlantUML

PlantUML Check Sheet(https://qiita.com/ogomr/items/0b5c4de7f38fd1482a48) UML-Zeichnungsleben im Werk UML (https://qiita.com/qualitia_cdev/items/55644b15eaf7e8328ac1) Plant UML Übersicht (https://plantuml.com/ja/)

Wenn Sie nach [Plant UML] usw. suchen.