Flowcharts : le diagramme à tout faire

À retenir — Un flowchart se résume à trois décisions : la direction (TD, LR…), la forme de chaque nœud (rectangle, losange, cercle…) et le type de flèche qui les relie. Maîtrisez ces trois leviers et vous couvrez la majorité de vos besoins de schématisation.

Le diagramme que vous utiliserez le plus

Le flowchart (organigramme) dessine un flux : étapes, décisions, chemins. Processus métier, logique d'une fonction, parcours d'un utilisateur, arbre de décision — tout ce qui se raconte par « d'abord ceci, puis cela, sauf si… » lui convient. C'est le premier réflexe à acquérir.

flowchart TD
    A[Recevoir la commande] --> B{Stock disponible ?}
    B -->|Oui| C[Préparer le colis]
    B -->|Non| D[Commander au fournisseur]
    D --> C
    C --> E[Expédier]

On retrouve le squelette du chapitre 1 : un type, des nœuds, des flèches. Détaillons maintenant chaque levier.

Levier 1 : la direction

La direction se déclare juste après flowchart. Quatre valeurs courantes :

Le même flux, en LR, devient une chaîne horizontale :

flowchart LR
    A[Code] --> B[Build] --> C[Tests] --> D[Déploiement]

:::tip[Choisir la bonne direction] TD pour ce qui se lit comme une décision ou une hiérarchie ; LR pour ce qui se lit comme une progression dans le temps (pipeline, étapes successives). Si un diagramme devient trop haut et étroit, basculez-le en LR — il respire souvent mieux. :::

Levier 2 : la forme des nœuds

La forme se choisit par les caractères qui entourent le texte. Chacune porte une convention de sens.

flowchart TD
    A[Rectangle : une étape] --> B(Coins arrondis : un début/une action douce)
    B --> C([Stade : un début ou une fin])
    C --> D[[Sous-routine]]
    D --> E[(Base de données)]
    E --> F{Losange : une décision}
    F --> G((Cercle : un point de connexion))
    G --> H{{Hexagone : une préparation}}

Le tableau de référence à garder sous la main :

:::warning[La forme parle avant le texte] Le lecteur déduit le rôle d'un nœud de sa forme avant même de lire le mot dedans. Un losange annonce un choix, un cylindre annonce des données. Détourner une forme (un losange qui n'est pas une décision) brouille la lecture. Respectez les conventions, elles sont là pour ça. :::

Levier 3 : les flèches et les liens

Le type de lien encode la nature de la relation entre deux nœuds.

flowchart LR
    A -->|flèche pleine| B
    C --- D
    E -.->|pointillés| F
    G ==>|trait épais| H

Les liens les plus utiles :

On peut aussi chaîner plusieurs liens sur une ligne pour aller plus vite :

flowchart LR
    A --> B --> C --> D
    A --> X & Y

La dernière ligne, A --> X & Y, relie A à X et à Y d'un coup. Le & permet aussi de partir de plusieurs sources : X & Y --> Z.

Regrouper avec les sous-graphes

Quand un diagramme grossit, le subgraph encadre et nomme une zone. Indispensable pour montrer des frontières (un service, une équipe, une couche technique).

flowchart TD
    Utilisateur[Utilisateur] --> API

    subgraph Backend
        API[API REST] --> Logique[Logique métier]
        Logique --> BdD[(Base de données)]
    end

    subgraph Externe
        Logique --> Paiement[Service de paiement]
    end

Les flèches traversent librement les frontières des sous-graphes, ce qui rend très visible qui parle à quoi entre les blocs.

:::example[Cas concret : documenter une logique de connexion] Voici un arbre de décision d'authentification, le genre de schéma qu'on colle directement dans un README pour qu'une nouvelle recrue comprenne le flux en dix secondes.

flowchart TD
    A[Tentative de connexion] --> B{Identifiants valides ?}
    B -->|Non| C[Message d'erreur]
    C --> A
    B -->|Oui| D{2FA activée ?}
    D -->|Non| E[Session ouverte]
    D -->|Oui| F[Demander le code]
    F --> G{Code correct ?}
    G -->|Oui| E
    G -->|Non| C

:::

Un peu de style : colorer un nœud

On peut mettre un nœud en valeur sans alourdir le diagramme. Deux approches : style pour un nœud unique, classDef pour réutiliser un style. (Le chapitre 10 approfondit tout ça.)

flowchart LR
    A[Normal] --> B[Important] --> C[Critique]

    style B fill:#dbeafe,stroke:#2563eb
    classDef alerte fill:#fee2e2,stroke:#dc2626,color:#991b1b
    class C alerte

style B fill:... colore un seul nœud. classDef alerte ... définit un style nommé, appliqué ensuite avec class C alerte — pratique dès que plusieurs nœuds partagent le même rôle.

Erreurs fréquentes qui cassent le rendu

:::danger[Les pièges qui produisent un diagramme vide]

• Oublier la ligne de type : un flowchart sans flowchart TD en tête ne s'affiche pas.
• Caractères spéciaux nus dans un libellé : les parenthèses, crochets ou guillemets dans le texte cassent la forme. Encadrez le texte de guillemets : A["Coût (€) : élevé"].
• Indentation incohérente dans un subgraph : fermez toujours par end.
• Réutiliser un identifiant pour deux nœuds différents : ils fusionnent en un seul. :::

L'astuce des guillemets résout 90 % des rendus cassés :

flowchart LR
    A["Texte avec (parenthèses) & symboles"] --> B["Ligne 1<br/>Ligne 2"]

Le <br/> force d'ailleurs un retour à la ligne dans un nœud — utile pour les libellés longs.

En résumé

• Le flowchart se pilote par trois leviers : direction, forme des nœuds, type de flèche.
• Choisissez TD pour les décisions/hiérarchies, LR pour les progressions dans le temps.
• La forme porte un sens : losange = décision, cylindre = données. Respectez les conventions.
• subgraph … end regroupe et nomme des zones ; & relie plusieurs nœuds en une ligne.
• Encadrez de guillemets tout libellé contenant des caractères spéciaux.

Au chapitre suivant, on passe au diagramme de séquence : le bon outil quand ce qui compte n'est plus le flux d'étapes, mais le dialogue dans le temps entre plusieurs acteurs ou systèmes.