[{"data":1,"prerenderedAt":1004},["ShallowReactive",2],{"blog-post:fr:\u002Ffr\u002Fblog\u002Fprevisualiser-diagrammes-mermaid-markdown-en-ligne":3},{"id":4,"title":5,"author":6,"body":7,"category":976,"date":977,"description":978,"extension":979,"image":980,"imageAlt":981,"meta":982,"navigation":983,"path":984,"seo":985,"stem":986,"tags":987,"translationKey":988,"updatedAt":977,"__hash__":989,"html":990,"bodyMarkdown":991,"translations":992,"previous":999,"next":987},"blog\u002Ffr\u002Fblog\u002F12.previsualiser-diagrammes-mermaid-markdown-en-ligne.md","Comment prévisualiser des diagrammes Mermaid en Markdown en ligne","Antoine Frankart",{"type":8,"value":9,"toc":951},"minimark",[10,14,17,22,30,71,77,80,102,108,112,121,138,145,148,151,155,158,285,288,292,295,331,338,348,371,374,378,381,428,431,435,438,500,503,507,510,589,592,596,599,604,607,626,633,637,644,663,666,670,681,704,714,718,725,729,732,736,739,761,767,771,786,800,804,819,823,826,840,843,847,850,854,863,867,881,884,907,910,914,922,925,940,947],[11,12,13],"p",{},"Vous avez un diagramme Mermaid dans un README ou un fichier Markdown et vous voulez vérifier son rendu avant de le publier ? Le lecteur Markdown gratuit de Fude affiche le code et le diagramme côte à côte, directement dans votre navigateur.",[11,15,16],{},"Mermaid transforme une syntaxe textuelle en diagramme intégré au document Markdown. Dans ce guide, vous allez ajouter un bloc de code Mermaid, le prévisualiser avec l'exemple Fude, tester les principaux types de diagrammes et corriger les erreurs de rendu courantes.",[18,19,21],"h2",{"id":20},"le-plus-petit-bloc-mermaid-valide-dans-markdown","Le plus petit bloc Mermaid valide dans Markdown",[11,23,24,25,29],{},"Une source Mermaid doit être placée dans un bloc de code balisé ",[26,27,28],"code",{},"mermaid"," :",[31,32,37],"pre",{"className":33,"code":34,"language":35,"meta":36,"style":36},"language-markdown shiki shiki-themes github-light github-dark","```mermaid\nflowchart LR\n  Brouillon --> Relecture\n  Relecture --> Publication\n```\n","markdown","",[26,38,39,47,53,59,65],{"__ignoreMap":36},[40,41,44],"span",{"class":42,"line":43},"line",1,[40,45,46],{},"```mermaid\n",[40,48,50],{"class":42,"line":49},2,[40,51,52],{},"flowchart LR\n",[40,54,56],{"class":42,"line":55},3,[40,57,58],{},"  Brouillon --> Relecture\n",[40,60,62],{"class":42,"line":61},4,[40,63,64],{},"  Relecture --> Publication\n",[40,66,68],{"class":42,"line":67},5,[40,69,70],{},"```\n",[11,72,73,74,76],{},"Les trois accents graves ouvrent et ferment le bloc de code. Le mot ",[26,75,28],{}," indique au lecteur compatible qu'il doit interpréter le contenu comme un diagramme, et non comme du code ordinaire.",[11,78,79],{},"La première ligne à l'intérieur du bloc définit le type de diagramme. Dans cet exemple :",[81,82,83,90,96],"ul",{},[84,85,86,89],"li",{},[26,87,88],{},"flowchart"," crée un diagramme de flux ;",[84,91,92,95],{},[26,93,94],{},"LR"," organise les éléments de gauche à droite ;",[84,97,98,101],{},[26,99,100],{},"Brouillon --> Relecture"," crée deux nœuds reliés par une flèche.",[11,103,104,105,107],{},"Sans le mot ",[26,106,28],{}," après les trois premiers accents graves, un lecteur Markdown affiche normalement le code source, mais il ne peut pas deviner qu'un diagramme doit être généré.",[18,109,111],{"id":110},"prévisualiser-mermaid-avec-fude","Prévisualiser Mermaid avec Fude",[11,113,114,115,120],{},"Le ",[116,117,119],"a",{"href":118},"\u002Ffr\u002Flecteur-markdown\u002F","lecteur Markdown gratuit de Fude"," utilise le même moteur de rendu que l'application desktop et l'exécute localement dans le navigateur.",[122,123,124,132,135],"ol",{},[84,125,126,127,131],{},"Ouvrez le lecteur et choisissez ",[128,129,130],"strong",{},"Exemple Mermaid",".",[84,133,134],{},"Remplacez les nœuds et les flèches du flowchart par votre propre source.",[84,136,137],{},"Observez le diagramme se mettre à jour dans le panneau d'aperçu.",[11,139,140,141,144],{},"Vous pouvez également coller un README ou un document ",[26,142,143],{},".md"," complet contenant plusieurs diagrammes. Les titres, paragraphes, tableaux, blocs de code colorés et diagrammes Mermaid restent dans le même aperçu. Vous vérifiez ainsi le document que les lecteurs verront réellement plutôt qu'un dessin isolé de son contexte.",[11,146,147],{},"Le contenu saisi n'est pas envoyé au serveur. Tout le rendu reste dans l'onglet actuel, ce qui convient aux notes d'architecture, aux processus internes et aux diagrammes contenant des noms de projets confidentiels.",[11,149,150],{},"Si la syntaxe est invalide, Fude conserve la source sous le message d'erreur. Vous pouvez donc corriger le bloc sans perdre le reste du document.",[18,152,154],{"id":153},"quel-type-de-diagramme-mermaid-choisir","Quel type de diagramme Mermaid choisir ?",[11,156,157],{},"La première ligne du bloc détermine le type de diagramme. Choisissez-la en fonction de l'information à transmettre :",[159,160,161,177],"table",{},[162,163,164],"thead",{},[165,166,167,171,174],"tr",{},[168,169,170],"th",{},"Besoin",[168,172,173],{},"Première ligne",[168,175,176],{},"Usage courant",[178,179,180,194,207,220,233,246,259,272],"tbody",{},[165,181,182,186,191],{},[183,184,185],"td",{},"Montrer un processus ou une décision",[183,187,188],{},[26,189,190],{},"flowchart LR",[183,192,193],{},"Parcours, pipeline, architecture simple",[165,195,196,199,204],{},[183,197,198],{},"Montrer des échanges dans le temps",[183,200,201],{},[26,202,203],{},"sequenceDiagram",[183,205,206],{},"Appels d'API, authentification, événements",[165,208,209,212,217],{},[183,210,211],{},"Montrer les états d'un objet",[183,213,214],{},[26,215,216],{},"stateDiagram-v2",[183,218,219],{},"Cycle de vie, machine à états, workflow",[165,221,222,225,230],{},[183,223,224],{},"Montrer la structure du code",[183,226,227],{},[26,228,229],{},"classDiagram",[183,231,232],{},"Classes, interfaces et dépendances",[165,234,235,238,243],{},[183,236,237],{},"Montrer un modèle de données",[183,239,240],{},[26,241,242],{},"erDiagram",[183,244,245],{},"Entités, relations et cardinalités",[165,247,248,251,256],{},[183,249,250],{},"Montrer un planning",[183,252,253],{},[26,254,255],{},"gantt",[183,257,258],{},"Phases, dépendances et échéances",[165,260,261,264,269],{},[183,262,263],{},"Montrer des branches Git",[183,265,266],{},[26,267,268],{},"gitGraph",[183,270,271],{},"Stratégie de branches et historique",[165,273,274,277,282],{},[183,275,276],{},"Organiser des idées",[183,278,279],{},[26,280,281],{},"mindmap",[183,283,284],{},"Notes, concepts et arborescences",[11,286,287],{},"Les quatre types les plus fréquents dans une documentation technique sont détaillés ci-dessous. Les autres utilisent le même principe : une déclaration sur la première ligne, puis la source du diagramme.",[18,289,291],{"id":290},"exemple-de-flowchart","Exemple de flowchart",[11,293,294],{},"Les flowcharts conviennent aux arbres de décision, pipelines de build, parcours d'accueil et interactions entre services.",[31,296,299],{"className":297,"code":298,"language":28,"meta":36,"style":36},"language-mermaid shiki shiki-themes github-light github-dark","flowchart LR\n  Source[Source Markdown] --> Parse[Analyser le document]\n  Parse --> HasDiagram{Bloc Mermaid ?}\n  HasDiagram -->|Oui| Render[Afficher le diagramme]\n  HasDiagram -->|Non| Read[Afficher le document]\n  Render --> Read\n",[26,300,301,305,310,315,320,325],{"__ignoreMap":36},[40,302,303],{"class":42,"line":43},[40,304,52],{},[40,306,307],{"class":42,"line":49},[40,308,309],{},"  Source[Source Markdown] --> Parse[Analyser le document]\n",[40,311,312],{"class":42,"line":55},[40,313,314],{},"  Parse --> HasDiagram{Bloc Mermaid ?}\n",[40,316,317],{"class":42,"line":61},[40,318,319],{},"  HasDiagram -->|Oui| Render[Afficher le diagramme]\n",[40,321,322],{"class":42,"line":67},[40,323,324],{},"  HasDiagram -->|Non| Read[Afficher le document]\n",[40,326,328],{"class":42,"line":327},6,[40,329,330],{},"  Render --> Read\n",[11,332,333,334,337],{},"Le texte entre crochets devient le libellé lisible d'un nœud. Les accolades créent une décision. Des libellés comme ",[26,335,336],{},"|Oui|"," précisent le sens d'une connexion.",[11,339,340,341,343,344,347],{},"Remplacez ",[26,342,94],{}," par ",[26,345,346],{},"TD"," lorsqu'une disposition verticale s'adapte mieux à la page :",[31,349,351],{"className":297,"code":350,"language":28,"meta":36,"style":36},"flowchart TD\n  Idée --> Brouillon\n  Brouillon --> Relecture\n  Relecture --> Publication\n",[26,352,353,358,363,367],{"__ignoreMap":36},[40,354,355],{"class":42,"line":43},[40,356,357],{},"flowchart TD\n",[40,359,360],{"class":42,"line":49},[40,361,362],{},"  Idée --> Brouillon\n",[40,364,365],{"class":42,"line":55},[40,366,58],{},[40,368,369],{"class":42,"line":61},[40,370,64],{},[11,372,373],{},"Sur mobile, changer la direction du diagramme apporte souvent un meilleur résultat que l'ajout de styles ou de nœuds supplémentaires.",[18,375,377],{"id":376},"exemple-de-diagramme-de-séquence","Exemple de diagramme de séquence",[11,379,380],{},"Un diagramme de séquence représente des messages échangés dans le temps. Il convient aux appels d'API, connexions, traitements asynchrones et interactions entre une application et une base de données.",[31,382,384],{"className":297,"code":383,"language":28,"meta":36,"style":36},"sequenceDiagram\n  participant Lecteur\n  participant Moteur\n  participant Mermaid\n  Lecteur->>Moteur: Coller le Markdown\n  Moteur->>Mermaid: Envoyer la source\n  Mermaid-->>Moteur: Retourner le SVG\n  Moteur-->>Lecteur: Montrer l'aperçu\n",[26,385,386,391,396,401,406,411,416,422],{"__ignoreMap":36},[40,387,388],{"class":42,"line":43},[40,389,390],{},"sequenceDiagram\n",[40,392,393],{"class":42,"line":49},[40,394,395],{},"  participant Lecteur\n",[40,397,398],{"class":42,"line":55},[40,399,400],{},"  participant Moteur\n",[40,402,403],{"class":42,"line":61},[40,404,405],{},"  participant Mermaid\n",[40,407,408],{"class":42,"line":67},[40,409,410],{},"  Lecteur->>Moteur: Coller le Markdown\n",[40,412,413],{"class":42,"line":327},[40,414,415],{},"  Moteur->>Mermaid: Envoyer la source\n",[40,417,419],{"class":42,"line":418},7,[40,420,421],{},"  Mermaid-->>Moteur: Retourner le SVG\n",[40,423,425],{"class":42,"line":424},8,[40,426,427],{},"  Moteur-->>Lecteur: Montrer l'aperçu\n",[11,429,430],{},"Les participants apparaissent de gauche à droite. Les flèches pleines représentent naturellement une requête, tandis que les flèches en pointillés permettent de distinguer une réponse. La source reste compacte même lorsque plusieurs acteurs interviennent.",[18,432,434],{"id":433},"exemple-de-diagramme-de-classes","Exemple de diagramme de classes",[11,436,437],{},"Les diagrammes de classes décrivent des types et leurs relations. Dans une documentation technique, ils donnent une vue structurelle rapide sans remplacer une référence d'API complète.",[31,439,441],{"className":297,"code":440,"language":28,"meta":36,"style":36},"classDiagram\n  class DocumentMarkdown {\n    +string titre\n    +string contenu\n    +afficher()\n  }\n  class BlocMermaid {\n    +string source\n    +afficherSvg()\n  }\n  DocumentMarkdown \"1\" --> \"0..*\" BlocMermaid : contient\n",[26,442,443,448,453,458,463,468,473,478,483,489,494],{"__ignoreMap":36},[40,444,445],{"class":42,"line":43},[40,446,447],{},"classDiagram\n",[40,449,450],{"class":42,"line":49},[40,451,452],{},"  class DocumentMarkdown {\n",[40,454,455],{"class":42,"line":55},[40,456,457],{},"    +string titre\n",[40,459,460],{"class":42,"line":61},[40,461,462],{},"    +string contenu\n",[40,464,465],{"class":42,"line":67},[40,466,467],{},"    +afficher()\n",[40,469,470],{"class":42,"line":327},[40,471,472],{},"  }\n",[40,474,475],{"class":42,"line":418},[40,476,477],{},"  class BlocMermaid {\n",[40,479,480],{"class":42,"line":424},[40,481,482],{},"    +string source\n",[40,484,486],{"class":42,"line":485},9,[40,487,488],{},"    +afficherSvg()\n",[40,490,492],{"class":42,"line":491},10,[40,493,472],{},[40,495,497],{"class":42,"line":496},11,[40,498,499],{},"  DocumentMarkdown \"1\" --> \"0..*\" BlocMermaid : contient\n",[11,501,502],{},"Restez sélectif. Afficher chaque propriété et chaque méthode transforme rapidement une carte utile en seconde version du code, plus difficile à maintenir.",[18,504,506],{"id":505},"exemple-de-diagramme-entité-association","Exemple de diagramme entité-association",[11,508,509],{},"Les diagrammes entité-association résument les données stockées et leurs cardinalités. Ils sont particulièrement utiles dans les notes d'architecture et les plans de migration.",[31,511,513],{"className":297,"code":512,"language":28,"meta":36,"style":36},"erDiagram\n  PROJET ||--o{ DOCUMENT : contient\n  DOCUMENT ||--o{ DIAGRAMME : inclut\n  PROJET {\n    string id\n    string nom\n  }\n  DOCUMENT {\n    string id\n    string chemin\n  }\n  DIAGRAMME {\n    string id\n    string source\n  }\n",[26,514,515,520,525,530,535,540,545,549,554,558,563,567,573,578,584],{"__ignoreMap":36},[40,516,517],{"class":42,"line":43},[40,518,519],{},"erDiagram\n",[40,521,522],{"class":42,"line":49},[40,523,524],{},"  PROJET ||--o{ DOCUMENT : contient\n",[40,526,527],{"class":42,"line":55},[40,528,529],{},"  DOCUMENT ||--o{ DIAGRAMME : inclut\n",[40,531,532],{"class":42,"line":61},[40,533,534],{},"  PROJET {\n",[40,536,537],{"class":42,"line":67},[40,538,539],{},"    string id\n",[40,541,542],{"class":42,"line":327},[40,543,544],{},"    string nom\n",[40,546,547],{"class":42,"line":418},[40,548,472],{},[40,550,551],{"class":42,"line":424},[40,552,553],{},"  DOCUMENT {\n",[40,555,556],{"class":42,"line":485},[40,557,539],{},[40,559,560],{"class":42,"line":491},[40,561,562],{},"    string chemin\n",[40,564,565],{"class":42,"line":496},[40,566,472],{},[40,568,570],{"class":42,"line":569},12,[40,571,572],{},"  DIAGRAMME {\n",[40,574,576],{"class":42,"line":575},13,[40,577,539],{},[40,579,581],{"class":42,"line":580},14,[40,582,583],{},"    string source\n",[40,585,587],{"class":42,"line":586},15,[40,588,472],{},[11,590,591],{},"Ce diagramme ne remplace ni le vrai schéma ni les migrations. Il sert de vue d'ensemble lisible avant d'entrer dans les détails d'implémentation.",[18,593,595],{"id":594},"écrire-une-source-mermaid-lisible-et-portable","Écrire une source Mermaid lisible et portable",[11,597,598],{},"Un diagramme peut être valide dans votre lecteur et devenir difficile à maintenir après plusieurs modifications. Quelques conventions évitent la plupart des problèmes.",[600,601,603],"h3",{"id":602},"séparer-les-identifiants-des-libellés","Séparer les identifiants des libellés",[11,605,606],{},"Utilisez des identifiants courts et stables dans les relations, puis placez le texte affiché entre crochets et guillemets :",[31,608,610],{"className":297,"code":609,"language":28,"meta":36,"style":36},"flowchart LR\n  draft[\"Brouillon prêt\"] --> review[\"Relecture technique\"]\n  review --> publish[\"Publication\"]\n",[26,611,612,616,621],{"__ignoreMap":36},[40,613,614],{"class":42,"line":43},[40,615,52],{},[40,617,618],{"class":42,"line":49},[40,619,620],{},"  draft[\"Brouillon prêt\"] --> review[\"Relecture technique\"]\n",[40,622,623],{"class":42,"line":55},[40,624,625],{},"  review --> publish[\"Publication\"]\n",[11,627,628,629,632],{},"Vous pourrez modifier « Relecture technique » sans devoir renommer toutes les relations qui utilisent ",[26,630,631],{},"review",". Les guillemets rendent aussi les espaces, les accents et la ponctuation moins ambigus pour l'analyseur Mermaid.",[600,634,636],{"id":635},"ajouter-des-commentaires-dans-la-source","Ajouter des commentaires dans la source",[11,638,639,640,643],{},"Une ligne commençant par ",[26,641,642],{},"%%"," est un commentaire Mermaid et n'apparaît pas dans le diagramme :",[31,645,647],{"className":297,"code":646,"language":28,"meta":36,"style":36},"flowchart LR\n  %% La validation juridique reste facultative pour un brouillon interne.\n  draft[\"Brouillon\"] --> review[\"Relecture\"] --> publish[\"Publication\"]\n",[26,648,649,653,658],{"__ignoreMap":36},[40,650,651],{"class":42,"line":43},[40,652,52],{},[40,654,655],{"class":42,"line":49},[40,656,657],{},"  %% La validation juridique reste facultative pour un brouillon interne.\n",[40,659,660],{"class":42,"line":55},[40,661,662],{},"  draft[\"Brouillon\"] --> review[\"Relecture\"] --> publish[\"Publication\"]\n",[11,664,665],{},"Les commentaires sont utiles pour expliquer une contrainte de mise en page ou la raison d'une relation sans alourdir le rendu visuel.",[600,667,669],{"id":668},"donner-un-titre-et-une-description-accessibles","Donner un titre et une description accessibles",[11,671,672,673,676,677,680],{},"Mermaid accepte ",[26,674,675],{},"accTitle"," et ",[26,678,679],{},"accDescr"," pour ajouter un titre et une description au SVG généré. Ces informations aident les lecteurs d'écran et donnent un équivalent textuel au schéma :",[31,682,684],{"className":297,"code":683,"language":28,"meta":36,"style":36},"flowchart LR\n  accTitle: Cycle de publication d'un document\n  accDescr: Un brouillon passe par une relecture avant sa publication.\n  draft[\"Brouillon\"] --> review[\"Relecture\"] --> publish[\"Publication\"]\n",[26,685,686,690,695,700],{"__ignoreMap":36},[40,687,688],{"class":42,"line":43},[40,689,52],{},[40,691,692],{"class":42,"line":49},[40,693,694],{},"  accTitle: Cycle de publication d'un document\n",[40,696,697],{"class":42,"line":55},[40,698,699],{},"  accDescr: Un brouillon passe par une relecture avant sa publication.\n",[40,701,702],{"class":42,"line":61},[40,703,662],{},[11,705,706,707,713],{},"Le titre doit rester court. La description doit transmettre la conclusion utile du diagramme, pas énumérer chaque forme. La ",[116,708,712],{"href":709,"rel":710},"https:\u002F\u002Fmermaid.js.org\u002Fconfig\u002Faccessibility.html",[711],"nofollow","documentation d'accessibilité de Mermaid"," détaille aussi les descriptions sur plusieurs lignes.",[600,715,717],{"id":716},"ne-pas-dépendre-des-interactions-ou-dun-thème-précis","Ne pas dépendre des interactions ou d'un thème précis",[11,719,720,721,724],{},"Fude rend les diagrammes en mode de sécurité strict et adapte leurs couleurs au thème du lecteur. Considérez donc le résultat comme un visuel statique : ne comptez pas sur une action ",[26,722,723],{},"click",", du HTML dans un libellé ou une position exacte au pixel près. Cette règle améliore également la compatibilité avec les autres lecteurs Markdown.",[18,726,728],{"id":727},"pourquoi-un-diagramme-mermaid-ne-saffiche-pas","Pourquoi un diagramme Mermaid ne s'affiche pas",[11,730,731],{},"Lorsqu'un diagramme échoue, conservez le reste du document et réduisez progressivement le bloc Mermaid jusqu'à obtenir la plus petite version fonctionnelle.",[600,733,735],{"id":734},"le-bloc-de-code-nindique-pas-mermaid","Le bloc de code n'indique pas Mermaid",[11,737,738],{},"Le bloc suivant est du code Markdown ordinaire, pas un diagramme Mermaid :",[31,740,742],{"className":33,"code":741,"language":35,"meta":36,"style":36},"```\nflowchart LR\n  A --> B\n```\n",[26,743,744,748,752,757],{"__ignoreMap":36},[40,745,746],{"class":42,"line":43},[40,747,70],{},[40,749,750],{"class":42,"line":49},[40,751,52],{},[40,753,754],{"class":42,"line":55},[40,755,756],{},"  A --> B\n",[40,758,759],{"class":42,"line":61},[40,760,70],{},[11,762,763,764,766],{},"Ajoutez ",[26,765,28],{}," immédiatement après les accents graves d'ouverture.",[600,768,770],{"id":769},"un-mot-réservé-est-utilisé-comme-libellé","Un mot réservé est utilisé comme libellé",[11,772,773,774,777,778,781,782,785],{},"Dans un flowchart, le mot ",[26,775,776],{},"end"," entièrement en minuscules peut être interprété comme la fin d'un sous-graphe. Écrivez ",[26,779,780],{},"End",", ",[26,783,784],{},"END"," ou utilisez un identifiant distinct avec un libellé entre guillemets :",[31,787,789],{"className":297,"code":788,"language":28,"meta":36,"style":36},"flowchart LR\n  start[\"Début\"] --> finish[\"Fin\"]\n",[26,790,791,795],{"__ignoreMap":36},[40,792,793],{"class":42,"line":43},[40,794,52],{},[40,796,797],{"class":42,"line":49},[40,798,799],{},"  start[\"Début\"] --> finish[\"Fin\"]\n",[600,801,803],{"id":802},"le-type-de-diagramme-est-mal-orthographié","Le type de diagramme est mal orthographié",[11,805,806,807,781,809,781,811,813,814,816,817,131],{},"La première ligne doit contenir une déclaration prise en charge, par exemple ",[26,808,88],{},[26,810,203],{},[26,812,229],{}," ou ",[26,815,242],{},". La casse compte pour des déclarations comme ",[26,818,203],{},[600,820,822],{"id":821},"un-libellé-rend-la-grammaire-ambiguë","Un libellé rend la grammaire ambiguë",[11,824,825],{},"Certains signes de ponctuation ont aussi une signification dans Mermaid. Donnez un identifiant au nœud puis placez le texte lisible entre crochets :",[31,827,829],{"className":297,"code":828,"language":28,"meta":36,"style":36},"flowchart LR\n  Start[Début : lire le fichier] --> Finish[Fin : afficher l'aperçu]\n",[26,830,831,835],{"__ignoreMap":36},[40,832,833],{"class":42,"line":43},[40,834,52],{},[40,836,837],{"class":42,"line":49},[40,838,839],{},"  Start[Début : lire le fichier] --> Finish[Fin : afficher l'aperçu]\n",[11,841,842],{},"Si un libellé complexe échoue encore, remplacez-le temporairement par un seul mot. Rétablissez le texte initial une fois la structure validée.",[600,844,846],{"id":845},"le-diagramme-est-trop-grand-pour-la-page","Le diagramme est trop grand pour la page",[11,848,849],{},"Un diagramme peut être valide et rester inconfortable à lire. Essayez une autre direction, divisez un grand schéma en deux diagrammes ciblés ou retirez les détails déjà présents dans le texte. Le diagramme doit clarifier le document, pas le recopier.",[600,851,853],{"id":852},"deux-lecteurs-produisent-un-rendu-légèrement-différent","Deux lecteurs produisent un rendu légèrement différent",[11,855,856,857,862],{},"Mermaid évolue et les produits n'intègrent pas toujours la même version ou le même thème. Testez le diagramme dans sa destination finale, évitez de dépendre d'une disposition au pixel près et consultez la ",[116,858,861],{"href":859,"rel":860},"https:\u002F\u002Fmermaid.js.org\u002Fintro\u002F",[711],"documentation officielle de Mermaid"," pour le type utilisé.",[18,864,866],{"id":865},"compatibilité-avec-github-gitlab-et-les-lecteurs-markdown","Compatibilité avec GitHub, GitLab et les lecteurs Markdown",[11,868,869,874,875,880],{},[116,870,873],{"href":871,"rel":872},"https:\u002F\u002Fdocs.github.com\u002Ffr\u002Fget-started\u002Fwriting-on-github\u002Fworking-with-advanced-formatting\u002Fcreating-diagrams",[711],"GitHub prend en charge Mermaid"," dans les fichiers Markdown, les issues, les pull requests, les discussions et les wikis. ",[116,876,879],{"href":877,"rel":878},"https:\u002F\u002Fdocs.gitlab.com\u002Fuser\u002Fmarkdown\u002F#mermaid",[711],"GitLab prend également en charge les blocs Mermaid",", mais chaque plateforme choisit sa propre version de la bibliothèque et ses propres règles de sécurité.",[11,882,883],{},"Un diagramme peut donc fonctionner dans Fude et échouer ailleurs s'il utilise une syntaxe ajoutée récemment, une configuration locale ou une interaction désactivée par la plateforme. Pour maximiser la portabilité :",[81,885,886,898,901,904],{},[84,887,888,889,781,891,781,893,676,895,897],{},"privilégiez les types stables comme ",[26,890,88],{},[26,892,203],{},[26,894,229],{},[26,896,242],{}," ;",[84,899,900],{},"gardez des identifiants simples et des libellés entre guillemets ;",[84,902,903],{},"évitez les liens interactifs, le HTML et les réglages de thème indispensables à la compréhension ;",[84,905,906],{},"testez le document dans sa destination finale avant de le publier.",[11,908,909],{},"Un lecteur Markdown sans prise en charge de Mermaid affichera simplement le bloc de code. Le texte qui précède le diagramme doit donc continuer à expliquer son rôle.",[18,911,913],{"id":912},"mermaid-au-milieu-dun-vrai-document-markdown","Mermaid au milieu d'un vrai document Markdown",[11,915,916,917,921],{},"La force d'un visualiseur Mermaid intégré à un lecteur Markdown est le contexte. Un diagramme peut suivre directement son explication, à côté d'un ",[116,918,920],{"href":919},"\u002Ffr\u002Fblog\u002Fmarkdown-tableaux-guide-complet\u002F","tableau Markdown",", d'exemples de code, de liens ou de listes de tâches.",[11,923,924],{},"Utilisez le texte pour expliquer pourquoi le système se comporte ainsi. Réservez le diagramme aux relations, aux directions et aux séquences. Ajoutez une courte phrase avant chaque schéma afin que son rôle reste compréhensible même dans un lecteur qui n'affiche pas Mermaid.",[11,926,927,928,930,931,935,936,939],{},"Si vous avez reçu un document ",[26,929,143],{}," inconnu, commencez par le guide consacré aux ",[116,932,934],{"href":933},"\u002Ffr\u002Fblog\u002Ffichier-markdown-comment-ouvrir\u002F","fichiers Markdown et à leur ouverture",". Collez ensuite son contenu dans le ",[116,937,938],{"href":118},"lecteur Markdown en ligne"," et utilisez l'exemple Mermaid chaque fois que vous avez besoin d'une base propre.",[11,941,942,943,131],{},"Pour organiser une bibliothèque locale de documents Markdown avec thèmes, projets et lecture hors ligne, ",[116,944,946],{"href":945},"\u002Ffr\u002F#download","téléchargez Fude pour macOS",[948,949,950],"style",{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":36,"searchDepth":49,"depth":49,"links":952},[953,954,955,956,957,958,959,960,966,974,975],{"id":20,"depth":49,"text":21},{"id":110,"depth":49,"text":111},{"id":153,"depth":49,"text":154},{"id":290,"depth":49,"text":291},{"id":376,"depth":49,"text":377},{"id":433,"depth":49,"text":434},{"id":505,"depth":49,"text":506},{"id":594,"depth":49,"text":595,"children":961},[962,963,964,965],{"id":602,"depth":55,"text":603},{"id":635,"depth":55,"text":636},{"id":668,"depth":55,"text":669},{"id":716,"depth":55,"text":717},{"id":727,"depth":49,"text":728,"children":967},[968,969,970,971,972,973],{"id":734,"depth":55,"text":735},{"id":769,"depth":55,"text":770},{"id":802,"depth":55,"text":803},{"id":821,"depth":55,"text":822},{"id":845,"depth":55,"text":846},{"id":852,"depth":55,"text":853},{"id":865,"depth":49,"text":866},{"id":912,"depth":49,"text":913},"markdown-guides","2026-08-18","Prévisualisez et testez vos diagrammes Mermaid dans Markdown avec Fude : flowchart, séquence, classes, entités-associations et erreurs courantes.","md","\u002Fimages\u002Fblog\u002Fblog12","Une source Mermaid dans un éditeur Markdown transformée en flowchart",{},false,"\u002Ffr\u002Fblog\u002Fprevisualiser-diagrammes-mermaid-markdown-en-ligne",{"title":5,"description":978},"fr\u002Fblog\u002F12.previsualiser-diagrammes-mermaid-markdown-en-ligne",null,"preview-mermaid-diagrams-markdown","E3-ZNt3eJ3ZKsUEbqrl49U2ppQiRitY0TtdVGFPjHf0","\u003Cp data-fude-source-line=\"2\">\u003Cspan data-fude-source-start=\"1\" data-fude-source-end=\"241\">Vous avez un diagramme Mermaid dans un README ou un fichier Markdown et vous voulez vérifier son rendu avant de le publier ? Le lecteur Markdown gratuit de Fude affiche le code et le diagramme côte à côte, directement dans votre navigateur.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp data-fude-source-line=\"4\">\u003Cspan data-fude-source-start=\"243\" data-fude-source-end=\"509\">Mermaid transforme une syntaxe textuelle en diagramme intégré au document Markdown. Dans ce guide, vous allez ajouter un bloc de code Mermaid, le prévisualiser avec l'exemple Fude, tester les principaux types de diagrammes et corriger les erreurs de rendu courantes.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch2 id=\"user-content-le-plus-petit-bloc-mermaid-valide-dans-markdown\" data-fude-source-line=\"6\">\u003Cspan data-fude-source-start=\"514\" data-fude-source-end=\"561\">Le plus petit bloc Mermaid valide dans Markdown\u003C\u002Fspan>\u003C\u002Fh2>\n\u003Cp data-fude-source-line=\"8\">\u003Cspan data-fude-source-start=\"563\" data-fude-source-end=\"627\">Une source Mermaid doit être placée dans un bloc de code balisé \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"627\" data-fude-source-end=\"636\">mermaid\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"636\" data-fude-source-end=\"638\"> :\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cpre style=\"background-color:var(--fude-code-background, var(--color-code-bg));color:var(--fude-code-foreground, var(--color-code-text))\" tabindex=\"0\" class=\"shiki fude-code-theme fude-code-block\" data-language=\"markdown\" data-fude-code-block-start=\"653\" data-fude-code-block-end=\"734\" data-fude-source-line=\"10\">\u003Ccode class=\"language-markdown\" data-language=\"markdown\" data-fude-code-block-start=\"653\" data-fude-code-block-end=\"734\">\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-token-string, color-mix(in srgb, var(--color-accent-primary) 78%, var(--color-code-text) 22%))\">```mermaid\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-token-string, color-mix(in srgb, var(--color-accent-primary) 78%, var(--color-code-text) 22%))\">flowchart LR\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-token-string, color-mix(in srgb, var(--color-accent-primary) 78%, var(--color-code-text) 22%))\">  Brouillon --> Relecture\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-token-string, color-mix(in srgb, var(--color-accent-primary) 78%, var(--color-code-text) 22%))\">  Relecture --> Publication\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-token-string, color-mix(in srgb, var(--color-accent-primary) 78%, var(--color-code-text) 22%))\">```\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp data-fude-source-line=\"18\">\u003Cspan data-fude-source-start=\"741\" data-fude-source-end=\"809\">Les trois accents graves ouvrent et ferment le bloc de code. Le mot \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"809\" data-fude-source-end=\"818\">mermaid\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"818\" data-fude-source-end=\"934\"> indique au lecteur compatible qu'il doit interpréter le contenu comme un diagramme, et non comme du code ordinaire.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp data-fude-source-line=\"20\">\u003Cspan data-fude-source-start=\"936\" data-fude-source-end=\"1024\">La première ligne à l'intérieur du bloc définit le type de diagramme. Dans cet exemple :\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cul data-fude-source-line=\"22\">\n\u003Cli>\u003Ccode>\u003Cspan data-fude-source-start=\"1028\" data-fude-source-end=\"1039\">flowchart\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"1039\" data-fude-source-end=\"1067\"> crée un diagramme de flux ;\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli>\u003Ccode>\u003Cspan data-fude-source-start=\"1070\" data-fude-source-end=\"1074\">LR\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"1074\" data-fude-source-end=\"1117\"> organise les éléments de gauche à droite ;\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli>\u003Ccode>\u003Cspan data-fude-source-start=\"1120\" data-fude-source-end=\"1145\">Brouillon --> Relecture\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"1145\" data-fude-source-end=\"1184\"> crée deux nœuds reliés par une flèche.\u003C\u002Fspan>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp data-fude-source-line=\"26\">\u003Cspan data-fude-source-start=\"1186\" data-fude-source-end=\"1198\">Sans le mot \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"1198\" data-fude-source-end=\"1207\">mermaid\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"1207\" data-fude-source-end=\"1366\"> après les trois premiers accents graves, un lecteur Markdown affiche normalement le code source, mais il ne peut pas deviner qu'un diagramme doit être généré.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch2 id=\"user-content-prévisualiser-mermaid-avec-fude\" data-fude-source-line=\"28\">\u003Cspan data-fude-source-start=\"1371\" data-fude-source-end=\"1402\">Prévisualiser Mermaid avec Fude\u003C\u002Fspan>\u003C\u002Fh2>\n\u003Cp data-fude-source-line=\"30\">\u003Cspan data-fude-source-start=\"1404\" data-fude-source-end=\"1407\">Le \u003C\u002Fspan>\u003Ca href=\"\u002Ffr\u002Flecteur-markdown\u002F\" data-fude-link-kind=\"unopenable\">\u003Cspan data-fude-source-start=\"1408\" data-fude-source-end=\"1440\">lecteur Markdown gratuit de Fude\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan data-fude-source-start=\"1464\" data-fude-source-end=\"1566\"> utilise le même moteur de rendu que l'application desktop et l'exécute localement dans le navigateur.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Col data-fude-source-line=\"32\">\n\u003Cli>\u003Cspan data-fude-source-start=\"1571\" data-fude-source-end=\"1603\">Ouvrez le lecteur et choisissez \u003C\u002Fspan>\u003Cstrong>\u003Cspan data-fude-source-start=\"1605\" data-fude-source-end=\"1620\">Exemple Mermaid\u003C\u002Fspan>\u003C\u002Fstrong>\u003Cspan data-fude-source-start=\"1622\" data-fude-source-end=\"1623\">.\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli>\u003Cspan data-fude-source-start=\"1627\" data-fude-source-end=\"1699\">Remplacez les nœuds et les flèches du flowchart par votre propre source.\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli>\u003Cspan data-fude-source-start=\"1703\" data-fude-source-end=\"1767\">Observez le diagramme se mettre à jour dans le panneau d'aperçu.\u003C\u002Fspan>\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cp data-fude-source-line=\"36\">\u003Cspan data-fude-source-start=\"1769\" data-fude-source-end=\"1823\">Vous pouvez également coller un README ou un document \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"1823\" data-fude-source-end=\"1828\">.md\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"1828\" data-fude-source-end=\"2087\"> complet contenant plusieurs diagrammes. Les titres, paragraphes, tableaux, blocs de code colorés et diagrammes Mermaid restent dans le même aperçu. Vous vérifiez ainsi le document que les lecteurs verront réellement plutôt qu'un dessin isolé de son contexte.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp data-fude-source-line=\"38\">\u003Cspan data-fude-source-start=\"2089\" data-fude-source-end=\"2304\">Le contenu saisi n'est pas envoyé au serveur. Tout le rendu reste dans l'onglet actuel, ce qui convient aux notes d'architecture, aux processus internes et aux diagrammes contenant des noms de projets confidentiels.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp data-fude-source-line=\"40\">\u003Cspan data-fude-source-start=\"2306\" data-fude-source-end=\"2451\">Si la syntaxe est invalide, Fude conserve la source sous le message d'erreur. Vous pouvez donc corriger le bloc sans perdre le reste du document.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch2 id=\"user-content-quel-type-de-diagramme-mermaid-choisir-\" data-fude-source-line=\"42\">\u003Cspan data-fude-source-start=\"2456\" data-fude-source-end=\"2496\">Quel type de diagramme Mermaid choisir ?\u003C\u002Fspan>\u003C\u002Fh2>\n\u003Cp data-fude-source-line=\"44\">\u003Cspan data-fude-source-start=\"2498\" data-fude-source-end=\"2614\">La première ligne du bloc détermine le type de diagramme. Choisissez-la en fonction de l'information à transmettre :\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ctable data-fude-source-line=\"46\">\n\u003Cthead>\n\u003Ctr>\n\u003Cth>\u003Cspan data-fude-source-start=\"2618\" data-fude-source-end=\"2624\">Besoin\u003C\u002Fspan>\u003C\u002Fth>\n\u003Cth>\u003Cspan data-fude-source-start=\"2627\" data-fude-source-end=\"2641\">Première ligne\u003C\u002Fspan>\u003C\u002Fth>\n\u003Cth>\u003Cspan data-fude-source-start=\"2644\" data-fude-source-end=\"2657\">Usage courant\u003C\u002Fspan>\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd>\u003Cspan data-fude-source-start=\"2682\" data-fude-source-end=\"2718\">Montrer un processus ou une décision\u003C\u002Fspan>\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>\u003Cspan data-fude-source-start=\"2721\" data-fude-source-end=\"2735\">flowchart LR\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>\u003Cspan data-fude-source-start=\"2738\" data-fude-source-end=\"2777\">Parcours, pipeline, architecture simple\u003C\u002Fspan>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Cspan data-fude-source-start=\"2782\" data-fude-source-end=\"2816\">Montrer des échanges dans le temps\u003C\u002Fspan>\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>\u003Cspan data-fude-source-start=\"2819\" data-fude-source-end=\"2836\">sequenceDiagram\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>\u003Cspan data-fude-source-start=\"2839\" data-fude-source-end=\"2881\">Appels d'API, authentification, événements\u003C\u002Fspan>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Cspan data-fude-source-start=\"2886\" data-fude-source-end=\"2914\">Montrer les états d'un objet\u003C\u002Fspan>\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>\u003Cspan data-fude-source-start=\"2917\" data-fude-source-end=\"2934\">stateDiagram-v2\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>\u003Cspan data-fude-source-start=\"2937\" data-fude-source-end=\"2976\">Cycle de vie, machine à états, workflow\u003C\u002Fspan>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Cspan data-fude-source-start=\"2981\" data-fude-source-end=\"3009\">Montrer la structure du code\u003C\u002Fspan>\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>\u003Cspan data-fude-source-start=\"3012\" data-fude-source-end=\"3026\">classDiagram\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>\u003Cspan data-fude-source-start=\"3029\" data-fude-source-end=\"3063\">Classes, interfaces et dépendances\u003C\u002Fspan>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Cspan data-fude-source-start=\"3068\" data-fude-source-end=\"3096\">Montrer un modèle de données\u003C\u002Fspan>\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>\u003Cspan data-fude-source-start=\"3099\" data-fude-source-end=\"3110\">erDiagram\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>\u003Cspan data-fude-source-start=\"3113\" data-fude-source-end=\"3147\">Entités, relations et cardinalités\u003C\u002Fspan>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Cspan data-fude-source-start=\"3152\" data-fude-source-end=\"3171\">Montrer un planning\u003C\u002Fspan>\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>\u003Cspan data-fude-source-start=\"3174\" data-fude-source-end=\"3181\">gantt\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>\u003Cspan data-fude-source-start=\"3184\" data-fude-source-end=\"3216\">Phases, dépendances et échéances\u003C\u002Fspan>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Cspan data-fude-source-start=\"3221\" data-fude-source-end=\"3245\">Montrer des branches Git\u003C\u002Fspan>\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>\u003Cspan data-fude-source-start=\"3248\" data-fude-source-end=\"3258\">gitGraph\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>\u003Cspan data-fude-source-start=\"3261\" data-fude-source-end=\"3296\">Stratégie de branches et historique\u003C\u002Fspan>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Cspan data-fude-source-start=\"3301\" data-fude-source-end=\"3320\">Organiser des idées\u003C\u002Fspan>\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>\u003Cspan data-fude-source-start=\"3323\" data-fude-source-end=\"3332\">mindmap\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>\u003Cspan data-fude-source-start=\"3335\" data-fude-source-end=\"3367\">Notes, concepts et arborescences\u003C\u002Fspan>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n\u003Cp data-fude-source-line=\"57\">\u003Cspan data-fude-source-start=\"3371\" data-fude-source-end=\"3574\">Les quatre types les plus fréquents dans une documentation technique sont détaillés ci-dessous. Les autres utilisent le même principe : une déclaration sur la première ligne, puis la source du diagramme.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch2 id=\"user-content-exemple-de-flowchart\" data-fude-source-line=\"59\">\u003Cspan data-fude-source-start=\"3579\" data-fude-source-end=\"3599\">Exemple de flowchart\u003C\u002Fspan>\u003C\u002Fh2>\n\u003Cp data-fude-source-line=\"61\">\u003Cspan data-fude-source-start=\"3601\" data-fude-source-end=\"3722\">Les flowcharts conviennent aux arbres de décision, pipelines de build, parcours d'accueil et interactions entre services.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cdiv class=\"fude-mermaid-block\" data-fude-mermaid-source=\"flowchart LR\n  Source[Source Markdown] --> Parse[Analyser le document]\n  Parse --> HasDiagram{Bloc Mermaid ?}\n  HasDiagram -->|Oui| Render[Afficher le diagramme]\n  HasDiagram -->|Non| Read[Afficher le document]\n  Render --> Read\" data-fude-mermaid-id=\"mermaid-1\" data-fude-highlight-disabled=\"true\" data-fude-source-line=\"63\">\u003C\u002Fdiv>\n\u003Cp data-fude-source-line=\"72\">\u003Cspan data-fude-source-start=\"3969\" data-fude-source-end=\"4085\">Le texte entre crochets devient le libellé lisible d'un nœud. Les accolades créent une décision. Des libellés comme \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"4085\" data-fude-source-end=\"4092\">|Oui|\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"4092\" data-fude-source-end=\"4127\"> précisent le sens d'une connexion.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp data-fude-source-line=\"74\">\u003Cspan data-fude-source-start=\"4129\" data-fude-source-end=\"4139\">Remplacez \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"4139\" data-fude-source-end=\"4143\">LR\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"4143\" data-fude-source-end=\"4148\"> par \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"4148\" data-fude-source-end=\"4152\">TD\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"4152\" data-fude-source-end=\"4212\"> lorsqu'une disposition verticale s'adapte mieux à la page :\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cdiv class=\"fude-mermaid-block\" data-fude-mermaid-source=\"flowchart TD\n  Idée --> Brouillon\n  Brouillon --> Relecture\n  Relecture --> Publication\" data-fude-mermaid-id=\"mermaid-2\" data-fude-highlight-disabled=\"true\" data-fude-source-line=\"76\">\u003C\u002Fdiv>\n\u003Cp data-fude-source-line=\"83\">\u003Cspan data-fude-source-start=\"4318\" data-fude-source-end=\"4451\">Sur mobile, changer la direction du diagramme apporte souvent un meilleur résultat que l'ajout de styles ou de nœuds supplémentaires.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch2 id=\"user-content-exemple-de-diagramme-de-séquence\" data-fude-source-line=\"85\">\u003Cspan data-fude-source-start=\"4456\" data-fude-source-end=\"4488\">Exemple de diagramme de séquence\u003C\u002Fspan>\u003C\u002Fh2>\n\u003Cp data-fude-source-line=\"87\">\u003Cspan data-fude-source-start=\"4490\" data-fude-source-end=\"4690\">Un diagramme de séquence représente des messages échangés dans le temps. Il convient aux appels d'API, connexions, traitements asynchrones et interactions entre une application et une base de données.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cdiv class=\"fude-mermaid-block\" data-fude-mermaid-source=\"sequenceDiagram\n  participant Lecteur\n  participant Moteur\n  participant Mermaid\n  Lecteur->>Moteur: Coller le Markdown\n  Moteur->>Mermaid: Envoyer la source\n  Mermaid-->>Moteur: Retourner le SVG\n  Moteur-->>Lecteur: Montrer l'aperçu\" data-fude-mermaid-id=\"mermaid-3\" data-fude-highlight-disabled=\"true\" data-fude-source-line=\"89\">\u003C\u002Fdiv>\n\u003Cp data-fude-source-line=\"100\">\u003Cspan data-fude-source-start=\"4942\" data-fude-source-end=\"5197\">Les participants apparaissent de gauche à droite. Les flèches pleines représentent naturellement une requête, tandis que les flèches en pointillés permettent de distinguer une réponse. La source reste compacte même lorsque plusieurs acteurs interviennent.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch2 id=\"user-content-exemple-de-diagramme-de-classes\" data-fude-source-line=\"102\">\u003Cspan data-fude-source-start=\"5202\" data-fude-source-end=\"5233\">Exemple de diagramme de classes\u003C\u002Fspan>\u003C\u002Fh2>\n\u003Cp data-fude-source-line=\"104\">\u003Cspan data-fude-source-start=\"5235\" data-fude-source-end=\"5419\">Les diagrammes de classes décrivent des types et leurs relations. Dans une documentation technique, ils donnent une vue structurelle rapide sans remplacer une référence d'API complète.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cdiv class=\"fude-mermaid-block\" data-fude-mermaid-source=\"classDiagram\n  class DocumentMarkdown {\n    +string titre\n    +string contenu\n    +afficher()\n  }\n  class BlocMermaid {\n    +string source\n    +afficherSvg()\n  }\n  DocumentMarkdown "1" --> "0..*" BlocMermaid : contient\" data-fude-mermaid-id=\"mermaid-4\" data-fude-highlight-disabled=\"true\" data-fude-source-line=\"106\">\u003C\u002Fdiv>\n\u003Cp data-fude-source-line=\"120\">\u003Cspan data-fude-source-start=\"5656\" data-fude-source-end=\"5810\">Restez sélectif. Afficher chaque propriété et chaque méthode transforme rapidement une carte utile en seconde version du code, plus difficile à maintenir.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch2 id=\"user-content-exemple-de-diagramme-entité-association\" data-fude-source-line=\"122\">\u003Cspan data-fude-source-start=\"5815\" data-fude-source-end=\"5854\">Exemple de diagramme entité-association\u003C\u002Fspan>\u003C\u002Fh2>\n\u003Cp data-fude-source-line=\"124\">\u003Cspan data-fude-source-start=\"5856\" data-fude-source-end=\"6032\">Les diagrammes entité-association résument les données stockées et leurs cardinalités. Ils sont particulièrement utiles dans les notes d'architecture et les plans de migration.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cdiv class=\"fude-mermaid-block\" data-fude-mermaid-source=\"erDiagram\n  PROJET ||--o{ DOCUMENT : contient\n  DOCUMENT ||--o{ DIAGRAMME : inclut\n  PROJET {\n    string id\n    string nom\n  }\n  DOCUMENT {\n    string id\n    string chemin\n  }\n  DIAGRAMME {\n    string id\n    string source\n  }\" data-fude-mermaid-id=\"mermaid-5\" data-fude-highlight-disabled=\"true\" data-fude-source-line=\"126\">\u003C\u002Fdiv>\n\u003Cp data-fude-source-line=\"144\">\u003Cspan data-fude-source-start=\"6276\" data-fude-source-end=\"6421\">Ce diagramme ne remplace ni le vrai schéma ni les migrations. Il sert de vue d'ensemble lisible avant d'entrer dans les détails d'implémentation.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch2 id=\"user-content-écrire-une-source-mermaid-lisible-et-portable\" data-fude-source-line=\"146\">\u003Cspan data-fude-source-start=\"6426\" data-fude-source-end=\"6471\">Écrire une source Mermaid lisible et portable\u003C\u002Fspan>\u003C\u002Fh2>\n\u003Cp data-fude-source-line=\"148\">\u003Cspan data-fude-source-start=\"6473\" data-fude-source-end=\"6640\">Un diagramme peut être valide dans votre lecteur et devenir difficile à maintenir après plusieurs modifications. Quelques conventions évitent la plupart des problèmes.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch3 id=\"user-content-séparer-les-identifiants-des-libellés\" data-fude-source-line=\"150\">\u003Cspan data-fude-source-start=\"6646\" data-fude-source-end=\"6683\">Séparer les identifiants des libellés\u003C\u002Fspan>\u003C\u002Fh3>\n\u003Cp data-fude-source-line=\"152\">\u003Cspan data-fude-source-start=\"6685\" data-fude-source-end=\"6808\">Utilisez des identifiants courts et stables dans les relations, puis placez le texte affiché entre crochets et guillemets :\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cdiv class=\"fude-mermaid-block\" data-fude-mermaid-source=\"flowchart LR\n  draft["Brouillon prêt"] --> review["Relecture technique"]\n  review --> publish["Publication"]\" data-fude-mermaid-id=\"mermaid-6\" data-fude-highlight-disabled=\"true\" data-fude-source-line=\"154\">\u003C\u002Fdiv>\n\u003Cp data-fude-source-line=\"160\">\u003Cspan data-fude-source-start=\"6935\" data-fude-source-end=\"7037\">Vous pourrez modifier « Relecture technique » sans devoir renommer toutes les relations qui utilisent \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"7037\" data-fude-source-end=\"7045\">review\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"7045\" data-fude-source-end=\"7158\">. Les guillemets rendent aussi les espaces, les accents et la ponctuation moins ambigus pour l'analyseur Mermaid.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch3 id=\"user-content-ajouter-des-commentaires-dans-la-source\" data-fude-source-line=\"162\">\u003Cspan data-fude-source-start=\"7164\" data-fude-source-end=\"7203\">Ajouter des commentaires dans la source\u003C\u002Fspan>\u003C\u002Fh3>\n\u003Cp data-fude-source-line=\"164\">\u003Cspan data-fude-source-start=\"7205\" data-fude-source-end=\"7230\">Une ligne commençant par \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"7230\" data-fude-source-end=\"7234\">%%\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"7234\" data-fude-source-end=\"7299\"> est un commentaire Mermaid et n'apparaît pas dans le diagramme :\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cdiv class=\"fude-mermaid-block\" data-fude-mermaid-source=\"flowchart LR\n  %% La validation juridique reste facultative pour un brouillon interne.\n  draft["Brouillon"] --> review["Relecture"] --> publish["Publication"]\" data-fude-mermaid-id=\"mermaid-7\" data-fude-highlight-disabled=\"true\" data-fude-source-line=\"166\">\u003C\u002Fdiv>\n\u003Cp data-fude-source-line=\"172\">\u003Cspan data-fude-source-start=\"7476\" data-fude-source-end=\"7609\">Les commentaires sont utiles pour expliquer une contrainte de mise en page ou la raison d'une relation sans alourdir le rendu visuel.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch3 id=\"user-content-donner-un-titre-et-une-description-accessibles\" data-fude-source-line=\"174\">\u003Cspan data-fude-source-start=\"7615\" data-fude-source-end=\"7661\">Donner un titre et une description accessibles\u003C\u002Fspan>\u003C\u002Fh3>\n\u003Cp data-fude-source-line=\"176\">\u003Cspan data-fude-source-start=\"7663\" data-fude-source-end=\"7679\">Mermaid accepte \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"7679\" data-fude-source-end=\"7689\">accTitle\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"7689\" data-fude-source-end=\"7693\"> et \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"7693\" data-fude-source-end=\"7703\">accDescr\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"7703\" data-fude-source-end=\"7849\"> pour ajouter un titre et une description au SVG généré. Ces informations aident les lecteurs d'écran et donnent un équivalent textuel au schéma :\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cdiv class=\"fude-mermaid-block\" data-fude-mermaid-source=\"flowchart LR\n  accTitle: Cycle de publication d'un document\n  accDescr: Un brouillon passe par une relecture avant sa publication.\n  draft["Brouillon"] --> review["Relecture"] --> publish["Publication"]\" data-fude-mermaid-id=\"mermaid-8\" data-fude-highlight-disabled=\"true\" data-fude-source-line=\"178\">\u003C\u002Fdiv>\n\u003Cp data-fude-source-line=\"185\">\u003Cspan data-fude-source-start=\"8070\" data-fude-source-end=\"8194\">Le titre doit rester court. La description doit transmettre la conclusion utile du diagramme, pas énumérer chaque forme. La \u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Fmermaid.js.org\u002Fconfig\u002Faccessibility.html\" data-fude-link-kind=\"external\" rel=\"noopener noreferrer\">\u003Cspan data-fude-source-start=\"8195\" data-fude-source-end=\"8235\">documentation d'accessibilité de Mermaid\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan data-fude-source-start=\"8286\" data-fude-source-end=\"8340\"> détaille aussi les descriptions sur plusieurs lignes.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch3 id=\"user-content-ne-pas-dépendre-des-interactions-ou-dun-thème-précis\" data-fude-source-line=\"187\">\u003Cspan data-fude-source-start=\"8346\" data-fude-source-end=\"8399\">Ne pas dépendre des interactions ou d'un thème précis\u003C\u002Fspan>\u003C\u002Fh3>\n\u003Cp data-fude-source-line=\"189\">\u003Cspan data-fude-source-start=\"8401\" data-fude-source-end=\"8584\">Fude rend les diagrammes en mode de sécurité strict et adapte leurs couleurs au thème du lecteur. Considérez donc le résultat comme un visuel statique : ne comptez pas sur une action \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"8584\" data-fude-source-end=\"8591\">click\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"8591\" data-fude-source-end=\"8737\">, du HTML dans un libellé ou une position exacte au pixel près. Cette règle améliore également la compatibilité avec les autres lecteurs Markdown.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch2 id=\"user-content-pourquoi-un-diagramme-mermaid-ne-saffiche-pas\" data-fude-source-line=\"191\">\u003Cspan data-fude-source-start=\"8742\" data-fude-source-end=\"8788\">Pourquoi un diagramme Mermaid ne s'affiche pas\u003C\u002Fspan>\u003C\u002Fh2>\n\u003Cp data-fude-source-line=\"193\">\u003Cspan data-fude-source-start=\"8790\" data-fude-source-end=\"8946\">Lorsqu'un diagramme échoue, conservez le reste du document et réduisez progressivement le bloc Mermaid jusqu'à obtenir la plus petite version fonctionnelle.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch3 id=\"user-content-le-bloc-de-code-nindique-pas-mermaid\" data-fude-source-line=\"195\">\u003Cspan data-fude-source-start=\"8952\" data-fude-source-end=\"8989\">Le bloc de code n'indique pas Mermaid\u003C\u002Fspan>\u003C\u002Fh3>\n\u003Cp data-fude-source-line=\"197\">\u003Cspan data-fude-source-start=\"8991\" data-fude-source-end=\"9065\">Le bloc suivant est du code Markdown ordinaire, pas un diagramme Mermaid :\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cpre style=\"background-color:var(--fude-code-background, var(--color-code-bg));color:var(--fude-code-foreground, var(--color-code-text))\" tabindex=\"0\" class=\"shiki fude-code-theme fude-code-block\" data-language=\"markdown\" data-fude-code-block-start=\"9080\" data-fude-code-block-end=\"9110\" data-fude-source-line=\"199\">\u003Ccode class=\"language-markdown\" data-language=\"markdown\" data-fude-code-block-start=\"9080\" data-fude-code-block-end=\"9110\">\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-token-string, color-mix(in srgb, var(--color-accent-primary) 78%, var(--color-code-text) 22%))\">```\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-token-string, color-mix(in srgb, var(--color-accent-primary) 78%, var(--color-code-text) 22%))\">flowchart LR\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-token-string, color-mix(in srgb, var(--color-accent-primary) 78%, var(--color-code-text) 22%))\">  A --> B\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-token-string, color-mix(in srgb, var(--color-accent-primary) 78%, var(--color-code-text) 22%))\">```\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp data-fude-source-line=\"206\">\u003Cspan data-fude-source-start=\"9117\" data-fude-source-end=\"9125\">Ajoutez \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"9125\" data-fude-source-end=\"9134\">mermaid\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"9134\" data-fude-source-end=\"9186\"> immédiatement après les accents graves d'ouverture.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch3 id=\"user-content-un-mot-réservé-est-utilisé-comme-libellé\" data-fude-source-line=\"208\">\u003Cspan data-fude-source-start=\"9192\" data-fude-source-end=\"9232\">Un mot réservé est utilisé comme libellé\u003C\u002Fspan>\u003C\u002Fh3>\n\u003Cp data-fude-source-line=\"210\">\u003Cspan data-fude-source-start=\"9234\" data-fude-source-end=\"9260\">Dans un flowchart, le mot \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"9260\" data-fude-source-end=\"9265\">end\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"9265\" data-fude-source-end=\"9352\"> entièrement en minuscules peut être interprété comme la fin d'un sous-graphe. Écrivez \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"9352\" data-fude-source-end=\"9357\">End\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"9357\" data-fude-source-end=\"9359\">, \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"9359\" data-fude-source-end=\"9364\">END\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"9364\" data-fude-source-end=\"9435\"> ou utilisez un identifiant distinct avec un libellé entre guillemets :\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cdiv class=\"fude-mermaid-block\" data-fude-mermaid-source=\"flowchart LR\n  start["Début"] --> finish["Fin"]\" data-fude-mermaid-id=\"mermaid-9\" data-fude-highlight-disabled=\"true\" data-fude-source-line=\"212\">\u003C\u002Fdiv>\n\u003Ch3 id=\"user-content-le-type-de-diagramme-est-mal-orthographié\" data-fude-source-line=\"217\">\u003Cspan data-fude-source-start=\"9505\" data-fude-source-end=\"9546\">Le type de diagramme est mal orthographié\u003C\u002Fspan>\u003C\u002Fh3>\n\u003Cp data-fude-source-line=\"219\">\u003Cspan data-fude-source-start=\"9548\" data-fude-source-end=\"9625\">La première ligne doit contenir une déclaration prise en charge, par exemple \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"9625\" data-fude-source-end=\"9636\">flowchart\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"9636\" data-fude-source-end=\"9638\">, \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"9638\" data-fude-source-end=\"9655\">sequenceDiagram\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"9655\" data-fude-source-end=\"9657\">, \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"9657\" data-fude-source-end=\"9671\">classDiagram\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"9671\" data-fude-source-end=\"9675\"> ou \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"9675\" data-fude-source-end=\"9686\">erDiagram\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"9686\" data-fude-source-end=\"9732\">. La casse compte pour des déclarations comme \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"9732\" data-fude-source-end=\"9749\">sequenceDiagram\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"9749\" data-fude-source-end=\"9750\">.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch3 id=\"user-content-un-libellé-rend-la-grammaire-ambiguë\" data-fude-source-line=\"221\">\u003Cspan data-fude-source-start=\"9756\" data-fude-source-end=\"9792\">Un libellé rend la grammaire ambiguë\u003C\u002Fspan>\u003C\u002Fh3>\n\u003Cp data-fude-source-line=\"223\">\u003Cspan data-fude-source-start=\"9794\" data-fude-source-end=\"9942\">Certains signes de ponctuation ont aussi une signification dans Mermaid. Donnez un identifiant au nœud puis placez le texte lisible entre crochets :\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cdiv class=\"fude-mermaid-block\" data-fude-mermaid-source=\"flowchart LR\n  Start[Début : lire le fichier] --> Finish[Fin : afficher l'aperçu]\" data-fude-mermaid-id=\"mermaid-10\" data-fude-highlight-disabled=\"true\" data-fude-source-line=\"225\">\u003C\u002Fdiv>\n\u003Cp data-fude-source-line=\"230\">\u003Cspan data-fude-source-start=\"10042\" data-fude-source-end=\"10184\">Si un libellé complexe échoue encore, remplacez-le temporairement par un seul mot. Rétablissez le texte initial une fois la structure validée.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch3 id=\"user-content-le-diagramme-est-trop-grand-pour-la-page\" data-fude-source-line=\"232\">\u003Cspan data-fude-source-start=\"10190\" data-fude-source-end=\"10230\">Le diagramme est trop grand pour la page\u003C\u002Fspan>\u003C\u002Fh3>\n\u003Cp data-fude-source-line=\"234\">\u003Cspan data-fude-source-start=\"10232\" data-fude-source-end=\"10482\">Un diagramme peut être valide et rester inconfortable à lire. Essayez une autre direction, divisez un grand schéma en deux diagrammes ciblés ou retirez les détails déjà présents dans le texte. Le diagramme doit clarifier le document, pas le recopier.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch3 id=\"user-content-deux-lecteurs-produisent-un-rendu-légèrement-différent\" data-fude-source-line=\"236\">\u003Cspan data-fude-source-start=\"10488\" data-fude-source-end=\"10542\">Deux lecteurs produisent un rendu légèrement différent\u003C\u002Fspan>\u003C\u002Fh3>\n\u003Cp data-fude-source-line=\"238\">\u003Cspan data-fude-source-start=\"10544\" data-fude-source-end=\"10749\">Mermaid évolue et les produits n'intègrent pas toujours la même version ou le même thème. Testez le diagramme dans sa destination finale, évitez de dépendre d'une disposition au pixel près et consultez la \u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Fmermaid.js.org\u002Fintro\u002F\" data-fude-link-kind=\"external\" rel=\"noopener noreferrer\">\u003Cspan data-fude-source-start=\"10750\" data-fude-source-end=\"10785\">documentation officielle de Mermaid\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan data-fude-source-start=\"10817\" data-fude-source-end=\"10839\"> pour le type utilisé.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch2 id=\"user-content-compatibilité-avec-github-gitlab-et-les-lecteurs-markdown\" data-fude-source-line=\"240\">\u003Cspan data-fude-source-start=\"10844\" data-fude-source-end=\"10902\">Compatibilité avec GitHub, GitLab et les lecteurs Markdown\u003C\u002Fspan>\u003C\u002Fh2>\n\u003Cp data-fude-source-line=\"242\">\u003Ca href=\"https:\u002F\u002Fdocs.github.com\u002Ffr\u002Fget-started\u002Fwriting-on-github\u002Fworking-with-advanced-formatting\u002Fcreating-diagrams\" data-fude-link-kind=\"external\" rel=\"noopener noreferrer\">\u003Cspan data-fude-source-start=\"10905\" data-fude-source-end=\"10935\">GitHub prend en charge Mermaid\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan data-fude-source-start=\"11045\" data-fude-source-end=\"11135\"> dans les fichiers Markdown, les issues, les pull requests, les discussions et les wikis. \u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Fdocs.gitlab.com\u002Fuser\u002Fmarkdown\u002F#mermaid\" data-fude-link-kind=\"external\" rel=\"noopener noreferrer\">\u003Cspan data-fude-source-start=\"11136\" data-fude-source-end=\"11186\">GitLab prend également en charge les blocs Mermaid\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan data-fude-source-start=\"11235\" data-fude-source-end=\"11339\">, mais chaque plateforme choisit sa propre version de la bibliothèque et ses propres règles de sécurité.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp data-fude-source-line=\"244\">\u003Cspan data-fude-source-start=\"11341\" data-fude-source-end=\"11555\">Un diagramme peut donc fonctionner dans Fude et échouer ailleurs s'il utilise une syntaxe ajoutée récemment, une configuration locale ou une interaction désactivée par la plateforme. Pour maximiser la portabilité :\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cul data-fude-source-line=\"246\">\n\u003Cli>\u003Cspan data-fude-source-start=\"11559\" data-fude-source-end=\"11595\">privilégiez les types stables comme \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"11595\" data-fude-source-end=\"11606\">flowchart\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"11606\" data-fude-source-end=\"11608\">, \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"11608\" data-fude-source-end=\"11625\">sequenceDiagram\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"11625\" data-fude-source-end=\"11627\">, \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"11627\" data-fude-source-end=\"11641\">classDiagram\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"11641\" data-fude-source-end=\"11645\"> et \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"11645\" data-fude-source-end=\"11656\">erDiagram\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"11656\" data-fude-source-end=\"11658\"> ;\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli>\u003Cspan data-fude-source-start=\"11661\" data-fude-source-end=\"11727\">gardez des identifiants simples et des libellés entre guillemets ;\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli>\u003Cspan data-fude-source-start=\"11730\" data-fude-source-end=\"11828\">évitez les liens interactifs, le HTML et les réglages de thème indispensables à la compréhension ;\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli>\u003Cspan data-fude-source-start=\"11831\" data-fude-source-end=\"11897\">testez le document dans sa destination finale avant de le publier.\u003C\u002Fspan>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp data-fude-source-line=\"251\">\u003Cspan data-fude-source-start=\"11899\" data-fude-source-end=\"12064\">Un lecteur Markdown sans prise en charge de Mermaid affichera simplement le bloc de code. Le texte qui précède le diagramme doit donc continuer à expliquer son rôle.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch2 id=\"user-content-mermaid-au-milieu-dun-vrai-document-markdown\" data-fude-source-line=\"253\">\u003Cspan data-fude-source-start=\"12069\" data-fude-source-end=\"12114\">Mermaid au milieu d'un vrai document Markdown\u003C\u002Fspan>\u003C\u002Fh2>\n\u003Cp data-fude-source-line=\"255\">\u003Cspan data-fude-source-start=\"12116\" data-fude-source-end=\"12263\">La force d'un visualiseur Mermaid intégré à un lecteur Markdown est le contexte. Un diagramme peut suivre directement son explication, à côté d'un \u003C\u002Fspan>\u003Ca href=\"\u002Ffr\u002Fblog\u002Fmarkdown-tableaux-guide-complet\u002F\" data-fude-link-kind=\"unopenable\">\u003Cspan data-fude-source-start=\"12264\" data-fude-source-end=\"12280\">tableau Markdown\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan data-fude-source-start=\"12324\" data-fude-source-end=\"12378\">, d'exemples de code, de liens ou de listes de tâches.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp data-fude-source-line=\"257\">\u003Cspan data-fude-source-start=\"12380\" data-fude-source-end=\"12654\">Utilisez le texte pour expliquer pourquoi le système se comporte ainsi. Réservez le diagramme aux relations, aux directions et aux séquences. Ajoutez une courte phrase avant chaque schéma afin que son rôle reste compréhensible même dans un lecteur qui n'affiche pas Mermaid.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp data-fude-source-line=\"259\">\u003Cspan data-fude-source-start=\"12656\" data-fude-source-end=\"12686\">Si vous avez reçu un document \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"12686\" data-fude-source-end=\"12691\">.md\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"12691\" data-fude-source-end=\"12737\"> inconnu, commencez par le guide consacré aux \u003C\u002Fspan>\u003Ca href=\"\u002Ffr\u002Fblog\u002Ffichier-markdown-comment-ouvrir\u002F\" data-fude-link-kind=\"unopenable\">\u003Cspan data-fude-source-start=\"12738\" data-fude-source-end=\"12775\">fichiers Markdown et à leur ouverture\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan data-fude-source-start=\"12819\" data-fude-source-end=\"12856\">. Collez ensuite son contenu dans le \u003C\u002Fspan>\u003Ca href=\"\u002Ffr\u002Flecteur-markdown\u002F\" data-fude-link-kind=\"unopenable\">\u003Cspan data-fude-source-start=\"12857\" data-fude-source-end=\"12882\">lecteur Markdown en ligne\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan data-fude-source-start=\"12906\" data-fude-source-end=\"12988\"> et utilisez l'exemple Mermaid chaque fois que vous avez besoin d'une base propre.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp data-fude-source-line=\"261\">\u003Cspan data-fude-source-start=\"12990\" data-fude-source-end=\"13095\">Pour organiser une bibliothèque locale de documents Markdown avec thèmes, projets et lecture hors ligne, \u003C\u002Fspan>\u003Ca href=\"\u002Ffr\u002F#download\" data-fude-link-kind=\"unopenable\">\u003Cspan data-fude-source-start=\"13096\" data-fude-source-end=\"13123\">téléchargez Fude pour macOS\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan data-fude-source-start=\"13139\" data-fude-source-end=\"13140\">.\u003C\u002Fspan>\u003C\u002Fp>","\nVous avez un diagramme Mermaid dans un README ou un fichier Markdown et vous voulez vérifier son rendu avant de le publier ? Le lecteur Markdown gratuit de Fude affiche le code et le diagramme côte à côte, directement dans votre navigateur.\n\nMermaid transforme une syntaxe textuelle en diagramme intégré au document Markdown. Dans ce guide, vous allez ajouter un bloc de code Mermaid, le prévisualiser avec l'exemple Fude, tester les principaux types de diagrammes et corriger les erreurs de rendu courantes.\n\n## Le plus petit bloc Mermaid valide dans Markdown\n\nUne source Mermaid doit être placée dans un bloc de code balisé `mermaid` :\n\n````markdown\n```mermaid\nflowchart LR\n  Brouillon --> Relecture\n  Relecture --> Publication\n```\n````\n\nLes trois accents graves ouvrent et ferment le bloc de code. Le mot `mermaid` indique au lecteur compatible qu'il doit interpréter le contenu comme un diagramme, et non comme du code ordinaire.\n\nLa première ligne à l'intérieur du bloc définit le type de diagramme. Dans cet exemple :\n\n- `flowchart` crée un diagramme de flux ;\n- `LR` organise les éléments de gauche à droite ;\n- `Brouillon --> Relecture` crée deux nœuds reliés par une flèche.\n\nSans le mot `mermaid` après les trois premiers accents graves, un lecteur Markdown affiche normalement le code source, mais il ne peut pas deviner qu'un diagramme doit être généré.\n\n## Prévisualiser Mermaid avec Fude\n\nLe [lecteur Markdown gratuit de Fude](\u002Ffr\u002Flecteur-markdown\u002F) utilise le même moteur de rendu que l'application desktop et l'exécute localement dans le navigateur.\n\n1. Ouvrez le lecteur et choisissez **Exemple Mermaid**.\n2. Remplacez les nœuds et les flèches du flowchart par votre propre source.\n3. Observez le diagramme se mettre à jour dans le panneau d'aperçu.\n\nVous pouvez également coller un README ou un document `.md` complet contenant plusieurs diagrammes. Les titres, paragraphes, tableaux, blocs de code colorés et diagrammes Mermaid restent dans le même aperçu. Vous vérifiez ainsi le document que les lecteurs verront réellement plutôt qu'un dessin isolé de son contexte.\n\nLe contenu saisi n'est pas envoyé au serveur. Tout le rendu reste dans l'onglet actuel, ce qui convient aux notes d'architecture, aux processus internes et aux diagrammes contenant des noms de projets confidentiels.\n\nSi la syntaxe est invalide, Fude conserve la source sous le message d'erreur. Vous pouvez donc corriger le bloc sans perdre le reste du document.\n\n## Quel type de diagramme Mermaid choisir ?\n\nLa première ligne du bloc détermine le type de diagramme. Choisissez-la en fonction de l'information à transmettre :\n\n| Besoin | Première ligne | Usage courant |\n| --- | --- | --- |\n| Montrer un processus ou une décision | `flowchart LR` | Parcours, pipeline, architecture simple |\n| Montrer des échanges dans le temps | `sequenceDiagram` | Appels d'API, authentification, événements |\n| Montrer les états d'un objet | `stateDiagram-v2` | Cycle de vie, machine à états, workflow |\n| Montrer la structure du code | `classDiagram` | Classes, interfaces et dépendances |\n| Montrer un modèle de données | `erDiagram` | Entités, relations et cardinalités |\n| Montrer un planning | `gantt` | Phases, dépendances et échéances |\n| Montrer des branches Git | `gitGraph` | Stratégie de branches et historique |\n| Organiser des idées | `mindmap` | Notes, concepts et arborescences |\n\nLes quatre types les plus fréquents dans une documentation technique sont détaillés ci-dessous. Les autres utilisent le même principe : une déclaration sur la première ligne, puis la source du diagramme.\n\n## Exemple de flowchart\n\nLes flowcharts conviennent aux arbres de décision, pipelines de build, parcours d'accueil et interactions entre services.\n\n```mermaid\nflowchart LR\n  Source[Source Markdown] --> Parse[Analyser le document]\n  Parse --> HasDiagram{Bloc Mermaid ?}\n  HasDiagram -->|Oui| Render[Afficher le diagramme]\n  HasDiagram -->|Non| Read[Afficher le document]\n  Render --> Read\n```\n\nLe texte entre crochets devient le libellé lisible d'un nœud. Les accolades créent une décision. Des libellés comme `|Oui|` précisent le sens d'une connexion.\n\nRemplacez `LR` par `TD` lorsqu'une disposition verticale s'adapte mieux à la page :\n\n```mermaid\nflowchart TD\n  Idée --> Brouillon\n  Brouillon --> Relecture\n  Relecture --> Publication\n```\n\nSur mobile, changer la direction du diagramme apporte souvent un meilleur résultat que l'ajout de styles ou de nœuds supplémentaires.\n\n## Exemple de diagramme de séquence\n\nUn diagramme de séquence représente des messages échangés dans le temps. Il convient aux appels d'API, connexions, traitements asynchrones et interactions entre une application et une base de données.\n\n```mermaid\nsequenceDiagram\n  participant Lecteur\n  participant Moteur\n  participant Mermaid\n  Lecteur->>Moteur: Coller le Markdown\n  Moteur->>Mermaid: Envoyer la source\n  Mermaid-->>Moteur: Retourner le SVG\n  Moteur-->>Lecteur: Montrer l'aperçu\n```\n\nLes participants apparaissent de gauche à droite. Les flèches pleines représentent naturellement une requête, tandis que les flèches en pointillés permettent de distinguer une réponse. La source reste compacte même lorsque plusieurs acteurs interviennent.\n\n## Exemple de diagramme de classes\n\nLes diagrammes de classes décrivent des types et leurs relations. Dans une documentation technique, ils donnent une vue structurelle rapide sans remplacer une référence d'API complète.\n\n```mermaid\nclassDiagram\n  class DocumentMarkdown {\n    +string titre\n    +string contenu\n    +afficher()\n  }\n  class BlocMermaid {\n    +string source\n    +afficherSvg()\n  }\n  DocumentMarkdown \"1\" --> \"0..*\" BlocMermaid : contient\n```\n\nRestez sélectif. Afficher chaque propriété et chaque méthode transforme rapidement une carte utile en seconde version du code, plus difficile à maintenir.\n\n## Exemple de diagramme entité-association\n\nLes diagrammes entité-association résument les données stockées et leurs cardinalités. Ils sont particulièrement utiles dans les notes d'architecture et les plans de migration.\n\n```mermaid\nerDiagram\n  PROJET ||--o{ DOCUMENT : contient\n  DOCUMENT ||--o{ DIAGRAMME : inclut\n  PROJET {\n    string id\n    string nom\n  }\n  DOCUMENT {\n    string id\n    string chemin\n  }\n  DIAGRAMME {\n    string id\n    string source\n  }\n```\n\nCe diagramme ne remplace ni le vrai schéma ni les migrations. Il sert de vue d'ensemble lisible avant d'entrer dans les détails d'implémentation.\n\n## Écrire une source Mermaid lisible et portable\n\nUn diagramme peut être valide dans votre lecteur et devenir difficile à maintenir après plusieurs modifications. Quelques conventions évitent la plupart des problèmes.\n\n### Séparer les identifiants des libellés\n\nUtilisez des identifiants courts et stables dans les relations, puis placez le texte affiché entre crochets et guillemets :\n\n```mermaid\nflowchart LR\n  draft[\"Brouillon prêt\"] --> review[\"Relecture technique\"]\n  review --> publish[\"Publication\"]\n```\n\nVous pourrez modifier « Relecture technique » sans devoir renommer toutes les relations qui utilisent `review`. Les guillemets rendent aussi les espaces, les accents et la ponctuation moins ambigus pour l'analyseur Mermaid.\n\n### Ajouter des commentaires dans la source\n\nUne ligne commençant par `%%` est un commentaire Mermaid et n'apparaît pas dans le diagramme :\n\n```mermaid\nflowchart LR\n  %% La validation juridique reste facultative pour un brouillon interne.\n  draft[\"Brouillon\"] --> review[\"Relecture\"] --> publish[\"Publication\"]\n```\n\nLes commentaires sont utiles pour expliquer une contrainte de mise en page ou la raison d'une relation sans alourdir le rendu visuel.\n\n### Donner un titre et une description accessibles\n\nMermaid accepte `accTitle` et `accDescr` pour ajouter un titre et une description au SVG généré. Ces informations aident les lecteurs d'écran et donnent un équivalent textuel au schéma :\n\n```mermaid\nflowchart LR\n  accTitle: Cycle de publication d'un document\n  accDescr: Un brouillon passe par une relecture avant sa publication.\n  draft[\"Brouillon\"] --> review[\"Relecture\"] --> publish[\"Publication\"]\n```\n\nLe titre doit rester court. La description doit transmettre la conclusion utile du diagramme, pas énumérer chaque forme. La [documentation d'accessibilité de Mermaid](https:\u002F\u002Fmermaid.js.org\u002Fconfig\u002Faccessibility.html) détaille aussi les descriptions sur plusieurs lignes.\n\n### Ne pas dépendre des interactions ou d'un thème précis\n\nFude rend les diagrammes en mode de sécurité strict et adapte leurs couleurs au thème du lecteur. Considérez donc le résultat comme un visuel statique : ne comptez pas sur une action `click`, du HTML dans un libellé ou une position exacte au pixel près. Cette règle améliore également la compatibilité avec les autres lecteurs Markdown.\n\n## Pourquoi un diagramme Mermaid ne s'affiche pas\n\nLorsqu'un diagramme échoue, conservez le reste du document et réduisez progressivement le bloc Mermaid jusqu'à obtenir la plus petite version fonctionnelle.\n\n### Le bloc de code n'indique pas Mermaid\n\nLe bloc suivant est du code Markdown ordinaire, pas un diagramme Mermaid :\n\n````markdown\n```\nflowchart LR\n  A --> B\n```\n````\n\nAjoutez `mermaid` immédiatement après les accents graves d'ouverture.\n\n### Un mot réservé est utilisé comme libellé\n\nDans un flowchart, le mot `end` entièrement en minuscules peut être interprété comme la fin d'un sous-graphe. Écrivez `End`, `END` ou utilisez un identifiant distinct avec un libellé entre guillemets :\n\n```mermaid\nflowchart LR\n  start[\"Début\"] --> finish[\"Fin\"]\n```\n\n### Le type de diagramme est mal orthographié\n\nLa première ligne doit contenir une déclaration prise en charge, par exemple `flowchart`, `sequenceDiagram`, `classDiagram` ou `erDiagram`. La casse compte pour des déclarations comme `sequenceDiagram`.\n\n### Un libellé rend la grammaire ambiguë\n\nCertains signes de ponctuation ont aussi une signification dans Mermaid. Donnez un identifiant au nœud puis placez le texte lisible entre crochets :\n\n```mermaid\nflowchart LR\n  Start[Début : lire le fichier] --> Finish[Fin : afficher l'aperçu]\n```\n\nSi un libellé complexe échoue encore, remplacez-le temporairement par un seul mot. Rétablissez le texte initial une fois la structure validée.\n\n### Le diagramme est trop grand pour la page\n\nUn diagramme peut être valide et rester inconfortable à lire. Essayez une autre direction, divisez un grand schéma en deux diagrammes ciblés ou retirez les détails déjà présents dans le texte. Le diagramme doit clarifier le document, pas le recopier.\n\n### Deux lecteurs produisent un rendu légèrement différent\n\nMermaid évolue et les produits n'intègrent pas toujours la même version ou le même thème. Testez le diagramme dans sa destination finale, évitez de dépendre d'une disposition au pixel près et consultez la [documentation officielle de Mermaid](https:\u002F\u002Fmermaid.js.org\u002Fintro\u002F) pour le type utilisé.\n\n## Compatibilité avec GitHub, GitLab et les lecteurs Markdown\n\n[GitHub prend en charge Mermaid](https:\u002F\u002Fdocs.github.com\u002Ffr\u002Fget-started\u002Fwriting-on-github\u002Fworking-with-advanced-formatting\u002Fcreating-diagrams) dans les fichiers Markdown, les issues, les pull requests, les discussions et les wikis. [GitLab prend également en charge les blocs Mermaid](https:\u002F\u002Fdocs.gitlab.com\u002Fuser\u002Fmarkdown\u002F#mermaid), mais chaque plateforme choisit sa propre version de la bibliothèque et ses propres règles de sécurité.\n\nUn diagramme peut donc fonctionner dans Fude et échouer ailleurs s'il utilise une syntaxe ajoutée récemment, une configuration locale ou une interaction désactivée par la plateforme. Pour maximiser la portabilité :\n\n- privilégiez les types stables comme `flowchart`, `sequenceDiagram`, `classDiagram` et `erDiagram` ;\n- gardez des identifiants simples et des libellés entre guillemets ;\n- évitez les liens interactifs, le HTML et les réglages de thème indispensables à la compréhension ;\n- testez le document dans sa destination finale avant de le publier.\n\nUn lecteur Markdown sans prise en charge de Mermaid affichera simplement le bloc de code. Le texte qui précède le diagramme doit donc continuer à expliquer son rôle.\n\n## Mermaid au milieu d'un vrai document Markdown\n\nLa force d'un visualiseur Mermaid intégré à un lecteur Markdown est le contexte. Un diagramme peut suivre directement son explication, à côté d'un [tableau Markdown](\u002Ffr\u002Fblog\u002Fmarkdown-tableaux-guide-complet\u002F), d'exemples de code, de liens ou de listes de tâches.\n\nUtilisez le texte pour expliquer pourquoi le système se comporte ainsi. Réservez le diagramme aux relations, aux directions et aux séquences. Ajoutez une courte phrase avant chaque schéma afin que son rôle reste compréhensible même dans un lecteur qui n'affiche pas Mermaid.\n\nSi vous avez reçu un document `.md` inconnu, commencez par le guide consacré aux [fichiers Markdown et à leur ouverture](\u002Ffr\u002Fblog\u002Ffichier-markdown-comment-ouvrir\u002F). Collez ensuite son contenu dans le [lecteur Markdown en ligne](\u002Ffr\u002Flecteur-markdown\u002F) et utilisez l'exemple Mermaid chaque fois que vous avez besoin d'une base propre.\n\nPour organiser une bibliothèque locale de documents Markdown avec thèmes, projets et lecture hors ligne, [téléchargez Fude pour macOS](\u002Ffr\u002F#download).\n",[993,996],{"locale":994,"slug":995},"en","preview-mermaid-diagrams-in-markdown-online",{"locale":997,"slug":998},"fr","previsualiser-diagrammes-mermaid-markdown-en-ligne",{"title":1000,"path":1001,"stem":1002,"description":1003,"children":-1},"Citations Markdown : blocs, imbrication et callouts","\u002Ffr\u002Fblog\u002Fcitations-markdown-blocs-imbrication-callouts","fr\u002Fblog\u002F11.citations-markdown-blocs-imbrication-callouts","Apprenez à créer et imbriquer des citations Markdown, ajouter une source et utiliser les callouts NOTE, TIP, IMPORTANT, WARNING et CAUTION.",1792599022684]