Annonce du support des diagrammes D2 dans VPasCode : l’éditeur D2 gratuit ultime et l’outil en ligne D2 complet

Nous sommes ravis d’annoncer une mise à jour majeure de VPasCode : un support complet du langage D2 de diagramme en code ! Grâce à cette mise à jour, les architectes, les développeurs et les rédacteurs techniques peuvent transformer instantanément les scripts textuels déclaratifs D2 en diagrammes visuels propres et professionnels, sans aucune difficulté.

Que vous soyez en train de cartographier une architecture cloud complexe, une topologie de microservices ou des flux de travail organisationnels, VPasCode fonctionne comme votre éditeur D2 gratuit et outil en ligne en ligne D2 complet. Découvrez une visualisation fluide et en temps réel directement dans votre navigateur.

Pour en savoir plus sur les fonctionnalités et les mises à jour de notre plateforme, visitez la page officielle de VPasCode.

Comment fonctionne l’intégration D2 dans VPasCode

Utiliser D2 dans VPasCode est rapide, intuitif et conçu pour maximiser votre productivité. L’espace de travail propose une disposition pratique en deux parties côte à côte :

• Panneau gauche (éditeur de code) : Collez simplement, tapez ou modifiez votre script D2. La détection automatique du format de VPasCode reconnaît immédiatement votre code sans nécessiter de basculer manuellement entre les langages.
• Panels droit (visualiseur en direct) : Observez votre diagramme se rendre dynamiquement en temps réel pendant que vous tapez ou modifiez des blocs de code.

La vidéo ci-dessous vous montre comment créer un diagramme D2 dans l’éditeur de diagrammes en code de Visual Paradigm VPasCode.

Prêt à essayer par vous-même ? Lancez-vous directement avec notre éditeur VPasCode.

Fonctionnalités clés incluses avec le support D2

Au-delà du rendu en direct, notre nouvelle intégration D2 est livrée avec des options de collaboration et de sortie polyvalentes pour s’adapter à votre flux de travail :

1. Options d’exportation flexibles : Téléchargez instantanément vos diagrammes terminés sous forme de graphiques vectoriels SVG évolutifs ou d’images PNG à haute résolution, pour des rapports, des présentations et de la documentation.

   

2. Intégration du presse-papiers :Copiez rapidement votre image de diagramme rendu directement dans votre presse-papiers avec un simple clic pour le coller directement dans Slack, les e-mails ou les traiteurs de texte.
3. Partage instantané d’URL :Partagez facilement votre travail avec vos collègues ou clients via des liens hypertexte directs. Le meilleur, c’est qu’aucune connexion n’est requise pour que les spectateurs examinent vos diagrammes partagés.

Démonstration : Création d’un diagramme réseau basique avec D2

Pour voir à quel point il est facile de modéliser des systèmes à l’aide de cet éditeur D2 gratuit, considérez l’exemple suivant d’une architecture réseau multi-niveaux basique.

Code source D2

direction: droite
client -> load_balancer: HTTPS
load_balancer -> app1: HTTP
load_balancer -> app2: HTTP
app1 -> redis: GET
app2 -> redis: GET
app1 -> postgres: SQL
app2 -> postgres: SQL
client.shape: personne
load_balancer.shape: rectangle
app1.shape: hexagone
app2.shape: hexagone
redis.shape: cylindre
postgres.shape: cylindre
redis.style.fill: "#fee2e2"
postgres.style.fill: "#dcfce7"

Comment cela s’affiche dans notre outil en ligne D2

Lorsque vous collez le script ci-dessus dans VPasCode, le moteur traite automatiquement les relations, la directionnalité et le style personnalisé des formes :

• Le clientest stylisé comme une icône distincte de personne initiée des requêtes HTTPS vers un rectangle load_balancer.
• Le trafic se divise clairement entre deux nœuds d’application hexagonaux (app1 et app2).
• Les deux nœuds d’application interrogeant de manière sécurisée les couches de mémoire cache backend (redis, stylisé dans une teinte rouge douce) et des magasins de données relationnelles (postgres, stylisé dans une teinte verte douce).

Plus d’exemples de diagrammes D2

Formes de base

serveur -> client : HTTP
serveur -> base de données : requête
client : {
  forme : personne
  style.remplissage : "#cfe2ff"
}
base de données : {
  forme : cylindre
  style.remplissage : "#d1e7dd"
}
serveur.style.remplissage : "#fff3cd"

Conteneurs

réseau : {
  web : {
    forme : hexagone
    style.remplissage : "#e7f1ff"
  }
  api : {
    forme : rectangle
    style.remplissage : "#fff3cd"
  }
  db.primaire : {
    forme : cylindre
    style.remplissage : "#d1e7dd"
  }
  db.cache : {
    forme : cylindre
    style.remplissage : "#f8d7da"
  }
  web -> api : REST
  api -> db.primaire : SQL
  api -> db.cache : recherche
}

Stylisé

vars : {
  d2-config : {
    esquisse : true
    moteur-de-disposition : elk
  }
}
aws : {
  vpc : {
    web : {
      forme : rectangle
      style : {
        remplissage : "#fef3c7"
        trait : "#d97706"
        épaisseur-du-trait : 2
        police : mono
      }
    }
    api : {
      forme : rectangle
      style.remplissage : "#dbeafe"
    }
    db : {
      forme : cylindre
      style.remplissage : "#dcfce7"
    }
  }
}
utilisateur -> aws.vpc.web : HTTPS {
  style.anime : true
}
aws.vpc.web -> aws.vpc.api : HTTP
aws.vpc.api -> aws.vpc.db : SQL {
  style.trait-pointille : 5
}

Séquence

forme : diagramme-de-séquence
utilisateur -> api : GET /utilisateurs
api -> base de données : SELECT *
base de données -> api : lignes
api -> utilisateur : 200 OK
utilisateur -> api : POST /utilisateurs
api -> base de données : INSERT
base de données -> api : ligne
api -> utilisateur : 201 Créé

Remarques : Vous pouvez souhaiter créer un diagramme de séquence avec PlantUML. Découvrez comment le faire ici :

Guide complet des diagrammes de séquence PlantUML : syntaxe, exemples et meilleures pratiques

Qu’est-ce que VPasCode ?

Si vous êtes nouveau sur notre plateforme, Visual Paradigm VPasCode est une solution unifiée, basée sur navigateur, de diagrammes en code, conçue pour les équipes techniques modernes. Elle élimine les complications des outils de dessin manuels par glisser-déposer en vous permettant de définir entièrement l’architecture et les modèles de données via du code.

En plus de D2, VPasCode prend en charge un vaste éventail de formats de diagrammes populaires et de langages structurés, notamment PlantUML, Mermaid, Graphviz, ECharts, SQL, YAML, JSON, et les principaux langages de programmation tels que Java, Python, Rust, et TypeScript. L’édition de code principal, l’aperçu en direct et l’exportation d’images sont entièrement gratuits.

Commencez à créer dès aujourd’hui

Améliorez votre documentation technique et votre modélisation architecturale dès aujourd’hui. Découvrez la rapidité et la commodité de nos nouvelles fonctionnalités D2 en lançant l’application dès maintenant sur le Éditeur VPasCode.