Read this post in: de_DEen_USes_EShi_INid_IDjapl_PLpt_PTru_RUvizh_CNzh_TW

Guide de référence du playbook VPASCode PlantUML

Une liste d’articles sélectionnés provenant du playbook VPASCode PlantUML, présentant des guides de syntaxe pour les diagrammes UML et non-UML en tant que code.

Fondamentaux de PlantUML et syntaxe de base

  1. Bases de la syntaxe PlantUML: Maîtrisez la syntaxe fondamentale de PlantUML, y compris la déclaration de diagramme avec@startuml/@enduml, les définitions d’entités, les opérateurs de relation, les directives de style et les mots-clés courants. Apprenez à structurer des scripts PlantUML propres et lisibles qui génèrent automatiquement des diagrammes professionnels. [[34]]

  2. Guide de syntaxe des diagrammes de cas d’utilisation PlantUML: Apprenez à modéliser les exigences fonctionnelles et les interactions des acteurs à l’aide des diagrammes de cas d’utilisation PlantUML. Couvre les acteurs, les cas d’utilisation, les limites du système, les relations include/extend et les schémas de généralisation pour la documentation des exigences et la cartographie des histoires d’utilisateur.

  3. Guide de syntaxe des diagrammes de classes PlantUML: Concevez des structures système statiques à l’aide des diagrammes de classes PlantUML. Maîtrisez les déclarations de classe/attribut/méthode, les modificateurs de visibilité, l’héritage (<|--), composition (*--), agrégation (o--), et les relations d’association pour la documentation de l’architecture orientée objet. [[49]]

  4. Guide de syntaxe des diagrammes de séquence PlantUML: Modélisez les flux de messages et les interactions temporelles entre les composants du système. Apprenez les déclarations de participants, les messages synchrones/asynchrones (->, -->), les barres d’activation, les boucles, les blocs alt/else, et la syntaxe de création/désactivation pour la conception d’API et les diagrammes de communication entre microservices. [[51]]

  5. Guide de syntaxe des diagrammes d’activité PlantUML: Visualisez les processus métiers et les flux algorithmiques à l’aide de la syntaxe des diagrammes d’activité de PlantUML. Couvre les nœuds de départ/fin, les actions, les branches conditionnelles (si/alors/sinon), boucles (répéter/tant que), des fourches parallèles, et des rivières de partition pour la documentation de la logique procédurale. [[46]]

  6. Guide de syntaxe des diagrammes d’état PlantUML: Modélisez des machines à états finis et les transitions du cycle de vie des objets. Apprenez les déclarations d’état, les flèches de transition (-->), les actions d’entrée/sortie, les états composés et les régions concurrentes pour la conception de systèmes pilotés par événements et la spécification comportementale. [[36]]

  7. Guide de syntaxe des diagrammes d’objets PlantUML: Illustrez des instances d’objets concrets et leurs relations au moment d’exécution à un instant donné. Maîtrisez le nommage des objets, l’affectation des valeurs d’attributs, la syntaxe des liens et les associations au niveau de l’instance pour le débogage et la visualisation des scénarios de test. [[15]]

  8. Guide de syntaxe des diagrammes de composants PlantUML: Cartographiez une architecture logicielle modulaire avec des composants, des interfaces et des dépendances. Apprenez les déclarations de composants, les interfaces fournies/requises (<>), les flèches de dépendance et le regroupement des paquets pour la documentation des systèmes à microservices et basés sur des plugins. [[35]]

Types avancés de diagrammes PlantUML

  1. Guide de syntaxe des diagrammes de déploiement PlantUML: Modélisez l’infrastructure physique et la topologie de déploiement en temps réel. Maîtrisez nœud, nuage, cadre, base de données, et artefact éléments, la syntaxe des conteneurs imbriqués et l’étiquetage des protocoles réseau pour les runbooks DevOps et les diagrammes d’architecture cloud. [[31]]

@startuml
skinparam shadowing false
skinparam defaultFontName "Arial"

' Définir les styles
skinparam node {
BackgroundColor #F1F8FF
BorderColor #005CC5
FontColor #032F62
}

skinparam database {
BackgroundColor #FFF5E6
BorderColor #D96F00
FontColor #5C3000
}

skinparam artifact {
BackgroundColor #E6FFF1
BorderColor #008670
FontColor #004D40
}

left to right direction

' Zones réseau / Nœuds
node "Réseau de livraison de contenu" as cdn <<CDN>> {
artifact "Actifs statiques mis en cache" as static
}

