1 - Mermaid
Introduction
Mermaid est une bibliothèque de diagrammes et de visualisation basée sur JavaScript, qui permet de créer des diagrammes et des organigrammes à l’aide de descriptions textuelles. Mermaid est fréquemment utilisé dans les documents Markdown (par exemple, sur GitHub, GitLab ou Confluence) pour représenter visuellement des relations complexes.
Avantages de Mermaid :
- Intégration simple dans les documents Markdown.
- Aucun outil externe nécessaire – les diagrammes sont rendus directement dans le navigateur.
- Prend en charge une grande variété de types de diagrammes.
- Idéal pour la documentation, les présentations et les spécifications techniques.
Types de diagrammes possibles
Organigramme (Flowchart)
Les organigrammes visualisent des processus ou des flux de travail. Ils sont composés de nœuds (étapes) et de connexions (flèches) représentant la séquence des étapes.
Exemple :
flowchart TD
A[Début] --> B{Décision}
B -->|Oui| C[Processus 1]
B -->|Non| D[Processus 2]
C --> E[Fin]
D --> E
flowchart TD
A[Début] --> B{Décision}
B -->|Oui| C[Processus 1]
B -->|Non| D[Processus 2]
C --> E[Fin]
D --> E
Explication :
flowchart TD: Définit un organigramme de haut en bas.A[Début]: Un nœud avec l’étiquette “Début”.-->: Connexion entre les nœuds.|Oui|et|Non|: Étiquettes pour les connexions.
Diagramme de classes (Class Diagram)
Les diagrammes de classes montrent la structure des classes, leurs attributs, leurs méthodes et leurs relations entre elles.
Exemple :
classDiagram
class Animal {
-nom: String
+manger()
}
class Chien {
+aboyer()
}
Animal <|-- Chien
classDiagram
class Animal {
-nom: String
+manger()
}
class Chien {
+aboyer()
}
Animal <|-- Chien
Explication :
classDiagram: Définit un diagramme de classes.AnimaletChien: Classes avec attributs (-nom) et méthodes (+manger()).<|--: Relation d’héritage (Chien hérite d’Animal).
Diagramme de séquence (Sequence Diagram)
Les diagrammes de séquence visualisent les interactions entre des objets ou des acteurs dans un ordre chronologique.
Exemple :
sequenceDiagram
Alice->>Bob: Bonjour !
Bob-->>Alice: Bonjour en retour !
sequenceDiagram
Alice->>Bob: Bonjour !
Bob-->>Alice: Bonjour en retour !
Explication :
sequenceDiagram: Définit un diagramme de séquence.Alice->>Bob: Message d’Alice à Bob.-->>: Réponse de Bob à Alice.
Diagramme Entité-Association (ER Diagram)
Les diagrammes ER montrent les relations entre les entités dans une base de données.
Exemple :
erDiagram
CLIENT ||--o{ COMMANDE : places
CLIENT {
int id PK
string nom
}
COMMANDE {
int id PK
date date
}
erDiagram
CLIENT ||--o{ COMMANDE : places
CLIENT {
int id PK
string nom
}
COMMANDE {
int id PK
date date
}
Explication :
erDiagram: Définit un diagramme ER.CLIENT ||--o{ COMMANDE: Un client a plusieurs commandes.PK: Clé primaire.
Diagramme d’états (State Diagram)
Les diagrammes d’états montrent les états d’un système et les transitions entre ces états.
Exemple :
stateDiagram-v2
s1 --> Arrêt
Arrêt --> Marche: Allumer
Marche --> Arrêt: Éteindre
stateDiagram-v2
s1 --> Arrêt
Arrêt --> Marche: Allumer
Marche --> Arrêt: Éteindre
Explication :
stateDiagram-v2: Définit un diagramme d’états.[*]: État de départ.Arrêt --> Marche: Transition de “Arrêt” à “Marche” via “Allumer”.
Diagramme heuristique (Mindmap)
Les cartes heuristiques visualisent des idées ou des concepts hiérarchiques.
Exemple :
mindmap
root((Sujet))
Branche 1
Sous-sujet 1
Sous-sujet 2
Branche 2
Sous-sujet 3
mindmap
root((Sujet))
Branche 1
Sous-sujet 1
Sous-sujet 2
Branche 2
Sous-sujet 3
Explication :
mindmap: Définit une carte heuristique.root((Sujet)): Sujet central.- Les indentations définissent la hiérarchie.
Diagramme d’exigences (Requirement Diagram)
Les diagrammes d’exigences montrent les exigences et leurs relations.
Exemple :
requirementDiagram
requirement Exigence1 {
id: 1
text: "Le système doit être sécurisé."
}
element Système {
type: "logiciel"
}
Système - satisfies -> Exigence1
requirementDiagram
requirement Exigence1 {
id: 1
text: "Le système doit être sécurisé."
}
element Système {
type: "logiciel"
}
Système - satisfies -> Exigence1
Explication :
requirementDiagram: Définit un diagramme d’exigences.requirement: Définit une exigence.satisfies: Relation entre un élément et une exigence.
Diagramme de Gantt
Les diagrammes de Gantt visualisent les plans de projet et les calendriers.
Exemple :
gantt
title Plan de projet
dateFormat YYYY-MM-DD
section Phase 1
Tâche 1 :a1, 2024-01-01, 7d
Tâche 2 :after a1, 3d
gantt
title Plan de projet
dateFormat YYYY-MM-DD
section Phase 1
Tâche 1 :a1, 2024-01-01, 7d
Tâche 2 :after a1, 3d
Explication :
gantt: Définit un diagramme de Gantt.dateFormat: Format des dates.Tâche 1 :a1, 2024-01-01, 7d: La tâche 1 dure 7 jours à partir du 1er janvier 2024.
Chronologie (Timeline)
Les chronologies montrent les événements dans un ordre chronologique.
Exemple :
timeline
title Événements importants 2024 : Événement 1
2025 : Événement 2
timeline
title Événements importants 2024 : Événement 1
2025 : Événement 2
Explication :
timeline: Définit une chronologie.2024 : Événement 1: Événement en l’année 2024.
Informations complémentaires
Liens web
2 - PlantUML
Introduction
PlantUML est un outil open-source qui permet de générer des diagrammes à partir de simples descriptions textuelles. Il prend en charge une grande variété de types de diagrammes, tant basés sur UML que non basés sur UML. PlantUML est particulièrement utile pour les développeurs, les architectes et les chefs de projet, car il simplifie la création et la maintenance des diagrammes et peut être intégré dans de nombreux environnements de développement.
Diagrammes possibles basés sur UML
Diagramme de séquence
Description : Un diagramme de séquence montre l’interaction entre des objets dans un ordre spécifique. Il est fréquemment utilisé pour visualiser le flux de messages entre les objets d’un système.
Exemple en PlantUML :
@startuml
Alice -> Bob: Bonjour !
Bob --> Alice: Bonjour en retour !
@enduml
Explication :
->indique un message d’un objet vers un autre.-->indique une réponse.
Diagrammes d’activité
Description : Les diagrammes d’activité (également appelés organigrammes) montrent le déroulement des activités et des décisions dans un processus. Ils sont particulièrement utiles pour visualiser des processus métiers ou des algorithmes.
Exemple en PlantUML :
@startuml
start
:Activité 1; :Activité 2;
if (Condition?) then (Oui)
:Activité 3;
else (Non)
:Activité 4;
endif
stop
@enduml
Explication :
startetstopmarquent le début et la fin du processus.ifetelseindiquent des décisions.
Diagramme de classes
Description : Les diagrammes de classes montrent la structure d’un système à travers des classes, leurs attributs, leurs méthodes et les relations entre les classes.
Exemple en PlantUML :
@startuml
class Voiture {
-marque: String
-modele: String +rouler()
}
class Conducteur {
-nom: String +conduire()
}
Voiture "1" *-- "1" Conducteur
@enduml
Explication :
-indique des attributs privés,+indique des méthodes publiques.-->indique une association entre des classes.
Diagramme d’objets
Description : Les diagrammes d’objets montrent les instances de classes à un moment donné et leurs relations entre elles.
Exemple en PlantUML :
@startuml
object Voiture1 {
marque = "VW"
modele = "Golf"
}
object Conducteur1 {
nom = "Max"
}
Voiture1 --> Conducteur1
@enduml
Explication :
objectdéfinit une instance d’une classe.-->indique une relation entre des objets.
Diagramme d’états
Description : Les diagrammes d’états montrent les différents états d’un objet et les transitions entre ces états.
Exemple en PlantUML :
@startuml
[*] --> Arret
Arret --> Marche : allumer
Marche --> Arret : eteindre
@enduml
Explication :
[*]indique l’état initial.-->indique une transition entre états.
Diagrammes possibles non basés sur UML
Visualisation de données JSON/YAML
Description : PlantUML peut visualiser des données JSON ou YAML pour mieux comprendre la structure et la hiérarchie des données.
Exemple en PlantUML :
@startjson
{
"nom": "Max",
"age": 30,
"adresse": {
"rue": "Rue Principale 1",
"ville": "Berlin"
}
}
@endjson
Explication :
@startjsonet@endjsonencadrent le code JSON.
Diagramme Archimate
Description : Les diagrammes Archimate sont utilisés pour modéliser des architectures d’entreprise. Ils montrent les relations entre les processus métiers, les applications et les technologies.
Exemple en PlantUML :
@startuml
archimate #Business "Business Process" as bp <<business-process>>
archimate #Application "Application" as app <<application-component>>
bp --> app
@enduml
Explication :
archimatedéfinit un élément Archimate.-->indique une relation entre des éléments.
Diagramme de Gantt
Description : Les diagrammes de Gantt montrent les plans de projet et le calendrier des tâches.
Exemple en PlantUML :
@startgantt
[Tâche 1] lasts 5 days
[Tâche 2] starts at [Tâche 1]'s end and lasts 3 days
@endgantt
Explication :
lastsdéfinit la durée d’une tâche.starts atindique le début d’une tâche par rapport à une autre.
Diagramme de carte mentale (Mindmap)
Description : Les cartes mentales visualisent des idées et des concepts dans une structure hiérarchique.
Exemple en PlantUML :
@startmindmap
* Racine
** Branche 1
*** Feuille 1
** Branche 2
@endmindmap
Explication :
*indique le nœud racine.**et***indiquent des nœuds enfants.
Diagramme de réseau
Description : Les diagrammes de réseau montrent la structure et les connexions dans un réseau.
Exemple en PlantUML :
@startuml
node "Serveur" as s
node "Client" as c
s -- c
@enduml
Explication :
nodedéfinit un nœud dans le réseau.--indique une connexion entre des nœuds.
Structure de découpage du projet (WBS)
Description : Une structure de découpage du projet (WBS) montre la hiérarchie et la structure d’un projet.
Exemple en PlantUML :
@startwbs
* Projet
** Phase 1
*** Tâche 1
*** Tâche 2
** Phase 2
@endwbs
Explication :
*indique le projet principal.**et***indiquent des sous-éléments.