PlantUML dans VS Code — UML Référence

01

Installation

Deux étapes : installer les prérequis système, puis l'extension VS Code. L'ensemble prend moins de cinq minutes.

Étapes d'installation

1

Installer Java (JRE 8+)

PlantUML tourne sur la JVM. Téléchargez Eclipse Temurin ou Oracle JRE. Vérifiez avec java -version.

2

Installer Graphviz (optionnel)

Requis pour les diagrammes de classes et composants. Sur macOS : brew install graphviz. Sur Ubuntu : sudo apt install graphviz. Sur Windows : graphviz.org/download.

3

Installer l'extension PlantUML

Dans VS Code : Ctrl+P puis tapez ext install jebbs.plantuml. Ou cherchez « PlantUML » dans le marketplace — l'extension de jebbs est la référence.

4

Vérifier l'installation

Créez un fichier test.puml, écrivez @startuml\nA -> B\n@enduml et appuyez sur Alt+D pour ouvrir la prévisualisation.

Option sans Java : serveur distant

Si vous ne voulez pas installer Java localement, l'extension peut utiliser le serveur PlantUML en ligne :

settings.json

{
  "plantuml.render": "PlantUMLServer",
  "plantuml.server": "https://www.plantuml.com/plantuml"
}

⚠️

En mode serveur distant, vos diagrammes sont envoyés sur internet. N'utilisez pas cette option pour des projets confidentiels.

💡

Vous pouvez héberger votre propre serveur PlantUML avec Docker : docker run -d -p 8080:8080 plantuml/plantuml-server, puis pointer plantuml.server vers http://localhost:8080.

02

Prévisualisation en temps réel

L'extension offre une prévisualisation qui se met à jour automatiquement à chaque modification du fichier source.

Modes de prévisualisation

Mode	Description
Preview	Panneau latéral dans VS Code (recommandé)
Preview in browser	Ouvre dans votre navigateur par défaut
Cursor Preview	Prévisualise le diagramme sous le curseur actif

ℹ️

Si votre fichier contient plusieurs diagrammes (@startuml ... @enduml successifs), la prévisualisation affiche automatiquement celui où se trouve votre curseur.

PlantUML — Plusieurs diagrammes dans un fichier

@startuml login
' Diagramme 1 : connexion
Utilisateur -> API : POST /login
@enduml

@startuml logout
' Diagramme 2 : déconnexion
Utilisateur -> API : POST /logout
@enduml

Extensions de fichiers reconnues

Extension	Usage
.puml	Extension officielle PlantUML
.plantuml	Nom long explicite
.pu	Raccourci court
.wsd	Web Sequence Diagrams
.iuml	Inclus depuis d'autres fichiers

💡

Nommez vos diagrammes inline (@startuml nom-du-diagramme) pour que les fichiers exportés portent ce nom plutôt qu'un numéro séquentiel.

03

Raccourcis clavier

L'extension PlantUML pour VS Code expose plusieurs commandes accessibles au clavier pour un workflow sans friction.

AltD

Prévisualiser le diagramme courant dans un panneau latéral

CtrlShiftP

Ouvrir la palette de commandes — cherchez PlantUML pour toutes les actions

AltShiftD

Exporter le diagramme courant (au format configuré)

CtrlSpace

Auto-complétion des mots-clés PlantUML dans le fichier

F1

Palette — PlantUML: Preview Current Diagram pour forcer l'affichage

CtrlKV

Preview côte à côte — équivalent Markdown pour .puml

ℹ️

Sur macOS, remplacez Alt par Option et Ctrl par Cmd selon la configuration clavier de VS Code.

04

Configuration

L'extension expose de nombreux paramètres dans settings.json. Voici les plus utiles pour un setup professionnel.

settings.json — Configuration complète

{
  // Rendu local avec Java (recommandé)
  "plantuml.render": "Local",

  // Chemin vers plantuml.jar si non détecté
  "plantuml.jar": "/opt/plantuml/plantuml.jar",

  // Format d'export par défaut
  "plantuml.exportFormat": "svg",

  // Dossier de destination des exports
  "plantuml.exportOutDir": "out",

  // Chemin vers dot (Graphviz)
  "plantuml.commandArgs": [
    "-DPLANTUML_LIMIT_SIZE=8192"
  ],

  // Inclure automatiquement un thème
  "plantuml.include": [
    "${workspaceRoot}/theme.iuml"
  ],

  // Générer les exports à la sauvegarde
  "plantuml.exportOnSave": false,

  // Taille max (évite erreurs sur grands diagrammes)
  "plantuml.diagramsRoot": "src/diagrams"
}

Options clés

