Dessine tes schémas en les écrivant : découvre mermaid

Niveau de difficulté : ✯☆☆

Préambule

Souviens-toi de la dernière fois que tu as fait un diagramme de flux dans PowerPoint.

Tu poses une première boîte. Puis une deuxième. Tu tires une flèche entre les deux : elle se décroche. Tu la remets. Tu alignes tout ça à la souris, au pixel près, avec les petites lignes vertes qui apparaissent et disparaissent. Quarante minutes plus tard, c’est propre.

Et le lendemain, ta direction ajoute une étape au milieu.

Tu recommences.

Il existe une autre manière de faire. Tu écris trois lignes de texte, et le schéma se dessine tout seul. Tu veux ajouter une étape ? Tu ajoutes une ligne. La mise en page se refait automatiquement.

Ça s’appelle mermaid, c’est gratuit, et le schéma de la section « Le markdown et le mermaid », à la fin de mon article sur le markdown, a été réalisé avec ce système.

💡 Lis l’article sur le markdown d’abord
Mermaid vit à l’intérieur du markdown, et je vais m’appuyer sur ses conventions. Si les # et les triples accents graves ne te disent rien, commence par là. Un quart d’heure, et tu reviens.

Le principe, en une image

Tu écris ça :

flowchart TD
    A["Inscription"] --> B["Test de positionnement"]
    B --> C["Module 1"]
    C --> D["Évaluation"]

Et, à condition de le coller au bon endroit, tu obtiens ça :

flowchart TD
    A["Inscription"] --> B["Test de positionnement"]
    B --> C["Module 1"]
    C --> D["Évaluation"]

Voilà. C’est tout le concept. Du texte qui devient un dessin.

⚠️ Le dessin n’apparaît pas tout seul
Ces quatre lignes ne sont que du texte. Pour qu’elles deviennent un schéma, il faut un logiciel qui interprète le mermaid, c’est-à-dire qui lit le code et le transforme en dessin à l’écran. Colle-les dans un courriel ou dans Word : tu verras quatre lignes de texte, rien de plus.
Heureusement, beaucoup d’outils savent le faire :

• Notion, Obsidian, GitHub l’affichent directement, sans rien installer ;
• mermaid.live, l’éditeur officiel en ligne, gratuit et sans inscription : tu colles le code à gauche, le schéma apparaît à droite ;
• WordPress, avec une extension comme MerPress (n3f, 2026). C’est elle qui dessine les schémas bruts que tu vois sur ce site : ici, le code mermaid devient un dessin directement dans l’article ;
• Google Docs, via un module complémentaire (une extension à ajouter au logiciel) comme Mermaid – Diagramming and charting tool, de Renan Le Caro (Le Caro, 2025) ;
• Canva, dont l’IA transforme ton code en infographie colorée, que tu retouches ensuite comme n’importe quel design ;
• Excalidraw, un tableau blanc en ligne qui transforme ton code en dessin au trait, retouchable à la main ;
• les IA comme Claude ou ChatGPT, qui écrivent le code et, selon l’interface, affichent le schéma. Et comme tu leur parles en français, tu peux aussi leur demander de l’habiller à ton goût : couleurs de ton établissement, typographie, style plus sobre ou plus illustré. On y revient dans « Rendre tes schémas nettement plus beaux ».

Pour essayer les exemples de cet article, le plus simple est d’ouvrir mermaid.live dans un autre onglet. Tout le détail est plus bas, dans « Où est-ce que ça marche ? », et les manipulations pas à pas dans « Pas à pas : ton schéma dans Notion, Google Docs, WordPress et Canva ».

Mermaid est une petite bibliothèque de programmation créée en 2014 par Knut Sveidqvist, aujourd’hui dans sa version 12, capable de produire près de trente types de schémas différents : diagrammes de flux, frises chronologiques, cartes mentales, plannings, diagrammes de séquence (Mermaid, 2026a, 2026b). Sa syntaxe s’inspire volontairement du markdown : simple, lisible, tapée au clavier.

⚠️ Ce n’est pas un outil de dessin
Tu ne choisis ni la position des boîtes, ni leur taille, ni la courbure des flèches. C’est volontaire. Tu décris la logique, mermaid s’occupe de la géométrie. Si tu veux du sur-mesure graphique, reste sur Canva, même si, on le verra plus bas, l’IA peut faire des miracles. Si tu veux un schéma juste, clair et modifiable en dix secondes, tu es au bon endroit.

Pourquoi ça vaut le coup pour toi

Tu modifies en cinq secondes. Une étape s’ajoute au milieu d’une procédure ? Une ligne. Tout se réorganise. C’est l’argument massue, et à lui seul il justifie l’apprentissage.

Tu n’as pas besoin de savoir dessiner. L’alignement est automatique. Tes schémas seront toujours propres, même si tu es fâché avec la souris.

Tes schémas sont cohérents entre eux. Vingt schémas écrits en mermaid se ressemblent. Vingt schémas dessinés à la main dans PowerPoint, non.

L’IA en produit très bien. Tu décris ton processus en français, tu demandes du mermaid, tu récupères le code. On y revient plus bas, c’est probablement la porte d’entrée la plus rapide.

