Logiciels UML : PlantUML, Mermaid, draw.io, StarUML

Un logiciel UML sert à dessiner des diagrammes propres, à les modifier sans tout refaire et à les exporter en image pour un dossier ou une documentation. Il en existe deux familles : les outils « diagramme sous forme de code » (PlantUML, Mermaid), où l'on écrit un texte que l'outil transforme en dessin, et les éditeurs graphiques (draw.io, StarUML), où l'on dessine à la souris. Ce chapitre compare les plus utilisés en 2026, gratuits pour la plupart, et donne la syntaxe de base de PlantUML et de Mermaid.

Tableau comparatif

D'autres outils existent : Lucidchart (en ligne, offre gratuite limitée), Visual Paradigm, Modelio, ou les générateurs de diagrammes intégrés aux environnements de développement. Le choix compte moins que la justesse du diagramme : un correcteur ne note pas l'outil.

PlantUML

PlantUML transforme un texte délimité par @startuml et @enduml en diagramme. La version de référence est un programme Java (une nouvelle version sort presque chaque mois : V1.2026.6 en juin 2026) ; depuis 2026, une version JavaScript fonctionne aussi dans le navigateur, sans Java. Le plus simple pour commencer est l'extension PlantUML de VS Code, qui affiche un aperçu à côté du texte, ou le serveur en ligne du site plantuml.com.

Un extrait du diagramme de classes d'AppliFrais :

@startuml
abstract class Utilisateur {
  - id : int
  - nom : string
  - prenom : string
  + NomComplet() : string
  + {abstract} Role() : string
}

class Visiteur {
  - dateEmbauche : DateOnly
  + OuvrirFiche(mois : string) : FicheFrais
}

class Comptable

class FicheFrais {
  - mois : string
  - etat : EtatFiche = Creee
  - montantValide : decimal [0..1]
  + Cloturer()
  + Valider(comptable : Comptable)
  + Total() : decimal
}

class LigneFraisHorsForfait {
  - date : DateOnly
  - libelle : string
  - montant : decimal
  - refuse : bool
}

class FraisForfait {
  - id : string
  - libelle : string
  - montant : decimal
}

class LigneFraisForfait {
  - quantite : int
  + Montant() : decimal
}

interface IExportable {
  + VersCsv() : string
}

enum EtatFiche {
  Creee
  Cloturee
  Validee
  MiseEnPaiement
  Remboursee
}

Utilisateur <|-- Visiteur
Utilisateur <|-- Comptable
Visiteur "1" -- "0..*" FicheFrais : remplit >
FicheFrais "0..*" --> "0..1" Comptable : validateur
FicheFrais "1" *--> "0..*" LigneFraisHorsForfait
FicheFrais "0..*" --> "0..*" FraisForfait
(FicheFrais, FraisForfait) .. LigneFraisForfait
IExportable <|.. FicheFrais
@enduml

Les flèches reprennent la forme des symboles UML :

Un diagramme de cas d'utilisation, avec «include» et «extend» :

@startuml
left to right direction
actor Comptable
actor "Service de paie" as Paie
rectangle AppliFrais {
  usecase "Valider une fiche de frais" as UC1
  usecase "Consulter le détail d'une fiche" as UC2
  usecase "Refuser un frais hors forfait" as UC3
  usecase "Mettre en paiement les fiches validées" as UC4
}
Comptable -- UC1
Comptable -- UC4
UC4 -- Paie
UC1 ..> UC2 : <<include>>
UC3 ..> UC1 : <<extend>>
@enduml

Les flèches ..> sont orientées comme en UML : de la validation vers la consultation pour l'inclusion, du refus vers la validation pour l'extension.

Mermaid

Mermaid utilise un bloc de code Markdown marqué mermaid. GitHub, GitLab et de nombreux outils de documentation l'affichent directement en diagramme : c'est le moyen le plus simple de documenter un dépôt dans son fichier README.md. L'éditeur en ligne Mermaid Live montre le résultat pendant la frappe.

Le diagramme de classes, en Mermaid :

```mermaid
classDiagram
    class Utilisateur {
        <<abstract>>
        -int id
        -string nom
        +NomComplet() string
        +Role() string*
    }
    class FicheFrais {
        -string mois
        -EtatFiche etat
        +Cloturer()
        +Valider(Comptable comptable)
        +Total() decimal
    }
    class IExportable {
        <<interface>>
        +VersCsv() string
    }
    Utilisateur <|-- Visiteur
    Utilisateur <|-- Comptable
    Visiteur "1" -- "0..*" FicheFrais : remplit
    FicheFrais "1" *-- "0..*" LigneFraisHorsForfait
    IExportable <|.. FicheFrais
```

Mermaid écrit le type avant le nom de l'attribut (-int id) et le type de retour après les parenthèses, sans deux-points ; un astérisque à la toute fin d'une opération la marque abstraite. Le résultat est un diagramme UML standard.