node "Équilibreur de charge" as lb <<F5 / HAProxy>>

node "Serveur d'application" as appServer <<Ubuntu Linux>> {
node "Conteneur Docker" as docker {
artifact "app.war" as artifactApp
}
}

node "Serveur de base de données" as dbServer <<Cluster>> {
database "Base de données de production" as db <<PostgreSQL>>
}

' Connexions avec étiquettes de protocole
cdn --> lb : HTTP/HTTPS (Port 443)
lb --> artifactApp : HTTP (Port 8080)
artifactApp --> db : JDBC / SQL (Port 5432)

@enduml

Exemple : Architecture classique en trois niveaux montrant un CDN, un équilibreur de charge, un serveur d’application avec un artefact imbriqué, et un niveau de base de données avec des connexions étiquetées par protocole. [[1]]

@startuml

skinparam shadowing false

skinparam defaultFontName "Arial"

skinparam linetype ortho

' Définitions de style

skinparam rectangle {

    BackgroundColor #F4F6F9

    BorderColor #A0AAB2

    FontColor #232F3E

}

skinparam node {

    BackgroundColor #E2F3FC

    BorderColor #4A90E2

    FontColor #111111

}

skinparam database {

    BackgroundColor #FFF2E6

    BorderColor #FF9900

    FontColor #232F3E

}

' Point d'entrée de l'infrastructure

node "AWS Route 53" as dns

node "Équilibreur de charge d'application AWS" as alb

dns --> alb : Acheminer le trafic

' Périmètre global du nuage

rectangle "Région cloud AWS" {

   

    ' Frontière du cluster Kubernetes cross-AZ

    rectangle "Cluster Amazon EKS" as eks {

       

        ' Zone de disponibilité 1

        rectangle "Zone de disponibilité us-east-1a" as az1 #line.dashed {

            node "Nœud de travail EC2 (AZ1)" as node1 {

                rectangle "Pod Frontend" as podWeb1 <<K8s Pod>> {

                    artifact "Conteneur Nginx" as containerWeb1

                }

                rectangle "Pod API Backend" as podApi1 <<K8s Pod>> {

                    artifact "Conteneur d'application Go" as containerApi1

                }

            }

        }

        ' Zone de disponibilité 2

        rectangle "Zone de disponibilité us-east-1b" as az2 #line.dashed {

            node "Nœud de travail EC2 (AZ2)" as node2 {

                rectangle "Pod Frontend" as podWeb2 <<K8s Pod>> {

                    artifact "Conteneur Nginx" as containerWeb2

                }

                rectangle "Pod API Backend" as podApi2 <<K8s Pod>> {

                    artifact "Conteneur d'application Go" as containerApi2

                }

            }

        }

    }

    ' Niveau de base de données partagée

    rectangle "Moteur de stockage Amazon Aurora" as storage {

        database "Aurora Primaire (Écrivain)" as dbMaster

        database "Aurora Réplique (Lecteur)" as dbReplica

    }

}

' Routage et matrice de trafic

alb --> podWeb1 : HTTP/S (Port 80/443)

alb --> podWeb2 : HTTP/S (Port 80/443)

podWeb1 --> podApi1 : gRPC (Port 50051)

podWeb2 --> podApi2 : gRPC (Port 50051)

podApi1 --> dbMaster : TCP (Port 5432)

podApi2 --> dbMaster : TCP (Port 5432)

dbMaster .right.> dbReplica : Réplication automatique du stockage

@enduml

Exemple : Déploiement Kubernetes natif du nuage sur les zones de disponibilité AWS avec routage par équilibreur de charge, imbriquement de pods et cluster de base de données partagé. [[1]]

  1. Guide de syntaxe des diagrammes de timing PlantUML: Visualisez des durées d’état précises et des contraintes temporelles le long de lignes de temps linéaires. Apprenez robuste/concis styles de participants, @pointtemps affectations d’état, horloge génération de forme d’onde, et <-> annotations de contraintes pour les systèmes embarqués et la spécification de protocoles. [[30]]

@startuml
skinparam handwritten false
skinparam shadowing false
skinparam defaultFontName "Arial"

' Titre du diagramme de timing
title Chronologie de synchronisation du registre du bus de données

' Définir une onde horloge périodique (période 10 unités, haute 5 unités)
clock "Horloge système" as CLK avec période 10 impulsion 5

' Définir le participant robuste du bus de données
robuste "Registre du bus de données" as BUS

' Temps 0 : État initial du registre
@0
BUS est Vide