C’est du texte. Donc ça se range dans un fichier, ça se compare, ça se partage, ça se cherche. Le diagramme de flux d’une procédure d’établissement, écrit en mermaid, tient dans un courriel.

La syntaxe de base : le diagramme de flux

Le diagramme de flux (flowchart en anglais) enchaîne des étapes reliées par des flèches, avec d’éventuels points de décision. C’est le type que tu utiliseras dans nonante pour cent des cas. Trois notions suffisent.

Le sens de lecture

La première ligne annonce le type et la direction :

• flowchart TD : de haut en bas (top-down)
• flowchart LR : de gauche à droite (left-right)

TD pour une procédure, LR pour un enchaînement chronologique. Change les deux lettres, tout pivote.

Les boîtes et leurs formes

Chaque boîte a un identifiant court (à toi, jamais affiché) et un libellé (ce qu’on lit). La forme dépend des caractères qui entourent le libellé :

⚠️ Deux conventions à prendre tout de suite
Un : mets toujours le libellé entre guillemets. A["Bilan (actif)"] plutôt que A[Bilan (actif)]. Les parenthèses, crochets et accolades servent à définir les formes : sans guillemets, le moindre libellé qui en contient fait planter le schéma. Les guillemets règlent le problème une fois pour toutes, alors autant en prendre l’habitude dès le premier schéma.
Deux : une majuscule au premier mot seulement. « Test de positionnement », pas « Test de Positionnement ». C’est la règle typographique française ordinaire, et elle vaut pour les libellés comme pour les titres. Les noms propres et les acronymes gardent évidemment la leur : « Entrée dans Moodle », « Validation par le CPEONS ».

Ces règles, tu dois aussi les imposer si tu utilises l’IA. Je te propose de copier ces contraintes, elles pourront te servir :

## Graphiques et illustrations

Les schémas au format Mermaid au sein du document doivent respecter ces contraintes :

- Entoure le nom des nœuds avec des guillemets "".
- Les titres, noms des nœuds et concepts prennent une majuscule au premier mot seulement, sauf exception.

Les flèches

Une ligne de mermaid se lit comme une phrase : boîte de départ, flèche, boîte d’arrivée. A --> B veut dire « de la boîte A, une flèche va vers la boîte B ». A et B sont les identifiants des boîtes, pas du texte affiché.

La forme de la flèche dépend des caractères qui la composent :

Pour écrire un mot sur la flèche, place-le entre deux barres verticales, juste après la flèche :

C -->|Oui| D

Ça se lit : « de la boîte C, une flèche portant le mot Oui va vers la boîte D ». L’étiquette sur la flèche, c’est ce qui rend un arbre de décision lisible. Ne t’en prive pas.

Boîtes et flèches sur la même ligne

Dans un vrai schéma, tu combines les deux : la première fois qu’une boîte apparaît, tu écris son identifiant suivi de son libellé et de sa forme ; ensuite, tu la rappelles par son identifiant seul.

A("Candidat se présente") --> B["Entretien d'accueil"]
B --> C{"Prérequis validés ?"}
C -->|Oui| D["Inscription directe"]

Ligne par ligne :

1. La boîte A, arrondie, « Candidat se présente », pointe vers la boîte B, rectangulaire, « Entretien d’accueil ».
2. La boîte B, déjà définie, pointe vers la boîte C, un losange, « Prérequis validés ? ».
3. De la boîte C part une flèche marquée Oui, vers la boîte D, rectangulaire, « Inscription directe ».

Un exemple complet

flowchart TD
    A("Candidat se présente") --> B["Entretien d'accueil"]
    B --> C{"Prérequis validés ?"}
    C -->|Oui| D["Inscription directe"]
    C -->|Non| E["Test de positionnement"]
    E --> F{"Résultat suffisant ?"}
    F -->|Oui| D
    F -->|Non| G["Orientation vers<br/>module préparatoire"]
    D --> H("Entrée en formation")
    G --> H

flowchart TD
    A("Candidat se présente") --> B["Entretien d'accueil"]
    B --> C{"Prérequis validés ?"}
    C -->|Oui| D["Inscription directe"]
    C -->|Non| E["Test de positionnement"]
    E --> F{"Résultat suffisant ?"}
    F -->|Oui| D
    F -->|Non| G["Orientation vers<br/>module préparatoire"]
    D --> H("Entrée en formation")
    G --> H

Onze lignes. Une procédure d’admission complète, avec deux points de décision et deux chemins qui se rejoignent. Essaie de faire ça en quarante minutes dans PowerPoint.

Remarque le <br/> dans la dernière boîte : c’est le retour à la ligne forcé. Et remarque surtout que D et H sont appelés deux fois : mermaid comprend qu’il s’agit de la même boîte et fait converger les flèches.

Les autres types qui servent vraiment en formation

Mermaid en propose près de trente. En voici cinq qui trouvent leur place dans le quotidien d’un formateur d’adultes.

La carte mentale

Pour structurer un cours, préparer un brainstorming, résumer un chapitre. L’indentation fait tout le travail :

mindmap
  root((Analyse financière))
    Bilan
      Actif
      Passif
    Compte de résultats
      Charges
      Produits
    Ratios
      Solvabilité
      Rentabilité

