[JAVA] Comment utiliser PlantUML avec Visual Studio Code (créé le 30 octobre 2020)

Voici une note sur la façon d'utiliser PlantUML avec Visual Studio Code d'ici le 30 octobre 2020. Je l'ai créé sur la base de l'article de cette personne. (Https://qiita.com/couzie/items/9dedb834c5aff09ea7b2)

La procédure est la suivante. Introduction à l'environnement

1. Installez Visual Studio Code
2. Installation de Java
3. 3. Installation de Graphvis Quatre. Installation de l'usine UML

Contrôle de fonctionnement

1. 1. Création de fichiers et affichage de l'aperçu
2. Sortie de fichier image

Comment traiter chaque erreur

Informations de référence

Introduction à l'environnement

1. Installez Visual Studio Code

• Si vous avez déjà installé Visual Studio Code, cette étape n'est pas nécessaire.

1. 1. Ouvrez Visual Studio Code (https://code.visualstudio.com/)
2. Appuyez sur Télécharger pour Windows pour télécharger le programme d'installation
3. 3. Exécutez le rouleau d'instrument

2. Installation de Java

Installez Java comme un environnement efficace pour PlantUML.

1. Cliquez sur le bouton [Télécharger Java gratuit] depuis java.com (https://java.com/ja/)
2. Appuyez sur [Accepter et démarrer le téléchargement gratuit] pour télécharger le programme d'installation
3. 3. Exécutez le rouleau d'instrument

3. 3. Installation de Graphviz

C'est le logiciel utilisé pour dessiner UML avec PlantUML.

• Graphviz est un installateur sur le site officiel - L'emplacement peut changer. Cet article présente la méthode d'installation au 31 octobre 2020.

1. 1. Ouvrez Graphviz (http://www.graphviz.org/)
2. Ouvrez [Télécharger] depuis la barre sur le site
3. 3. Cliquez sur ** Développement des packages d'installation Windows ** à partir de Windows sur la page de téléchargement
4. Cliquez ensuite sur ** 10 / → cmake / → Release / → x64 / ** pour télécharger ** [graphviz-install-2.44.2] ** C'est à l'emplacement de l'image ci-dessous

• Si vous ne comprenez pas, veuillez télécharger graphviz-install-2.44.2 à partir de ce lien (https://www2.graphviz.org/Packages/development/windows/10/cmake/Release/x64/).

5. Exécutez le programme d'installation téléchargé.

• L'écran suivant apparaîtra pendant l'installation, mais sélectionnez [Ne pas ajouter Graphviz au PATH système].

Si un tel écran s'affiche, appuyez sur ** [Execute] **.

4. Installez PlantUML

Installez PlantUML en tant qu'extension de Visual Studio Code.

** * Précautions Si vous installez l'extension dans l'état distant, cela ne fonctionnera pas, alors assurez-vous que vous n'êtes pas connecté à distance. ** ** En bas à gauche de VS Code, vérifiez que vous n'êtes pas distant OK si la marque verte est dans cet état

1. Lancez Visual Studio Code
2. Recherchez ** PlantUML ** à partir de l'extension et installez
3. Une fois l'installation terminée, appuyez sur Recharger pour redémarrer VS Code

Ceci complète l'introduction à l'environnement

Vérifier le fonctionnement et enregistrer l'image UML

1. Créer un fichier et afficher un aperçu

1. 1. Lancez Visual Studio Code
2. Dans le fichier en haut à gauche de VS Code, sélectionnez ** Fichier → Nouveau fichier **
3. Après avoir créé un nouveau fichier, enregistrez le fichier avec l'extension **. Pu **.

• Cette fois, le nom du fichier est UML1 Quatre. Pour vérifier le fonctionnement de Graphviz, entrez ce qui suit dans le fichier et entrez ** "Alt + D" ** pour afficher l'aperçu.

@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 si un écran de prévisualisation comme l'image ci-dessus est affiché

• S'il n'est pas affiché, vérifiez ** [Comment traiter chaque erreur] **.

2. Sortie de fichier image

Sortie de l'UML créé sous forme d'image

1. Ouvrez la palette de commandes avec ** "Ctrl + Maj + P" **

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

3. Sélectionnez le format de sortie de ** png, svg, eps, pdf, vdx, xmi, scxml, html **

Quatre. L'image est enregistrée dans le répertoire de destination de l'enregistrement du code. (Vous pouvez vérifier la destination de sauvegarde depuis le terminal)

*** L'installation est terminée si possible. Cependant, si l'image d'erreur s'affiche, consultez le remède pour chaque erreur ***

Comment traiter chaque erreur

Décrivez la cause et le remède lorsqu'une image d'erreur est sortie lorsque ** "Alt + D" ** est entré. L'erreur est principalement générée lorsque l'installation Graphviz ou PlantUML est incorrecte.

Exemple de défaillance de sortie 1

Dans le cas d'une telle sortie, si Graphviz n'est pas installé. Vérifiez la destination de sauvegarde pour voir si Graphviz est installé.

Exemple de défaillance de sortie 2

Dans le cas de l'image ci-dessus, il est possible que le PATH de Graphviz ne passe pas. Une telle image n'apparaît pas dans la version installée cette fois, mais elle peut être sortie dans le cas d'une autre version. Comme solution de contournement

1. 1. (https://qiita.com/BARANCE_TW/items/c3f7816d38cc9e746bbd) Définissez le ** chemin ** dans l'article.
2. Ouvrez l'invite de commande avec les privilèges d'administrateur (cliquez avec le bouton droit sur l'invite de commande)
3. 3. Entrez le code ci-dessous

 dot -c

4. Aperçu à nouveau

Exemple de défaillance de sortie 3

Cette image montre PlantUML fonctionnant dans un environnement distant. Ou vous pouvez avoir PlantUML installé dans un environnement distant. Assurez-vous que vous n'êtes pas dans un environnement distant et installez PlantUML.

Dernier recours

Si vous ne pouvez pas utiliser PlantUML par tous les moyens, serveur en ligne (http://www.plantuml.com/plantuml/uml/SyfFKj2rKt3CoKnELR1Io4ZDoSa70000) Utiliser. Cependant, le code ne peut pas être enregistré, veillez donc à le sauvegarder séparément.

Informations de référence / matériaux de référence

Concernant l'introduction à l'environnement https://qiita.com/couzie/items/9dedb834c5aff09ea7b2 https://qiita.com/BARANCE_TW/items/c3f7816d38cc9e746bbd https://qiita.com/walkerjito/items/a7dd3fece3c6414867b2

Article sur la façon d'écrire PlantUML

PlantUML Check Sheet(https://qiita.com/ogomr/items/0b5c4de7f38fd1482a48) Vie de dessin UML à l'usine UML (https://qiita.com/qualitia_cdev/items/55644b15eaf7e8328ac1) Présentation de Plant UML (https://plantuml.com/ja/)

Si vous recherchez [Plant UML] etc.