Diagrammes PlantUML dans Markdown

Guide des diagrammes PlantUML dans Markdown

PlantUML est un outil de création de diagrammes à partir de texte pur. Il suffit d’écrire une syntaxe structurée pour générer des diagrammes de séquence, de classes, de cas d’utilisation, d’activité et bien d’autres diagrammes d’ingénierie courants.

Il est particulièrement adapté aux blogs techniques et à la documentation de projet :

Les diagrammes sont gérés avec le texte dans le système de versions, facilitant la collaboration et la révision
Modifier un diagramme ne nécessite que de modifier le texte, idéal pour les itérations fréquentes
Intégration transparente avec Markdown pour une documentation cohérente

Dans Firefly, les blocs de code plantuml sont encodés lors de la compilation pour générer l’adresse SVG du serveur. Côté page, la source du diagramme bascule automatiquement selon le thème clair/sombre, avec prise en charge du zoom, du glisser-déplacer et de l’interaction plein écran.

Pour démarrer rapidement, retenez ce modèle minimal :

@startuml
Alice -> Bob: Hello
Bob --> Alice: Hi
@enduml

Exemples de diagrammes d’activité

@startuml
start
:L'utilisateur soumet la commande;
if (Stock suffisant ?) then (Oui)
:Geler le stock;
:Créer l'ordre de paiement;
if (Paiement réussi ?) then (Oui)
:Générer le bon de livraison;

Exemples de diagrammes d’état

@startuml
[*] --> Brouillon

Brouillon --> EnRevision : Soumettre
EnRevision --> Brouillon : Refuser
EnRevision --> Publié : Approuver
Publié --> Archivé : Archiver à expiration
Publié --> Brouillon :

Exemples de diagrammes de cas d’utilisation

@startuml
left to right direction
actor Visiteur
actor Utilisateur
actor Administrateur

rectangle "Système de blog" {
usecase "Parcourir les articles" as UC1
usecase "Rechercher du contenu" as UC2

Exemples de diagrammes de composants

@startuml
package "Firefly Site" {
[Astro App] as App
[Markdown Parser] as Parser
[PlantUML Encoder] as Encoder
[Theme Switcher] as Theme
[Search Indexer] as Search
}

cloud "PlantUML Server" as

Exemples de diagrammes de déploiement

@startuml
node "User Device" {
artifact "Browser"
}

node "CDN / Edge" {
artifact "Static Assets"
}

node "Cloudflare Worker" {
artifact "SSR Handler"
}

node "PlantUML Service" {
artifact "SVG Re

Exemples de diagrammes ER

$@startuml entity User { *id : uuid <<PK>> -- username : varchar email : varchar created_at : datetime } entity Post { *id : uuid <<PK>> -- author_id : uuid <<FK>> title : varchar content :$