VPasCode est un espace de travail basé sur le navigateur pour créer et visualiser des diagrammes à partir de code textuel. Il prend en charge des langages de diagrammes tels que PlantUML, Mermaid, Graphviz et D2, et combine l’édition de code, le rendu en direct et des outils assistés par l’IA en un seul endroit. Vous écrivez ou générez un script de diagramme, et VPasCode le rend sous forme de diagramme visuel.
1. Démarrer un diagramme
-
Ouvrez VPasCode dans votre navigateur web.
-
Commencez avec un éditeur vierge, ou collez un script de diagramme existant.
-
Pour PlantUML, incluez les balises habituelles
@startumlet@endumlmarqueurs. VPasCode peut détecter la syntaxe PlantUML et activer le rendu correspondant. -
Vérifiez le diagramme rendu au fur et à mesure de votre travail.
2. Générer un diagramme avec l’IA
Utilisez l’assistant IA pour transformer une description en langage courant en code de diagramme. Soyez précis sur les éléments et les relations que vous souhaitez inclure.
Par exemple, vous pourriez demander :
Créez un diagramme de séquence pour l’authentification de connexion utilisateur, incluant l’utilisateur, l’application web, le service d’authentification et la base de données.
Examinez le code généré et sa sortie rendue. Affinez la demande si des participants, étapes ou relations importants manquent.
3. Affiner un code existant
Au lieu de recommencer, utilisez des instructions en langage courant pour modifier un diagramme que vous possédez déjà. Décrivez le changement souhaité et son emplacement.
Par exemple :
Ajoutez une vérification de la passerelle de paiement immédiatement après l’étape de soumission de la commande.
Ensuite, examinez le code et le diagramme mis à jour pour vous assurer que le changement correspond au flux de travail prévu.
4. Corriger les erreurs
Si le diagramme ne s’affiche pas comme prévu, utilisez l’outil de correction d’erreurs de code par IA pour aider à diagnostiquer et réparer les problèmes de syntaxe. Il peut identifier des problèmes tels que des fautes de frappe, des crochets manquants ou des jetons mal alignés, apporter une correction et expliquer ce qui s’est mal passé.
Après avoir appliqué une correction, inspectez à la fois le code et le diagramme rendu pour confirmer que le résultat est correct.
5. Traduire le texte du diagramme
Utilisez l’outil de traduction de diagrammes par IA pour traduire le texte à l’intérieur d’un diagramme, tel que les étiquettes, les propriétés de classe et les descriptions de messages. Cela peut aider à préparer les diagrammes pour des équipes internationales.
Vérifiez les termes traduits dans leur contexte, en particulier le vocabulaire technique et les noms qui doivent rester inchangés.
6. Appliquer un thème
Choisissez un thème dans l’éditeur pour ajuster le style visuel du diagramme. Les options disponibles incluent le thème Classic de Visual Paradigm et des alternatives classiques. Les paramètres de thème peuvent appliquer les paramètres de peau appropriés pour vous.
Vérifiez le résultat pour la lisibilité et la cohérence avant l’exportation.
7. Exporter et partager
Choisissez un format d’exportation adapté à l’utilisation du diagramme :
| Format | Utile pour |
|---|---|
| SVG | Documentation web évolutive et wikis techniques |
| PNG | Applications de chat, suivi des bogues et présentations |
| Documents officiels et impression |
Pour partager un diagramme, utilisez une URL directe ou un code QR généré par la plateforme.
Un flux de travail pratique
-
Décrivez le système, le processus ou l’architecture que vous souhaitez modéliser.
-
Générez le code initial du diagramme avec l’IA, ou collez un script existant.
-
Examinez le rendu en direct et affinez le diagramme avec des instructions ciblées.
-
Utilisez la correction d’erreurs si des problèmes de syntaxe empêchent le rendu.
-
Traduisez les étiquettes ou appliquez un thème si nécessaire.
-
Exportez au format qui convient à votre documentation ou présentation.
-
Partagez le diagramme en utilisant son URL ou son code QR.
