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

VPasCode est un outil intuitif de diagramme-as-code et une plateforme unifi\u00e9e texte vers diagramme<\/a> plateforme qui vous permet de cr\u00e9er des diagrammes en utilisant des formats populaires comme PlantUML, Mermaid et Graphviz. Gr\u00e2ce \u00e0 des capacit\u00e9s d’IA natives int\u00e9gr\u00e9es directement, vous pouvez d\u00e9sormais g\u00e9n\u00e9rer des visuels instantan\u00e9ment \u00e0 partir du langage naturel.<\/p>\n<\/header>\n

\n

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

VPasCode (la plateforme diagramme-as-code de Visual Paradigm) est une plateforme unifi\u00e9e de texte vers diagramme qui vous permet de cr\u00e9er des diagrammes en utilisant des formats populaires comme PlantUML, Mermaid et Graphviz. Que vous documentiez une architecture logicielle, planifiiez des projets ou visualisiez des flux de donn\u00e9es, VPasCode offre un \u00e9diteur de code gratuit, un rendu en temps r\u00e9el et une IA int\u00e9gr\u00e9e pour donner vie \u00e0 vos id\u00e9es.<\/p>\n

Le meilleur ? Vous pouvez commencer \u00e0 cr\u00e9er des diagrammes imm\u00e9diatement \u00e0 www.vpascode.com<\/a> \u2013 aucune inscription n’est requise pour les fonctionnalit\u00e9s de base. Pour une vue d’ensemble compl\u00e8te des derni\u00e8res fonctionnalit\u00e9s d’IA natives, consultez notre Annonce majeure de mise \u00e0 jour de VPasCode<\/a>.<\/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 \u00e9pur\u00e9e avec un \u00e9diteur de code \u00e0 gauche et un panneau d’aper\u00e7u en direct \u00e0 droite. La plateforme se charge instantan\u00e9ment avec un diagramme d’exemple pour vous aider \u00e0 comprendre la syntaxe.
\n<\/p>\n

\"VPasCode
Interface intuitive de VPasCode avec \u00e9dition de code c\u00f4te \u00e0 c\u00f4te et aper\u00e7u en temps r\u00e9el<\/figcaption><\/figure>\n

Invite pour l’image :<\/strong> Capture d’\u00e9cran de l’interface web de VPasCode montrant une mise en page en \u00e9cran partag\u00e9 avec l’\u00e9diteur de code \u00e0 gauche affichant la syntaxe Mermaid et le diagramme de flux rendu \u00e0 droite, une interface utilisateur moderne et \u00e9pur\u00e9e avec une barre d’outils en haut<\/p>\n<\/section>\n

\n

\u00c9tape 2 : Cr\u00e9er votre diagramme (via une invite d’IA ou du code)<\/h2>\n

VPasCode sert d’outil polyvalent de diagramme-as-code prenant en charge plusieurs formats. Vous avez deux m\u00e9thodes principales pour cr\u00e9er vos diagrammes : \u00e9crire du code manuellement ou les g\u00e9n\u00e9rer instantan\u00e9ment en utilisant l’IA int\u00e9gr\u00e9e.<\/p>\n

Option A : G\u00e9n\u00e9rer instantan\u00e9ment avec l’IA native<\/h3>\n

Au lieu de partir de z\u00e9ro, vous pouvez taper une invite en langage naturel directement dans l’interface de l’application. Par exemple, essayez de saisir :<\/p>\n

\u00ab G\u00e9n\u00e9rer un diagramme de cas d’utilisation en PlantUML pour un syst\u00e8me de distributeur automatique \u00bb<\/p><\/blockquote>\n

VPasCode cr\u00e9era instantan\u00e9ment le diagramme nativement pour vous en quelques secondes. Pour voir ce flux de travail en action, regardez notre vid\u00e9o de d\u00e9monstration : Cr\u00e9er et modifier des diagrammes rapidement avec l’IA sur YouTube<\/a>.<\/p>\n

Option B : \u00c9crire le code du diagramme de flux manuellement<\/h3>\n

Sinon, vous pouvez \u00e9crire ou coller du code manuellement. Effacez l’\u00e9diteur et utilisez cet exemple simple de diagramme de flux Mermaid :<\/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\n    A[D\u00e9but] --> B{Est-ce que \u00e7a marche ?}\n    B -->|Oui| C[Super !]\n    B -->|Non| D[D\u00e9bogage]\n    D --> B\n    C --> F[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             <\/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 organigramme de d\u00e9cision de base. Voici ce que cela signifie :<\/p>\n