Diagrams D2

Ci-dessous se trouvent des exemples prêts à l’emploi pour des diagrammes logiciels courants créés avec D2 dans VPasCode. Vous pouvez copier ces extraits de code directement dans l’éditeur en direct de VPasCode pour générer instantanément des diagrammes visuels propres.

Remarque : Vous pouvez définir la direction du layout en utilisant direction : droite ou direction : bas au début de votre bloc de code D2.

1. Diagramme d’architecture système

Une architecture web cloud multicouche mettant en avant des serveurs imbriqués et des composants de stockage.

D2


Modifier D2 dans VPasCode
D2 Edit D2 in VPasCode 
direction : droite

Utilisateur : {
  shape : personne
}

Application Web : {
  CDN : {
    shape : nuage
  }
  
  Équilibreur de charge
  
  Serveurs d'application : {
    Serveur 1
    Serveur 2
  }
  
  Niveau données : {
    Base de données PostgreSQL : {
      shape : cylindre
    }
    Cache Redis : {
      shape : cylindre
    }
  }
}

Utilisateur -> Application Web.CDN : Demande page
Application Web.CDN -> Application Web.Équilibreur de charge : Acheminer le trafic
Application Web.Équilibreur de charge -> Application Web.Serveurs d'application.Serveur 1
Application Web.Équilibreur de charge -> Application Web.Serveurs d'application.Serveur 2

Application Web.Serveurs d'application.Serveur 1 -> Application Web.Niveau données.Cache Redis : Vérifier le cache
Application Web.Serveurs d'application.Serveur 1 -> Application Web.Niveau données.Base de données PostgreSQL : Interroger les données
Edit D2 in VPasCode



Modifier D2 dans VPasCode

D2 multi-tier cloud web system architecture featuring CDN, Load Balancer, App Servers, PostgreSQL, and Redis - Text to diagram editor - VPasCode

 

2. Schéma de base de données (diagramme de table SQL)

D2 dispose d’un support intégré pour afficher proprement les tables SQL et les relations entre entités en utilisant la sql_table forme.

D2


Modifier D2 dans VPasCode
D2 Edit D2 in VPasCode 
utilisateurs : {
  shape : sql_table
  id : int {constraint : primary_key}
  username : varchar
  email : varchar
  created_at : timestamp
}

commandes : {
  shape : sql_table
  id : int {constraint : primary_key}
  user_id : int {constraint : foreign_key}
  total_amount : decimal
  status : varchar
}

articles_commande : {
  shape : sql_table
  id : int {constraint : primary_key}
  order_id : int {constraint : foreign_key}
  product_name : varchar
  quantity : int
}

utilisateurs.id -> commandes.user_id : 1-vers-Plusieurs
commandes.id -> articles_commande.order_id : 1-vers-Plusieurs
Edit D2 in VPasCode



Modifier D2 dans VPasCode

D2 SQL table ERD diagram showing 1-to-Many entity relationships between users, orders, and order_items - Text to diagram editor - VPasCode

 

3. Pipeline de déploiement automatisé (CI/CD)

Représentez les étapes de déploiement logiciel, du contrôle de code à la mise en production.

D2


Modifier D2 dans VPasCode
D2 Edit D2 in VPasCode 
direction : droite

Développeur -> GitHub : 1. Pousser le code

GitHub Pipelines : {
  Étape de construction -> Étape de test -> Image Docker
}

GitHub -> GitHub Pipelines : 2. Déclencher l'action
GitHub Pipelines.Image Docker -> Registry Docker : 3. Stocker la construction

Registry Docker -> Serveur de production : 4. Déployer le conteneur
Edit D2 in VPasCode



Modifier D2 dans VPasCode

D2 CI/CD automated deployment workflow diagram mapping code push from GitHub to Docker Registry and Production Server - Text to diagram editor - VPasCode

 

Retour en haut