{"id":2119,"date":"2026-05-26T08:00:30","date_gmt":"2026-05-26T08:00:30","guid":{"rendered":"https:\/\/www.vpascode.com\/fr\/docs\/uncategorized\/mermaid-js-syntax-basis\/"},"modified":"2026-05-26T08:00:30","modified_gmt":"2026-05-26T08:00:30","slug":"mermaid-js-syntax-basis","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/mermaid-js-syntax-basis\/","title":{"rendered":"Base de syntaxe Mermaid.js"},"content":{"rendered":"<p>Avant de plonger dans des agencements architecturaux sp\u00e9cifiques comme des diagrammes de flux complexes ou des chronologies de s\u00e9quence, il est essentiel de comprendre les r\u00e8gles fondamentales qui r\u00e9gissent le <strong>Guide Mermaid<\/strong>. Mermaid repose sur un syst\u00e8me de notation textuelle propre et tr\u00e8s intuitive. Une fois que vous comprenez comment le moteur initialise un type de canevas, nomme les composants structurels et oriente les fl\u00e8ches directionnelles, la r\u00e9daction de tout agencement de syst\u00e8me complexe devient totalement naturelle.<\/p>\n<p>Ce bref aper\u00e7u couvre les m\u00e9caniques de syntaxe structurelle globales qui s&#8217;appliquent \u00e0 presque tous les types de diagrammes Mermaid dans l&#8217;environnement VPasCode.<\/p>\n<h2>1. Les enveloppes obligatoires du type de diagramme<\/h2>\n<p>Chaque bloc de code Mermaid doit commencer par une d\u00e9claration explicite de son arch\u00e9type de diagramme sur la toute premi\u00e8re ligne. Cela indique au parseur VPasCode exactement quel moteur structurel doit \u00eatre lanc\u00e9 dans votre canevas d&#8217;aper\u00e7u :<\/p>\n<ul>\n<li><code>graph TD<\/code> \u2014 Sp\u00e9cifie un agencement de diagramme de flux organis\u00e9 du haut vers le bas.<\/li>\n<li><code>sequenceDiagram<\/code> \u2014 Sp\u00e9cifie un diagramme de chronologie de temps d&#8217;ex\u00e9cution.<\/li>\n<li><code>classDiagram<\/code> \u2014 Sp\u00e9cifie un plan directeur logiciel structur\u00e9 orient\u00e9 objet.<\/li>\n<\/ul>\n<p>Contrairement \u00e0 d&#8217;autres moteurs de conversion texte-diagramme, Mermaid n&#8217;exige pas d&#8217;\u00e9tiquettes de fin. Le parseur lit simplement la d\u00e9claration structurelle de la premi\u00e8re ligne et compile tout ce qui est imbriqu\u00e9 directement en dessous dans votre conteneur de bloc de code.<\/p>\n<h2>2. D\u00e9claration des \u00e9l\u00e9ments : ID vs. \u00e9tiquettes d&#8217;affichage<\/h2>\n<p>Lors de la mod\u00e9lisation d&#8217;un syst\u00e8me logiciel, vous cr\u00e9erez divers \u00e9l\u00e9ments structurels tels que des composants, des bases de donn\u00e9es ou des microservices. Dans Mermaid, vous d\u00e9clarez un \u00e9l\u00e9ment en d\u00e9finissant un court ID alphanum\u00e9rique interne, suivi imm\u00e9diatement d&#8217;un style entre crochets qui contr\u00f4le sa forme visuelle, et d&#8217;un nom d&#8217;affichage convivial :<\/p>\n<pre><code>microservice_id[API de traitement des paiements]\r\ndb_id[(SQL des transactions utilisateur)]<\/code><\/pre>\n<p><strong>Pourquoi c&#8217;est une bonne pratique :<\/strong> Utiliser un ID interne court et propre (comme <code>microservice_id<\/code>) rend le trac\u00e9 des lignes de relation beaucoup plus rapide par la suite. Si vous devez un jour modifier l&#8217;\u00e9tiquette visible par le client de \u00ab\u00a0API de traitement des paiements\u00a0\u00bb en \u00ab\u00a0Service de paiement global\u00a0\u00bb, vous n&#8217;aurez qu&#8217;\u00e0 la modifier dans la seule ligne o\u00f9 elle est d\u00e9clar\u00e9e, plut\u00f4t que de mettre \u00e0 jour des dizaines de lignes dans votre script.<\/p>\n<h2>3. Ma\u00eetriser les fl\u00e8ches de relation et le routage directionnel<\/h2>\n<p>Les connexions entre les n\u0153uds du syst\u00e8me sont dessin\u00e9es \u00e0 l&#8217;aide de combinaisons de tirets (<code>-<\/code>), signes \u00e9gaux (<code>=<\/code>), et des crochets fl\u00e9ch\u00e9s (<code>&gt;<\/code>). Le style de vos lignes vous donne un contr\u00f4le implicite sur la mani\u00e8re dont le moteur de mise en page automatique \u00e9chelonne votre diagramme :<\/p>\n<ul>\n<li><code>A --&gt; B<\/code> dessine une fl\u00e8che dirig\u00e9e standard pointant de l&#8217;\u00e9l\u00e9ment A \u00e0 l&#8217;\u00e9l\u00e9ment B.<\/li>\n<li><code>A --- B<\/code> dessine une ligne de liaison plate et non orient\u00e9e sans t\u00eate de fl\u00e8che, id\u00e9ale pour des associations simples.<\/li>\n<li><code>A -.-&gt; B<\/code> cr\u00e9e une ligne de d\u00e9pendance pointill\u00e9e, qui est la norme de l&#8217;industrie pour indiquer des d\u00e9pendances asynchrones ou des webhooks r\u00e9seau.<\/li>\n<li><code>A ==&gt; B<\/code> cr\u00e9e une ligne de connexion \u00e9paisse et en gras, parfaite pour mettre en \u00e9vidence les voies principales de traitement des donn\u00e9es ou les liens essentiels de l&#8217;infrastructure.<\/li>\n<\/ul>\n<h2>4. Ajout de contexte en ligne : \u00e9tiquettes et commentaires de code<\/h2>\n<p>Une documentation claire repose fortement sur l&#8217;ajout de contexte appropri\u00e9 autour de vos lignes visuelles et de vos scripts texte :<\/p>\n<h3>\u00c9tiquetage des lignes de connexion<\/h3>\n<p>Vous pouvez ajouter du texte explicatif directement sur n&#8217;importe quelle ligne de connexion en ins\u00e9rant la cha\u00eene de texte entre deux paires de traits d&#8217;union, ou en ajoutant un caract\u00e8re barre verticale (<code>|Texte|<\/code>) juste apr\u00e8s votre carte de relation :<\/p>\n<pre><code>client_id -- \"POST HTTPS \/v1\/checkout\" --&gt; api_id\r\nclient_id --&gt; |POST HTTPS \/v1\/checkout| api_id<\/code><\/pre>\n<h3>R\u00e9daction de commentaires de code<\/h3>\n<p>Si vous souhaitez laisser une note administrative, un cr\u00e9dit de conception ou une explication architecturale dans votre fichier de script sans afficher de bo\u00eete visuelle sur le canevas, utilisez deux signes de pourcentage (<code>%%<\/code>). Cela indique au moteur de sauter compl\u00e8tement l&#8217;analyse de cette ligne :<\/p>\n<pre><code>%% TODO : Nous devons mettre \u00e0 jour cette bo\u00eete de limite une fois la migration DevOps termin\u00e9e\r\n[Monolithe h\u00e9rit\u00e9] --&gt; [Nouveau microservice]<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Avant de plonger dans des agencements architecturaux sp\u00e9cifiques comme des diagrammes de flux complexes ou des chronologies de s\u00e9quence, il est essentiel de comprendre les r\u00e8gles fondamentales qui r\u00e9gissent le Guide Mermaid. Mermaid repose sur un syst\u00e8me de notation textuelle&#8230;<\/p>\n","protected":false},"author":4,"featured_media":0,"parent":0,"menu_order":0,"template":"","meta":{"inline_featured_image":false,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}}},"ld_collection":[14],"class_list":["post-2119","ld_docs","type-ld_docs","status-publish","hentry","ld_collection-vpascode-docs"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Mermaid.js Syntax Basics | VPasCode Text to Diagram Guide<\/title>\n<meta name=\"description\" content=\"Learn basic Mermaid.js notation in VPasCode, a flexible diagram-as-code tool that turns simple text to diagram assets.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/mermaid-js-syntax-basis\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mermaid.js Syntax Basics | VPasCode Text to Diagram Guide\" \/>\n<meta property=\"og:description\" content=\"Learn basic Mermaid.js notation in VPasCode, a flexible diagram-as-code tool that turns simple text to diagram assets.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/mermaid-js-syntax-basis\/\" \/>\n<meta property=\"og:site_name\" content=\"VPasCode\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/docs\\\/vpascode-docs\\\/mermaid-js-syntax-basis\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/docs\\\/vpascode-docs\\\/mermaid-js-syntax-basis\\\/\",\"name\":\"Mermaid.js Syntax Basics | VPasCode Text to Diagram Guide\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/#website\"},\"datePublished\":\"2026-05-26T08:00:30+00:00\",\"description\":\"Learn basic Mermaid.js notation in VPasCode, a flexible diagram-as-code tool that turns simple text to diagram assets.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/docs\\\/vpascode-docs\\\/mermaid-js-syntax-basis\\\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/docs\\\/vpascode-docs\\\/mermaid-js-syntax-basis\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/docs\\\/vpascode-docs\\\/mermaid-js-syntax-basis\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Lean Docs\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/docs\\\/%ld_collection%\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Base de syntaxe Mermaid.js\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/#website\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/\",\"name\":\"VPasCode\",\"description\":\"by Visual Paradigm\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/#organization\",\"name\":\"VPasCode\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/wp-content\\\/uploads\\\/sites\\\/6\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/wp-content\\\/uploads\\\/sites\\\/6\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"width\":128,\"height\":138,\"caption\":\"VPasCode\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Mermaid.js Syntax Basics | VPasCode Text to Diagram Guide","description":"Learn basic Mermaid.js notation in VPasCode, a flexible diagram-as-code tool that turns simple text to diagram assets.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/mermaid-js-syntax-basis\/","og_locale":"fr_FR","og_type":"article","og_title":"Mermaid.js Syntax Basics | VPasCode Text to Diagram Guide","og_description":"Learn basic Mermaid.js notation in VPasCode, a flexible diagram-as-code tool that turns simple text to diagram assets.","og_url":"https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/mermaid-js-syntax-basis\/","og_site_name":"VPasCode","twitter_card":"summary_large_image","twitter_misc":{"Dur\u00e9e de lecture estim\u00e9e":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/mermaid-js-syntax-basis\/","url":"https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/mermaid-js-syntax-basis\/","name":"Mermaid.js Syntax Basics | VPasCode Text to Diagram Guide","isPartOf":{"@id":"https:\/\/www.vpascode.com\/fr\/#website"},"datePublished":"2026-05-26T08:00:30+00:00","description":"Learn basic Mermaid.js notation in VPasCode, a flexible diagram-as-code tool that turns simple text to diagram assets.","breadcrumb":{"@id":"https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/mermaid-js-syntax-basis\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/mermaid-js-syntax-basis\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/mermaid-js-syntax-basis\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vpascode.com\/fr\/"},{"@type":"ListItem","position":2,"name":"Lean Docs","item":"https:\/\/www.vpascode.com\/fr\/docs\/%ld_collection%\/"},{"@type":"ListItem","position":3,"name":"Base de syntaxe Mermaid.js"}]},{"@type":"WebSite","@id":"https:\/\/www.vpascode.com\/fr\/#website","url":"https:\/\/www.vpascode.com\/fr\/","name":"VPasCode","description":"by Visual Paradigm","publisher":{"@id":"https:\/\/www.vpascode.com\/fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vpascode.com\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/www.vpascode.com\/fr\/#organization","name":"VPasCode","url":"https:\/\/www.vpascode.com\/fr\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.vpascode.com\/fr\/#\/schema\/logo\/image\/","url":"https:\/\/www.vpascode.com\/fr\/wp-content\/uploads\/sites\/6\/2026\/06\/cropped-vp-online-logo-v1.png","contentUrl":"https:\/\/www.vpascode.com\/fr\/wp-content\/uploads\/sites\/6\/2026\/06\/cropped-vp-online-logo-v1.png","width":128,"height":138,"caption":"VPasCode"},"image":{"@id":"https:\/\/www.vpascode.com\/fr\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/www.vpascode.com\/fr\/wp-json\/wp\/v2\/ld_docs\/2119","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vpascode.com\/fr\/wp-json\/wp\/v2\/ld_docs"}],"about":[{"href":"https:\/\/www.vpascode.com\/fr\/wp-json\/wp\/v2\/types\/ld_docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.vpascode.com\/fr\/wp-json\/wp\/v2\/users\/4"}],"wp:attachment":[{"href":"https:\/\/www.vpascode.com\/fr\/wp-json\/wp\/v2\/media?parent=2119"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/fr\/wp-json\/wp\/v2\/ld_collection?post=2119"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}