mindmap
  root((Analyse financière))
    Bilan
      Actif
      Passif
    Compte de résultats
      Charges
      Produits
    Ratios
      Solvabilité
      Rentabilité

La frise chronologique

Un cadeau pour les cours d’histoire, de droit ou de sciences sociales :

timeline
    title Étapes de la validation des acquis
    Mois 1 : Information collective : Dépôt de candidature
    Mois 2 : Constitution du dossier
    Mois 3 : Entretien avec le jury
    Mois 4 : Décision et notification

timeline
    title Étapes de la validation des acquis
    Mois 1 : Information collective : Dépôt de candidature
    Mois 2 : Constitution du dossier
    Mois 3 : Entretien avec le jury
    Mois 4 : Décision et notification

Le planning

Le diagramme de Gantt, pour planifier un module sur un trimestre :

gantt
    title Planning du module de comptabilité
    dateFormat YYYY-MM-DD
    section Théorie
    Notions de base      :2026-09-15, 20d
    Analyse de bilan     :2026-10-05, 15d
    section Pratique
    Études de cas        :2026-10-10, 25d
    section Évaluation
    Préparation          :2026-11-05, 10d
    Épreuve              :2026-11-15, 3d

gantt
    title Planning du module de comptabilité
    dateFormat YYYY-MM-DD
    section Théorie
    Notions de base      :2026-09-15, 20d
    Analyse de bilan     :2026-10-05, 15d
    section Pratique
    Études de cas        :2026-10-10, 25d
    section Évaluation
    Préparation          :2026-11-05, 10d
    Épreuve              :2026-11-15, 3d

Le diagramme de séquence

Pour décrire qui fait quoi, dans quel ordre, entre plusieurs acteurs. Idéal pour clarifier une procédure administrative, celle que personne dans l’équipe ne raconte de la même façon :

sequenceDiagram
    participant A as Apprenant
    participant S as Secrétariat
    participant F as Formateur
    A->>S: Demande de dispense
    S->>F: Transmet le dossier
    F->>F: Analyse les acquis
    F-->>S: Avis motivé
    S-->>A: Notification de décision

sequenceDiagram
    participant A as Apprenant
    participant S as Secrétariat
    participant F as Formateur
    A->>S: Demande de dispense
    S->>F: Transmet le dossier
    F->>F: Analyse les acquis
    F-->>S: Avis motivé
    S-->>A: Notification de décision

La flèche pleine ->> est une action, la flèche en pointillés -->> une réponse. Une flèche qui revient sur le même acteur, c’est un travail interne.

La matrice de priorisation

Pour animer un conseil pédagogique ou trier des projets :

quadrantChart
    title Priorisation des projets numériques
    x-axis Faible effort --> Fort effort
    y-axis Faible impact --> Fort impact
    quadrant-1 À planifier
    quadrant-2 À faire maintenant
    quadrant-3 À abandonner
    quadrant-4 À déléguer
    Bibliothèque de prompts: [0.25, 0.8]
    Refonte du site: [0.85, 0.6]
    Tableaux blancs interactifs: [0.7, 0.25]
    Fiches en markdown: [0.2, 0.65]

Quand tu veux aller plus loin

Les sous-groupes. Pour encadrer des étapes qui vont ensemble :

flowchart TD
    subgraph Accueil
        A["Entretien"] --> B["Positionnement"]
    end
    subgraph Formation
        C["Module 1"] --> D["Module 2"]
    end
    B --> C

flowchart TD
    subgraph Accueil
        A["Entretien"] --> B["Positionnement"]
    end
    subgraph Formation
        C["Module 1"] --> D["Module 2"]
    end
    B --> C

Les couleurs. Tu définis un style, tu l’appliques :

flowchart LR
    A["Étape validée"] --> B["Étape en cours"]
    classDef ok fill:#d4edda,stroke:#28a745
    classDef encours fill:#fff3cd,stroke:#ffc107
    class A ok
    class B encours

flowchart LR
    A["Étape validée"] --> B["Étape en cours"]
    classDef ok fill:#d4edda,stroke:#28a745
    classDef encours fill:#fff3cd,stroke:#ffc107
    class A ok
    class B encours

Les liens cliquables. click A "https://technopedia-cpeons.be/" rend une boîte cliquable, utile dans un schéma de parcours publié en ligne.

Le sens de lecture des sous-graphes, les thèmes globaux, les icônes : la documentation officielle couvre tout ça (Mermaid, 2026a). Mais franchement, avec le diagramme de flux et deux ou trois autres types, tu couvres l’essentiel de tes besoins.

Où est-ce que ça marche ?

C’est la question décisive, et la réponse demande de la précision, parce qu’un schéma qui ne s’affiche pas, c’est du code incompréhensible au milieu de ton document.

Là où ça s’affiche tout seul

L’atelier de secours : mermaid.live

Retiens cette adresse, c’est la plus utile de tout l’article : mermaid.live.

C’est l’éditeur officiel, gratuit, sans inscription. Tu colles ton code à gauche, le schéma apparaît à droite. Et surtout, tu exportes en PNG ou en SVG.