' Temps 10 : Le bus de données passe à Lecture
@10
BUS est en Lecture

' Temps 20 : Le bus de données passe à Écriture
@20
BUS est en Écriture

' Temps 22 : Afficher l'étiquette de texte personnalisée sur la ligne de temps
@22
note haut de BUS : T_WRITE

' Temps 30 : Le bus de données devient Verrouillé
@30
BUS est Verrouillé

' Temps 35 : Afficher l'étiquette de texte personnalisée sur la ligne de temps
@35
note haut de BUS : T_LOCK

' Temps 40 : Le bus de données revient à Vide
@40
BUS est Vide

' Ajouter des annotations de contraintes temporelles en utilisant des points numériques explicites
@22 <-> @35 : {13 TU Durée}

@enduml

Exemple : Chronologie concise montrant les états du registre du bus de données (Vide → Lecture → Écriture → Verrouillé) synchronisés avec une onde horloge système périodique. [[12]]

@startuml

skinparam shadowing false

skinparam defaultFontName "Arial"

' Titre du diagramme de timing multi-fils

title Synchronisation du thread client web et du thread travailleur d'authentification

' Déclarer les lignes de temps en utilisant le style participant robuste

robuste "Thread client web" as CLIENT

robuste "Thread travailleur d'authentification" as AUTH

' Temps 0ms : États initiaux Inactifs

@0

CLIENT est Inactif

AUTH est Inactif

' Temps 10ms : Le client déclenche une demande d'authentification

@10

CLIENT est "En attente d'authentification"

AUTH est "Vérification des identifiants"

' Temps 25ms : Le client envoie un chargement supplémentaire / L'authentification commence la génération du jeton

@25

AUTH est "Génération du jeton JWT"

' Temps 40ms : L'authentification termine la génération du jeton et répond au client

@40

AUTH est Inactif

CLIENT est "Authentifié"

' Temps 55ms : Le client retourne à son état par défaut

@55

CLIENT est Inactif

' Annotation de fenêtre de contrainte temporelle de 30ms (de @10 à @40)

@10 <-> @40 : {Fenêtre de génération de 30ms}

@enduml

Exemple : Chronologie robuste multi-fils cartographiant les états du client web et du travailleur d’authentification avec une annotation de contrainte de fenêtre de génération de 30ms. [[12]]

  1. Guide de syntaxe des diagrammes ERD PlantUML: Concevez des diagrammes entité-association pour la documentation du schéma de base de données. Maîtrisez les déclarations d’entités, le typage des attributs, la notation des clés primaires/étrangères et les relations de cardinalité (1|o--o{) pour la modélisation des données et la planification de la migration SQL.

  2. Guide de syntaxe des diagrammes ArchiMate PlantUML: Modélisez les couches d’architecture d’entreprise à l’aide de la spécification ArchiMate. Apprenez les éléments des couches métier/application/technologie, les concepts de motivation et les types de relations pour la planification stratégique des TI et la documentation de gouvernance.

  3. Guide de syntaxe du modèle C4 PlantUML: Mettez en œuvre le modèle C4 pour la visualisation de l’architecture logicielle à travers quatre niveaux d’abstraction : Contexte, Conteneur, Composant et Code. Maîtrisez Personne, Système, Conteneur, et Composant stéréotypes avec des conteneurs de limite et un style de relation pour une communication d’architecture alignée sur les parties prenantes.

Note sur les diagrammes intégrés: Tous les exemples de code PlantUML dans la documentation de VPASCode s’affichent sous forme de diagrammes interactifs et éditables directement dans le navigateur. Les liens vers les images PNG ci-dessus montrent des aperçus statiques des diagrammes d’exemple ; pour une interactivité complète incluant l’édition en temps réel, la validation de syntaxe et l’exportation au format PNG/SVG, rendez-vous directement sur l’URL de chaque article à vpascode.com/docs. [[54]]

Fonctionnalités de l’éditeur VPasCode: Chaque article inclut des boutons « Éditer le PlantUML dans VPasCode » qui lancent l’exemple de code dans l’éditeur gratuit basé sur navigateur de VPasCode — aucun identifiant de connexion ou installation requise. Les modifications sont prévisualisées instantanément grâce au rendu en temps réel. [[54]]

Référence compilée à partir de la documentation de VPasCode. VPasCode est un éditeur gratuit en ligne basé sur navigateur pour les diagrammes PlantUML, Mermaid et Graphviz, qui ne nécessite ni connexion ni installation. [[54]]

Leave a Reply