Loic Wiki - Contributions [fr]

Index des modèles de schémas

2026-04-03T09:22:26Z

Loic : Correction du lien vers la page de déploiement BPMN

= Index des modèles de schémas =

Cette page liste les '''modèles / exemples de schémas''' disponibles dans le wiki.

== Documentation générale ==
* [[Déploiement Mermaid PlantUML BPMN JS]] — documentation détaillée du déploiement et du fonctionnement des technologies de diagrammes intégrées
* [[Tests de représentations d'architecture de tas]] — différentes représentations Mermaid de l'architecture de tas

== Mermaid ==
=== Workflow / flowchart ===
* [[Exemple Mermaid]] — flowchart simple de workflow

=== Sequence ===
* [[Exemple Mermaid Sequence]] — diagramme de séquence

=== State ===
* [[Exemple Mermaid State]] — diagramme d'états

=== Entité-relation ===
* [[Exemple Mermaid ER]] — diagramme ER

=== Gantt ===
* [[Exemple Mermaid Gantt]] — planning / projet

=== Git graph ===
* [[Exemple Mermaid Gitgraph]] — historique de branches Git

=== Class diagram ===
* [[Exemple Mermaid Class Diagram]] — diagramme de classes

=== Journey ===
* [[Exemple Mermaid Journey]] — parcours utilisateur / processus

=== Pie ===
* [[Exemple Mermaid Pie]] — répartition en pourcentages

=== Mindmap ===
* [[Exemple Mermaid Mindmap]] — carte mentale

=== Timeline ===
* [[Exemple Mermaid Timeline]] — frise chronologique

== PlantUML ==
* [[Exemple PlantUML]] — exemple simple de workflow / activité

* [[Modèle PlantUML - Workflow avec lignes d'eau]] — exemple de workflow avec lignes d'eau utilisateur / service

* [[Catalogue PlantUML]] — catalogue des principaux cas d'usage PlantUML avec rendus

* [[Exemple PlantUML - Étapes avec liens]] — étapes PlantUML avec liens vers Google, index des modèles et sous-modèle A/B
== BPMN ==
* [[Exemple BPMN.js]] — exemple BPMN rendu avec bpmn-js

* [[Modèle BPMN.js - Workflow avec lignes d'eau]] — exemple BPMN avec lignes d'eau utilisateur / service

* [[Exemple BPMN.io - Étapes avec liens]] — étapes BPMN avec liens vers Google, index des modèles et sous-modèle A/B
* [[Sous-modèle BPMN.io - Blocs A et B]] — sous-modèle BPMN minimal (A puis B)
* [[Sous-modèle PlantUML - Blocs A et B]] — version PlantUML du sous-modèle A/B
== D2 ==
* [[Exemple D2 - système d'information fictif]] — démonstration D2 sur un SI fictif (physique + logiciel)
* [[Exemple D2 - architecture logicielle fictive]] — architecture logicielle fictive orientée composants logiciels

== Graphviz ==
* [[Exemple Graphviz - architecture logicielle fictive]] — architecture logicielle fictive représentée en DOT / Graphviz

== Conseils d'usage ==
* utiliser '''Mermaid''' pour les schémas rapides et textuels
* utiliser '''PlantUML''' pour les diagrammes UML et techniques
* utiliser '''BPMN.js''' pour les workflows BPMN métiers
* utiliser '''D2''' pour l'architecture physique et logique d'un système d'information
* utiliser '''Graphviz''' pour comparer des dépendances, flux et graphes de composants

== Remarque sur cette instance MediaWiki ==
Pour les rendus SVG D2 / Graphviz, la méthode actuellement fonctionnelle dans ce wiki consiste à afficher l'URL directe du fichier SVG servi sous `/images/...`.

== Évolutions possibles ==
Cette page peut servir de point d'entrée pour ajouter ensuite :
* des comparatifs entre moteurs
* des modèles réutilisables
* des conventions de nommage par type de schéma

Index des modèles de schémas

2026-04-02T19:41:19Z

Loic : Ajout des liens vers Catalogue PlantUML et Exemple PlantUML avec liens

= Index des modèles de schémas =

Cette page liste les '''modèles / exemples de schémas''' disponibles dans le wiki.

== Documentation générale ==
* [[Déploiement Mermaid PlantUML BPMN.js]] — documentation détaillée du déploiement et du fonctionnement des technologies de diagrammes intégrées
* [[Tests de représentations d'architecture de tas]] — différentes représentations Mermaid de l'architecture de tas

== Mermaid ==
=== Workflow / flowchart ===
* [[Exemple Mermaid]] — flowchart simple de workflow

=== Sequence ===
* [[Exemple Mermaid Sequence]] — diagramme de séquence

=== State ===
* [[Exemple Mermaid State]] — diagramme d'états

=== Entité-relation ===
* [[Exemple Mermaid ER]] — diagramme ER

=== Gantt ===
* [[Exemple Mermaid Gantt]] — planning / projet

=== Git graph ===
* [[Exemple Mermaid Gitgraph]] — historique de branches Git

=== Class diagram ===
* [[Exemple Mermaid Class Diagram]] — diagramme de classes

=== Journey ===
* [[Exemple Mermaid Journey]] — parcours utilisateur / processus

=== Pie ===
* [[Exemple Mermaid Pie]] — répartition en pourcentages

=== Mindmap ===
* [[Exemple Mermaid Mindmap]] — carte mentale

=== Timeline ===
* [[Exemple Mermaid Timeline]] — frise chronologique

== PlantUML ==
* [[Exemple PlantUML]] — exemple simple de workflow / activité

* [[Modèle PlantUML - Workflow avec lignes d'eau]] — exemple de workflow avec lignes d'eau utilisateur / service

* [[Catalogue PlantUML]] — catalogue des principaux cas d'usage PlantUML avec rendus

* [[Exemple PlantUML - Étapes avec liens]] — étapes PlantUML avec liens vers Google, index des modèles et sous-modèle A/B
== BPMN ==
* [[Exemple BPMN.js]] — exemple BPMN rendu avec bpmn-js

* [[Modèle BPMN.js - Workflow avec lignes d'eau]] — exemple BPMN avec lignes d'eau utilisateur / service

* [[Exemple BPMN.io - Étapes avec liens]] — étapes BPMN avec liens vers Google, index des modèles et sous-modèle A/B
* [[Sous-modèle BPMN.io - Blocs A et B]] — sous-modèle BPMN minimal (A puis B)
* [[Sous-modèle PlantUML - Blocs A et B]] — version PlantUML du sous-modèle A/B
== D2 ==
* [[Exemple D2 - système d'information fictif]] — démonstration D2 sur un SI fictif (physique + logiciel)
* [[Exemple D2 - architecture logicielle fictive]] — architecture logicielle fictive orientée composants logiciels

== Graphviz ==
* [[Exemple Graphviz - architecture logicielle fictive]] — architecture logicielle fictive représentée en DOT / Graphviz

== Conseils d'usage ==
* utiliser '''Mermaid''' pour les schémas rapides et textuels
* utiliser '''PlantUML''' pour les diagrammes UML et techniques
* utiliser '''BPMN.js''' pour les workflows BPMN métiers
* utiliser '''D2''' pour l'architecture physique et logique d'un système d'information
* utiliser '''Graphviz''' pour comparer des dépendances, flux et graphes de composants

== Remarque sur cette instance MediaWiki ==
Pour les rendus SVG D2 / Graphviz, la méthode actuellement fonctionnelle dans ce wiki consiste à afficher l'URL directe du fichier SVG servi sous `/images/...`.

== Évolutions possibles ==
Cette page peut servir de point d'entrée pour ajouter ensuite :
* des comparatifs entre moteurs
* des modèles réutilisables
* des conventions de nommage par type de schéma

Exemple PlantUML - Étapes avec liens

2026-04-02T19:41:19Z

Loic : Ajout exemple PlantUML avec liens (équivalent BPMN.io)

= Exemple PlantUML - Étapes avec liens =

Ce modèle reproduit le même principe que l'exemple BPMN.io : 3 étapes avec des liens associés.

== Modèle ==
<pre class="oc-plantuml">@startuml
title Étapes avec liens (équivalent PlantUML)
start
:Étape 1 - Google;
note right
https://google.com
end note
:Étape 2 - Index des modèles;
note right
https://wiki.lololand.org/index.php/Index_des_modèles_de_schémas
end note
:Étape 3 - Sous-modèle A/B;
note right
https://wiki.lololand.org/index.php/Sous-modèle_BPMN.io_-_Blocs_A_et_B
end note
stop
@enduml</pre>

== Liens des étapes ==
* '''Étape 1 - Google''' : [https://google.com Google]
* '''Étape 2 - Index des modèles''' : [[Index des modèles de schémas]]
* '''Étape 3 - Sous-modèle A/B''' : [[Sous-modèle BPMN.io - Blocs A et B]]

Catalogue PlantUML

2026-04-02T17:41:31Z

Loic : Ajout du rendu PlantUML sous chaque bloc de code existant

= Catalogue PlantUML – principaux cas d’usage =

Cette page présente plusieurs représentations réalisables avec '''PlantUML''', sous la forme d’exemples simples, lisibles et facilement réutilisables.

Chaque section contient :
* le cas d’usage visé ;
* un exemple minimal ;
* un code '''PlantUML''' autonome.

__TOC__

== 1. Diagramme de séquence ==
'''Usage :''' représenter des échanges entre acteurs, applications, API, bases de données ou services.

<syntaxhighlight lang="plantuml">
@startuml
actor Utilisateur
participant "Frontend" as Front
participant "API" as API
database "Base PostgreSQL" as DB

Utilisateur -> Front : saisit ses identifiants
Front -> API : POST /login
API -> DB : vérifier le compte
DB --> API : compte valide
API --> Front : token
Front --> Utilisateur : accès autorisé
@enduml
</syntaxhighlight>

=== Rendu du modèle ===
<pre class="oc-plantuml">@startuml
actor Utilisateur
participant "Frontend" as Front
participant "API" as API
database "Base PostgreSQL" as DB

Utilisateur -> Front : saisit ses identifiants
Front -> API : POST /login
API -> DB : vérifier le compte
DB --> API : compte valide
API --> Front : token
Front --> Utilisateur : accès autorisé
@enduml</pre>

== 2. Diagramme de classes ==
'''Usage :''' représenter une structure de données, un modèle métier ou l’organisation d’un code.

<syntaxhighlight lang="plantuml">
@startuml
class Utilisateur {
+id : UUID
+nom : String
+email : String
+seConnecter()
}

class Role {
+code : String
+libelle : String
}

class Session {
+token : String
+expiration : Instant
}

Utilisateur "1" -- "*" Role
Utilisateur "1" -- "0..*" Session
@enduml
</syntaxhighlight>

=== Rendu du modèle ===
<pre class="oc-plantuml">@startuml
class Utilisateur {
+id : UUID
+nom : String
+email : String
+seConnecter()
}

class Role {
+code : String
+libelle : String
}

class Session {
+token : String
+expiration : Instant
}

Utilisateur "1" -- "*" Role
Utilisateur "1" -- "0..*" Session
@enduml</pre>

== 3. Diagramme de cas d’utilisation ==
'''Usage :''' montrer les fonctionnalités offertes par un système à ses utilisateurs.

<syntaxhighlight lang="plantuml">
@startuml
left to right direction

actor "Chef de projet" as CP
actor "Analyste" as A

rectangle "Plateforme d'analyse" {
usecase "Lancer une analyse" as UC1
usecase "Consulter les résultats" as UC2
usecase "Exporter un rapport" as UC3
}

A --> UC1
A --> UC2
CP --> UC2
CP --> UC3
@enduml
</syntaxhighlight>

=== Rendu du modèle ===
<pre class="oc-plantuml">@startuml
left to right direction

actor "Chef de projet" as CP
actor "Analyste" as A

rectangle "Plateforme d'analyse" {
usecase "Lancer une analyse" as UC1
usecase "Consulter les résultats" as UC2
usecase "Exporter un rapport" as UC3
}

A --> UC1
A --> UC2
CP --> UC2
CP --> UC3
@enduml</pre>

== 4. Diagramme d’activité ==
'''Usage :''' représenter un processus, un enchaînement de traitements ou une procédure.

<syntaxhighlight lang="plantuml">
@startuml
start
:Réception du code source;
:Préparation de l'analyse;
if (Langage supporté ?) then (oui)
:Exécuter les règles;
:Consolider les résultats;
else (non)
:Notifier l'absence de support;
endif
stop
@enduml
</syntaxhighlight>

=== Rendu du modèle ===
<pre class="oc-plantuml">@startuml
start
:Réception du code source;
:Préparation de l'analyse;
if (Langage supporté ?) then (oui)
:Exécuter les règles;
:Consolider les résultats;
else (non)
:Notifier l'absence de support;
endif
stop
@enduml</pre>

== 5. Diagramme d’états ==
'''Usage :''' décrire le cycle de vie d’un objet, d’un dossier ou d’un ticket.

<syntaxhighlight lang="plantuml">
@startuml
[*] --> Brouillon
Brouillon --> EnRevue : soumettre
EnRevue --> Valide : approuver
EnRevue --> Rejete : refuser
Rejete --> Brouillon : corriger
Valide --> Archive : clôturer
Archive --> [*]
@enduml
</syntaxhighlight>

=== Rendu du modèle ===
<pre class="oc-plantuml">@startuml
[*] --> Brouillon
Brouillon --> EnRevue : soumettre
EnRevue --> Valide : approuver
EnRevue --> Rejete : refuser
Rejete --> Brouillon : corriger
Valide --> Archive : clôturer
Archive --> [*]
@enduml</pre>

== 6. Diagramme de composants ==
'''Usage :''' présenter l’architecture logique d’une application ou la répartition des modules.

<syntaxhighlight lang="plantuml">
@startuml
component "Frontend Angular" as Front
component "API Spring Boot" as API
component "Moteur d'analyse" as Engine
database "PostgreSQL" as DB

Front --> API
API --> Engine
API --> DB
@enduml
</syntaxhighlight>

=== Rendu du modèle ===
<pre class="oc-plantuml">@startuml
component "Frontend Angular" as Front
component "API Spring Boot" as API
component "Moteur d'analyse" as Engine
database "PostgreSQL" as DB

Front --> API
API --> Engine
API --> DB
@enduml</pre>

== 7. Diagramme de déploiement ==
'''Usage :''' montrer où les composants sont installés et comment ils communiquent.

<syntaxhighlight lang="plantuml">
@startuml
node "Poste utilisateur" {
artifact "Navigateur"
}

node "Serveur applicatif" {
artifact "frontend.war"
artifact "api.jar"
}

node "Serveur base de données" {
database "PostgreSQL"
}

"Navigateur" --> "frontend.war"
"api.jar" --> "PostgreSQL"
@enduml
</syntaxhighlight>

=== Rendu du modèle ===
<pre class="oc-plantuml">@startuml
node "Poste utilisateur" {
artifact "Navigateur"
}

node "Serveur applicatif" {
artifact "frontend.war"
artifact "api.jar"
}

node "Serveur base de données" {
database "PostgreSQL"
}

"Navigateur" --> "frontend.war"
"api.jar" --> "PostgreSQL"
@enduml</pre>

== 8. Diagramme d’objets ==
'''Usage :''' illustrer un exemple concret d’instances d’objets.

<syntaxhighlight lang="plantuml">
@startuml
object utilisateur1 {
id = 42
nom = "Dupont"
email = "dupont@example.test"
}

object roleAdmin {
code = "ADMIN"
libelle = "Administrateur"
}

utilisateur1 -- roleAdmin
@enduml
</syntaxhighlight>

=== Rendu du modèle ===
<pre class="oc-plantuml">@startuml
object utilisateur1 {
id = 42
nom = "Dupont"
email = "dupont@example.test"
}

object roleAdmin {
code = "ADMIN"
libelle = "Administrateur"
}

utilisateur1 -- roleAdmin
@enduml</pre>

== 9. Diagramme de packages ==
'''Usage :''' décrire l’organisation modulaire d’un code ou d’une architecture applicative.

<syntaxhighlight lang="plantuml">
@startuml
package "presentation" {
class Controleur
}

package "application" {
class ServiceMetier
}

package "infrastructure" {
class Repository
}

Controleur --> ServiceMetier
ServiceMetier --> Repository
@enduml
</syntaxhighlight>

=== Rendu du modèle ===
<pre class="oc-plantuml">@startuml
package "presentation" {
class Controleur
}

package "application" {
class ServiceMetier
}

package "infrastructure" {
class Repository
}

Controleur --> ServiceMetier
ServiceMetier --> Repository
@enduml</pre>

== 10. Diagramme de timing ==
'''Usage :''' montrer l’évolution d’états au cours du temps.

<syntaxhighlight lang="plantuml">
@startuml
robust "Service" as S
concise "Cache" as C

@0
S is Arrêté
C is Vide

@10
S is Démarré
C is Chargement

@20
C is Prêt
@enduml
</syntaxhighlight>

=== Rendu du modèle ===
<pre class="oc-plantuml">@startuml
robust "Service" as S
concise "Cache" as C

@0
S is Arrêté
C is Vide

@10
S is Démarré
C is Chargement

@20
C is Prêt
@enduml</pre>

== 11. Gantt ==
'''Usage :''' représenter une planification simple de travaux ou de jalons.

<syntaxhighlight lang="plantuml">
@startgantt
Project starts 2026-04-01

[Analyse initiale] lasts 5 days
[Revue d'architecture] starts at [Analyse initiale]'s end and lasts 3 days
[Rapport final] starts at [Revue d'architecture]'s end and lasts 2 days
@endgantt
</syntaxhighlight>

=== Rendu du modèle ===
<pre class="oc-plantuml">@startgantt
Project starts 2026-04-01

[Analyse initiale] lasts 5 days
[Revue d'architecture] starts at [Analyse initiale]'s end and lasts 3 days
[Rapport final] starts at [Revue d'architecture]'s end and lasts 2 days
@endgantt</pre>

== 12. WBS – découpage des travaux ==
'''Usage :''' structurer un projet en lots, sous-lots et activités.

<syntaxhighlight lang="plantuml">
@startwbs
* Projet d'analyse
** Préparation
*** Collecte du code
*** Vérification du périmètre
** Analyse
*** Qualité
*** Sécurité
*** Architecture
** Restitution
*** Rapport
*** Présentation
@endwbs
</syntaxhighlight>

=== Rendu du modèle ===
<pre class="oc-plantuml">@startwbs
* Projet d'analyse
** Préparation
*** Collecte du code
*** Vérification du périmètre
** Analyse
*** Qualité
*** Sécurité
*** Architecture
** Restitution
*** Rapport
*** Présentation
@endwbs</pre>

== 13. Mindmap ==
'''Usage :''' organiser visuellement des idées, thèmes ou axes d’analyse.

<syntaxhighlight lang="plantuml">
@startmindmap
* Dette logicielle
** Dette de code
*** duplication
*** complexité
** Dette d'architecture
*** couplage fort
*** dépendances cycliques
** Dette d'exploitation
*** déploiement manuel
*** supervision absente
@endmindmap
</syntaxhighlight>

=== Rendu du modèle ===
<pre class="oc-plantuml">@startmindmap
* Dette logicielle
** Dette de code
*** duplication
*** complexité
** Dette d'architecture
*** couplage fort
*** dépendances cycliques
** Dette d'exploitation
*** déploiement manuel
*** supervision absente
@endmindmap</pre>

== 14. Organigramme / schéma de flux ==
'''Usage :''' représenter un enchaînement logique simple, proche d’une procédure.

<syntaxhighlight lang="plantuml">
@startuml
start
:Recevoir la demande;
if (Périmètre complet ?) then (oui)
:Planifier l'analyse;
else (non)
:Demander les éléments manquants;
endif
stop
@enduml
</syntaxhighlight>

=== Rendu du modèle ===
<pre class="oc-plantuml">@startuml
start
:Recevoir la demande;
if (Périmètre complet ?) then (oui)
:Planifier l'analyse;
else (non)
:Demander les éléments manquants;
endif
stop
@enduml</pre>

== 15. Schéma de topologie réseau simple ==
'''Usage :''' représenter des flux entre postes, proxy, services ou zones.

<syntaxhighlight lang="plantuml">
@startuml
node "Client VPN" as Client
node "Reverse proxy" as Proxy
node "OpenWebUI" as OWUI
node "Dependency-Track" as DT

Client --> Proxy : HTTPS
Proxy --> OWUI : 8080
Proxy --> DT : 8081
@enduml
</syntaxhighlight>

=== Rendu du modèle ===
<pre class="oc-plantuml">@startuml
node "Client VPN" as Client
node "Reverse proxy" as Proxy
node "OpenWebUI" as OWUI
node "Dependency-Track" as DT

Client --> Proxy : HTTPS
Proxy --> OWUI : 8080
Proxy --> DT : 8081
@enduml</pre>

== 16. Vue d’architecture applicative simple ==
'''Usage :''' décrire une vue d’ensemble lisible sans entrer dans le détail UML formel.

<syntaxhighlight lang="plantuml">
@startuml
rectangle "Utilisateur" as User
rectangle "Portail Web" as Web
rectangle "API métier" as API
rectangle "Moteur d'analyse" as Engine
database "Référentiel" as Ref

User --> Web
Web --> API
API --> Engine
API --> Ref
@enduml
</syntaxhighlight>

=== Rendu du modèle ===
<pre class="oc-plantuml">@startuml
rectangle "Utilisateur" as User
rectangle "Portail Web" as Web
rectangle "API métier" as API
rectangle "Moteur d'analyse" as Engine
database "Référentiel" as Ref

User --> Web
Web --> API
API --> Engine
API --> Ref
@enduml</pre>

== 17. Exemple de légende ==
'''Usage :''' ajouter une légende de lecture commune à plusieurs schémas.

<syntaxhighlight lang="plantuml">
@startuml
legend
|= Niveau |= Signification |
| Critique | Correction immédiate |
| Majeur | Correction à court terme |
| Mineur | Amélioration souhaitable |
endlegend

rectangle "Exemple"
@enduml
</syntaxhighlight>

=== Rendu du modèle ===
<pre class="oc-plantuml">@startuml
legend
|= Niveau |= Signification |
| Critique | Correction immédiate |
| Majeur | Correction à court terme |
| Mineur | Amélioration souhaitable |
endlegend

rectangle "Exemple"
@enduml</pre>

== 18. Exemple d’écran / maquette fonctionnelle simple ==
'''Usage :''' esquisser rapidement une interface ou une disposition fonctionnelle.

<syntaxhighlight lang="plantuml">
@startuml
rectangle "Écran principal" {
rectangle "Menu" as Menu
rectangle "Filtres" as Filters
rectangle "Zone de résultats" as Results
rectangle "Détail" as Detail
}

Filters --> Results
Results --> Detail
@enduml
</syntaxhighlight>

=== Rendu du modèle ===
<pre class="oc-plantuml">@startuml
rectangle "Écran principal" {
rectangle "Menu" as Menu
rectangle "Filtres" as Filters
rectangle "Zone de résultats" as Results
rectangle "Détail" as Detail
}

Filters --> Results
Results --> Detail
@enduml</pre>

== 19. Exemple de workflow métier ==
'''Usage :''' représenter un traitement métier de bout en bout.

<syntaxhighlight lang="plantuml">
@startuml
start
:Réception d'un dossier;
:Contrôle de complétude;
if (Dossier complet ?) then (oui)
:Instruction;
if (Avis favorable ?) then (oui)
:Validation;
else (non)
:Rejet motivé;
endif
else (non)
:Demande de complément;
endif
stop
@enduml
</syntaxhighlight>

=== Rendu du modèle ===
<pre class="oc-plantuml">@startuml
start
:Réception d'un dossier;
:Contrôle de complétude;
if (Dossier complet ?) then (oui)
:Instruction;
if (Avis favorable ?) then (oui)
:Validation;
else (non)
:Rejet motivé;
endif
else (non)
:Demande de complément;
endif
stop
@enduml</pre>

== 20. Exemple de pipeline CI/CD ==
'''Usage :''' représenter un pipeline d’intégration et de livraison.

<syntaxhighlight lang="plantuml">
@startuml
start
:Commit du développeur;
:Déclenchement CI;
:Compilation;
if (Compilation OK ?) then (oui)
:Tests automatiques;
if (Tests OK ?) then (oui)
:Analyse de qualité;
if (Qualité acceptable ?) then (oui)
:Construction de l'artefact;
:Déploiement;
else (non)
:Blocage de la livraison;
endif
else (non)
:Correction des tests;
endif
else (non)
:Correction de la compilation;
endif
stop
@enduml
</syntaxhighlight>

=== Rendu du modèle ===
<pre class="oc-plantuml">@startuml
start
:Commit du développeur;
:Déclenchement CI;
:Compilation;
if (Compilation OK ?) then (oui)
:Tests automatiques;
if (Tests OK ?) then (oui)
:Analyse de qualité;
if (Qualité acceptable ?) then (oui)
:Construction de l'artefact;
:Déploiement;
else (non)
:Blocage de la livraison;
endif
else (non)
:Correction des tests;
endif
else (non)
:Correction de la compilation;
endif
stop
@enduml</pre>

== Limites à connaître ==
PlantUML est bien adapté :
* à la documentation ;
* à la démonstration ;
* aux schémas versionnables en texte ;
* à l’intégration dans un wiki ou un dépôt Git.

En revanche :
* le rendu BPMN natif n’est pas complet au sens d’un outil spécialisé ;
* les maquettes très visuelles sont moins naturelles qu’avec un outil graphique dédié ;
* les schémas très denses perdent rapidement en lisibilité.

== Conseils d’utilisation ==
* Préférer un diagramme simple par idée.
* Donner un titre clair à chaque schéma.
* Réutiliser des alias courts pour garder un code lisible.
* Limiter le nombre d’éléments affichés pour éviter les schémas surchargés.
* Conserver ces exemples comme base de départ pour vos propres modèles.

Catalogue PlantUML

2026-04-02T17:38:27Z

Loic : Ajout de la page Catalogue PlantUML (20 cas d’usage)

Index des modèles de schémas

2026-04-02T17:27:00Z

Loic : Harmonisation terminologie BPMN.js

= Index des modèles de schémas =

Cette page liste les '''modèles / exemples de schémas''' disponibles dans le wiki.

== Documentation générale ==
* [[Déploiement Mermaid PlantUML BPMN.js]] — documentation détaillée du déploiement et du fonctionnement des technologies de diagrammes intégrées
* [[Tests de représentations d'architecture de tas]] — différentes représentations Mermaid de l'architecture de tas

== Mermaid ==
=== Workflow / flowchart ===
* [[Exemple Mermaid]] — flowchart simple de workflow

=== Sequence ===
* [[Exemple Mermaid Sequence]] — diagramme de séquence

=== State ===
* [[Exemple Mermaid State]] — diagramme d'états

=== Entité-relation ===
* [[Exemple Mermaid ER]] — diagramme ER

=== Gantt ===
* [[Exemple Mermaid Gantt]] — planning / projet

=== Git graph ===
* [[Exemple Mermaid Gitgraph]] — historique de branches Git

=== Class diagram ===
* [[Exemple Mermaid Class Diagram]] — diagramme de classes

=== Journey ===
* [[Exemple Mermaid Journey]] — parcours utilisateur / processus

=== Pie ===
* [[Exemple Mermaid Pie]] — répartition en pourcentages

=== Mindmap ===
* [[Exemple Mermaid Mindmap]] — carte mentale

=== Timeline ===
* [[Exemple Mermaid Timeline]] — frise chronologique

== PlantUML ==
* [[Exemple PlantUML]] — exemple simple de workflow / activité

* [[Modèle PlantUML - Workflow avec lignes d'eau]] — exemple de workflow avec lignes d'eau utilisateur / service

== BPMN ==
* [[Exemple BPMN.js]] — exemple BPMN rendu avec bpmn-js

* [[Modèle BPMN.js - Workflow avec lignes d'eau]] — exemple BPMN avec lignes d'eau utilisateur / service

* [[Exemple BPMN.io - Étapes avec liens]] — étapes BPMN avec liens vers Google, index des modèles et sous-modèle A/B
* [[Sous-modèle BPMN.io - Blocs A et B]] — sous-modèle BPMN minimal (A puis B)
* [[Sous-modèle PlantUML - Blocs A et B]] — version PlantUML du sous-modèle A/B
== D2 ==
* [[Exemple D2 - système d'information fictif]] — démonstration D2 sur un SI fictif (physique + logiciel)
* [[Exemple D2 - architecture logicielle fictive]] — architecture logicielle fictive orientée composants logiciels

== Graphviz ==
* [[Exemple Graphviz - architecture logicielle fictive]] — architecture logicielle fictive représentée en DOT / Graphviz

== Conseils d'usage ==
* utiliser '''Mermaid''' pour les schémas rapides et textuels
* utiliser '''PlantUML''' pour les diagrammes UML et techniques
* utiliser '''BPMN.js''' pour les workflows BPMN métiers
* utiliser '''D2''' pour l'architecture physique et logique d'un système d'information
* utiliser '''Graphviz''' pour comparer des dépendances, flux et graphes de composants

== Remarque sur cette instance MediaWiki ==
Pour les rendus SVG D2 / Graphviz, la méthode actuellement fonctionnelle dans ce wiki consiste à afficher l'URL directe du fichier SVG servi sous `/images/...`.

== Évolutions possibles ==
Cette page peut servir de point d'entrée pour ajouter ensuite :
* des comparatifs entre moteurs
* des modèles réutilisables
* des conventions de nommage par type de schéma

Exemple BPMN.js

2026-04-02T17:27:00Z

Loic : Harmonisation du titre interne (BPMN.js)

= Exemple BPMN.js =

Cette page montre un workflow '''BPMN''' rendu par '''bpmn-js''' dans MediaWiki.

<div class="oc-bpmn-container" style="width:100%; max-width:100%; overflow:auto; border:1px solid #ccc; padding:8px; box-sizing:border-box;">
<div class="oc-bpmn-viewer" style="width:100%; height:600px; min-height:600px;"></div>
<pre class="oc-bpmn-xml" style="display:none;"><?xml version="1.0" encoding="UTF-8"?>

<bpmn:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL"
xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI"
xmlns:dc="http://www.omg.org/spec/DD/20100524/DC"
xmlns:di="http://www.omg.org/spec/DD/20100524/DI"
id="Definitions_1"
targetNamespace="http://bpmn.io/schema/bpmn">

<bpmn:process id="Process_1" isExecutable="false">

<bpmn:startEvent id="StartEvent_1" name="Dossier reçu">
<bpmn:outgoing>Flow_1</bpmn:outgoing>
</bpmn:startEvent>

<bpmn:userTask id="Task_1" name="Analyser le dossier">
<bpmn:incoming>Flow_1</bpmn:incoming>
<bpmn:incoming>Flow_8</bpmn:incoming>
<bpmn:outgoing>Flow_2</bpmn:outgoing>
</bpmn:userTask>

<bpmn:exclusiveGateway id="Gateway_1" name="Dossier complet ?" default="Flow_4">
<bpmn:incoming>Flow_2</bpmn:incoming>
<bpmn:outgoing>Flow_3</bpmn:outgoing>
<bpmn:outgoing>Flow_4</bpmn:outgoing>
</bpmn:exclusiveGateway>

<bpmn:userTask id="Task_4" name="Valider le dossier">
<bpmn:incoming>Flow_3</bpmn:incoming>
<bpmn:outgoing>Flow_5</bpmn:outgoing>
</bpmn:userTask>

<bpmn:userTask id="Task_5" name="Traiter le dossier">
<bpmn:incoming>Flow_5</bpmn:incoming>
<bpmn:outgoing>Flow_6</bpmn:outgoing>
</bpmn:userTask>

<bpmn:userTask id="Task_2" name="Demander des compléments">
<bpmn:incoming>Flow_4</bpmn:incoming>
<bpmn:outgoing>Flow_7</bpmn:outgoing>
</bpmn:userTask>

<bpmn:receiveTask id="Task_3" name="Réceptionner les compléments">
<bpmn:incoming>Flow_7</bpmn:incoming>
<bpmn:outgoing>Flow_8</bpmn:outgoing>
</bpmn:receiveTask>

<bpmn:endEvent id="EndEvent_1" name="Dossier traité">
<bpmn:incoming>Flow_6</bpmn:incoming>
</bpmn:endEvent>

<bpmn:sequenceFlow id="Flow_1" sourceRef="StartEvent_1" targetRef="Task_1" />
<bpmn:sequenceFlow id="Flow_2" sourceRef="Task_1" targetRef="Gateway_1" />
<bpmn:sequenceFlow id="Flow_3" name="Oui" sourceRef="Gateway_1" targetRef="Task_4" />
<bpmn:sequenceFlow id="Flow_4" name="Non" sourceRef="Gateway_1" targetRef="Task_2" />
<bpmn:sequenceFlow id="Flow_5" sourceRef="Task_4" targetRef="Task_5" />
<bpmn:sequenceFlow id="Flow_6" sourceRef="Task_5" targetRef="EndEvent_1" />
<bpmn:sequenceFlow id="Flow_7" sourceRef="Task_2" targetRef="Task_3" />
<bpmn:sequenceFlow id="Flow_8" sourceRef="Task_3" targetRef="Task_1" />

</bpmn:process>

<bpmndi:BPMNDiagram id="BPMNDiagram_1">
<bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">

<bpmndi:BPMNShape id="StartEvent_1_di" bpmnElement="StartEvent_1">
<dc:Bounds x="40" y="117" width="36" height="36" />
</bpmndi:BPMNShape>

<bpmndi:BPMNShape id="Task_1_di" bpmnElement="Task_1">
<dc:Bounds x="100" y="95" width="130" height="80" />
</bpmndi:BPMNShape>

<bpmndi:BPMNShape id="Gateway_1_di" bpmnElement="Gateway_1" isMarkerVisible="true">
<dc:Bounds x="280" y="110" width="50" height="50" />
</bpmndi:BPMNShape>

<bpmndi:BPMNShape id="Task_4_di" bpmnElement="Task_4">
<dc:Bounds x="380" y="95" width="130" height="80" />
</bpmndi:BPMNShape>

<bpmndi:BPMNShape id="Task_5_di" bpmnElement="Task_5">
<dc:Bounds x="550" y="95" width="130" height="80" />
</bpmndi:BPMNShape>

<bpmndi:BPMNShape id="Task_2_di" bpmnElement="Task_2">
<dc:Bounds x="380" y="220" width="160" height="80" />
</bpmndi:BPMNShape>

<bpmndi:BPMNShape id="Task_3_di" bpmnElement="Task_3">
<dc:Bounds x="590" y="220" width="170" height="80" />
</bpmndi:BPMNShape>

<bpmndi:BPMNShape id="EndEvent_1_di" bpmnElement="EndEvent_1">
<dc:Bounds x="740" y="117" width="36" height="36" />
</bpmndi:BPMNShape>

<bpmndi:BPMNEdge id="Flow_1_di" bpmnElement="Flow_1">
<di:waypoint x="76" y="135" />
<di:waypoint x="100" y="135" />
</bpmndi:BPMNEdge>

<bpmndi:BPMNEdge id="Flow_2_di" bpmnElement="Flow_2">
<di:waypoint x="230" y="135" />
<di:waypoint x="280" y="135" />
</bpmndi:BPMNEdge>

<bpmndi:BPMNEdge id="Flow_3_di" bpmnElement="Flow_3">
<di:waypoint x="330" y="135" />
<di:waypoint x="380" y="135" />
</bpmndi:BPMNEdge>

<bpmndi:BPMNEdge id="Flow_4_di" bpmnElement="Flow_4">
<di:waypoint x="305" y="160" />
<di:waypoint x="305" y="260" />
<di:waypoint x="380" y="260" />
</bpmndi:BPMNEdge>

<bpmndi:BPMNEdge id="Flow_5_di" bpmnElement="Flow_5">
<di:waypoint x="510" y="135" />
<di:waypoint x="550" y="135" />
</bpmndi:BPMNEdge>

<bpmndi:BPMNEdge id="Flow_6_di" bpmnElement="Flow_6">
<di:waypoint x="680" y="135" />
<di:waypoint x="740" y="135" />
</bpmndi:BPMNEdge>

<bpmndi:BPMNEdge id="Flow_7_di" bpmnElement="Flow_7">
<di:waypoint x="540" y="260" />
<di:waypoint x="590" y="260" />
</bpmndi:BPMNEdge>

<bpmndi:BPMNEdge id="Flow_8_di" bpmnElement="Flow_8">
<di:waypoint x="590" y="260" />
<di:waypoint x="320" y="260" />
<di:waypoint x="320" y="175" />
<di:waypoint x="165" y="175" />
</bpmndi:BPMNEdge>

</bpmndi:BPMNPlane>
</bpmndi:BPMNDiagram>

</bpmn:definitions></pre>
</div>

== Source ==
Le XML BPMN est stocké directement dans la page puis rendu par '''bpmn-js'''.

Modèle BPMN.js - Workflow avec lignes d'eau

2026-04-02T17:27:00Z

Loic : Harmonisation du titre interne (BPMN.js)

= Modèle BPMN.js - Workflow avec lignes d'eau =

== Objectif ==
Exemple BPMN avec deux lignes d'eau :
* '''Utilisateur'''
* '''Service'''

== XML BPMN (compatible bpmn-js) ==
<syntaxhighlight lang="xml">
<?xml version="1.0" encoding="UTF-8"?>
<bpmn:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL"
xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI"
xmlns:dc="http://www.omg.org/spec/DD/20100524/DC"
xmlns:di="http://www.omg.org/spec/DD/20100524/DI"
id="Definitions_1"
targetNamespace="http://bpmn.io/schema/bpmn">

<bpmn:process id="Process_Workflow" isExecutable="false">
<bpmn:laneSet id="LaneSet_1">
<bpmn:lane id="Lane_User" name="Utilisateur">
<bpmn:flowNodeRef>StartEvent_1</bpmn:flowNodeRef>
<bpmn:flowNodeRef>Task_Submit</bpmn:flowNodeRef>
<bpmn:flowNodeRef>Task_CheckResult</bpmn:flowNodeRef>
<bpmn:flowNodeRef>Task_Correct</bpmn:flowNodeRef>
<bpmn:flowNodeRef>EndEvent_1</bpmn:flowNodeRef>
</bpmn:lane>
<bpmn:lane id="Lane_Service" name="Service">
<bpmn:flowNodeRef>Task_Validate</bpmn:flowNodeRef>
<bpmn:flowNodeRef>Gateway_Valid</bpmn:flowNodeRef>
<bpmn:flowNodeRef>Task_Process</bpmn:flowNodeRef>
<bpmn:flowNodeRef>Task_Error</bpmn:flowNodeRef>
</bpmn:lane>
</bpmn:laneSet>

<bpmn:startEvent id="StartEvent_1" name="Début"/>
<bpmn:task id="Task_Submit" name="Soumettre la demande"/>
<bpmn:task id="Task_Validate" name="Valider la demande"/>
<bpmn:exclusiveGateway id="Gateway_Valid" name="Données valides ?"/>
<bpmn:task id="Task_Process" name="Traiter la demande"/>
<bpmn:task id="Task_CheckResult" name="Consulter le résultat"/>
<bpmn:task id="Task_Error" name="Retourner erreur"/>
<bpmn:task id="Task_Correct" name="Corriger et renvoyer"/>
<bpmn:endEvent id="EndEvent_1" name="Fin"/>

<bpmn:sequenceFlow id="Flow_1" sourceRef="StartEvent_1" targetRef="Task_Submit"/>
<bpmn:sequenceFlow id="Flow_2" sourceRef="Task_Submit" targetRef="Task_Validate"/>
<bpmn:sequenceFlow id="Flow_3" sourceRef="Task_Validate" targetRef="Gateway_Valid"/>
<bpmn:sequenceFlow id="Flow_4" sourceRef="Gateway_Valid" targetRef="Task_Process"/>
<bpmn:sequenceFlow id="Flow_5" sourceRef="Task_Process" targetRef="Task_CheckResult"/>
<bpmn:sequenceFlow id="Flow_6" sourceRef="Task_CheckResult" targetRef="EndEvent_1"/>
<bpmn:sequenceFlow id="Flow_7" sourceRef="Gateway_Valid" targetRef="Task_Error"/>
<bpmn:sequenceFlow id="Flow_8" sourceRef="Task_Error" targetRef="Task_Correct"/>
<bpmn:sequenceFlow id="Flow_9" sourceRef="Task_Correct" targetRef="Task_Submit"/>
</bpmn:process>

<bpmndi:BPMNDiagram id="BPMNDiagram_1">
<bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_Workflow">
<bpmndi:BPMNShape id="Lane_User_di" bpmnElement="Lane_User" isHorizontal="true"><dc:Bounds x="20" y="40" width="1060" height="180"/></bpmndi:BPMNShape>
<bpmndi:BPMNShape id="Lane_Service_di" bpmnElement="Lane_Service" isHorizontal="true"><dc:Bounds x="20" y="220" width="1060" height="180"/></bpmndi:BPMNShape>
<bpmndi:BPMNShape id="StartEvent_1_di" bpmnElement="StartEvent_1"><dc:Bounds x="100" y="112" width="36" height="36"/></bpmndi:BPMNShape>
<bpmndi:BPMNShape id="Task_Submit_di" bpmnElement="Task_Submit"><dc:Bounds x="180" y="90" width="170" height="80"/></bpmndi:BPMNShape>
<bpmndi:BPMNShape id="Task_Validate_di" bpmnElement="Task_Validate"><dc:Bounds x="400" y="270" width="170" height="80"/></bpmndi:BPMNShape>
<bpmndi:BPMNShape id="Gateway_Valid_di" bpmnElement="Gateway_Valid" isMarkerVisible="true"><dc:Bounds x="620" y="285" width="50" height="50"/></bpmndi:BPMNShape>
<bpmndi:BPMNShape id="Task_Process_di" bpmnElement="Task_Process"><dc:Bounds x="730" y="270" width="170" height="80"/></bpmndi:BPMNShape>
<bpmndi:BPMNShape id="Task_CheckResult_di" bpmnElement="Task_CheckResult"><dc:Bounds x="930" y="90" width="130" height="80"/></bpmndi:BPMNShape>
<bpmndi:BPMNShape id="Task_Error_di" bpmnElement="Task_Error"><dc:Bounds x="730" y="370" width="170" height="80"/></bpmndi:BPMNShape>
<bpmndi:BPMNShape id="Task_Correct_di" bpmnElement="Task_Correct"><dc:Bounds x="420" y="90" width="170" height="80"/></bpmndi:BPMNShape>
<bpmndi:BPMNShape id="EndEvent_1_di" bpmnElement="EndEvent_1"><dc:Bounds x="1080" y="112" width="36" height="36"/></bpmndi:BPMNShape>

<bpmndi:BPMNEdge id="Flow_1_di" bpmnElement="Flow_1"><di:waypoint x="136" y="130"/><di:waypoint x="180" y="130"/></bpmndi:BPMNEdge>
<bpmndi:BPMNEdge id="Flow_2_di" bpmnElement="Flow_2"><di:waypoint x="350" y="130"/><di:waypoint x="400" y="310"/></bpmndi:BPMNEdge>
<bpmndi:BPMNEdge id="Flow_3_di" bpmnElement="Flow_3"><di:waypoint x="570" y="310"/><di:waypoint x="620" y="310"/></bpmndi:BPMNEdge>
<bpmndi:BPMNEdge id="Flow_4_di" bpmnElement="Flow_4"><di:waypoint x="670" y="310"/><di:waypoint x="730" y="310"/></bpmndi:BPMNEdge>
<bpmndi:BPMNEdge id="Flow_5_di" bpmnElement="Flow_5"><di:waypoint x="900" y="310"/><di:waypoint x="995" y="170"/></bpmndi:BPMNEdge>
<bpmndi:BPMNEdge id="Flow_6_di" bpmnElement="Flow_6"><di:waypoint x="1060" y="130"/><di:waypoint x="1080" y="130"/></bpmndi:BPMNEdge>
<bpmndi:BPMNEdge id="Flow_7_di" bpmnElement="Flow_7"><di:waypoint x="645" y="335"/><di:waypoint x="645" y="410"/><di:waypoint x="730" y="410"/></bpmndi:BPMNEdge>
<bpmndi:BPMNEdge id="Flow_8_di" bpmnElement="Flow_8"><di:waypoint x="730" y="410"/><di:waypoint x="590" y="130"/></bpmndi:BPMNEdge>
<bpmndi:BPMNEdge id="Flow_9_di" bpmnElement="Flow_9"><di:waypoint x="420" y="130"/><di:waypoint x="350" y="130"/></bpmndi:BPMNEdge>
</bpmndi:BPMNPlane>
</bpmndi:BPMNDiagram>
</bpmn:definitions>
</syntaxhighlight>

== Modèle ==
<div class="oc-bpmn-container" style="width:100%; max-width:100%; overflow:auto; border:1px solid #ccc; padding:8px; box-sizing:border-box;">
<div class="oc-bpmn-viewer" style="width:100%; height:650px; min-height:650px;"></div>
<pre class="oc-bpmn-xml" style="display:none;"><?xml version="1.0" encoding="UTF-8"?>
<bpmn:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL"
xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI"
xmlns:dc="http://www.omg.org/spec/DD/20100524/DC"
xmlns:di="http://www.omg.org/spec/DD/20100524/DI"
id="Definitions_1"
targetNamespace="http://bpmn.io/schema/bpmn">

<bpmn:process id="Process_Workflow" isExecutable="false">
<bpmn:laneSet id="LaneSet_1">
<bpmn:lane id="Lane_User" name="Utilisateur">
<bpmn:flowNodeRef>StartEvent_1</bpmn:flowNodeRef>
<bpmn:flowNodeRef>Task_Submit</bpmn:flowNodeRef>
<bpmn:flowNodeRef>Task_CheckResult</bpmn:flowNodeRef>
<bpmn:flowNodeRef>Task_Correct</bpmn:flowNodeRef>
<bpmn:flowNodeRef>EndEvent_1</bpmn:flowNodeRef>
</bpmn:lane>
<bpmn:lane id="Lane_Service" name="Service">
<bpmn:flowNodeRef>Task_Validate</bpmn:flowNodeRef>
<bpmn:flowNodeRef>Gateway_Valid</bpmn:flowNodeRef>
<bpmn:flowNodeRef>Task_Process</bpmn:flowNodeRef>
<bpmn:flowNodeRef>Task_Error</bpmn:flowNodeRef>
</bpmn:lane>
</bpmn:laneSet>

<bpmn:startEvent id="StartEvent_1" name="Début"/>
<bpmn:task id="Task_Submit" name="Soumettre la demande"/>
<bpmn:task id="Task_Validate" name="Valider la demande"/>
<bpmn:exclusiveGateway id="Gateway_Valid" name="Données valides ?"/>
<bpmn:task id="Task_Process" name="Traiter la demande"/>
<bpmn:task id="Task_CheckResult" name="Consulter le résultat"/>
<bpmn:task id="Task_Error" name="Retourner erreur"/>
<bpmn:task id="Task_Correct" name="Corriger et renvoyer"/>
<bpmn:endEvent id="EndEvent_1" name="Fin"/>

<bpmn:sequenceFlow id="Flow_1" sourceRef="StartEvent_1" targetRef="Task_Submit"/>
<bpmn:sequenceFlow id="Flow_2" sourceRef="Task_Submit" targetRef="Task_Validate"/>
<bpmn:sequenceFlow id="Flow_3" sourceRef="Task_Validate" targetRef="Gateway_Valid"/>
<bpmn:sequenceFlow id="Flow_4" sourceRef="Gateway_Valid" targetRef="Task_Process"/>
<bpmn:sequenceFlow id="Flow_5" sourceRef="Task_Process" targetRef="Task_CheckResult"/>
<bpmn:sequenceFlow id="Flow_6" sourceRef="Task_CheckResult" targetRef="EndEvent_1"/>
<bpmn:sequenceFlow id="Flow_7" sourceRef="Gateway_Valid" targetRef="Task_Error"/>
<bpmn:sequenceFlow id="Flow_8" sourceRef="Task_Error" targetRef="Task_Correct"/>
<bpmn:sequenceFlow id="Flow_9" sourceRef="Task_Correct" targetRef="Task_Submit"/>
</bpmn:process>

<bpmndi:BPMNDiagram id="BPMNDiagram_1">
<bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_Workflow">
<bpmndi:BPMNShape id="Lane_User_di" bpmnElement="Lane_User" isHorizontal="true"><dc:Bounds x="20" y="40" width="1060" height="180"/></bpmndi:BPMNShape>
<bpmndi:BPMNShape id="Lane_Service_di" bpmnElement="Lane_Service" isHorizontal="true"><dc:Bounds x="20" y="220" width="1060" height="180"/></bpmndi:BPMNShape>
<bpmndi:BPMNShape id="StartEvent_1_di" bpmnElement="StartEvent_1"><dc:Bounds x="100" y="112" width="36" height="36"/></bpmndi:BPMNShape>
<bpmndi:BPMNShape id="Task_Submit_di" bpmnElement="Task_Submit"><dc:Bounds x="180" y="90" width="170" height="80"/></bpmndi:BPMNShape>
<bpmndi:BPMNShape id="Task_Validate_di" bpmnElement="Task_Validate"><dc:Bounds x="400" y="270" width="170" height="80"/></bpmndi:BPMNShape>
<bpmndi:BPMNShape id="Gateway_Valid_di" bpmnElement="Gateway_Valid" isMarkerVisible="true"><dc:Bounds x="620" y="285" width="50" height="50"/></bpmndi:BPMNShape>
<bpmndi:BPMNShape id="Task_Process_di" bpmnElement="Task_Process"><dc:Bounds x="730" y="270" width="170" height="80"/></bpmndi:BPMNShape>
<bpmndi:BPMNShape id="Task_CheckResult_di" bpmnElement="Task_CheckResult"><dc:Bounds x="930" y="90" width="130" height="80"/></bpmndi:BPMNShape>
<bpmndi:BPMNShape id="Task_Error_di" bpmnElement="Task_Error"><dc:Bounds x="730" y="370" width="170" height="80"/></bpmndi:BPMNShape>
<bpmndi:BPMNShape id="Task_Correct_di" bpmnElement="Task_Correct"><dc:Bounds x="420" y="90" width="170" height="80"/></bpmndi:BPMNShape>
<bpmndi:BPMNShape id="EndEvent_1_di" bpmnElement="EndEvent_1"><dc:Bounds x="1080" y="112" width="36" height="36"/></bpmndi:BPMNShape>

<bpmndi:BPMNEdge id="Flow_1_di" bpmnElement="Flow_1"><di:waypoint x="136" y="130"/><di:waypoint x="180" y="130"/></bpmndi:BPMNEdge>
<bpmndi:BPMNEdge id="Flow_2_di" bpmnElement="Flow_2"><di:waypoint x="350" y="130"/><di:waypoint x="400" y="310"/></bpmndi:BPMNEdge>
<bpmndi:BPMNEdge id="Flow_3_di" bpmnElement="Flow_3"><di:waypoint x="570" y="310"/><di:waypoint x="620" y="310"/></bpmndi:BPMNEdge>
<bpmndi:BPMNEdge id="Flow_4_di" bpmnElement="Flow_4"><di:waypoint x="670" y="310"/><di:waypoint x="730" y="310"/></bpmndi:BPMNEdge>
<bpmndi:BPMNEdge id="Flow_5_di" bpmnElement="Flow_5"><di:waypoint x="900" y="310"/><di:waypoint x="995" y="170"/></bpmndi:BPMNEdge>
<bpmndi:BPMNEdge id="Flow_6_di" bpmnElement="Flow_6"><di:waypoint x="1060" y="130"/><di:waypoint x="1080" y="130"/></bpmndi:BPMNEdge>
<bpmndi:BPMNEdge id="Flow_7_di" bpmnElement="Flow_7"><di:waypoint x="645" y="335"/><di:waypoint x="645" y="410"/><di:waypoint x="730" y="410"/></bpmndi:BPMNEdge>
<bpmndi:BPMNEdge id="Flow_8_di" bpmnElement="Flow_8"><di:waypoint x="730" y="410"/><di:waypoint x="590" y="130"/></bpmndi:BPMNEdge>
<bpmndi:BPMNEdge id="Flow_9_di" bpmnElement="Flow_9"><di:waypoint x="420" y="130"/><di:waypoint x="350" y="130"/></bpmndi:BPMNEdge>
</bpmndi:BPMNPlane>
</bpmndi:BPMNDiagram>
</bpmn:definitions></pre>
</div>

Index des modèles de schémas

2026-04-02T17:25:38Z

Loic : Finalisation harmonisation des titres BPMN.js

= Index des modèles de schémas =

Cette page liste les '''modèles / exemples de schémas''' disponibles dans le wiki.

== Documentation générale ==
* [[Déploiement Mermaid PlantUML BPMN JS]] — documentation détaillée du déploiement et du fonctionnement des technologies de diagrammes intégrées
* [[Tests de représentations d'architecture de tas]] — différentes représentations Mermaid de l'architecture de tas

== Mermaid ==
=== Workflow / flowchart ===
* [[Exemple Mermaid]] — flowchart simple de workflow

=== Sequence ===
* [[Exemple Mermaid Sequence]] — diagramme de séquence

=== State ===
* [[Exemple Mermaid State]] — diagramme d'états

=== Entité-relation ===
* [[Exemple Mermaid ER]] — diagramme ER

=== Gantt ===
* [[Exemple Mermaid Gantt]] — planning / projet

=== Git graph ===
* [[Exemple Mermaid Gitgraph]] — historique de branches Git

=== Class diagram ===
* [[Exemple Mermaid Class Diagram]] — diagramme de classes

=== Journey ===
* [[Exemple Mermaid Journey]] — parcours utilisateur / processus

=== Pie ===
* [[Exemple Mermaid Pie]] — répartition en pourcentages

=== Mindmap ===
* [[Exemple Mermaid Mindmap]] — carte mentale

=== Timeline ===
* [[Exemple Mermaid Timeline]] — frise chronologique

== PlantUML ==
* [[Exemple PlantUML]] — exemple simple de workflow / activité

* [[Modèle PlantUML - Workflow avec lignes d'eau]] — exemple de workflow avec lignes d'eau utilisateur / service

== BPMN ==
* [[Exemple BPMN.js]] — exemple BPMN rendu avec bpmn-js

* [[Modèle BPMN.js - Workflow avec lignes d'eau]] — exemple BPMN avec lignes d'eau utilisateur / service

* [[Exemple BPMN.io - Étapes avec liens]] — étapes BPMN avec liens vers Google, index des modèles et sous-modèle A/B
* [[Sous-modèle BPMN.io - Blocs A et B]] — sous-modèle BPMN minimal (A puis B)
* [[Sous-modèle PlantUML - Blocs A et B]] — version PlantUML du sous-modèle A/B
== D2 ==
* [[Exemple D2 - système d'information fictif]] — démonstration D2 sur un SI fictif (physique + logiciel)
* [[Exemple D2 - architecture logicielle fictive]] — architecture logicielle fictive orientée composants logiciels

== Graphviz ==
* [[Exemple Graphviz - architecture logicielle fictive]] — architecture logicielle fictive représentée en DOT / Graphviz

== Conseils d'usage ==
* utiliser '''Mermaid''' pour les schémas rapides et textuels
* utiliser '''PlantUML''' pour les diagrammes UML et techniques
* utiliser '''BPMN JS''' pour les workflows BPMN métiers
* utiliser '''D2''' pour l'architecture physique et logique d'un système d'information
* utiliser '''Graphviz''' pour comparer des dépendances, flux et graphes de composants

== Remarque sur cette instance MediaWiki ==
Pour les rendus SVG D2 / Graphviz, la méthode actuellement fonctionnelle dans ce wiki consiste à afficher l'URL directe du fichier SVG servi sous `/images/...`.

== Évolutions possibles ==
Cette page peut servir de point d'entrée pour ajouter ensuite :
* des comparatifs entre moteurs
* des modèles réutilisables
* des conventions de nommage par type de schéma

Exemple BPMN JS

2026-04-02T17:25:38Z

Loic : Loic a déplacé la page Exemple BPMN JS vers Exemple BPMN.js : Harmonisation du titre (BPMN JS -> BPMN.js)

#REDIRECTION [[Exemple BPMN.js]]

Exemple BPMN.js

2026-04-02T17:25:38Z

Loic : Loic a déplacé la page Exemple BPMN JS vers Exemple BPMN.js : Harmonisation du titre (BPMN JS -> BPMN.js)

= Exemple BPMN JS =

Cette page montre un workflow '''BPMN''' rendu par '''bpmn-js''' dans MediaWiki.

<div class="oc-bpmn-container" style="width:100%; max-width:100%; overflow:auto; border:1px solid #ccc; padding:8px; box-sizing:border-box;">
<div class="oc-bpmn-viewer" style="width:100%; height:600px; min-height:600px;"></div>
<pre class="oc-bpmn-xml" style="display:none;"><?xml version="1.0" encoding="UTF-8"?>

<bpmn:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL"
xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI"
xmlns:dc="http://www.omg.org/spec/DD/20100524/DC"
xmlns:di="http://www.omg.org/spec/DD/20100524/DI"
id="Definitions_1"
targetNamespace="http://bpmn.io/schema/bpmn">

<bpmn:process id="Process_1" isExecutable="false">

<bpmn:startEvent id="StartEvent_1" name="Dossier reçu">
<bpmn:outgoing>Flow_1</bpmn:outgoing>
</bpmn:startEvent>

<bpmn:userTask id="Task_1" name="Analyser le dossier">
<bpmn:incoming>Flow_1</bpmn:incoming>
<bpmn:incoming>Flow_8</bpmn:incoming>
<bpmn:outgoing>Flow_2</bpmn:outgoing>
</bpmn:userTask>

<bpmn:exclusiveGateway id="Gateway_1" name="Dossier complet ?" default="Flow_4">
<bpmn:incoming>Flow_2</bpmn:incoming>
<bpmn:outgoing>Flow_3</bpmn:outgoing>
<bpmn:outgoing>Flow_4</bpmn:outgoing>
</bpmn:exclusiveGateway>

<bpmn:userTask id="Task_4" name="Valider le dossier">
<bpmn:incoming>Flow_3</bpmn:incoming>
<bpmn:outgoing>Flow_5</bpmn:outgoing>
</bpmn:userTask>

<bpmn:userTask id="Task_5" name="Traiter le dossier">
<bpmn:incoming>Flow_5</bpmn:incoming>
<bpmn:outgoing>Flow_6</bpmn:outgoing>
</bpmn:userTask>

<bpmn:userTask id="Task_2" name="Demander des compléments">
<bpmn:incoming>Flow_4</bpmn:incoming>
<bpmn:outgoing>Flow_7</bpmn:outgoing>
</bpmn:userTask>

<bpmn:receiveTask id="Task_3" name="Réceptionner les compléments">
<bpmn:incoming>Flow_7</bpmn:incoming>
<bpmn:outgoing>Flow_8</bpmn:outgoing>
</bpmn:receiveTask>

<bpmn:endEvent id="EndEvent_1" name="Dossier traité">
<bpmn:incoming>Flow_6</bpmn:incoming>
</bpmn:endEvent>

<bpmn:sequenceFlow id="Flow_1" sourceRef="StartEvent_1" targetRef="Task_1" />
<bpmn:sequenceFlow id="Flow_2" sourceRef="Task_1" targetRef="Gateway_1" />
<bpmn:sequenceFlow id="Flow_3" name="Oui" sourceRef="Gateway_1" targetRef="Task_4" />
<bpmn:sequenceFlow id="Flow_4" name="Non" sourceRef="Gateway_1" targetRef="Task_2" />
<bpmn:sequenceFlow id="Flow_5" sourceRef="Task_4" targetRef="Task_5" />
<bpmn:sequenceFlow id="Flow_6" sourceRef="Task_5" targetRef="EndEvent_1" />
<bpmn:sequenceFlow id="Flow_7" sourceRef="Task_2" targetRef="Task_3" />
<bpmn:sequenceFlow id="Flow_8" sourceRef="Task_3" targetRef="Task_1" />

</bpmn:process>

<bpmndi:BPMNDiagram id="BPMNDiagram_1">
<bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">

<bpmndi:BPMNShape id="StartEvent_1_di" bpmnElement="StartEvent_1">
<dc:Bounds x="40" y="117" width="36" height="36" />
</bpmndi:BPMNShape>

<bpmndi:BPMNShape id="Task_1_di" bpmnElement="Task_1">
<dc:Bounds x="100" y="95" width="130" height="80" />
</bpmndi:BPMNShape>

<bpmndi:BPMNShape id="Gateway_1_di" bpmnElement="Gateway_1" isMarkerVisible="true">
<dc:Bounds x="280" y="110" width="50" height="50" />
</bpmndi:BPMNShape>

<bpmndi:BPMNShape id="Task_4_di" bpmnElement="Task_4">
<dc:Bounds x="380" y="95" width="130" height="80" />
</bpmndi:BPMNShape>

<bpmndi:BPMNShape id="Task_5_di" bpmnElement="Task_5">
<dc:Bounds x="550" y="95" width="130" height="80" />
</bpmndi:BPMNShape>

<bpmndi:BPMNShape id="Task_2_di" bpmnElement="Task_2">
<dc:Bounds x="380" y="220" width="160" height="80" />
</bpmndi:BPMNShape>

<bpmndi:BPMNShape id="Task_3_di" bpmnElement="Task_3">
<dc:Bounds x="590" y="220" width="170" height="80" />
</bpmndi:BPMNShape>

<bpmndi:BPMNShape id="EndEvent_1_di" bpmnElement="EndEvent_1">
<dc:Bounds x="740" y="117" width="36" height="36" />
</bpmndi:BPMNShape>

<bpmndi:BPMNEdge id="Flow_1_di" bpmnElement="Flow_1">
<di:waypoint x="76" y="135" />
<di:waypoint x="100" y="135" />
</bpmndi:BPMNEdge>

<bpmndi:BPMNEdge id="Flow_2_di" bpmnElement="Flow_2">
<di:waypoint x="230" y="135" />
<di:waypoint x="280" y="135" />
</bpmndi:BPMNEdge>

<bpmndi:BPMNEdge id="Flow_3_di" bpmnElement="Flow_3">
<di:waypoint x="330" y="135" />
<di:waypoint x="380" y="135" />
</bpmndi:BPMNEdge>

<bpmndi:BPMNEdge id="Flow_4_di" bpmnElement="Flow_4">
<di:waypoint x="305" y="160" />
<di:waypoint x="305" y="260" />
<di:waypoint x="380" y="260" />
</bpmndi:BPMNEdge>

<bpmndi:BPMNEdge id="Flow_5_di" bpmnElement="Flow_5">
<di:waypoint x="510" y="135" />
<di:waypoint x="550" y="135" />
</bpmndi:BPMNEdge>

<bpmndi:BPMNEdge id="Flow_6_di" bpmnElement="Flow_6">
<di:waypoint x="680" y="135" />
<di:waypoint x="740" y="135" />
</bpmndi:BPMNEdge>

<bpmndi:BPMNEdge id="Flow_7_di" bpmnElement="Flow_7">
<di:waypoint x="540" y="260" />
<di:waypoint x="590" y="260" />
</bpmndi:BPMNEdge>

<bpmndi:BPMNEdge id="Flow_8_di" bpmnElement="Flow_8">
<di:waypoint x="590" y="260" />
<di:waypoint x="320" y="260" />
<di:waypoint x="320" y="175" />
<di:waypoint x="165" y="175" />
</bpmndi:BPMNEdge>

</bpmndi:BPMNPlane>
</bpmndi:BPMNDiagram>

</bpmn:definitions></pre>
</div>

== Source ==
Le XML BPMN est stocké directement dans la page puis rendu par '''bpmn-js'''.

Modèle BPMN JS - Workflow avec lignes d'eau

2026-04-02T17:25:38Z

Loic : Loic a déplacé la page Modèle BPMN JS - Workflow avec lignes d'eau vers Modèle BPMN.js - Workflow avec lignes d'eau : Harmonisation du titre (BPMN JS -> BPMN.js)

#REDIRECTION [[Modèle BPMN.js - Workflow avec lignes d'eau]]

Modèle BPMN.js - Workflow avec lignes d'eau

2026-04-02T17:25:38Z

Loic : Loic a déplacé la page Modèle BPMN JS - Workflow avec lignes d'eau vers Modèle BPMN.js - Workflow avec lignes d'eau : Harmonisation du titre (BPMN JS -> BPMN.js)

= Modèle BPMN JS - Workflow avec lignes d'eau =

== Objectif ==
Exemple BPMN avec deux lignes d'eau :
* '''Utilisateur'''
* '''Service'''

== XML BPMN (compatible bpmn-js) ==
<syntaxhighlight lang="xml">
<?xml version="1.0" encoding="UTF-8"?>
<bpmn:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL"
xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI"
xmlns:dc="http://www.omg.org/spec/DD/20100524/DC"
xmlns:di="http://www.omg.org/spec/DD/20100524/DI"
id="Definitions_1"
targetNamespace="http://bpmn.io/schema/bpmn">

<bpmn:process id="Process_Workflow" isExecutable="false">
<bpmn:laneSet id="LaneSet_1">
<bpmn:lane id="Lane_User" name="Utilisateur">
<bpmn:flowNodeRef>StartEvent_1</bpmn:flowNodeRef>
<bpmn:flowNodeRef>Task_Submit</bpmn:flowNodeRef>
<bpmn:flowNodeRef>Task_CheckResult</bpmn:flowNodeRef>
<bpmn:flowNodeRef>Task_Correct</bpmn:flowNodeRef>
<bpmn:flowNodeRef>EndEvent_1</bpmn:flowNodeRef>
</bpmn:lane>
<bpmn:lane id="Lane_Service" name="Service">
<bpmn:flowNodeRef>Task_Validate</bpmn:flowNodeRef>
<bpmn:flowNodeRef>Gateway_Valid</bpmn:flowNodeRef>
<bpmn:flowNodeRef>Task_Process</bpmn:flowNodeRef>
<bpmn:flowNodeRef>Task_Error</bpmn:flowNodeRef>
</bpmn:lane>
</bpmn:laneSet>

<bpmn:startEvent id="StartEvent_1" name="Début"/>
<bpmn:task id="Task_Submit" name="Soumettre la demande"/>
<bpmn:task id="Task_Validate" name="Valider la demande"/>
<bpmn:exclusiveGateway id="Gateway_Valid" name="Données valides ?"/>
<bpmn:task id="Task_Process" name="Traiter la demande"/>
<bpmn:task id="Task_CheckResult" name="Consulter le résultat"/>
<bpmn:task id="Task_Error" name="Retourner erreur"/>
<bpmn:task id="Task_Correct" name="Corriger et renvoyer"/>
<bpmn:endEvent id="EndEvent_1" name="Fin"/>

<bpmn:sequenceFlow id="Flow_1" sourceRef="StartEvent_1" targetRef="Task_Submit"/>
<bpmn:sequenceFlow id="Flow_2" sourceRef="Task_Submit" targetRef="Task_Validate"/>
<bpmn:sequenceFlow id="Flow_3" sourceRef="Task_Validate" targetRef="Gateway_Valid"/>
<bpmn:sequenceFlow id="Flow_4" sourceRef="Gateway_Valid" targetRef="Task_Process"/>
<bpmn:sequenceFlow id="Flow_5" sourceRef="Task_Process" targetRef="Task_CheckResult"/>
<bpmn:sequenceFlow id="Flow_6" sourceRef="Task_CheckResult" targetRef="EndEvent_1"/>
<bpmn:sequenceFlow id="Flow_7" sourceRef="Gateway_Valid" targetRef="Task_Error"/>
<bpmn:sequenceFlow id="Flow_8" sourceRef="Task_Error" targetRef="Task_Correct"/>
<bpmn:sequenceFlow id="Flow_9" sourceRef="Task_Correct" targetRef="Task_Submit"/>
</bpmn:process>

<bpmndi:BPMNDiagram id="BPMNDiagram_1">
<bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_Workflow">
<bpmndi:BPMNShape id="Lane_User_di" bpmnElement="Lane_User" isHorizontal="true"><dc:Bounds x="20" y="40" width="1060" height="180"/></bpmndi:BPMNShape>
<bpmndi:BPMNShape id="Lane_Service_di" bpmnElement="Lane_Service" isHorizontal="true"><dc:Bounds x="20" y="220" width="1060" height="180"/></bpmndi:BPMNShape>
<bpmndi:BPMNShape id="StartEvent_1_di" bpmnElement="StartEvent_1"><dc:Bounds x="100" y="112" width="36" height="36"/></bpmndi:BPMNShape>
<bpmndi:BPMNShape id="Task_Submit_di" bpmnElement="Task_Submit"><dc:Bounds x="180" y="90" width="170" height="80"/></bpmndi:BPMNShape>
<bpmndi:BPMNShape id="Task_Validate_di" bpmnElement="Task_Validate"><dc:Bounds x="400" y="270" width="170" height="80"/></bpmndi:BPMNShape>
<bpmndi:BPMNShape id="Gateway_Valid_di" bpmnElement="Gateway_Valid" isMarkerVisible="true"><dc:Bounds x="620" y="285" width="50" height="50"/></bpmndi:BPMNShape>
<bpmndi:BPMNShape id="Task_Process_di" bpmnElement="Task_Process"><dc:Bounds x="730" y="270" width="170" height="80"/></bpmndi:BPMNShape>
<bpmndi:BPMNShape id="Task_CheckResult_di" bpmnElement="Task_CheckResult"><dc:Bounds x="930" y="90" width="130" height="80"/></bpmndi:BPMNShape>
<bpmndi:BPMNShape id="Task_Error_di" bpmnElement="Task_Error"><dc:Bounds x="730" y="370" width="170" height="80"/></bpmndi:BPMNShape>
<bpmndi:BPMNShape id="Task_Correct_di" bpmnElement="Task_Correct"><dc:Bounds x="420" y="90" width="170" height="80"/></bpmndi:BPMNShape>
<bpmndi:BPMNShape id="EndEvent_1_di" bpmnElement="EndEvent_1"><dc:Bounds x="1080" y="112" width="36" height="36"/></bpmndi:BPMNShape>

<bpmndi:BPMNEdge id="Flow_1_di" bpmnElement="Flow_1"><di:waypoint x="136" y="130"/><di:waypoint x="180" y="130"/></bpmndi:BPMNEdge>
<bpmndi:BPMNEdge id="Flow_2_di" bpmnElement="Flow_2"><di:waypoint x="350" y="130"/><di:waypoint x="400" y="310"/></bpmndi:BPMNEdge>
<bpmndi:BPMNEdge id="Flow_3_di" bpmnElement="Flow_3"><di:waypoint x="570" y="310"/><di:waypoint x="620" y="310"/></bpmndi:BPMNEdge>
<bpmndi:BPMNEdge id="Flow_4_di" bpmnElement="Flow_4"><di:waypoint x="670" y="310"/><di:waypoint x="730" y="310"/></bpmndi:BPMNEdge>
<bpmndi:BPMNEdge id="Flow_5_di" bpmnElement="Flow_5"><di:waypoint x="900" y="310"/><di:waypoint x="995" y="170"/></bpmndi:BPMNEdge>
<bpmndi:BPMNEdge id="Flow_6_di" bpmnElement="Flow_6"><di:waypoint x="1060" y="130"/><di:waypoint x="1080" y="130"/></bpmndi:BPMNEdge>
<bpmndi:BPMNEdge id="Flow_7_di" bpmnElement="Flow_7"><di:waypoint x="645" y="335"/><di:waypoint x="645" y="410"/><di:waypoint x="730" y="410"/></bpmndi:BPMNEdge>
<bpmndi:BPMNEdge id="Flow_8_di" bpmnElement="Flow_8"><di:waypoint x="730" y="410"/><di:waypoint x="590" y="130"/></bpmndi:BPMNEdge>
<bpmndi:BPMNEdge id="Flow_9_di" bpmnElement="Flow_9"><di:waypoint x="420" y="130"/><di:waypoint x="350" y="130"/></bpmndi:BPMNEdge>
</bpmndi:BPMNPlane>
</bpmndi:BPMNDiagram>
</bpmn:definitions>
</syntaxhighlight>

== Modèle ==
<div class="oc-bpmn-container" style="width:100%; max-width:100%; overflow:auto; border:1px solid #ccc; padding:8px; box-sizing:border-box;">
<div class="oc-bpmn-viewer" style="width:100%; height:650px; min-height:650px;"></div>
<pre class="oc-bpmn-xml" style="display:none;"><?xml version="1.0" encoding="UTF-8"?>
<bpmn:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL"
xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI"
xmlns:dc="http://www.omg.org/spec/DD/20100524/DC"
xmlns:di="http://www.omg.org/spec/DD/20100524/DI"
id="Definitions_1"
targetNamespace="http://bpmn.io/schema/bpmn">

<bpmn:process id="Process_Workflow" isExecutable="false">
<bpmn:laneSet id="LaneSet_1">
<bpmn:lane id="Lane_User" name="Utilisateur">
<bpmn:flowNodeRef>StartEvent_1</bpmn:flowNodeRef>
<bpmn:flowNodeRef>Task_Submit</bpmn:flowNodeRef>
<bpmn:flowNodeRef>Task_CheckResult</bpmn:flowNodeRef>
<bpmn:flowNodeRef>Task_Correct</bpmn:flowNodeRef>
<bpmn:flowNodeRef>EndEvent_1</bpmn:flowNodeRef>
</bpmn:lane>
<bpmn:lane id="Lane_Service" name="Service">
<bpmn:flowNodeRef>Task_Validate</bpmn:flowNodeRef>
<bpmn:flowNodeRef>Gateway_Valid</bpmn:flowNodeRef>
<bpmn:flowNodeRef>Task_Process</bpmn:flowNodeRef>
<bpmn:flowNodeRef>Task_Error</bpmn:flowNodeRef>
</bpmn:lane>
</bpmn:laneSet>

<bpmn:startEvent id="StartEvent_1" name="Début"/>
<bpmn:task id="Task_Submit" name="Soumettre la demande"/>
<bpmn:task id="Task_Validate" name="Valider la demande"/>
<bpmn:exclusiveGateway id="Gateway_Valid" name="Données valides ?"/>
<bpmn:task id="Task_Process" name="Traiter la demande"/>
<bpmn:task id="Task_CheckResult" name="Consulter le résultat"/>
<bpmn:task id="Task_Error" name="Retourner erreur"/>
<bpmn:task id="Task_Correct" name="Corriger et renvoyer"/>
<bpmn:endEvent id="EndEvent_1" name="Fin"/>

<bpmn:sequenceFlow id="Flow_1" sourceRef="StartEvent_1" targetRef="Task_Submit"/>
<bpmn:sequenceFlow id="Flow_2" sourceRef="Task_Submit" targetRef="Task_Validate"/>
<bpmn:sequenceFlow id="Flow_3" sourceRef="Task_Validate" targetRef="Gateway_Valid"/>
<bpmn:sequenceFlow id="Flow_4" sourceRef="Gateway_Valid" targetRef="Task_Process"/>
<bpmn:sequenceFlow id="Flow_5" sourceRef="Task_Process" targetRef="Task_CheckResult"/>
<bpmn:sequenceFlow id="Flow_6" sourceRef="Task_CheckResult" targetRef="EndEvent_1"/>
<bpmn:sequenceFlow id="Flow_7" sourceRef="Gateway_Valid" targetRef="Task_Error"/>
<bpmn:sequenceFlow id="Flow_8" sourceRef="Task_Error" targetRef="Task_Correct"/>
<bpmn:sequenceFlow id="Flow_9" sourceRef="Task_Correct" targetRef="Task_Submit"/>
</bpmn:process>

<bpmndi:BPMNDiagram id="BPMNDiagram_1">
<bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_Workflow">
<bpmndi:BPMNShape id="Lane_User_di" bpmnElement="Lane_User" isHorizontal="true"><dc:Bounds x="20" y="40" width="1060" height="180"/></bpmndi:BPMNShape>
<bpmndi:BPMNShape id="Lane_Service_di" bpmnElement="Lane_Service" isHorizontal="true"><dc:Bounds x="20" y="220" width="1060" height="180"/></bpmndi:BPMNShape>
<bpmndi:BPMNShape id="StartEvent_1_di" bpmnElement="StartEvent_1"><dc:Bounds x="100" y="112" width="36" height="36"/></bpmndi:BPMNShape>
<bpmndi:BPMNShape id="Task_Submit_di" bpmnElement="Task_Submit"><dc:Bounds x="180" y="90" width="170" height="80"/></bpmndi:BPMNShape>
<bpmndi:BPMNShape id="Task_Validate_di" bpmnElement="Task_Validate"><dc:Bounds x="400" y="270" width="170" height="80"/></bpmndi:BPMNShape>
<bpmndi:BPMNShape id="Gateway_Valid_di" bpmnElement="Gateway_Valid" isMarkerVisible="true"><dc:Bounds x="620" y="285" width="50" height="50"/></bpmndi:BPMNShape>
<bpmndi:BPMNShape id="Task_Process_di" bpmnElement="Task_Process"><dc:Bounds x="730" y="270" width="170" height="80"/></bpmndi:BPMNShape>
<bpmndi:BPMNShape id="Task_CheckResult_di" bpmnElement="Task_CheckResult"><dc:Bounds x="930" y="90" width="130" height="80"/></bpmndi:BPMNShape>
<bpmndi:BPMNShape id="Task_Error_di" bpmnElement="Task_Error"><dc:Bounds x="730" y="370" width="170" height="80"/></bpmndi:BPMNShape>
<bpmndi:BPMNShape id="Task_Correct_di" bpmnElement="Task_Correct"><dc:Bounds x="420" y="90" width="170" height="80"/></bpmndi:BPMNShape>
<bpmndi:BPMNShape id="EndEvent_1_di" bpmnElement="EndEvent_1"><dc:Bounds x="1080" y="112" width="36" height="36"/></bpmndi:BPMNShape>

<bpmndi:BPMNEdge id="Flow_1_di" bpmnElement="Flow_1"><di:waypoint x="136" y="130"/><di:waypoint x="180" y="130"/></bpmndi:BPMNEdge>
<bpmndi:BPMNEdge id="Flow_2_di" bpmnElement="Flow_2"><di:waypoint x="350" y="130"/><di:waypoint x="400" y="310"/></bpmndi:BPMNEdge>
<bpmndi:BPMNEdge id="Flow_3_di" bpmnElement="Flow_3"><di:waypoint x="570" y="310"/><di:waypoint x="620" y="310"/></bpmndi:BPMNEdge>
<bpmndi:BPMNEdge id="Flow_4_di" bpmnElement="Flow_4"><di:waypoint x="670" y="310"/><di:waypoint x="730" y="310"/></bpmndi:BPMNEdge>
<bpmndi:BPMNEdge id="Flow_5_di" bpmnElement="Flow_5"><di:waypoint x="900" y="310"/><di:waypoint x="995" y="170"/></bpmndi:BPMNEdge>
<bpmndi:BPMNEdge id="Flow_6_di" bpmnElement="Flow_6"><di:waypoint x="1060" y="130"/><di:waypoint x="1080" y="130"/></bpmndi:BPMNEdge>
<bpmndi:BPMNEdge id="Flow_7_di" bpmnElement="Flow_7"><di:waypoint x="645" y="335"/><di:waypoint x="645" y="410"/><di:waypoint x="730" y="410"/></bpmndi:BPMNEdge>
<bpmndi:BPMNEdge id="Flow_8_di" bpmnElement="Flow_8"><di:waypoint x="730" y="410"/><di:waypoint x="590" y="130"/></bpmndi:BPMNEdge>
<bpmndi:BPMNEdge id="Flow_9_di" bpmnElement="Flow_9"><di:waypoint x="420" y="130"/><di:waypoint x="350" y="130"/></bpmndi:BPMNEdge>
</bpmndi:BPMNPlane>
</bpmndi:BPMNDiagram>
</bpmn:definitions></pre>
</div>

Index des modèles de schémas

2026-04-02T17:25:20Z

Loic : Correction des liens BPMN après harmonisation des titres

= Index des modèles de schémas =

Cette page liste les '''modèles / exemples de schémas''' disponibles dans le wiki.

== Documentation générale ==
* [[Déploiement Mermaid PlantUML BPMN JS]] — documentation détaillée du déploiement et du fonctionnement des technologies de diagrammes intégrées
* [[Tests de représentations d'architecture de tas]] — différentes représentations Mermaid de l'architecture de tas

== Mermaid ==
=== Workflow / flowchart ===
* [[Exemple Mermaid]] — flowchart simple de workflow

=== Sequence ===
* [[Exemple Mermaid Sequence]] — diagramme de séquence

=== State ===
* [[Exemple Mermaid State]] — diagramme d'états

=== Entité-relation ===
* [[Exemple Mermaid ER]] — diagramme ER

=== Gantt ===
* [[Exemple Mermaid Gantt]] — planning / projet

=== Git graph ===
* [[Exemple Mermaid Gitgraph]] — historique de branches Git

=== Class diagram ===
* [[Exemple Mermaid Class Diagram]] — diagramme de classes

=== Journey ===
* [[Exemple Mermaid Journey]] — parcours utilisateur / processus

=== Pie ===
* [[Exemple Mermaid Pie]] — répartition en pourcentages

=== Mindmap ===
* [[Exemple Mermaid Mindmap]] — carte mentale

=== Timeline ===
* [[Exemple Mermaid Timeline]] — frise chronologique

== PlantUML ==
* [[Exemple PlantUML]] — exemple simple de workflow / activité

* [[Modèle PlantUML - Workflow avec lignes d'eau]] — exemple de workflow avec lignes d'eau utilisateur / service

== BPMN ==
* [[Exemple BPMN JS]] — exemple BPMN rendu avec bpmn-js

* [[Modèle BPMN JS - Workflow avec lignes d'eau]] — exemple BPMN avec lignes d'eau utilisateur / service

* [[Exemple BPMN.io - Étapes avec liens]] — étapes BPMN avec liens vers Google, index des modèles et sous-modèle A/B
* [[Sous-modèle BPMN.io - Blocs A et B]] — sous-modèle BPMN minimal (A puis B)
* [[Sous-modèle PlantUML - Blocs A et B]] — version PlantUML du sous-modèle A/B
== D2 ==
* [[Exemple D2 - système d'information fictif]] — démonstration D2 sur un SI fictif (physique + logiciel)
* [[Exemple D2 - architecture logicielle fictive]] — architecture logicielle fictive orientée composants logiciels

== Graphviz ==
* [[Exemple Graphviz - architecture logicielle fictive]] — architecture logicielle fictive représentée en DOT / Graphviz

== Conseils d'usage ==
* utiliser '''Mermaid''' pour les schémas rapides et textuels
* utiliser '''PlantUML''' pour les diagrammes UML et techniques
* utiliser '''BPMN JS''' pour les workflows BPMN métiers
* utiliser '''D2''' pour l'architecture physique et logique d'un système d'information
* utiliser '''Graphviz''' pour comparer des dépendances, flux et graphes de composants

== Remarque sur cette instance MediaWiki ==
Pour les rendus SVG D2 / Graphviz, la méthode actuellement fonctionnelle dans ce wiki consiste à afficher l'URL directe du fichier SVG servi sous `/images/...`.

== Évolutions possibles ==
Cette page peut servir de point d'entrée pour ajouter ensuite :
* des comparatifs entre moteurs
* des modèles réutilisables
* des conventions de nommage par type de schéma

Index des modèles de schémas

2026-04-02T17:25:00Z

Loic : Harmonisation titres BPMN.js + ajout nouveaux exemples BPMN.io/PlantUML

= Index des modèles de schémas =

Cette page liste les '''modèles / exemples de schémas''' disponibles dans le wiki.

== Documentation générale ==
* [[Déploiement Mermaid PlantUML BPMN JS]] — documentation détaillée du déploiement et du fonctionnement des technologies de diagrammes intégrées
* [[Tests de représentations d'architecture de tas]] — différentes représentations Mermaid de l'architecture de tas

== Mermaid ==
=== Workflow / flowchart ===
* [[Exemple Mermaid]] — flowchart simple de workflow

=== Sequence ===
* [[Exemple Mermaid Sequence]] — diagramme de séquence

=== State ===
* [[Exemple Mermaid State]] — diagramme d'états

=== Entité-relation ===
* [[Exemple Mermaid ER]] — diagramme ER

=== Gantt ===
* [[Exemple Mermaid Gantt]] — planning / projet

=== Git graph ===
* [[Exemple Mermaid Gitgraph]] — historique de branches Git

=== Class diagram ===
* [[Exemple Mermaid Class Diagram]] — diagramme de classes

=== Journey ===
* [[Exemple Mermaid Journey]] — parcours utilisateur / processus

=== Pie ===
* [[Exemple Mermaid Pie]] — répartition en pourcentages

=== Mindmap ===
* [[Exemple Mermaid Mindmap]] — carte mentale

=== Timeline ===
* [[Exemple Mermaid Timeline]] — frise chronologique

== PlantUML ==
* [[Exemple PlantUML]] — exemple simple de workflow / activité

* [[Modèle PlantUML - Workflow avec lignes d'eau]] — exemple de workflow avec lignes d'eau utilisateur / service

== BPMN ==
* [[Exemple BPMN.js]] — exemple BPMN rendu avec bpmn-js

* [[Modèle BPMN.js - Workflow avec lignes d'eau]] — exemple BPMN avec lignes d'eau utilisateur / service

* [[Exemple BPMN.io - Étapes avec liens]] — étapes BPMN avec liens vers Google, index des modèles et sous-modèle A/B
* [[Sous-modèle BPMN.io - Blocs A et B]] — sous-modèle BPMN minimal (A puis B)
* [[Sous-modèle PlantUML - Blocs A et B]] — version PlantUML du sous-modèle A/B
== D2 ==
* [[Exemple D2 - système d'information fictif]] — démonstration D2 sur un SI fictif (physique + logiciel)
* [[Exemple D2 - architecture logicielle fictive]] — architecture logicielle fictive orientée composants logiciels

== Graphviz ==
* [[Exemple Graphviz - architecture logicielle fictive]] — architecture logicielle fictive représentée en DOT / Graphviz

== Conseils d'usage ==
* utiliser '''Mermaid''' pour les schémas rapides et textuels
* utiliser '''PlantUML''' pour les diagrammes UML et techniques
* utiliser '''BPMN JS''' pour les workflows BPMN métiers
* utiliser '''D2''' pour l'architecture physique et logique d'un système d'information
* utiliser '''Graphviz''' pour comparer des dépendances, flux et graphes de composants

== Remarque sur cette instance MediaWiki ==
Pour les rendus SVG D2 / Graphviz, la méthode actuellement fonctionnelle dans ce wiki consiste à afficher l'URL directe du fichier SVG servi sous `/images/...`.

== Évolutions possibles ==
Cette page peut servir de point d'entrée pour ajouter ensuite :
* des comparatifs entre moteurs
* des modèles réutilisables
* des conventions de nommage par type de schéma

Sous-modèle PlantUML - Blocs A et B

2026-04-02T17:25:00Z

Loic : Ajout sous-modèle PlantUML A/B

= Sous-modèle PlantUML - Blocs A et B =

Version PlantUML du sous-modèle avec deux blocs successifs '''A''' et '''B'''.

== Modèle ==
<pre class="oc-plantuml">@startuml
title Sous-modèle A/B
start
:Bloc A;
:Bloc B;
stop
@enduml</pre>

Exemple BPMN.io - Étapes avec liens

2026-04-02T17:25:00Z

Loic : Ajout exemple BPMN.io avec étapes et liens

= Exemple BPMN.io - Étapes avec liens =

Ce modèle montre un enchaînement de 3 étapes, chacune associée à un lien cible.

== Modèle ==
<div class="oc-bpmn-container" style="width:100%; max-width:100%; overflow:auto; border:1px solid #ccc; padding:8px; box-sizing:border-box;">
<div class="oc-bpmn-viewer" style="width:100%; height:460px; min-height:460px;"></div>
<pre class="oc-bpmn-xml" style="display:none;"><?xml version="1.0" encoding="UTF-8"?>
<bpmn:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL"
xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI"
xmlns:dc="http://www.omg.org/spec/DD/20100524/DC"
xmlns:di="http://www.omg.org/spec/DD/20100524/DI"
id="Definitions_Links"
targetNamespace="http://bpmn.io/schema/bpmn">

<bpmn:process id="Process_Links" isExecutable="false">
<bpmn:startEvent id="StartEvent_1" name="Début"/>

<bpmn:task id="Task_Google" name="Étape 1 - Google">
<bpmn:documentation>https://google.com</bpmn:documentation>
</bpmn:task>

<bpmn:task id="Task_Index" name="Étape 2 - Index modèles">
<bpmn:documentation>https://wiki.lololand.org/index.php/Index_des_modèles_de_schémas</bpmn:documentation>
</bpmn:task>

<bpmn:task id="Task_SubModel" name="Étape 3 - Sous-modèle A/B">
<bpmn:documentation>https://wiki.lololand.org/index.php/Sous-modèle_BPMN.io_-_Blocs_A_et_B</bpmn:documentation>
</bpmn:task>

<bpmn:endEvent id="EndEvent_1" name="Fin"/>

<bpmn:sequenceFlow id="Flow_1" sourceRef="StartEvent_1" targetRef="Task_Google"/>
<bpmn:sequenceFlow id="Flow_2" sourceRef="Task_Google" targetRef="Task_Index"/>
<bpmn:sequenceFlow id="Flow_3" sourceRef="Task_Index" targetRef="Task_SubModel"/>
<bpmn:sequenceFlow id="Flow_4" sourceRef="Task_SubModel" targetRef="EndEvent_1"/>
</bpmn:process>

<bpmndi:BPMNDiagram id="BPMNDiagram_1">
<bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_Links">
<bpmndi:BPMNShape id="StartEvent_1_di" bpmnElement="StartEvent_1"><dc:Bounds x="70" y="122" width="36" height="36"/></bpmndi:BPMNShape>
<bpmndi:BPMNShape id="Task_Google_di" bpmnElement="Task_Google"><dc:Bounds x="150" y="100" width="200" height="80"/></bpmndi:BPMNShape>
<bpmndi:BPMNShape id="Task_Index_di" bpmnElement="Task_Index"><dc:Bounds x="390" y="100" width="230" height="80"/></bpmndi:BPMNShape>
<bpmndi:BPMNShape id="Task_SubModel_di" bpmnElement="Task_SubModel"><dc:Bounds x="660" y="100" width="230" height="80"/></bpmndi:BPMNShape>
<bpmndi:BPMNShape id="EndEvent_1_di" bpmnElement="EndEvent_1"><dc:Bounds x="930" y="122" width="36" height="36"/></bpmndi:BPMNShape>

<bpmndi:BPMNEdge id="Flow_1_di" bpmnElement="Flow_1"><di:waypoint x="106" y="140"/><di:waypoint x="150" y="140"/></bpmndi:BPMNEdge>
<bpmndi:BPMNEdge id="Flow_2_di" bpmnElement="Flow_2"><di:waypoint x="350" y="140"/><di:waypoint x="390" y="140"/></bpmndi:BPMNEdge>
<bpmndi:BPMNEdge id="Flow_3_di" bpmnElement="Flow_3"><di:waypoint x="620" y="140"/><di:waypoint x="660" y="140"/></bpmndi:BPMNEdge>
<bpmndi:BPMNEdge id="Flow_4_di" bpmnElement="Flow_4"><di:waypoint x="890" y="140"/><di:waypoint x="930" y="140"/></bpmndi:BPMNEdge>
</bpmndi:BPMNPlane>
</bpmndi:BPMNDiagram>
</bpmn:definitions></pre>
</div>

== Liens des étapes ==
* '''Étape 1 - Google''' : [https://google.com Google]
* '''Étape 2 - Index des modèles''' : [[Index des modèles de schémas]]
* '''Étape 3 - Sous-modèle A/B''' : [[Sous-modèle BPMN.io - Blocs A et B]]

Sous-modèle BPMN.io - Blocs A et B

2026-04-02T17:24:59Z

Loic : Ajout sous-modèle BPMN A/B

= Sous-modèle BPMN.io - Blocs A et B =

Ce sous-modèle BPMN contient deux blocs successifs : '''A''' puis '''B'''.

== XML BPMN ==
<syntaxhighlight lang="xml">
<?xml version="1.0" encoding="UTF-8"?>
<bpmn:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL"
xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI"
xmlns:dc="http://www.omg.org/spec/DD/20100524/DC"
xmlns:di="http://www.omg.org/spec/DD/20100524/DI"
id="Definitions_SubAB"
targetNamespace="http://bpmn.io/schema/bpmn">

<bpmn:process id="Process_SubAB" isExecutable="false">
<bpmn:startEvent id="StartEvent_1" name="Début"/>
<bpmn:task id="Task_A" name="Bloc A"/>
<bpmn:task id="Task_B" name="Bloc B"/>
<bpmn:endEvent id="EndEvent_1" name="Fin"/>

<bpmn:sequenceFlow id="Flow_1" sourceRef="StartEvent_1" targetRef="Task_A"/>
<bpmn:sequenceFlow id="Flow_2" sourceRef="Task_A" targetRef="Task_B"/>
<bpmn:sequenceFlow id="Flow_3" sourceRef="Task_B" targetRef="EndEvent_1"/>
</bpmn:process>

<bpmndi:BPMNDiagram id="BPMNDiagram_1">
<bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_SubAB">
<bpmndi:BPMNShape id="StartEvent_1_di" bpmnElement="StartEvent_1"><dc:Bounds x="80" y="112" width="36" height="36"/></bpmndi:BPMNShape>
<bpmndi:BPMNShape id="Task_A_di" bpmnElement="Task_A"><dc:Bounds x="180" y="90" width="170" height="80"/></bpmndi:BPMNShape>
<bpmndi:BPMNShape id="Task_B_di" bpmnElement="Task_B"><dc:Bounds x="420" y="90" width="170" height="80"/></bpmndi:BPMNShape>
<bpmndi:BPMNShape id="EndEvent_1_di" bpmnElement="EndEvent_1"><dc:Bounds x="660" y="112" width="36" height="36"/></bpmndi:BPMNShape>

<bpmndi:BPMNEdge id="Flow_1_di" bpmnElement="Flow_1"><di:waypoint x="116" y="130"/><di:waypoint x="180" y="130"/></bpmndi:BPMNEdge>
<bpmndi:BPMNEdge id="Flow_2_di" bpmnElement="Flow_2"><di:waypoint x="350" y="130"/><di:waypoint x="420" y="130"/></bpmndi:BPMNEdge>
<bpmndi:BPMNEdge id="Flow_3_di" bpmnElement="Flow_3"><di:waypoint x="590" y="130"/><di:waypoint x="660" y="130"/></bpmndi:BPMNEdge>
</bpmndi:BPMNPlane>
</bpmndi:BPMNDiagram>
</bpmn:definitions>
</syntaxhighlight>

== Modèle ==
<div class="oc-bpmn-container" style="width:100%; max-width:100%; overflow:auto; border:1px solid #ccc; padding:8px; box-sizing:border-box;">
<div class="oc-bpmn-viewer" style="width:100%; height:420px; min-height:420px;"></div>
<pre class="oc-bpmn-xml" style="display:none;"><?xml version="1.0" encoding="UTF-8"?>
<bpmn:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL"
xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI"
xmlns:dc="http://www.omg.org/spec/DD/20100524/DC"
xmlns:di="http://www.omg.org/spec/DD/20100524/DI"
id="Definitions_SubAB"
targetNamespace="http://bpmn.io/schema/bpmn">

<bpmn:process id="Process_SubAB" isExecutable="false">
<bpmn:startEvent id="StartEvent_1" name="Début"/>
<bpmn:task id="Task_A" name="Bloc A"/>
<bpmn:task id="Task_B" name="Bloc B"/>
<bpmn:endEvent id="EndEvent_1" name="Fin"/>

<bpmn:sequenceFlow id="Flow_1" sourceRef="StartEvent_1" targetRef="Task_A"/>
<bpmn:sequenceFlow id="Flow_2" sourceRef="Task_A" targetRef="Task_B"/>
<bpmn:sequenceFlow id="Flow_3" sourceRef="Task_B" targetRef="EndEvent_1"/>
</bpmn:process>

<bpmndi:BPMNDiagram id="BPMNDiagram_1">
<bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_SubAB">
<bpmndi:BPMNShape id="StartEvent_1_di" bpmnElement="StartEvent_1"><dc:Bounds x="80" y="112" width="36" height="36"/></bpmndi:BPMNShape>
<bpmndi:BPMNShape id="Task_A_di" bpmnElement="Task_A"><dc:Bounds x="180" y="90" width="170" height="80"/></bpmndi:BPMNShape>
<bpmndi:BPMNShape id="Task_B_di" bpmnElement="Task_B"><dc:Bounds x="420" y="90" width="170" height="80"/></bpmndi:BPMNShape>
<bpmndi:BPMNShape id="EndEvent_1_di" bpmnElement="EndEvent_1"><dc:Bounds x="660" y="112" width="36" height="36"/></bpmndi:BPMNShape>

<bpmndi:BPMNEdge id="Flow_1_di" bpmnElement="Flow_1"><di:waypoint x="116" y="130"/><di:waypoint x="180" y="130"/></bpmndi:BPMNEdge>
<bpmndi:BPMNEdge id="Flow_2_di" bpmnElement="Flow_2"><di:waypoint x="350" y="130"/><di:waypoint x="420" y="130"/></bpmndi:BPMNEdge>
<bpmndi:BPMNEdge id="Flow_3_di" bpmnElement="Flow_3"><di:waypoint x="590" y="130"/><di:waypoint x="660" y="130"/></bpmndi:BPMNEdge>
</bpmndi:BPMNPlane>
</bpmndi:BPMNDiagram>
</bpmn:definitions></pre>
</div>

Modèle PlantUML - Workflow avec lignes d'eau

2026-04-02T06:09:25Z

Loic : Ajout section de visualisation du modèle PlantUML

= Modèle PlantUML - Workflow avec lignes d'eau =

== Objectif ==
Exemple de workflow avec des lignes d'eau :
* '''Utilisateur'''
* '''Service'''

== Code PlantUML ==
<syntaxhighlight lang="text">
@startuml
title Workflow exemple avec lignes d'eau (Utilisateur / Service)

|Utilisateur|
start
:Soumettre une demande;
:Compléter les informations;
:Envoyer la requête;

|Service|
:Valider la requête;
if (Données valides ?) then (oui)
:Traiter la demande;
:Générer la réponse;
else (non)
:Créer un message d'erreur;
endif

|Utilisateur|
if (Réponse OK ?) then (oui)
:Consulter le résultat;
else (non)
:Corriger et renvoyer;
endif
stop
@enduml
</syntaxhighlight>

== Visualisation du modèle ==
Le diagramme ci-dessous affiche directement ce modèle PlantUML dans la page.

<pre class="oc-plantuml">@startuml
title Workflow exemple avec lignes d'eau (Utilisateur / Service)

|Utilisateur|
start
:Soumettre une demande;
:Compléter les informations;
:Envoyer la requête;

|Service|
:Valider la requête;
if (Données valides ?) then (oui)
:Traiter la demande;
:Générer la réponse;
else (non)
:Créer un message d'erreur;
endif

|Utilisateur|
if (Réponse OK ?) then (oui)
:Consulter le résultat;
else (non)
:Corriger et renvoyer;
endif
stop
@enduml</pre>

Modèle BPMN.js - Workflow avec lignes d'eau

2026-04-02T06:09:25Z

Loic : Correction rendu BPMN: ajout BPMNDI + visualisation

Modèle BPMN.js - Workflow avec lignes d'eau

2026-04-02T06:01:09Z

Loic : /* XML BPMN (compatible bpmn-js) */

Modèle BPMN.js - Workflow avec lignes d'eau

2026-04-02T05:58:03Z

Loic : /* XML BPMN (compatible bpmn-js) */

Modèle BPMN.js - Workflow avec lignes d'eau

2026-04-02T05:53:37Z

Loic :

Index des modèles de schémas

2026-04-01T21:08:04Z

Loic : Ajout modèles lignes d'eau PlantUML/BPMN + migration liens domaine wiki

= Index des modèles de schémas =

Cette page liste les '''modèles / exemples de schémas''' disponibles dans le wiki.

== Documentation générale ==
* [[Déploiement Mermaid PlantUML BPMN JS]] — documentation détaillée du déploiement et du fonctionnement des technologies de diagrammes intégrées
* [[Tests de représentations d'architecture de tas]] — différentes représentations Mermaid de l'architecture de tas

== Mermaid ==
=== Workflow / flowchart ===
* [[Exemple Mermaid]] — flowchart simple de workflow

=== Sequence ===
* [[Exemple Mermaid Sequence]] — diagramme de séquence

=== State ===
* [[Exemple Mermaid State]] — diagramme d'états

=== Entité-relation ===
* [[Exemple Mermaid ER]] — diagramme ER

=== Gantt ===
* [[Exemple Mermaid Gantt]] — planning / projet

=== Git graph ===
* [[Exemple Mermaid Gitgraph]] — historique de branches Git

=== Class diagram ===
* [[Exemple Mermaid Class Diagram]] — diagramme de classes

=== Journey ===
* [[Exemple Mermaid Journey]] — parcours utilisateur / processus

=== Pie ===
* [[Exemple Mermaid Pie]] — répartition en pourcentages

=== Mindmap ===
* [[Exemple Mermaid Mindmap]] — carte mentale

=== Timeline ===
* [[Exemple Mermaid Timeline]] — frise chronologique

== PlantUML ==
* [[Exemple PlantUML]] — exemple simple de workflow / activité

* [[Modèle PlantUML - Workflow avec lignes d'eau]] — exemple de workflow avec lignes d'eau utilisateur / service

== BPMN ==
* [[Exemple BPMN JS]] — exemple BPMN rendu avec bpmn-js

* [[Modèle BPMN JS - Workflow avec lignes d'eau]] — exemple BPMN avec lignes d'eau utilisateur / service

== D2 ==
* [[Exemple D2 - système d'information fictif]] — démonstration D2 sur un SI fictif (physique + logiciel)
* [[Exemple D2 - architecture logicielle fictive]] — architecture logicielle fictive orientée composants logiciels

== Graphviz ==
* [[Exemple Graphviz - architecture logicielle fictive]] — architecture logicielle fictive représentée en DOT / Graphviz

== Conseils d'usage ==
* utiliser '''Mermaid''' pour les schémas rapides et textuels
* utiliser '''PlantUML''' pour les diagrammes UML et techniques
* utiliser '''BPMN JS''' pour les workflows BPMN métiers
* utiliser '''D2''' pour l'architecture physique et logique d'un système d'information
* utiliser '''Graphviz''' pour comparer des dépendances, flux et graphes de composants

== Remarque sur cette instance MediaWiki ==
Pour les rendus SVG D2 / Graphviz, la méthode actuellement fonctionnelle dans ce wiki consiste à afficher l'URL directe du fichier SVG servi sous `/images/...`.

== Évolutions possibles ==
Cette page peut servir de point d'entrée pour ajouter ensuite :
* des comparatifs entre moteurs
* des modèles réutilisables
* des conventions de nommage par type de schéma

Modèle BPMN.js - Workflow avec lignes d'eau

2026-04-01T21:08:03Z

Loic : Ajout modèle BPMN workflow lignes d'eau

Modèle PlantUML - Workflow avec lignes d'eau

2026-04-01T21:08:03Z

Loic : Ajout modèle PlantUML workflow lignes d'eau

Architecture logicielle de tas

2026-03-30T20:00:21Z

Loic :

= Architecture logicielle de tas =

Cette page décrit la cartographie logique actuelle des principales briques logicielles de la machine '''tas'''.

== Vue d'ensemble ==
* '''Caddy''' sert de reverse proxy d'entrée publique
* les applications sont majoritairement déployées en '''conteneurs Podman''', souvent gérés par des '''services/quadlets'''
* '''Homepage''' sert de portail de navigation
* '''MediaWiki''' sert de base documentaire et de trace d'installation

== Chaîne d'exposition ==
Le schéma général est le suivant :
* utilisateur -> Caddy -> port local applicatif -> conteneur / service

Exemples :
* 25680 -> 8080 -> Open WebUI
* 25681 -> 8081 -> Dependency-Track Frontend
* 25692 -> 8092 -> Dependency-Track API
* 25689 -> 8090 ou 8089 -> Headscale UI / API selon le chemin
* 25697 -> 8097 -> Homepage
* 25698 -> 8098 -> MediaWiki

== Briques de présentation ==
=== Homepage ===
* portail de services
* configuration dans `/home/loic/homepage-config`
* lien entre vision publique et liens internes

=== MediaWiki ===
* documentation technique
* exemples Mermaid / PlantUML / BPMN JS
* trace install tas et pages par brique

=== Hugo ===
Une brique de site statique a été préparée avec '''Hugo''', générée localement puis servie par un conteneur '''Podman''' via `nginx:alpine`.

Caractéristiques :
* sources dans `/home/loic/sites/hugo-docs`
* génération du rendu via `./publish.sh`
* service local sur `127.0.0.1:8100`
* exposition publique prévue via Caddy sur `hugo.lololand.org` et `lololand.hopto.org:25700`

Documentation détaillée :
* [[Trace install tas - Hugo]]

== Briques LLM ==
=== Ollama ===
* moteur local d'inférence LLM
* port local 11434
* port public 25434 protégé par basicauth

=== Open WebUI ===
* interface d'accès aux modèles
* exposé sur 8080 / 25680
* dépend fonctionnellement d'Ollama

== Briques productivité / plateforme ==
=== Nextcloud ===
* fichiers / groupware
* dépend de MariaDB et Redis
* exposé sur 8096 / 25696

=== n8n ===
* automatisation / workflows
* exposé sur 5678 / 25678

=== MediaWiki ===
* documentation / wiki
* dépend de MariaDB dédiée
* exposé sur 8098 / 25698

== Briques sécurité / identité ==
=== Vaultwarden ===
* gestionnaire de mots de passe
* exposé sur 8082 / 25682

=== Headscale + Headscale UI ===
* plan de contrôle Tailscale self-hosted
* API sur 8089, UI sur 8090
* route publique unifiée 25689 avec routage conditionnel

== Briques supervision / observabilité ==
=== Uptime Kuma ===
* supervision disponibilité
* 8083 / 25683

=== Beszel ===
* monitoring léger
* hub sur 8093 / 25693
* agent local avec socket Podman rootless en lecture seule

== Briques documentaires / données ==
=== Paperless-ngx ===
* GED / OCR
* dépend de Redis
* 8094 / 25694

=== Karakeep ===
* bookmarks / capture web
* dépend de Meilisearch et d'un navigateur auxiliaire
* 8095 / 25695

=== Immich ===
* photos / vidéos
* dépend de Redis, Postgres et d'un composant ML ROCm
* 8088 / 25688

== Briques techniques / outillage ==
=== CyberChef ===
* outils de transformation de données
* 8091 / 25691

=== Social Analyzer ===
* analyse OSINT / profils sociaux
* dépend d'un hub Selenium et d'un noeud Firefox
* 8086 / 25686

=== Dependency-Track ===
* frontend et API distincts
* 8081 / 25681 pour l'UI
* 8092 / 25692 pour l'API
* historique bundled encore visible dans l'état actuel

== Réseaux internes identifiés ==
* `dt-net`
* `nextcloud-net`
* `paperless-net`
* `karakeep-net`
* `mediawiki_default`
* `immich_default`
* `social-analyzer_default`

== Volumes / persistance notables ==
* `nextcloud-data`, `nextcloud-html`, `nextcloud-db`
* `paperless-data`, `paperless-media`, `paperless-redis-data`
* `karakeep-data`, `karakeep-meili-data`
* `beszel-data`
* `vaultwarden_data`
* `uptime-kuma`
* `n8n_data`
* données MediaWiki dans `/home/loic/mediawiki/app` et `/home/loic/mediawiki/db`

== Principe de maintenance ==
Lorsqu'une brique évolue, il faut mettre à jour :
* [[Trace install tas]]
* la page spécifique de la brique
* la présente cartographie si l'architecture change
* Homepage et Caddy si les points d'exposition changent

Trace install tas - Hugo

2026-03-30T19:56:22Z

Loic : Page créée avec « = Trace install tas - Hugo = == Objectif == Déployer un site statique simple à maintenir avec '''Hugo''', servi localement par '''Podman''' puis exposé par le reverse proxy '''Caddy'''. L'objectif est d'obtenir : * une maintenance faible * un contenu rédigé en Markdown * une publication reproductible * un rollback simple == Choix techniques retenus == * Générateur statique : '''Hugo''' * Build : conteneur `docker.io/klakegg/hugo:ext-alpine` * Service HT... »

= Trace install tas - Hugo =

== Objectif ==
Déployer un site statique simple à maintenir avec '''Hugo''', servi localement par '''Podman''' puis exposé par le reverse proxy '''Caddy'''.

L'objectif est d'obtenir :
* une maintenance faible
* un contenu rédigé en Markdown
* une publication reproductible
* un rollback simple

== Choix techniques retenus ==
* Générateur statique : '''Hugo'''
* Build : conteneur `docker.io/klakegg/hugo:ext-alpine`
* Service HTTP : conteneur `docker.io/library/nginx:alpine`
* Orchestration locale : '''Podman rootless''' + service utilisateur
* Port local : `8100`
* Exposition publique prévue :
** `hugo.lololand.org`
** `https://lololand.hopto.org:25700`
* Répertoire projet : `/home/loic/sites/hugo-docs`

== Arborescence ==
<pre>
/home/loic/sites/hugo-docs/
├── content/
├── layouts/
├── public/
├── hugo.toml
└── publish.sh
</pre>

== Fichiers importants ==
* Sources Hugo : `/home/loic/sites/hugo-docs`
* Site généré : `/home/loic/sites/hugo-docs/public`
* Service Podman user : `/home/loic/.config/containers/systemd/hugo-docs.container`

== Principe de fonctionnement ==
Le contenu est rédigé dans le projet Hugo, puis généré en fichiers statiques dans le dossier `public/`.

Le service Podman ne génère pas le site lui-même :
* '''Hugo''' produit les fichiers statiques
* '''nginx''' sert ensuite le dossier `public/`

Cette séparation simplifie :
* la maintenance
* le diagnostic
* le rollback
* la reproductibilité

== Publication ==
=== Générer le site ===
<pre>
cd /home/loic/sites/hugo-docs
./publish.sh
</pre>

=== Redémarrer le service ===
<pre>
systemctl --user restart hugo-docs.service
</pre>

=== Vérifier localement ===
<pre>
curl -I http://127.0.0.1:8100
</pre>

== Service Podman ==
Le service utilisateur repose sur le fichier :
<pre>
/home/loic/.config/containers/systemd/hugo-docs.container
</pre>

Principe :
* image `nginx:alpine`
* montage en lecture seule du dossier `public/`
* exposition locale sur le port `8100`
* redémarrage automatique du service

== Reverse proxy Caddy ==
Bloc prévu dans `/etc/caddy/Caddyfile` :

<pre>
# Hugo docs
hugo.lololand.org:443 {
import common_acme
reverse_proxy 127.0.0.1:8100
}

# Hugo docs (accès port dédié de secours)
https://lololand.hopto.org:25700 {
import common_acme
reverse_proxy 127.0.0.1:8100
}
</pre>

== Utilisation courante ==
=== Ajouter une page ===
Créer un fichier Markdown dans `content/`.

Exemple :
<pre>
cd /home/loic/sites/hugo-docs
mkdir -p content/docs
cat > content/docs/bonjour.md <<'EOF'
---
title: "Bonjour"
---

# Bonjour

Première page de test.
EOF
</pre>

=== Regénérer le site ===
<pre>
cd /home/loic/sites/hugo-docs
./publish.sh
systemctl --user restart hugo-docs.service
</pre>

== Avantages du choix Hugo ==
* pas de base de données
* pas d'application dynamique à maintenir
* contenu lisible en texte brut
* publication très rapide
* très bon couplage avec git
* rollback facile en restaurant les sources ou le rendu généré

== Points d'attention ==
* toute modification du contenu nécessite une régénération du site
* le reverse proxy Caddy doit être configuré séparément
* il faut conserver une sauvegarde du `Caddyfile` avant modification
* le dossier `public/` ne doit pas être modifié manuellement

== Rollback ==
En cas de problème :
* restaurer la sauvegarde du `Caddyfile`
* corriger ou restaurer le projet Hugo
* régénérer le site
* redémarrer `hugo-docs.service`
* recharger `caddy`

== Commandes utiles ==
<pre>
cd /home/loic/sites/hugo-docs
./publish.sh
systemctl --user status hugo-docs.service
systemctl --user restart hugo-docs.service
curl -I http://127.0.0.1:8100
</pre>

== Résultat attendu ==
Une chaîne simple et maintenable :
* édition en Markdown
* génération statique via Hugo
* service local via Podman
* exposition publique via Caddy

Trace install tas

2026-03-30T19:54:59Z

Loic :

= Trace install tas =

Cette page sert de '''trace d'installation et de configuration''' pour les principales briques logicielles déployées sur la machine '''tas'''.

== Références transverses ==
* [[Architecture logicielle de tas]]

== Procédure de maintenance documentaire ==
À chaque évolution de configuration du serveur, il faut '''réappliquer cette procédure de documentation'''.
Concrètement, lors d'un ajout, d'une suppression ou d'une modification de service, il faut mettre à jour :
* cette page centrale
* la page spécifique de la brique concernée
* la documentation Markdown locale quand elle existe
* les références Homepage et Caddy si les ports ou URLs changent
* la page [[Architecture logicielle de tas]] si la cartographie évolue

== Pages spécifiques ==
* [[Trace install tas - Open WebUI]]
* [[Trace install tas - Dependency-Track]]
* [[Trace install tas - Vaultwarden]]
* [[Trace install tas - Uptime Kuma]]
* [[Trace install tas - Scriberr]]
* [[Trace install tas - Social Analyzer]]
* [[Trace install tas - Immich]]
* [[Trace install tas - Headscale]]
* [[Trace install tas - CyberChef]]
* [[Trace install tas - Beszel]]
* [[Trace install tas - Paperless-ngx]]
* [[Trace install tas - Karakeep]]
* [[Trace install tas - Nextcloud]]
* [[Trace install tas - Homepage]]
* [[Trace install tas - MediaWiki]]
* [[Trace install tas - n8n]]
* [[Trace install tas - Ollama]]
* [[Trace install tas - Node-RED]]
* [[Trace install tas - Syncthing]]
* [[Trace install tas - Hugo]]

Trace install tas - Homepage

2026-03-22T15:55:02Z

Loic :

= Trace install tas - Homepage =

== Rôle ==
Tableau de bord des services.

== Accès ==
* Local : http://10.8.0.1:8097
* Public : https://lololand.hopto.org:25697

== Ports ==
8097 local, 25697 public via Caddy

== Exécution / runtime ==
Quadlet systemd user : /home/loic/.config/containers/systemd/homepage.container ; conteneur systemd-homepage

== Chemins de configuration ==
* /home/loic/.config/containers/systemd/homepage.container
* /home/loic/homepage-config/services.yaml
* /home/loic/homepage-config/settings.yaml
* /home/loic/homepage-config/custom.js
* /home/loic/homepage-config/custom.css

== Volumes / persistance ==
* /home/loic/homepage-config -> /app/config

== Dépendances ==
* Caddy pour l'exposition publique
* liste des services documentée dans services.yaml

== Remarques ==
Image ghcr.io/gethomepage/homepage:latest avec AutoUpdate=registry. HOMEPAGE_ALLOWED_HOSTS configuré. Le dashboard porte les liens publics et internes des services.

== Données / emplacements à sauvegarder ==
* Configuration dans /home/loic/homepage-config
* Pas de base de données applicative dédiée documentée

== Sauvegarde ==
* Sauvegarder /home/loic/homepage-config (services.yaml, settings.yaml, custom.js, custom.css).
* Exporter aussi le quadlet /home/loic/.config/containers/systemd/homepage.container.

== Restauration ==
* Restaurer /home/loic/homepage-config.
* Relancer le service utilisateur associé à homepage si nécessaire.

== Maintenance documentaire ==
Lors d'un changement de carte, port, lien public/interne ou custom.js/custom.css, mettre à jour cette page et la page centrale trace install tas.

== Trace documentaire ==
Cette page fait partie de [[Trace install tas]].

== Procédure d'ajout d'une carte (avec double lien HTTPS / Interne) ==
Pour ajouter un nouveau service au tableau de bord avec les boutons de liens distincts (externe et interne), il faut modifier deux fichiers :

1. '''Déclarer le service''' dans <code>/home/loic/homepage-config/services.yaml</code> :
Ajouter la carte sous le groupe désiré (ex: Infrastructure). Il est indispensable de définir l'attribut <code>id</code>, car c'est lui qui sert de repère au script d'injection.
<pre>
- Mon Service:
id: mon-service
icon: icone.png
href: https://lololand.hopto.org:PORT_EXT
description: Description (Port interne PORT_INT)
siteMonitor: http://10.8.0.1:PORT_INT
</pre>

2. '''Configurer les liens doubles''' dans <code>/home/loic/homepage-config/custom.js</code> :
Éditer le dictionnaire <code>links</code> au début du fichier en y ajoutant la correspondance entre l'<code>id</code> de la carte et ses deux URLs :
<pre>
'mon-service': { external: 'https://lololand.hopto.org:PORT_EXT', internal: 'http://10.8.0.1:PORT_INT' },
</pre>

3. '''Appliquer les modifications''' :
Redémarrer le conteneur pour que la configuration YAML soit rechargée (le JS et le CSS sont rechargés automatiquement au rafraîchissement de la page par le navigateur) :
<pre>
systemctl --user restart homepage
</pre>

''Note : L'apparence des boutons est gérée globalement par les classes CSS personnalisées (.oc-dual-link, .oc-external, .oc-internal) définies dans <code>/home/loic/homepage-config/custom.css</code>.''

== Alternative ==

https://homarr.dev/

Utilisateur:Loic

2026-03-20T19:32:27Z

Loic :

==== infra ====
[[Schéma d'architecture cliquable de tas]]

[[Trace install tas]]

[[Architecture logicielle de tas]]

[[Tests de représentations d'architecture de tas]]

==== models ====
[[Index des modèles de schémas]]

[[Déploiement Mermaid PlantUML BPMN JS]]

[[Exemple Mermaid]]

[[Exemple Mermaid ER]]

[[Exemple Mermaid Gantt]]

[[Exemple Mermaid Gitgraph]]

[[Exemple Mermaid Sequence]]

[[Exemple Mermaid State]]

[[Exemple PlantUML]]

[[Exemple BPMN JS]]

== Pour démarrer ==
* [https://www.mediawiki.org/wiki/Special:MyLanguage/Manual:Configuration_settings Liste des paramètres de configuration]
* [https://www.mediawiki.org/wiki/Special:MyLanguage/Manual:FAQ Questions courantes sur MediaWiki]
* [https://lists.wikimedia.org/postorius/lists/mediawiki-announce.lists.wikimedia.org/ Liste de discussion sur les distributions de MediaWiki]
* [https://www.mediawiki.org/wiki/Special:MyLanguage/Localisation#Translation_resources Adaptez MediaWiki dans votre langue]
* [https://www.mediawiki.org/wiki/Special:MyLanguage/Manual:Combating_spam Apprendre comment combattre le pourriel dans votre wiki]

Exemple Graphviz - architecture logicielle fictive

2026-03-20T17:20:38Z

Loic : /* Source DOT */

= Exemple Graphviz - architecture logicielle fictive =

Cette page montre une architecture '''logicielle fictive''' représentée en '''Graphviz / DOT'''.

== Rendu graphique ==
https://lololand.hopto.org:25698/images/graphviz-logiciel-fictif.svg

== Source DOT ==
digraph SI_Fictif {
rankdir=LR;
graph [fontname="Arial", bgcolor="white", pad="0.2", nodesep="0.5", ranksep="0.8"];
node [shape=box, style="rounded,filled", fillcolor="#E8F0FE", color="#2563EB", fontname="Arial"];
edge [color="#64748B", fontname="Arial"];

users [label="Utilisateurs", shape=oval, fillcolor="#DCFCE7", URL="<nowiki>https://example.org/users</nowiki>"];
web [label="Portail Web", URL="<nowiki>https://www.nginx.com/</nowiki>"];
api [label="API Gateway", URL="<nowiki>https://konghq.com/</nowiki>"];
auth [label="Auth / IAM", URL="<nowiki>https://www.keycloak.org/</nowiki>"];
crm [label="CRM métier", URL="<nowiki>https://www.suitecrm.com/</nowiki>"];
erp [label="ERP métier", URL="<nowiki>https://www.odoo.com/</nowiki>"];
wiki [label="Wiki documentaire", URL="<nowiki>https://www.mediawiki.org/</nowiki>"];
mq [label="Bus d'événements", URL="<nowiki>https://kafka.apache.org/</nowiki>"];
cache [label="Cache distribué", URL="<nowiki>https://redis.io/</nowiki>"];
db [label="Base PostgreSQL", URL="<nowiki>https://www.postgresql.org/</nowiki>"];
search [label="Moteur de recherche", URL="<nowiki>https://www.meilisearch.com/</nowiki>"];
obs [label="Observabilité", URL="<nowiki>https://grafana.com/</nowiki>"];
cicd [label="CI/CD", URL="<nowiki>https://about.gitlab.com/</nowiki>"];

users -> web [label="utilise"];
web -> api [label="HTTPS"];
api -> auth [label="OIDC"];
api -> crm;
api -> erp;
api -> wiki;
crm -> db;
crm -> cache;
erp -> db;
wiki -> search;
crm -> mq;
erp -> mq;
obs -> api;
obs -> crm;
obs -> erp;
cicd -> web;
cicd -> api;
}

== Références directes ==
* [https://www.nginx.com/ NGINX]
* [https://konghq.com/ Kong]
* [https://www.keycloak.org/ Keycloak]
* [https://www.suitecrm.com/ SuiteCRM]
* [https://www.odoo.com/ Odoo]
* [https://www.mediawiki.org/ MediaWiki]
* [https://kafka.apache.org/ Apache Kafka]
* [https://redis.io/ Redis]
* [https://www.postgresql.org/ PostgreSQL]
* [https://www.meilisearch.com/ Meilisearch]
* [https://grafana.com/ Grafana]
* [https://about.gitlab.com/ GitLab]

== Remarque ==
Le rendu Graphviz est affiché ici via l'URL directe du SVG servi sous `/images/...`, comme pour D2 dans cette instance.

Exemple D2 - système d'information fictif

2026-03-19T22:07:47Z

Loic :

= Exemple D2 - système d'information fictif =

Cette page montre une démonstration de '''D2''' sur un '''système d'information fictif''', et non sur ton serveur.

== Rendu graphique ==
https://lololand.hopto.org:25698/images/d2-fictif.svg

== Source D2 ==
<pre class="oc-d2">
direction: right

users: Utilisateurs {
shape: person
}

internet: Internet {
shape: cloud
}

company: Entreprise Fictive Alphacorp xxx {
shape: rectangle

hq: Siège social
dc: Datacenter principal
branch: Agence régionale
}

network: Réseau et sécurité {
fw: Pare-feu
vpn: VPN
lb: Reverse Proxy
}

apps: Applications métiers {
portal: Portail interne
crm: CRM
erp: ERP
wiki: Wiki documentaire
helpdesk: Helpdesk
}

data: Données {
db1: Base PostgreSQL
db2: Base MariaDB
storage: Stockage documentaire
backup: Sauvegarde hors site
}

ops: Exploitation {
monitoring: Supervision
logging: Centralisation logs
cicd: CI/CD
}

users -> internet: accès web
internet -> fw
fw -> vpn
fw -> lb
lb -> portal
lb -> crm
lb -> erp
lb -> wiki
lb -> helpdesk
portal -> db1
crm -> db1
erp -> db2
wiki -> storage
helpdesk -> db2
monitoring -> portal
monitoring -> crm
monitoring -> erp
logging -> portal
logging -> crm
logging -> erp
storage -> backup
hq -> dc
branch -> vpn
</pre>

== Remarque ==
Dans cette instance MediaWiki, la méthode fonctionnelle pour afficher un SVG dans une page consiste à utiliser directement l'URL du fichier SVG servi par `/images/...` sur une ligne seule, avec `$wgAllowExternalImages = true`.

Utilisateur:Loic

2026-03-18T23:16:15Z

Loic : /* infra */

Utilisateur:Loic

2026-03-18T23:09:12Z

Loic :

==== infra ====
[[Schéma d'architecture cliquable de tas]]

[[Trace install tas]]

[[Architecture logicielle de tas]]

==== models ====
[[Index des modèles de schémas]]

[[Déploiement Mermaid PlantUML BPMN JS]]

[[Exemple Mermaid]]

[[Exemple Mermaid ER]]

[[Exemple Mermaid Gantt]]

[[Exemple Mermaid Gitgraph]]

[[Exemple Mermaid Sequence]]

[[Exemple Mermaid State]]

[[Exemple PlantUML]]

[[Exemple BPMN JS]]

Utilisateur:Loic

2026-03-18T23:08:54Z

Loic :

boo

=== rien ===

==== qwe ====

==== infra ====
[[Schéma d'architecture cliquable de tas]]

[[Trace install tas]]

[[Architecture logicielle de tas]]

==== models ====
[[Index des modèles de schémas]]

[[Déploiement Mermaid PlantUML BPMN JS]]

[[Exemple Mermaid]]

[[Exemple Mermaid ER]]

[[Exemple Mermaid Gantt]]

[[Exemple Mermaid Gitgraph]]

[[Exemple Mermaid Sequence]]

[[Exemple Mermaid State]]

[[Exemple PlantUML]]

[[Exemple BPMN JS]]

Utilisateur:Loic

2026-03-18T23:02:47Z

Loic :

boo

=== rien ===

==== qwe ====

==== infra ====
[[Schéma d'architecture cliquable de tas]]

[[Trace install tas]]

[[infra]]

==== models ====
[[Index des modèles de schémas]]

[[Déploiement Mermaid PlantUML BPMN JS]]

[[Exemple Mermaid]]

[[Exemple Mermaid ER]]

[[Exemple Mermaid Gantt]]

[[Exemple Mermaid Gitgraph]]

[[Exemple Mermaid Sequence]]

[[Exemple Mermaid State]]

[[Exemple PlantUML]]

[[Exemple BPMN JS]]

Utilisateur:Loic

2026-03-18T22:25:33Z

Loic :

boo

=== rien ===

==== qwe ====

===== asd =====
[[infra]]

==== models ====
[[Index des modèles de schémas]]

[[Déploiement Mermaid PlantUML BPMN JS]]

[[Exemple Mermaid]]

[[Exemple Mermaid ER]]

[[Exemple Mermaid Gantt]]

[[Exemple Mermaid Gitgraph]]

[[Exemple Mermaid Sequence]]

[[Exemple Mermaid State]]

[[Exemple PlantUML]]

[[Exemple BPMN JS]]

Exemple BPMN.js

2026-03-18T22:23:52Z

Loic :

Utilisateur:Loic

2026-03-18T22:21:58Z

Loic :

boo

=== rien ===

==== qwe ====

===== asd =====
[[infra]]

==== models ====
[[Déploiement Mermaid PlantUML BPMN JS]]

[[Exemple Mermaid]]

[[Exemple Mermaid ER]]

[[Exemple Mermaid Gantt]]

[[Exemple Mermaid Gitgraph]]

[[Exemple Mermaid Sequence]]

[[Exemple Mermaid State]]

[[Exemple PlantUML]]

[[Exemple BPMN JS]]

Exemple BPMN.js

2026-03-18T22:12:09Z

Loic : /* Exemple BPMN JS */

= Exemple BPMN JS =

Cette page montre un workflow '''BPMN''' rendu par '''bpmn-js''' dans MediaWiki.

<div class="oc-bpmn-container">
<div class="oc-bpmn-viewer"></div>
<pre class="oc-bpmn-xml"><?xml version="1.0" encoding="UTF-8"?>
<bpmn:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL"
xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI"
xmlns:dc="http://www.omg.org/spec/DD/20100524/DC"
xmlns:di="http://www.omg.org/spec/DD/20100524/DI"
id="Definitions_1"
targetNamespace="http://bpmn.io/schema/bpmn">

<bpmn:process id="Process_1" isExecutable="false">

<bpmn:startEvent id="StartEvent_1" name="Dossier reçu">
<bpmn:outgoing>Flow_1</bpmn:outgoing>
</bpmn:startEvent>

<bpmn:userTask id="Task_1" name="Analyser le dossier">
<bpmn:incoming>Flow_1</bpmn:incoming>
<bpmn:incoming>Flow_8</bpmn:incoming>
<bpmn:outgoing>Flow_2</bpmn:outgoing>
</bpmn:userTask>

<bpmn:exclusiveGateway id="Gateway_1" name="Dossier complet ?" default="Flow_4">
<bpmn:incoming>Flow_2</bpmn:incoming>
<bpmn:outgoing>Flow_3</bpmn:outgoing>
<bpmn:outgoing>Flow_4</bpmn:outgoing>
</bpmn:exclusiveGateway>

<bpmn:userTask id="Task_4" name="Valider le dossier">
<bpmn:incoming>Flow_3</bpmn:incoming>
<bpmn:outgoing>Flow_5</bpmn:outgoing>
</bpmn:userTask>

<bpmn:userTask id="Task_5" name="Traiter le dossier">
<bpmn:incoming>Flow_5</bpmn:incoming>
<bpmn:outgoing>Flow_6</bpmn:outgoing>
</bpmn:userTask>

<bpmn:userTask id="Task_2" name="Demander des compléments">
<bpmn:incoming>Flow_4</bpmn:incoming>
<bpmn:outgoing>Flow_7</bpmn:outgoing>
</bpmn:userTask>

<bpmn:receiveTask id="Task_3" name="Réceptionner les compléments">
<bpmn:incoming>Flow_7</bpmn:incoming>
<bpmn:outgoing>Flow_8</bpmn:outgoing>
</bpmn:receiveTask>

<bpmn:endEvent id="EndEvent_1" name="Dossier traité">
<bpmn:incoming>Flow_6</bpmn:incoming>
</bpmn:endEvent>

<bpmn:sequenceFlow id="Flow_1" sourceRef="StartEvent_1" targetRef="Task_1" />
<bpmn:sequenceFlow id="Flow_2" sourceRef="Task_1" targetRef="Gateway_1" />
<bpmn:sequenceFlow id="Flow_3" name="Oui" sourceRef="Gateway_1" targetRef="Task_4" />
<bpmn:sequenceFlow id="Flow_4" name="Non" sourceRef="Gateway_1" targetRef="Task_2" />
<bpmn:sequenceFlow id="Flow_5" sourceRef="Task_4" targetRef="Task_5" />
<bpmn:sequenceFlow id="Flow_6" sourceRef="Task_5" targetRef="EndEvent_1" />
<bpmn:sequenceFlow id="Flow_7" sourceRef="Task_2" targetRef="Task_3" />
<bpmn:sequenceFlow id="Flow_8" sourceRef="Task_3" targetRef="Task_1" />

</bpmn:process>

<bpmndi:BPMNDiagram id="BPMNDiagram_1">
<bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">

<bpmndi:BPMNShape id="StartEvent_1_di" bpmnElement="StartEvent_1">
<dc:Bounds x="40" y="117" width="36" height="36" />
</bpmndi:BPMNShape>

<bpmndi:BPMNShape id="Task_1_di" bpmnElement="Task_1">
<dc:Bounds x="100" y="95" width="130" height="80" />
</bpmndi:BPMNShape>

<bpmndi:BPMNShape id="Gateway_1_di" bpmnElement="Gateway_1" isMarkerVisible="true">
<dc:Bounds x="280" y="110" width="50" height="50" />
</bpmndi:BPMNShape>

<bpmndi:BPMNShape id="Task_4_di" bpmnElement="Task_4">
<dc:Bounds x="380" y="95" width="130" height="80" />
</bpmndi:BPMNShape>

<bpmndi:BPMNShape id="Task_5_di" bpmnElement="Task_5">
<dc:Bounds x="550" y="95" width="130" height="80" />
</bpmndi:BPMNShape>

<bpmndi:BPMNShape id="Task_2_di" bpmnElement="Task_2">
<dc:Bounds x="380" y="220" width="160" height="80" />
</bpmndi:BPMNShape>

<bpmndi:BPMNShape id="Task_3_di" bpmnElement="Task_3">
<dc:Bounds x="590" y="220" width="170" height="80" />
</bpmndi:BPMNShape>

<bpmndi:BPMNShape id="EndEvent_1_di" bpmnElement="EndEvent_1">
<dc:Bounds x="740" y="117" width="36" height="36" />
</bpmndi:BPMNShape>

<bpmndi:BPMNEdge id="Flow_1_di" bpmnElement="Flow_1">
<di:waypoint x="76" y="135" />
<di:waypoint x="100" y="135" />
</bpmndi:BPMNEdge>

<bpmndi:BPMNEdge id="Flow_2_di" bpmnElement="Flow_2">
<di:waypoint x="230" y="135" />
<di:waypoint x="280" y="135" />
</bpmndi:BPMNEdge>

<bpmndi:BPMNEdge id="Flow_3_di" bpmnElement="Flow_3">
<di:waypoint x="330" y="135" />
<di:waypoint x="380" y="135" />
</bpmndi:BPMNEdge>

<bpmndi:BPMNEdge id="Flow_4_di" bpmnElement="Flow_4">
<di:waypoint x="305" y="160" />
<di:waypoint x="305" y="260" />
<di:waypoint x="380" y="260" />
</bpmndi:BPMNEdge>

<bpmndi:BPMNEdge id="Flow_5_di" bpmnElement="Flow_5">
<di:waypoint x="510" y="135" />
<di:waypoint x="550" y="135" />
</bpmndi:BPMNEdge>

<bpmndi:BPMNEdge id="Flow_6_di" bpmnElement="Flow_6">
<di:waypoint x="680" y="135" />
<di:waypoint x="740" y="135" />
</bpmndi:BPMNEdge>

<bpmndi:BPMNEdge id="Flow_7_di" bpmnElement="Flow_7">
<di:waypoint x="540" y="260" />
<di:waypoint x="590" y="260" />
</bpmndi:BPMNEdge>

<bpmndi:BPMNEdge id="Flow_8_di" bpmnElement="Flow_8">
<di:waypoint x="590" y="260" />
<di:waypoint x="320" y="260" />
<di:waypoint x="320" y="175" />
<di:waypoint x="165" y="175" />
</bpmndi:BPMNEdge>

</bpmndi:BPMNPlane>
</bpmndi:BPMNDiagram>

</bpmn:definitions></pre>
</div>

== Source ==
Le XML BPMN est stocké directement dans la page puis rendu par '''bpmn-js'''.

Utilisateur:Loic

2026-03-18T22:09:54Z

Loic :

boo

=== rien ===

==== qwe ====

===== asd =====
[[infra]]

models

[[Exemple_Mermaid]]

[[Exemple Mermaid ER]]

[[Exemple Mermaid Gantt]]

[[Exemple Mermaid Gitgraph]]

[[Exemple Mermaid Sequence]]

[[Exemple Mermaid State]]

[[Exemple_PlantUML]]

[[Exemple_BPMN_JS]]

Utilisateur:Loic

2026-03-18T22:08:52Z

Loic :

boo

=== rien ===

==== qwe ====

===== asd =====
[[infra]]

models

[[Exemple_Mermaid]]

[[Exemple_PlantUML]]

[[Exemple_BPMN_JS]]

Exemple PlantUML

2026-03-18T21:36:12Z

Loic :

= Exemple PlantUML =

Cette page montre un workflow simple rendu par '''PlantUML''' dans MediaWiki.

<pre class="oc-plantuml">@startuml
start
:Demande reçue;
if (Dossier complet ?) then (oui)
:Validation;
:Traitement;
stop
else (non)
:Demande de compléments;
:Demande reçue;
endif
@enduml</pre>

boo

<pre class="oc-plantuml">
@startuml
start
:Demande reçue;
while (Dossier complet ?) is (non)
:Demande de compléments;
:Demande reçue;
endwhile (oui)
:Validation;
:Traitement;
stop
@enduml
</pre>

== Source ==
Le texte PlantUML est encodé côté client puis rendu en SVG via un service compatible PlantUML/Kroki.

Exemple PlantUML

2026-03-18T21:34:17Z

Loic :

Exemple PlantUML

2026-03-18T21:31:13Z

Loic :

Utilisateur:Loic

2026-03-18T20:57:18Z

Loic : Page créée avec « boo === rien === ==== qwe ==== ===== asd ===== infra »

boo

=== rien ===

==== qwe ====

===== asd =====
[[infra]]