💡 La parade universelle
Ton outil n’affiche pas le mermaid ? Passe par mermaid.live, exporte en image, insère l’image.
Tu perds la modification en un clic, mais tu gardes le code source dans un coin : le jour où il faut corriger, tu recolles, tu modifies une ligne, tu réexportes. C’est encore dix fois plus rapide que de repositionner des boîtes à la souris.

Là où ça ne marche pas

Word, PowerPoint, Gamma n’affichent pas le mermaid. Pour tous ceux-là, c’est la route de l’image : mermaid.live → export PNG → insertion.

Google Docs et Canva ne l’affichent pas d’origine non plus, mais il existe un pont : un module complémentaire pour Google Docs, le module IA (et éventuellement des applications tierces comme Mermaid Diagram) pour Canva. Les manipulations sont détaillées juste en dessous.

Pour Google Docs, il existe des modules complémentaires qui font le pont, comme Mermaid – Diagramming and charting tool (Le Caro, 2025), détaillé juste en dessous, ou Mermaid for Google Docs™ (Mermaid Chart, 2026). Mais dans un établissement où l’installation d’extensions passe par l’administrateur, l’export en image reste souvent le chemin le plus court.

Pas à pas : ton schéma dans Notion, Google Docs, WordPress et Canva

Voici les manipulations exactes pour les quatre outils que tu risques le plus d’utiliser. Pour t’entraîner, reprends le petit schéma du début de l’article :

flowchart TD
    A["Inscription"] --> B["Test de positionnement"]
    B --> C["Module 1"]
    C --> D["Évaluation"]

flowchart TD
    A["Inscription"] --> B["Test de positionnement"]
    B --> C["Module 1"]
    C --> D["Évaluation"]

💡 Colle le code, pas l’emballage
Dans un fichier markdown, le code mermaid est entouré de deux lignes : ```mermaid au-dessus et ``` en dessous. Ces lignes servent seulement à dire au markdown « ici commence un schéma ». Quand tu colles dans un bloc prévu pour le mermaid, colle uniquement ce qu’il y a entre les deux, en commençant par flowchart. Une seule exception : le raccourci de Notion décrit ci-dessous, qui a justement besoin de ces deux lignes pour reconnaître le schéma.

Dans Notion

Notion affiche le mermaid sans rien installer. Deux façons de faire : un raccourci qui fait tout d’un coup, ou la méthode pas à pas.

La méthode express : Ctrl + Maj + V

Notion sait lire le markdown que tu colles : les # deviennent des titres, les tirets deviennent des listes. Il fait la même chose avec le mermaid. Copie ton schéma avec ses deux lignes d’emballage, comme ceci :

```mermaid
flowchart TD
    A("Candidat se présente") --> B["Entretien d'accueil"]
    B --> C{"Prérequis validés ?"}
    C -->|Oui| D["Inscription directe"]
    C -->|Non| E["Test de positionnement"]
    E --> F{"Résultat suffisant ?"}
    F -->|Oui| D
    F -->|Non| G["Orientation vers<br/>module préparatoire"]
    D --> H("Entrée en formation")
    G --> H
```

flowchart TD
    A("Candidat se présente") --> B["Entretien d'accueil"]
    B --> C{"Prérequis validés ?"}
    C -->|Oui| D["Inscription directe"]
    C -->|Non| E["Test de positionnement"]
    E --> F{"Résultat suffisant ?"}
    F -->|Oui| D
    F -->|Non| G["Orientation vers<br/>module préparatoire"]
    D --> H("Entrée en formation")
    G --> H

Place-toi sur une ligne vide de ta page et colle avec Ctrl + Maj + V (le collage sans mise en forme ; sur Mac, Cmd + Maj + V). Notion crée tout seul un bloc de code, règle le langage sur Mermaid et l’affiche en mode Scinder : le code d’un côté, le schéma de l’autre. Il ne te reste qu’à choisir Aperçu si tu veux masquer le code (voir l’étape 4 ci-dessous).

Condition : le code doit être valide. S’il contient une erreur, le schéma ne se dessine pas ; corrige la ligne fautive dans le bloc.

La méthode pas à pas

1. Dans ta page, place-toi sur une ligne vide et tape /code, puis valide : un bloc de code apparaît (un cadre gris prévu pour afficher du code).
2. En haut à gauche du bloc, clique sur le nom du langage (au départ, « Plain text ») et choisis Mermaid dans la liste.
3. Colle ton code dans le bloc.
4. Clique sur le bouton Afficher du bloc. Trois choix s’offrent à toi :
   • Code : le texte seul, sans dessin ;
   • Aperçu : le schéma seul, le code est masqué ;
   • Scinder : le code et le schéma côte à côte.
5. Pour une page que d’autres vont lire, choisis Aperçu. Pour modifier le schéma, passe en Scinder : tu changes une ligne à gauche et le dessin suit à droite.

💡 Et si ton code n’a pas d’emballage ?
Tu peux utiliser le code sans ```mermaid au-dessus et ``` en dessous, ce qui n’est pas rare si tu demandes à une IA de produire un schéma. Dans ce cas, il te suffit de le coller dans un bloc de code Notion en sélectionnant le langage « Mermaid » dans le menu déroulant.

Dans Google Docs

