Guide de démarrage rapide VPasCode en 60 secondes

Mise en route avec Visual Paradigm VPasCode prend moins d’une minute. Étant donné que la plateforme est entièrement native cloud, vous n’avez pas besoin d’installer des runtimes Java, de configurer des modules Node.js ou de télécharger des dépendances lourdes d’extensions d’IDE. Vous pouvez passer du syntaxe de texte brut à un diagramme visuel de haute fidélité en seulement trois étapes simples.

Suivez ce parcours rapide pour créer, personnaliser et partager votre tout premier actif Diagramme-en-Code (DaC).

Étape 1 : Ouvrir l’éditeur en direct

Naviguez vers le site gratuit VPasCode Playground. Par défaut, vous serez accueilli par une interface moderne à deux panneaux :

• Le panneau de gauche (éditeur de code) : Un éditeur de texte léger et performant doté d’une coloration syntaxique automatique, des numéros de ligne et une détection d’erreurs active.
• Le panneau de droite (fenêtre de prévisualisation en direct) : Un rendu de diagramme en temps réel qui met à jour automatiquement votre disposition visuelle à mesure que vous tapez ou modifiez votre représentation textuelle.

Étape 2 : Sélectionnez votre moteur et collez un plan

VPasCode reconnaît automatiquement votre syntaxe. Pour le voir en action, effacez tout le texte d’indication dans le panneau de gauche, puis copiez-collez l’un des exemples de base suivants dans l’éditeur :

Option A : Diagramme de flux Markdown (syntaxe Mermaid)

Si vous préférez un agencement de diagramme de flux agile et descendante, utilisez ce bloc simple :

graph TD
    A[Requête client] --> B{Passerelle API}
    B --> |Jeton valide| C[Service d'authentification]
    B --> |Jeton invalide| D[Accès refusé]
    C --> E[(Base de données utilisateur)]

Option B : Composant d’architecture logicielle (syntaxe PlantUML)

Si vous souhaitez représenter des composants système structurés avec des cadres de limites formelles, utilisez ce bloc :

@startuml
package "Niveau application" {
    [Application web] -droite-> [Passerelle API]
}
database "Stockage des données" {
    [Passerelle API] --> [SQL principal]
    [Passerelle API] ..> [Cache Redis] : "Optimisation de lecture"
}
@enduml

Dès que vous collez le code, le panneau de droite compilera immédiatement votre texte et affichera votre diagramme visuel propre et parfaitement aligné.

Étape 3 : Exporter et partager votre travail

Une fois que vous êtes satisfait de votre disposition, vous pouvez exporter ou partager instantanément votre document à l’aide de la barre de contrôle de l’espace de travail située en haut de l’interface :

1. Copier l’URL partageable : Cliquez sur Partager le bouton pour générer un lien instantané. VPasCode utilise une sérialisation d’état sans base de données, ce qui signifie que tout votre texte de diagramme est compressé de manière sécurisée directement dans le hachage de l’URL. Quiconque clique sur votre lien peut visualiser et modifier instantanément le modèle de code exact.
2. Télécharger un vecteur haute résolution (SVG) : Cliquez sur Exporter SVG le bouton pour télécharger un actif vectoriel scalable. C’est idéal pour des intégrations propres dans des dépôts Git, des wikis d’équipe ou des fichiers de documentation technique en markdown.
3. Télécharger une image statique (PNG) : Cliquez sur Exporter PNG pour obtenir une capture haute résolution prête à être intégrée directement dans Slack, Microsoft Teams ou des présentations de design.

Maintenant que vous avez rendu votre premier élément, explorez les sections suivantes de notre documentation pour maîtriser les méthodes de conception individuelles Guide PlantUML, Guide Mermaid, et Guide Graphviz méthodologies de conception !