plantuml.render

Mode de rendu : Local (via JAR) ou PlantUMLServer (serveur HTTP). Local est recommandé pour la confidentialité.

plantuml.exportFormat

Format des exports : png, svg, pdf. SVG est recommandé pour la qualité vectorielle.

plantuml.exportOutDir

Dossier de sortie des images générées, relatif au workspace. Par défaut : out.

plantuml.exportOnSave

Exporte automatiquement le diagramme à chaque sauvegarde. Utile en CI ou pour maintenir des images à jour.

plantuml.include

Fichiers .iuml inclus automatiquement dans tous les diagrammes (thèmes, macros partagées).

05

Export depuis VS Code

L'extension permet d'exporter un ou plusieurs diagrammes en quelques clics ou via la palette de commandes.

Commandes d'export

Commande	Action
PlantUML: Export Current Diagram	Exporte le diagramme sous le curseur
PlantUML: Export Current File Diagrams	Exporte tous les diagrammes du fichier
PlantUML: Export Workspace Diagrams	Exporte tous les .puml du projet

💡

Pour exporter vers plusieurs formats simultanément, séparez-les dans la configuration :
"plantuml.exportFormat": "png,svg"

Intégration Git & CI/CD

GitHub Actions — Export automatique

- name: Generate PlantUML diagrams
  uses: cloudbees/plantuml-github-action@master
  with:
    args: -tsvg ./diagrams/

- name: Commit generated SVGs
  run: |
    git config --local user.email "ci@bot"
    git add out/
    git commit -m "chore: update diagrams" || echo "No changes"
    git push

ℹ️

Ajoutez out/ à votre .gitignore si vous ne souhaitez pas versionner les images générées, ou inversement commitez-les pour un rendu natif dans GitHub.

06

Workflow recommandé

Voici l'organisation conseillée pour gérer les diagrammes PlantUML dans un projet logiciel avec VS Code et Git.

Écrire .puml

→

Alt+D preview

→

Git commit

→

CI export SVG

→

README / Doc

Structure de projet

Structure recommandée

mon-projet/
├── src/
│   └── ...
├── docs/
│   ├── diagrams/          ← sources .puml
│   │   ├── theme.iuml     ← thème partagé
│   │   ├── classes.puml
│   │   ├── sequence/
│   │   │   ├── login.puml
│   │   │   └── logout.puml
│   │   └── usecase.puml
│   └── out/               ← SVG générés (ou .gitignore)
│       ├── classes.svg
│       └── sequence/
│           ├── login.svg
│           └── logout.svg
└── README.md              ← intègre les SVG

Thème partagé (theme.iuml)

PlantUML — theme.iuml

' Inclure ce fichier dans chaque diagramme :
' !include ./theme.iuml

skinparam {
  BackgroundColor #0e0f14
  ArrowColor      #89ddff
  ClassBorderColor #4a90d9
  ClassBackgroundColor #1a1d28
  ClassFontColor  #e2e4f0
  SequenceLifeLineBorderColor #5bbf7e
  NoteBackgroundColor #1a1d28
  NoteBorderColor #363a52
  shadowing false
}

💡

En configurant "plantuml.include" dans settings.json, le thème est appliqué automatiquement sans avoir à écrire !include dans chaque fichier.

07

Extensions complémentaires

D'autres extensions VS Code s'associent bien avec PlantUML pour enrichir votre environnement de modélisation.

🌿

PlantUML — jebbs.plantuml

L'extension principale. Prévisualisation, export, auto-complétion, syntaxe colorée. C'est celle décrite dans ce guide.

ext install jebbs.plantuml

✏️

Markdown Preview Enhanced — shd101wyy.markdown-preview-enhanced

Permet d'insérer des blocs PlantUML directement dans vos fichiers Markdown et de les prévisualiser inline.

ext install shd101wyy.markdown-preview-enhanced

🎨

Draw.io Integration — hediet.vscode-drawio

Pour les diagrammes visuels drag-and-drop en complément de PlantUML (maquettes, architectures informelles).

ext install hediet.vscode-drawio

🔷

Mermaid Editor — tomoyukim.vscode-mermaid-editor

Alternative à PlantUML avec syntaxe Mermaid — s'intègre nativement dans GitHub et Notion sans serveur Java.

ext install tomoyukim.vscode-mermaid-editor

ℹ️

PlantUML vs Mermaid : PlantUML supporte davantage de types de diagrammes et offre plus de personnalisation. Mermaid est plus léger, ne nécessite pas Java et s'affiche nativement sur GitHub et GitLab. Les deux peuvent coexister dans un même projet.

PlantUMLdans VS Code