Google Docs ne connaît pas le mermaid : il faut lui ajouter un module complémentaire. J’utilise Mermaid – Diagramming and charting tool, de Renan Le Caro. Il est gratuit, son code est ouvert (open source, c’est-à-dire consultable par tous), et le dessin est calculé dans ton navigateur : ton texte n’est envoyé à personne (Le Caro, 2025).

Installer le module (une seule fois) :

1. Ouvre un document Google Docs.
2. Menu Extensions → Modules complémentaires → Télécharger des modules complémentaires. La boutique d’extensions de Google (le Google Workspace Marketplace) s’ouvre.
3. Cherche Mermaid – Diagramming and charting tool, vérifie que l’auteur est bien Renan LE CARO, puis clique sur Installer et accepte les autorisations demandées.

Insérer un schéma :

1. Place ton curseur à l’endroit du schéma.
2. Menu Extensions → Mermaid – Diagramming and charting tool → New chart. Un panneau s’ouvre.
3. Colle ton code dans la partie gauche : l’aperçu se dessine à droite. Si tu fais une faute de frappe, le module t’indique où se trouve l’erreur.
4. Choisis un thème (l’habillage de couleurs), puis clique sur Insert.

Le schéma arrive dans ton document sous forme d’image. Le code n’est pas perdu pour autant : le module le range dans le texte alternatif de l’image (la description cachée qui accompagne chaque image, lue notamment par les logiciels de lecture d’écran).

Modifier un schéma déjà inséré : clique sur l’image pour la sélectionner, puis menu Extensions → Mermaid – Diagramming and charting tool → Edit selected chart. Le panneau se rouvre avec le code du schéma : corrige-le, puis insère à nouveau. Si l’option ne réagit pas, vérifie que l’image est bien sélectionnée.

⚠️ Trois limites à connaître
Un : tes collègues voient le schéma, mais seuls ceux qui ont installé le module peuvent le modifier.
Deux : le module est pensé pour beaucoup de petits schémas. Pour un grand schéma, son auteur conseille lui-même de passer par mermaid.live.
Trois : il embarque la version 11 de mermaid et non la version 12 (Le Caro, 2025). Les types de schémas les plus récents peuvent donc ne pas s’afficher.

Et si ton établissement bloque l’installation de modules complémentaires, reviens à la parade universelle : mermaid.live, export en image, insertion.

Installation du module Mermaid

Importation d’un schéma Mermaid dans Google Docs

Dans WordPress

WordPress, le logiciel qui fait tourner une grande partie des sites web (dont celui-ci), n’affiche pas le mermaid de lui-même. L’extension gratuite MerPress s’en charge (n3f, 2026).

Installer l’extension (une seule fois) :

1. Dans l’administration de WordPress, menu Extensions → Ajouter une extension.
2. Cherche MerPress, clique sur Installer maintenant, puis sur Activer.

Insérer un schéma dans un article :

1. Ouvre ton article dans l’éditeur de blocs (l’éditeur par défaut de WordPress, où chaque paragraphe, image ou titre est un bloc).
2. Place-toi sur une ligne vide à l’endroit du schéma et tape /merpress, puis valide : le bloc MerPress apparaît.
3. Colle ton code dans la zone du haut. L’aperçu se dessine dans la zone du bas et se met à jour pendant que tu écris.
4. Clique en dehors du bloc : il s’affiche tel qu’il apparaîtra sur le site.
5. Enregistre, prévisualise, publie.

⚠️ MerPress ne lit que son propre bloc
Si tu colles du code mermaid dans un paragraphe ou dans un bloc « Code », il restera du texte. Même chose si tu importes un article écrit en markdown : chaque schéma devra être recollé dans un bloc MerPress. Et l’extension ne fonctionne pas avec l’éditeur classique, l’ancien éditeur de WordPress sans blocs.
MerPress embarque lui aussi une version de mermaid antérieure à la version 12 (n3f, 2026) : les types de schémas les plus récents peuvent ne pas s’afficher.

Dans Canva

Canva ne lit pas le mermaid, mais son assistant d’intelligence artificielle, Canva AI, le comprend. Tu lui donnes ton code, il en fait une infographie aux couleurs soignées. C’est la façon la plus rapide de passer d’un schéma juste à un schéma présentable.

1. Ouvre Canva et lance son IA, Canva AI (accès depuis la page d’accueil).
2. Colle ton code mermaid tel quel, sans rien ajouter. L’IA reconnaît un diagramme de flux et te demande ce que tu veux en faire.
3. Réponds-lui en une phrase. Tu peux lui laisser carte blanche ou préciser tes couleurs, ta police, le nombre d’étapes à garder.
4. L’IA te propose plusieurs designs. Choisis celui qui te plaît et ouvre-le dans l’éditeur.
5. Relis tout, retouche ce qui doit l’être, puis télécharge le résultat en image (PNG) pour l’insérer où tu veux.

Voici l’échange complet avec le petit schéma du début de l’article :

Moi :
flowchart TD
    A["Inscription"] --> B["Test de positionnement"]
    B --> C["Module 1"]
    C --> D["Évaluation"]

