{"id":1950,"date":"2026-06-20T02:33:55","date_gmt":"2026-06-20T02:33:55","guid":{"rendered":"https:\/\/www.vpascode.com\/fr\/your-first-diagram-in-vpascode-a-5-minute-quickstart-2\/"},"modified":"2026-06-20T02:33:55","modified_gmt":"2026-06-20T02:33:55","slug":"your-first-diagram-in-vpascode-a-5-minute-quickstart-2","status":"publish","type":"post","link":"https:\/\/www.vpascode.com\/fr\/your-first-diagram-in-vpascode-a-5-minute-quickstart-2\/","title":{"rendered":"Votre premier diagramme dans VPasCode \u2013 Un d\u00e9marrage rapide en 5 minutes"},"content":{"rendered":"
\n
\n

VPasCode est un outil intuitifoutil diagramme en tant que code<\/a> et unifi\u00e9 texte vers diagramme<\/a>plateforme qui vous permet de cr\u00e9er des diagrammes en utilisant des formats populaires tels que PlantUML, Mermaid et Graphviz.<\/p>\n<\/header>\n

\n

Qu’est-ce que VPasCode ?<\/h2>\n

VPasCode (la plateforme diagramme en tant que code de Visual Paradigm) est une plateforme unifi\u00e9e texte vers diagramme qui vous permet de cr\u00e9er des diagrammes en utilisant des formats populaires tels que PlantUML, Mermaid et Graphviz. Que vous soyez en train de documenter une architecture logicielle, de planifier des projets ou de visualiser des flux de donn\u00e9es, VPasCode vous fournit un \u00e9diteur de code gratuit et un rendu instantan\u00e9 de diagrammes pour donner vie \u00e0 vos id\u00e9es.<\/p>\n

Le meilleur ? Vous pouvez commencer \u00e0 cr\u00e9er des diagrammes imm\u00e9diatement sur www.vpascode.com<\/a> \u2013 aucune inscription requise pour les fonctionnalit\u00e9s de base.<\/p>\n<\/section>\n

\n

\u00c9tape 1 : Acc\u00e9der \u00e0 VPasCode<\/h2>\n

Acc\u00e9dez \u00e0 www.vpascode.com<\/a> dans votre navigateur web. Vous verrez une interface propre avec un \u00e9diteur de code sur la gauche et un panneau de pr\u00e9visualisation en direct sur la droite. La plateforme se charge instantan\u00e9ment avec un diagramme d’exemple pour vous aider \u00e0 comprendre la syntaxe.
\n<\/p>\n

\"VPasCode
L’interface intuitive de VPasCode avec \u00e9dition de code c\u00f4te \u00e0 c\u00f4te et pr\u00e9visualisation en temps r\u00e9el<\/figcaption><\/figure>\n

Prompt d’image :<\/strong> Capture d’\u00e9cran de l’interface web de VPasCode montrant une disposition en \u00e9cran divis\u00e9 avec l’\u00e9diteur de code sur la gauche affichant la syntaxe Mermaid et le diagramme de flux rendu sur la droite, une interface moderne propre avec une barre d’outils en haut<\/p>\n<\/section>\n

\n

\u00c9tape 1 : \u00c9crivez votre code de diagramme de flux<\/h2>\n

VPasCode sert d’outil polyvalent diagramme en tant que code prenant en charge plusieurs formats. Pour ce d\u00e9marrage rapide texte vers diagramme, nous utiliserons Mermaid, l’une des options les plus populaires pour les diagrammes de flux.<\/p>\n

Effacez le code d’exemple et collez cet exemple simple de diagramme de flux :<\/p>\n

\n
\nMermaid<\/span>
\n
\n<\/path><\/path><\/svg>
\nModifier Mermaid dans VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n
\r\n
\r\n Mermaid<\/span>\r\n \r\n <\/path><\/path><\/svg>\r\n Edit Mermaid in VPasCode<\/span>\r\n <\/a>\r\n <\/div>\r\n
\r\n 
graph TD\r\n    A[Commencer] --> B{Est-ce que \u00e7a fonctionne ?}\r\n    B -->|Oui| C[Super !]\r\n    B -->|Non| D[D\u00e9boguer]\r\n    D --> B\r\n    C --> E[Fin]<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nModifier Mermaid dans VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
Cette syntaxe Mermaid cr\u00e9e un diagramme de flux de d\u00e9cision basique. Voici ce que cela signifie :<\/p>\n