La machine à états d'une fiche, en Mermaid :

```mermaid
stateDiagram-v2
    state "Créée (CR)" as CR
    state "Clôturée (CL)" as CL
    state "Validée (VA)" as VA
    state "Mise en paiement (MP)" as MP
    state "Remboursée (RB)" as RB
    [*] --> CR
    note right of CR : créée par Visiteur.OuvrirFiche(mois)
    CR --> CL : Cloturer()
    CL --> VA : Valider(comptable)
    VA --> MP : MettreEnPaiement()
    MP --> RB : ConfirmerRemboursement()
    RB --> [*] : after(10 ans)
```

Le diagramme de séquence de la validation d'une fiche (chapitre 7), en Mermaid :

```mermaid
sequenceDiagram
    actor C as Comptable
    participant V as :VueValidation
    participant K as :ControleurValidation
    participant D as :FicheDao
    C->>+V: clic sur « Valider »
    V->>+K: Valider(12, ines)
    K->>+D: Lire(12)
    opt ligne trouvée
        create participant F as fiche : FicheFrais
        D-->>F: «create»
    end
    D-->>-K: fiche
    alt fiche absente ou état ≠ Cloturee
        K->>V: AfficherErreur(message)
    else sinon
        K->>F: Valider(ines)
        F->>F: Total()
        K->>D: Enregistrer(fiche)
        K->>V: AfficherConfirmation(montant)
    end
    deactivate K
    deactivate V
```

Dans un sequenceDiagram, actor dessine un bonhomme et participant un rectangle ; as donne un alias court qu'on réutilise dans les messages. ->> est un message synchrone, -->> un retour en pointillé. Le + après la flèche active la ligne de vie qui reçoit le message, le - désactive celle qui l'envoie, et deactivate ferme une activation explicitement. create participant fait apparaître la ligne de vie au moment du message de création, comme sur le diagramme dessiné. Les fragments s'écrivent alt … else … end, opt … end et loop … end, avec la garde en texte libre après le mot-clé.

Mermaid sait aussi faire les organigrammes (flowchart), qui servent de diagrammes d'activité simples. Pour un diagramme de cas d'utilisation ou de déploiement complet, PlantUML reste plus adapté.

draw.io

draw.io (aussi appelé diagrams.net) est un éditeur de diagrammes gratuit, utilisable dans le navigateur, en application de bureau ou dans VS Code par une extension. Active la bibliothèque de formes UML (menu Plus de formes) : tu disposes des classes à compartiments, des acteurs, des ellipses de cas d'utilisation, des lignes de vie et des fragments.

C'est l'outil le plus souple et le plus rapide à prendre en main, mais aussi celui qui laisse passer toutes les erreurs : rien n'empêche une flèche d'héritage dans le mauvais sens. Le fichier .drawio (du XML) peut être versionné ; un export .drawio.svg ou .drawio.png reste modifiable dans draw.io tout en s'affichant comme une image.

StarUML

StarUML est un atelier de modélisation : derrière les dessins, il tient un modèle. Une classe déclarée une fois peut apparaître dans plusieurs diagrammes ; si tu la renommes, elle est renommée partout. Il vérifie la cohérence du modèle, génère du code (C#, Java, PHP par des extensions) et sait faire de la rétro-conception. La version 7 (2025), mise à jour en 7.1 en avril 2026, ajoute la génération de diagrammes à partir de texte Mermaid et une intégration avec des assistants d'IA.

Il est payant pour un usage durable (une licence éducative existe) et utilisable en évaluation gratuite. Pour les besoins du BTS, PlantUML et draw.io suffisent largement.

Et l'IA ?

Les assistants d'IA savent produire un diagramme PlantUML ou Mermaid à partir d'un texte, ou d'un code à rétro-concevoir. C'est un gain de temps réel pour un premier jet, à une condition : relire chaque élément. Les erreurs typiques sont exactement celles de ce cours : multiplicités inversées (surtout quand le texte vient d'un MCD), «extend» à l'envers, composition à la place d'une association, opérations inventées qui n'existent pas dans le code. À l'examen, tu n'as ni outil ni assistant : il faut savoir dessiner et vérifier à la main.

Exercices

@startuml
abstract class Document
class Livre
class Revue
class Exemplaire
class Rayon
Document <|-- Livre
Document <|-- Revue
Document "1" *-- "1..*" Exemplaire
Rayon "1" o-- "0..*" Exemplaire
@enduml

@startuml
abstract class Materiel {
  - numInventaire : string
  + {abstract} ValeurResiduelle() : decimal
}
class Portable
class PosteFixe
class Employe
interface IGeolocalisable {
  + Position() : string
}
Materiel <|-- Portable
Materiel <|-- PosteFixe
IGeolocalisable <|.. Portable
Materiel "0..*" --> "0..1" Employe : affecté à >
@enduml