Canva AI :
Souhaitez-vous que je transforme ce flowchart en une infographie visuelle, ou que je le modifie d'abord (couleurs, étapes, mise en page) ?

Moi :
Adapte tout ce que tu veux

Canva AI :
Je vais transformer le flowchart en une infographie claire et moderne, en adaptant librement les couleurs, la typographie et la mise en page tout en conservant les quatre étapes et leur enchaînement.

Et voici l’infographie que j’ai retenue parmi les propositions :

⚠️ L’IA interprète, elle ne recopie pas
Les quatre étapes et leur ordre sont respectés, mais Canva AI a pris des libertés : elle a ajouté sous chaque titre une phrase de description qui n’existait pas dans le code, et elle vouvoie le lecteur. Ici, ça tombe plutôt bien. Sur une procédure officielle, relis chaque mot, et supprime ce que tu n’as pas demandé.

Autre différence avec les autres outils : le résultat n’est plus du mermaid. Pour ajouter une étape, tu modifies le design à la main dans Canva, ou tu redonnes ton code corrigé à l’IA. Garde donc toujours ton code mermaid dans un coin : c’est lui, la version de référence.

Et l’application Mermaid Diagram ? Canva propose aussi une application dédiée : dans le panneau de gauche, ouvre le menu Applications, tape mermaid, c’est la première proposée. Je ne l’ai pas utilisée. C’est une application tierce, c’est-à-dire développée par une autre société que Canva, et je ne sais pas quelles données elle reçoit quand tu y colles ton code. Si tu veux l’essayer, lis d’abord sa politique de confidentialité, et n’y colle jamais de schéma contenant des informations sensibles (noms d’apprenants, données internes).

Rendre tes schémas nettement plus beaux

Soyons francs sur un point : mermaid produit des schémas justes, pas des schémas beaux. Les boîtes sont grises, les flèches noires, la typographie est celle du navigateur. Pour une procédure interne, personne ne s’en plaindra. Pour la brochure de la rentrée ou un support projeté devant un jury, ça fait un peu austère.

Deux méthodes pour habiller tout ça, et je les utilise toutes les deux.

Excalidraw : le rendu dessiné à la main

Excalidraw est un tableau blanc en ligne, gratuit et open source, dont la signature est un rendu au trait, comme croqué à la main. Et il sait lire le mermaid.

Le principe : tu écris ton schéma en mermaid, tu l’importes dans Excalidraw, et tu récupères un dessin où chaque boîte et chaque flèche redevient un objet manipulable. Tu peux déplacer, recolorier, annoter, ajouter une bulle à la main. Cette conversion vaut pour les diagrammes de flux (le type flowchart, le plus courant), ainsi que pour les diagrammes de séquence, de classes, d’états et entité-relation ; les autres types de schémas arrivent sous forme d’image, qu’on ne peut plus retoucher élément par élément (Excalidraw, 2026).

La marche à suivre, en trois gestes :

1. Ouvre excalidraw.com et cherche l’option d’import mermaid dans le menu.
2. Colle ton code mermaid. Le schéma apparaît en style croquis.
3. Ajuste, puis exporte en PNG ou en SVG.

Si l’option n’apparaît pas dans ta version, des convertisseurs en ligne font le même travail et te rendent un fichier .excalidraw à ouvrir ensuite.

⚠️ Une limite à connaître
La conversion en objets modifiables fonctionne pour les diagrammes de flux, ainsi que pour les diagrammes de séquence, de classes, d’états et entité-relation. Les frises, les plannings et les cartes mentales arrivent sous forme d’image, donc non modifiables. Ce n’est pas grave : le diagramme de flux est précisément le type dont on veut retoucher l’allure.

👍 Un avantage indéniable
Contrairement à d’autres solutions, Excalidraw permet de retravailler son graphique visuellement en déplaçant les cadres, les flèches et même en éditant les textes. Cette facilité est un avantage indéniable et rend la création, et l’édition de schémas ou diagrammes très facile.

Le schéma ci-dessous résume ce parcours : le code pose la structure en quelques secondes, Excalidraw te rend la main pour la finition, sans jamais repartir de zéro.

Il y a un argument pédagogique auquel je ne m’attendais pas, et qui a fini par devenir ma raison principale de l’utiliser. Un schéma dessiné à la main n’a pas le même statut social qu’un schéma net. Le schéma propre dit « ceci est validé, ne touchez pas ». Le schéma croqué dit « voilà où j’en suis, dites-moi ce qui cloche ».

En réunion d’équipe, en atelier, en formation de formateurs, cette différence-là change les conversations. Quand je veux qu’on me contredise, je présente du croquis. Quand la procédure est arrêtée, je passe au propre.

Le design system : demander à l’IA d’habiller le schéma

L’autre voie, plus spectaculaire.

Un design system (système de design en français), c’est le mode d’emploi visuel d’une identité : la palette de couleurs avec ses codes exacts, les polices et leurs tailles, les espacements, la forme des angles, la manière dont on hiérarchise l’information. C’est ce qui fait que deux documents produits par deux personnes différentes se ressemblent quand même.

Or les modèles d’IA en connaissent, et en appliquent. Tu peux donc leur demander de rhabiller ton schéma. Deux niveaux, du plus simple au plus abouti :

