Maîtriser le Diagramme-as-Code : Un tutoriel complet VPasCode pour les équipes de développement modernes

graph TD
    A[Utilisateur entre ses identifiants] --> B{Format valide ?}
    B -->|Non| C[Afficher une erreur de validation]
    B -->|Oui| D[Envoyer au service d'authentification]
    C --> A
    D --> E{Les identifiants correspondent-ils ?}
    E -->|Non| F[Retourner 401 Non autorisé]
    E -->|Oui| G[Générer un jeton JWT]
    G --> H[Stocker le jeton dans un cookie HttpOnly]
    H --> I[Rediriger vers le tableau de bord]
    F --> A
    
    style A fill:#e1f5ff,stroke:#0066cc
    style I fill:#d4edda,stroke:#28a745
    style F fill:#f8d7da,stroke:#dc3545

graph LR
    subgraph Client["Couche Client"]
        Web[Application Web<br/>React]
        Mobile[Application Mobile<br/>Flutter]
    end
    
    subgraph API["Passerelle API"]
        Gateway[ Passerelle Kong ]
        Auth[Service d'authentification]
        Rate[Limiteur de débit]
    end
    
    subgraph Services["Services métier"]
        User[Service utilisateur]
        Order[Service de commande]
        Product[Service produit]
        Payment[Service de paiement]
    end
    
    subgraph Data["Couche de données"]
        UserDB[(Base de données utilisateur<br/>PostgreSQL)]
        OrderDB[(Base de données de commande<br/>MongoDB)]
        ProductDB[(Base de données de produit<br/>PostgreSQL)]
        Cache[(Cache Redis)]
    end
    
    Web --> Gateway
    Mobile --> Gateway
    Gateway --> Auth
    Gateway --> Rate
    Rate --> User
    Rate --> Order
    Rate --> Product
    User --> UserDB
    User --> Cache
    Order --> OrderDB
    Order --> Payment
    Product --> ProductDB
    Payment --> OrderDB
    
    style Gateway fill:#ff6b6b,stroke:#c92a2a,color:white
    style UserDB fill:#4ecdc4,stroke:#087f5b
    style OrderDB fill:#4ecdc4,stroke:#087f5b
    style ProductDB fill:#4ecdc4,stroke:#087f5b
    style Cache fill:#ffe66d,stroke:#f08c00

sequenceDiagram
    autonumber
    participant C as Client
    participant W as Application Web
    participant O as Service de Commande
    participant P as Service de Paiement
    participant I as Service d'Inventaire
    participant N as Service de Notification
    
    C->>W: Ajouter des articles au panier
    C->>W: Cliquer sur "Payer"
    W->>O: POST /orders {articles, livraison}
    O->>I: Réserver l'inventaire
    I-->>O: Réservation confirmée
    O->>P: Traiter le paiement
    P-->>O: Paiement réussi
    O->>O: Créer un enregistrement de commande
    O->>N: Envoyer une confirmation de commande
    N-->>C: Confirmation par e-mail
    O-->>W: 201 Created {orderId}
    W-->>C: Afficher la page de succès
    
    Note over O,P: Section critique<br/>doit être transactionnelle
    rect rgba(200, 200, 0, 0.2)
        O->>P: Charger la carte
        P-->>O: ID de transaction
    end

gantt
    titre Sprint 24 - Module d'authentification
    formatDate  YYYY-MM-DD
    formatAxe  %m/%d
    
    section Backend
    Conception des contrats API       :terminé,    des1, 2024-06-01, 2j
    Implémentation du service JWT      :actif,  des2, 2024-06-03, 3j
    Migration de la base de données         :         des3, après des2, 2j
    Tests unitaires              :         des4, après des3, 2j
    
    section Frontend
    Composant de connexion           :         front1, 2024-06-03, 3j
    Gestion des jetons          :         front2, après front1, 2j
    Routes protégées          :         front3, après front2, 2j
    
    section Intégration
    Intégration API           :         int1, après des4, 2j
    Tests E2E              :         int2, après int1, 3j
    Audit de sécurité           :         int3, après int2, 2j

@startuml
!theme plain
skinparam backgroundColor #FFFFFF
skinparam componentStyle uml2

title "Plateforme de commerce électronique - Architecture des composants"

package "Couche de présentation" {
    [Frontend Web] as Web
    [Application mobile] as Mobile
    [Tableau de bord administrateur] as Admin
}

package "Couche API" {
    [Passerelle API] as Gateway
    [Authentification] as Auth
    [Limiteur de débit] as RateLimit
}

package "Services métier" {
    [Service de catalogue] as Catalog
    [Service de commande] as Order
    [Service de paiement] as Payment
    [Service d'expédition] as Shipping
    [Service de notification] as Notify
}

package "Couche de données" {
    base de données "Base de données produits" as ProdDB
    base de données "Base de données des commandes" as OrderDB
    base de données "Base de données des utilisateurs" as UserDB
    file d'attente "File d'attente de messages" as MQ
}

Web --> Gateway
Mobile --> Gateway
Admin --> Gateway

Gateway --> Auth
Gateway --> RateLimit
Gateway --> Catalog
Gateway --> Order

Order --> Payment
Order --> Shipping
Order --> Notify

Catalog --> ProdDB
Order --> OrderDB
Auth --> UserDB

Payment ..> MQ : publier des événements
Shipping ..> MQ : s'abonner aux événements
Notify ..> MQ : s'abonner aux événements

@enduml

@startuml
|Client|
début
:Parcourir les produits ;
:Ajouter au panier ;
:Passer à la caisse ;

|Système|
:Valider les articles du panier ;
:Calculer le total ;
si (Articles disponibles ?) alors (oui)
  :Réserver l'inventaire ;
sinon (non)
  :Afficher « Épuisé » ;
  stop
finsi

|Client|
:Entrer l'adresse de livraison ;
:Sélectionner le mode de paiement ;

|Système|
:Traiter le paiement ;
si (Paiement réussi ?) alors (oui)
  :Créer la commande ;
  :Envoyer un e-mail de confirmation ;
  :Mettre à jour l'inventaire ;
sinon (non)
  :Afficher une erreur de paiement ;
  detach
finsi

:Expédier la commande ;
:Mettre à jour le statut de la commande ;
stop

partition "Tâches en arrière-plan" {
  :Générer la facture ;
  :Notifier l'entrepôt ;
}

@enduml

digraph MicroservicesDependencies {
    rankdir=TB;
    node [shape=box, style="rounded,filled", fontname="Arial"];
    edge [fontname="Arial", fontsize=10];
    
    // Définitions des nœuds avec couleurs
    node [fillcolor="#e3f2fd"];
    "API Gateway" [fillcolor="#ffcdd2"];
    "Service Mesh" [fillcolor="#fff9c4"];
    
    // Services principaux
    "User Service";
    "Auth Service";
    "Order Service";
    "Payment Service";
    "Inventory Service";
    "Notification Service";
    "Analytics Service";
    
    // Bases de données
    node [shape=cylinder, fillcolor="#c8e6c9"];
    "User DB";
    "Order DB";
    "Product DB";
    "Analytics DB";
    
    // Services externes
    node [shape=box, fillcolor="#f3e5f5", style="dashed,filled"];
    "Payment Gateway";
    "Email Service";
    "SMS Service";
    
    // Relations
    "API Gateway" -> "Service Mesh";
    "Service Mesh" -> "User Service";
    "Service Mesh" -> "Auth Service";
    "Service Mesh" -> "Order Service";
    "Service Mesh" -> "Payment Service";
    "Service Mesh" -> "Inventory Service";
    
    "User Service" -> "User DB";
    "Auth Service" -> "User DB";
    "Order Service" -> "Order DB";
    "Order Service" -> "Inventory Service";
    "Order Service" -> "Payment Service";
    "Inventory Service" -> "Product DB";
    "Payment Service" -> "Payment Gateway";
    "Notification Service" -> "Email Service";
    "Notification Service" -> "SMS Service";
    "Analytics Service" -> "Analytics DB";
    
    "Order Service" -> "Notification Service" [style=dashed];
    "Payment Service" -> "Notification Service" [style=dashed];
    
    // Sous-graphes pour le regroupement
    {
        rank=same;
        "User Service";
        "Auth Service";
    }
    
    {
        rank=same;
        "Order Service";
        "Payment Service";
        "Inventory Service";
    }
}

digraph OrgChart {
    rankdir=TB;
    node [shape=box, style="rounded,filled", fontname="Helvetica"];
    edge [fontname="Helvetica", arrowsize=0.7];
    
    // Niveau exécutif
    CEO [label="CEOnJohn Smith", fillcolor="#1976d2", fontcolor="white"];
    
    // Niveau C-Level
    subgraph cluster_exec {
        label="Équipe exécutive";
        style=dashed;
        color="#90caf9";
        
        CTO [label="CTOnSarah Johnson", fillcolor="#42a5f5"];
        CFO [label="CFOnMichael Brown", fillcolor="#42a5f5"];
        COO [label="COOnEmily Davis", fillcolor="#42a5f5"];
        CPO [label="CPOnDavid Wilson", fillcolor="#42a5f5"];
    }
    
    // Ingénierie
    subgraph cluster_eng {
        label="Ingénierie";
        style=filled;
        color="#e3f2fd";
        
        VP_Eng [label="VP Ingénierie", fillcolor="#64b5f6"];
        
        subgraph cluster_eng_teams {
            label="Équipes";
            style=dotted;
            
            Backend [label="Équipe Backendn(12 ingénieurs)", fillcolor="#bbdefb"];
            Frontend [label="Équipe Frontendn(8 ingénieurs)", fillcolor="#bbdefb"];
            DevOps [label="Équipe DevOpsn(5 ingénieurs)", fillcolor="#bbdefb"];
            QA [label="Équipe QAn(6 ingénieurs)", fillcolor="#bbdefb"];
        }
    }
    
    // Produit
    subgraph cluster_product {
        label="Produit";
        style=filled;
        color="#fff3e0";
        
        VP_Product [label="VP Produit", fillcolor="#ffb74d"];
        PM1 [label="Chef de produitnPlateforme", fillcolor="#ffcc80"];
        PM2 [label="Chef de produitnMobile", fillcolor="#ffcc80"];
        PM3 [label="Chef de produitnAnalytique", fillcolor="#ffcc80"];
    }
    
    // Relations
    CEO -> CTO;
    CEO -> CFO;
    CEO -> COO;
    CEO -> CPO;
    
    CTO -> VP_Eng;
    VP_Eng -> Backend;
    VP_Eng -> Frontend;
    VP_Eng -> DevOps;
    VP_Eng -> QA;
    
    CPO -> VP_Product;
    VP_Product -> PM1;
    VP_Product -> PM2;
    VP_Product -> PM3;
    
    // Lignes pointillées pour la collaboration
    PM1 -> Backend [style=dotted, color="#757575"];
    PM2 -> Frontend [style=dotted, color="#757575"];
    PM3 -> Backend [style=dotted, color="#757575"];
}

digraph DataFlow {
    rankdir=LR;
    nodesep=1.0;
    node [shape=ellipse, style="filled", fontname="Arial"];
    edge [fontname="Arial", fontsize=9];
    
    // Entités externes
    node [fillcolor="#ffccbc", shape=box];
    Customer [label="Client"];
    Vendor [label="Fournisseur"];
    Bank [label="Système bancaire"];
    
    // Processus
    node [fillcolor="#c5cae9", shape=circle];
    P1 [label="Passer une commande"];
    P2 [label="Traiter le paiement"];
    P3 [label="Mettre à jour l'inventaire"];
    P4 [label="Générer une facture"];
    P5 [label="Expédier la commande"];
    P6 [label="Envoyer une notification"];
    
    // Dépôts de données
    node [fillcolor="#c8e6c9", shape=box3d];
    D1 [label="Base de données des commandes"];
    D2 [label="Base de données de l'inventaire"];
    D3 [label="Base de données des clients"];
    D4 [label="Enregistrements de factures"];
    
    // Flux de données
    Customer -> P1 [label="Demande de commande"];
    P1 -> D1 [label="Enregistrer la commande"];
    P1 -> D3 [label="Mettre à jour le client"];
    P1 -> P2 [label="Détails de paiement"];
    
    P2 -> Bank [label="Demande de paiement"];
    Bank -> P2 [label="Confirmation de paiement"];
    P2 -> P3 [label="Paiement réussi"];
    
    P3 -> D2 [label="Diminuer le stock"];
    P3 -> P4 [label="Commande confirmée"];
    
    P4 -> D4 [label="Enregistrer la facture"];
    P4 -> P6 [label="Données de facture"];
    
    P3 -> P5 [label="Demande d'expédition"];
    P5 -> Vendor [label="Étiquette d'expédition"];
    P5 -> P6 [label="Informations de suivi"];
    
    P6 -> Customer [label="Confirmation de commanden+ Suivi"];
    
    // Lignes pointillées pour les requêtes
    D1 -> P5 [label="Obtenir les détails de la commande", style=dashed];
    D2 -> P1 [label="Vérifier la disponibilité", style=dashed];
    D3 -> P1 [label="Obtenir les informations du client", style=dashed];
}

graph LR
    sous-graphique Source["Contrôle de source"]
        Git[Dépôt GitHub]
        PR[Pull Request]
    fin
    
    sous-graphique CI["Intégration continue"]
        Lint[Linting]
        Test[Test unitaires]
        Build[Artifacts de construction]
        Scan[Analyse de sécurité]
    fin
    
    sous-graphique CD["Déploiement continu"]
        Dev[Déploiement vers Dev]
        Stage[Déploiement vers Staging]
        E2E[Test E2E]
        Prod[Déploiement vers Production]
    fin
    
    sous-graphique Monitor["Surveillance"]
        Logs[Agrégation de logs]
        Metrics[Tableau de bord des métriques]
        Alerts[Système d'alerte]
    fin
    
    Git --> PR
    PR --> Lint
    Lint --> Test
    Test --> Build
    Build --> Scan
    Scan --> Dev
    Dev --> Stage
    Stage --> E2E
    E2E --> Prod
    Prod --> Logs
    Prod --> Metrics
    Metrics --> Alerts
    
    style Git fill:#f0f0f0,stroke:#333
    style Prod fill:#d4edda,stroke:#28a745,color:black
    style Alerts fill:#f8d7da,stroke:#dc3545,color:black

@startuml
!define TABLE(name) entité name << (T,#FFAAAA) >>
!define PK(x) x <<PK>>
!define FK(x) x <<FK>>

TABLE(Users) {
    PK(user_id) : INT
    --
    email : VARCHAR(255)
    password_hash : VARCHAR(255)
    created_at : TIMESTAMP
    last_login : TIMESTAMP
    status : ENUM
}

TABLE(Products) {
    PK(product_id) : INT
    --
    sku : VARCHAR(50)
    name : VARCHAR(255)
    description : TEXT
    price : DECIMAL(10,2)
    stock_quantity : INT
    category_id : INT
}

TABLE(Categories) {
    PK(category_id) : INT
    --
    name : VARCHAR(100)
    parent_id : INT
}

TABLE(Orders) {
    PK(order_id) : INT
    --
    FK(user_id) : INT
    order_date : TIMESTAMP
    total_amount : DECIMAL(10,2)
    status : ENUM
    shipping_address : TEXT
}

TABLE(OrderItems) {
    PK(item_id) : INT
    --
    FK(order_id) : INT
    FK(product_id) : INT
    quantity : INT
    unit_price : DECIMAL(10,2)
}

TABLE(Payments) {
    PK(payment_id) : INT
    --
    FK(order_id) : INT
    payment_method : ENUM
    transaction_id : VARCHAR(255)
    amount : DECIMAL(10,2)
    status : ENUM
    processed_at : TIMESTAMP
}

Users ||--o{ Orders : places
Orders }o--|{ Users : belongs_to
Orders ||--|{ OrderItems : contains
OrderItems }o--|| Products : references
Products }o--|| Categories : categorized_in
Orders ||--o{ Payments : paid_by

note right of Users
  Stocke les comptes clients
  et les données d'authentification
fin note

note left of Orders
  Enregistrement principal de transaction
  avec les détails d'expédition
fin note

@enduml

graph TB
    sous-graphique AWS["Infrastructure cloud AWS"]
        direction TB
        
        sous-graphique Networking["Réseau"]
            VPC[VPC 10.0.0.0/16]
            IGW[Pont Internet]
            NAT[Pont NAT]
            
            sous-graphique Public["Sous-réseaux publics"]
                ALB[Chargeur de charge d'application]
                Bastion[Hôte Bastion]
            fin
            
            sous-graphique Private["Sous-réseaux privés"]
                sous-graphique AppTier["Niveau application"]
                    ECS1[Tâche ECS 1]
                    ECS2[Tâche ECS 2]
                    ECS3[Tâche ECS 3]
                fin
                
                sous-graphique DataTier["Niveau données"]
                    RDS[RDS PostgreSQL<br/>Multi-AZ]
                    Redis[ElastiCache Redis]
                fin
            fin
        fin
        
        sous-graphique Storage["Stockage"]
            S3[Buckets S3<br/>Actifs et sauvegardes]
            EFS[Stockage partagé EFS]
        fin
        
        sous-graphique Security["Sécurité"]
            WAF[Règles WAF]
            SG[Groupe de sécurité]
            IAM[Rôles IAM]
        fin
        
        sous-graphique Monitoring["Surveillance et journalisation"]
            CW[CloudWatch]
            XRay[AWS X-Ray]
            SNS[Notifications SNS]
        fin
    fin
    
    User[Utilisateurs finaux] --> CloudFront[CloudFront CDN]
    CloudFront --> WAF
    WAF --> ALB
    ALB --> ECS1
    ALB --> ECS2
    ALB --> ECS3
    
    ECS1 --> RDS
    ECS2 --> RDS
    ECS3 --> RDS
    
    ECS1 --> Redis
    ECS2 --> Redis
    ECS3 --> Redis
    
    ECS1 --> S3
    ECS2 --> S3
    ECS3 --> S3
    
    ECS1 --> EFS
    ECS2 --> EFS
    ECS3 --> EFS
    
    ECS1 --> CW
    ECS2 --> CW
    ECS3 --> CW
    
    RDS --> CW
    Redis --> CW
    
    CW --> SNS
    
    style VPC fill:#f9f9f9,stroke:#333,stroke-width:2px
    style ALB fill:#ff9900,stroke:#cc7a00,color:white
    style RDS fill:#2e73b8,stroke:#1a4d80,color:white
    style User fill:#95a5a6,stroke:#7f8c8d

%%{init: {'theme':'base', 'themeVariables': {
    'primaryColor': '#4CAF50',
    'primaryTextColor': '#fff',
    'primaryBorderColor': '#388E3C',
    'lineColor': '#757575',
    'secondaryColor': '#FFC107',
    'tertiaryColor': '#fff'
}}}%%

graph TD
    A[Début] --> B{Décision}
    B -->|Oui| C[Processus A]
    B -->|Non| D[Processus B]
    C --> E[Fin]
    D --> E
    
    style A fill:#2196F3,stroke:#1976D2,color:white
    style E fill:#F44336,stroke:#D32F2F,color:white

@startuml
' Style global
skinparam backgroundColor #FFFFFF
skinparam shadowing false
skinparam roundcorner 10
skinparam linetype ortho

' Style des composants
skinparam component {
    BackgroundColor #E3F2FD
    BorderColor #1976D2
    ArrowColor #1976D2
}

' Style des paquets
skinparam package {
    BackgroundColor #FFF3E0
    BorderColor #F57C00
    FontSize 14
}

' Style des notes
skinparam note {
    BackgroundColor #F1F8E9
    BorderColor #689F38
    FontColor #33691E
}

package "Frontend" {
    component [Application React]
    component [Redux Store]
}

package "Backend" {
    component [API Node.js]
    component [Serveur Express]
    database [MongoDB]
}

[Application React] --> [Redux Store]
[Redux Store] --> [API Node.js]
[API Node.js] --> [Serveur Express]
[Serveur Express] --> [MongoDB]

note right of [Redux Store]
  Gestion centralisée de l'état
  pour toute l'application
end note

@enduml

digraph AdvancedStyling {
    // Attributs globaux du graphe
    graph [
        bgcolor="#f8f9fa"
        fontname="Helvetica"
        fontsize=16
        label="Architecture du système d'entreprisenEnvironnement de production"
        labelloc="t"
        pad=0.5
        ranksep=1.5
        nodesep=1.0
    ];
    
    // Attributs de nœud par défaut
    node [
        fontname="Helvetica"
        fontsize=11
        style="filled,rounded"
        penwidth=2
    ];
    
    // Attributs de bord par défaut
    edge [
        fontname="Helvetica"
        fontsize=9
        penwidth=1.5
        arrowsize=0.8
    ];
    
    // Grappes de nœuds avec style personnalisé
    subgraph cluster_presentation {
        label="Couche de présentation";
        style=filled;
        color="#e3f2fd";
        fontcolor="#1565c0";
        
        Web [label="Application Web<br/>React 18", fillcolor="#64b5f6", fontcolor="white"];
        Mobile [label="Application mobile<br/>Flutter", fillcolor="#64b5f6", fontcolor="white"];
    }
    
    subgraph cluster_business {
        label="Couche de logique métier";
        style=filled;
        color="#fff3e0";
        fontcolor="#e65100";
        
        API [label="API REST<br/>Node.js", fillcolor="#ffb74d", fontcolor="black"];
        GraphQL [label="Passerelle GraphQL", fillcolor="#ffb74d", fontcolor="black"];
    }
    
    subgraph cluster_data {
        label="Couche de données";
        style=filled;
        color="#e8f5e9";
        fontcolor="#2e7d32";
        
        Primary [label="Base de données principale<br/>PostgreSQL 14", shape=cylinder, fillcolor="#a5d6a7"];
        Replica [label="Réplique en lecture<br/>PostgreSQL 14", shape=cylinder, fillcolor="#c8e6c9"];
        Cache [label="Cache Redis<br/>Mode cluster", shape=cylinder, fillcolor="#c8e6c9"];
    }
    
    // Arêtes avec style personnalisé
    Web -> API [label="HTTPS/REST", color="#1976d2", fontcolor="#1976d2"];
    Mobile -> API [label="HTTPS/REST", color="#1976d2", fontcolor="#1976d2"];
    Web -> GraphQL [label="WebSocket", color="#1976d2", fontcolor="#1976d2", style=dashed];
    
    API -> Primary [label="Lecture/Écriture", color="#388e3c", fontcolor="#388e3c"];
    API -> Cache [label="Cache", color="#f57c00", fontcolor="#f57c00", style=dashed];
    GraphQL -> Replica [label="Lecture seule", color="#388e3c", fontcolor="#388e3c"];
    
    Primary -> Replica [label="Réplication en flux", color="#757575", style=dotted];
}