Niveau 1 : colorier le mermaid lui-même. Tu donnes ta palette au modèle et tu lui demandes d’ajouter les instructions de style. Tu récupères un schéma qui reste du mermaid, donc toujours modifiable au clavier :

flowchart TD
    A["Candidature"] --> B["Entretien"]
    B --> C["Inscription"]
    classDef etape fill:#faf9f5,stroke:#d97757,stroke-width:2px,color:#141413
    class A,B,C etape

flowchart TD
    A["Candidature"] --> B["Entretien"]
    B --> C["Inscription"]
    classDef etape fill:#faf9f5,stroke:#d97757,stroke-width:2px,color:#141413
    class A,B,C etape

Niveau 2 : faire redessiner. Tu demandes cette fois une image vectorielle ou une page web reprenant le même contenu, dans un système de design donné. Le résultat n’est plus du mermaid, mais il est autrement plus présentable, et le mermaid reste ta source de vérité, celle que tu modifies quand la procédure change.

💡 La bonne méthode de travail
Garde le mermaid comme original, et considère la version habillée comme un tirage. La procédure évolue ? Tu modifies le mermaid, tu régénères l’habillage. L’inverse (retoucher l’image et oublier la source) est le meilleur moyen de se retrouver dans deux ans avec un joli schéma que plus personne ne sait mettre à jour.

Reste une question : quel système de design demander ? Chaque grand modèle a le sien, avec un goût par défaut très reconnaissable, et savoir lequel invoquer change beaucoup le résultat. C’est le sujet du prochain article.

Comment markdown et mermaid s’articulent

Voilà le point qui fait déclic chez la plupart des gens en formation, et il est plus simple qu’il n’en a l’air.

Mermaid n’est pas un outil séparé. C’est un passager du markdown.

Souviens-toi des blocs de code de l’article précédent : trois accents graves, un nom de langage, ton contenu, trois accents graves. Pour du code informatique, tu écris ```python. Pour un schéma, tu écris ```mermaid. Et c’est tout.

## Procédure d'inscription

Voici le déroulé complet :

```mermaid
flowchart LR
    A["Candidature"] --> B["Entretien"] --> C["Inscription"]
```

Chaque étape est détaillée ci-dessous.

Un seul fichier. Du texte, un schéma, du texte. Tout en clair, tout modifiable au clavier, tout dans un fichier .md de quelques kilo-octets. Une fois affiché, le schéma du milieu donne ceci :

flowchart LR
    A["Candidature"] --> B["Entretien"] --> C["Inscription"]

La conséquence pratique est jolie : partout où le markdown passe, le mermaid voyage avec lui. Tu déposes ton fichier dans Notion, les paragraphes deviennent des blocs et le schéma s’affiche. La procédure et son diagramme de flux ne se séparent jamais. Ce qui veut dire que tu n’auras plus de document Word d’un côté et de PowerPoint de l’autre, avec deux versions qui divergent au fil des mois.

flowchart TD
 A["Un seul fichier .md"] --> B["Texte<br/>en markdown"]
 A --> C["Schémas<br/>en mermaid"]
 B --> D["Notion, Obsidian,<br/>GitHub : tout s'affiche"]
 C --> D
 C --> E["mermaid.live<br/>export PNG"]
 E --> F["Word, PowerPoint,<br/>Gamma"]

La méthode la plus rapide : passe par l’IA

Sois honnête, tu n’as pas envie de mémoriser une syntaxe. Tu n’en as pas besoin.

Voici le geste qui fonctionne, et que j’utilise moi-même la plupart du temps :

1. Décris ton schéma en français. « Fais-moi un diagramme de flux mermaid de notre procédure de dispense : l’apprenant dépose une demande au secrétariat, qui la transmet au formateur ; celui-ci rend un avis, et le secrétariat notifie la décision. Ajoute un point de décision si le dossier est incomplet. »
2. Récupère le code, dans un bloc.
3. Colle-le dans Notion, Obsisian, Google Docs ou mermaid.live pour voir le résultat.
4. Ajuste toi-même : c’est là que la syntaxe de base te sert. Changer un libellé, ajouter une flèche, basculer de TD en LR : tu sais faire, tu viens de le lire.
5. Exporte ou colle selon ta destination.

⚠️ Vérifie toujours le schéma produit
Une IA se trompe volontiers sur un détail de syntaxe, et surtout elle peut inventer une étape qui n’existe pas dans ta procédure. Un schéma faux est plus dangereux qu’un schéma absent : il a l’air officiel, et il finit affiché en salle des profs.
Relis chaque flèche. Tu es le seul à connaître ta procédure.

Les pièges qui font perdre une demi-heure

Les caractères spéciaux dans les libellés. C’est la première convention rappelée plus haut, et c’est de très loin la cause numéro un des schémas qui refusent de s’afficher. Un libellé comme A[Bilan (actif)] coince ; A["Bilan (actif)"] passe. Si tu prends l’habitude de toujours mettre des guillemets, tu ne rencontreras jamais ce problème.

L’indentation. Pour la carte mentale, elle est la structure : deux espaces de plus, un niveau de plus. Un espace en trop et ton arbre se réorganise.

Les identifiants avec des espaces. Mon Etape[Texte] ne marche pas. Utilise A, B, Etape1. L’identifiant ne s’affiche jamais, il n’a pas besoin d’être joli.

Le schéma qui grossit. Au-delà de quinze boîtes, c’est illisible, comme n’importe quel schéma. Découpe en plusieurs schémas ou utilise des sous-groupes. Mermaid ne rendra pas lisible ce qui ne l’est pas.

Les petites différences entre plateformes. Un schéma rendu dans Notion et le même dans mermaid.live n’auront pas exactement la même allure : Notion impose son thème par défaut. Le contenu est identique, l’habillage varie. Ne t’arrache pas les cheveux là-dessus.

Et concrètement, tu en fais quoi ?

Pour toi, tout seul. Prends le schéma que tu refais chaque année : la procédure d’inscription, le parcours de validation des acquis, l’arbre de décision d’une orientation. Décris-le à une IA, demande du mermaid, colle dans mermaid.live. Tu auras ton premier schéma en cinq minutes, et tu le modifieras en dix secondes l’an prochain.

En cours, c’est aussi un support : afficher la carte mentale d’un chapitre en fin de séance, et la compléter en direct devant le groupe, ça vaut tous les diaporamas figés du monde.

Pour ton établissement. Un schéma en mermaid est un objet que l’on relit et que l’on corrige. Une procédure administrative représentée en dix lignes de texte, tout le monde peut la commenter, y compris le collègue qui ne maîtrise aucun outil graphique. Et quand la réglementation change, la mise à jour prend une minute au lieu d’un après-midi.

C’est particulièrement vrai pour tout ce qui touche aux parcours : dispenses, valorisation des acquis, passerelles entre modules. Ces procédures évoluent souvent, elles sont rarement documentées clairement, et chacun en a sa propre version. Un schéma partagé règle plus de malentendus qu’une note de service.

💡 Un exercice qui marche à tous les coups
Demande à trois collègues de décrire la même procédure. Fais-en trois schémas mermaid, cinq minutes chacun. Affiche-les côte à côte.
Les écarts sautent aux yeux, et la discussion qui suit vaut trois réunions. Je n’ai jamais vu cet exercice rater.

Verdict

Mermaid ne remplacera pas ton outil graphique le jour où tu voudras une affiche. Ce n’est pas fait pour ça.

En revanche, pour tout ce qui est procédure, parcours, planning, structure de cours, c’est-à-dire l’écrasante majorité des schémas qu’on produit dans l’enseignement, c’est plus rapide, plus propre et surtout increvable. Un schéma qu’on modifie en dix secondes est un schéma qu’on met à jour. Un schéma qu’on met quarante minutes à refaire est un schéma qui reste faux pendant deux ans.

Et il y a un bénéfice auquel je ne m’attendais pas : écrire un processus en mermaid t’oblige à le comprendre vraiment. Les boîtes qui ne mènent nulle part, les décisions sans seconde branche, les étapes que personne ne sait décrire : elles sautent aux yeux dès qu’il faut les taper. Plus d’une fois, l’outil m’a servi à découvrir qu’une procédure de mon établissement n’avait, en réalité, jamais été écrite.

Le meilleur outil de diagramme, c’est celui que tu tiens à jour.

Alors ouvre mermaid.live, colle les quatre lignes du début de cet article, et change un mot. Tu verras : on n’en revient pas.

Références

Excalidraw. (2026). mermaid-to-excalidraw (version 2.2.2) [Logiciel]. GitHub. Consulté le 25 septembre 2026, à l’adresse https://github.com/excalidraw/mermaid-to-excalidraw/blob/master/CHANGELOG.md

Le Caro, R. (2025, 12 novembre). Mermaid – Diagramming and charting tool [Module complémentaire Google Docs]. Google Workspace Marketplace. Consulté le 15 septembre 2026, à l’adresse https://workspace.google.com/marketplace/app/mermaid_diagramming_and_charting_tool/636321283856

Mermaid. (2026a). About Mermaid. Mermaid. https://mermaid.js.org/intro/

Mermaid. (2026b, 10 septembre). mermaid@12.0.0 [Notes de version]. GitHub. https://github.com/mermaid-js/mermaid/releases

Mermaid Chart. (2026). Google Docs. Mermaid Chart Docs. Consulté le 15 septembre 2026, à l’adresse https://docs.mermaidchart.com/plugins/google-docs

n3f. (2026). MerPress [Extension WordPress]. WordPress.org. Consulté le 15 septembre 2026, à l’adresse https://wordpress.org/plugins/merpress/

Technopédia. (2026, 17 septembre). Écris une fois, publie partout : apprivoise le markdown. https://technopedia-cpeons.be/2026/09/17/ecris-une-fois-publie-partout-apprivoise-le-markdown/

Woodward, M. et Biagianti, A. (2022, 14 février). Include diagrams in your Markdown files with Mermaid. The GitHub Blog. https://github.blog/developer-skills/github/include-diagrams-markdown-files-mermaid/

Outils en ligne

• mermaid.live : l’éditeur officiel, à mettre en favori aujourd’hui
• Excalidraw : tableau blanc en ligne, gratuit, qui importe le mermaid