Diagrammes et illustrations : expliquer le fonctionnement d'un mécanisme

Un diagramme montre comment des parties nommées se connectent, ce qui circule entre elles et quel résultat ces relations produisent. Utilisez-le lorsque les lecteurs ont besoin de plusieurs relations à la fois, tout en gardant l’explication disponible sous forme textuelle.

Comment une page devient récupérable : les pages sources passent par l’extraction et la normalisation avant que leurs passages utiles n’atteignent un index de réponses.

1. Pages sources fournissent le HTML, les titres, les images et les champs structurés.
2. Extraire et normaliser supprime le bruit de présentation tout en préservant le texte, la hiérarchie, les entités et les relations.
3. Index de réponses stocke les passages récupérables qui peuvent être mis en correspondance avec une question ultérieure.
4. La première flèche transporte la représentation de la page vers le traitement ; la seconde transporte les passages normalisés et recherchables vers l’index.

Le dessin rend le flux visible d’un coup d’œil. La légende et l’explication numérotée portent le même message sans l’image. Ce contrat à deux canaux distingue un diagramme explicatif d’une illustration décorative.

Pourquoi cet élément est important

La prose peut obliger les lecteurs à mémoriser plusieurs parties avant de révéler comment elles se rapportent les unes aux autres. Un diagramme externalise ce modèle : les nœuds montrent les parties, les connecteurs montrent les relations, et les limites montrent le périmètre. Il est plus utile lorsque l’ordre seul ne suffit pas. Une phrase peut dire qu’un robot explore une page, qu’un analyseur extrait le contenu et qu’un index stocke les passages ; un diagramme peut aussi montrer les points de défaillance, les routes parallèles et les retours d’information. Il réduit l’effort de reconstruction, pas le besoin d’une formulation précise.

Un diagramme peut aussi induire en erreur plus rapidement que la prose. Une flèche non étiquetée peut signifier une causalité, un transfert, une séquence ou une association ; une boucle peut laisser croire à tort à un retour automatique. Chaque relation a besoin d’une signification explicite et défendable.

L’extractibilité machine est la capacité d’un logiciel à isoler une unité de contenu sans en perdre le sens. Les systèmes de recherche, les outils de traduction, les lecteurs d’écran et les systèmes de récupération par IA ne peuvent pas reconstruire un mécanisme à partir de pixels. La reconnaissance optique de caractères peut récupérer les étiquettes, mais pas ce que signifie une flèche ou une limite. Un titre, une légende, des nœuds et connecteurs structurés, ainsi qu’un équivalent textuel visible rendent le mécanisme extractible sans vision par ordinateur.

Les règles d’écriture des éléments partagées établissent la règle de précédence : choisissez un élément en fonction de la tâche que le passage accomplit, pas de son titre ou de son apparence. Cette page prévaut pour les champs spécifiques aux diagrammes, les limites de densité, les exigences d’équivalent textuel et le comportement d’accessibilité. Si le contenu a pour but d’expliquer visuellement un mécanisme, utilisez l’élément diagramme plutôt qu’une image générique avec une légende improvisée.

Quand l’utiliser

Utilisez un diagramme lorsque la conclusion dépend de la visualisation d’au moins deux relations ensemble. Les bons usages incluent un processus avec des embranchements ou des retours d’information, un système dont les composants échangent des données, un cycle de vie qui revient à un état antérieur, une chaîne causale avec un facteur intermédiaire, ou un modèle conceptuel dont les limites importent. Le lecteur doit pouvoir répondre à une question concrète à partir du dessin, comme « Où ce processus peut-il échouer ? » ou « Quel composant envoie l’enregistrement normalisé ? »

Appliquez d’abord le test de la prose : rédigez le mécanisme en trois à huit phrases. S’il n’y a pas de renvoi croisé, d’embranchement, de boucle ou de relation spatiale, la prose est probablement préférable. Un diagramme mérite sa place lorsqu’un équivalent textuel précis est coûteux à assembler sur le plan cognitif.

Les cas limites sont fréquents :

• Utilisez une liste d’étapes pour les actions exécutables ; les flèches ne peuvent pas remplacer les prérequis, les vérifications de succès ou les instructions de secours.
• Utilisez un tableau comparatif pour les attributs répétés entre plusieurs alternatives. Un schéma à deux axes non étiqueté cache les critères.
• Utilisez un arbre de décision pour les chemins choisis selon des conditions explicites. Un flux général explique un mouvement, pas une décision.
• Utilisez une capture d’écran annotée pour situer les commandes dans une interface réelle. Un redessin perd cette preuve.
• Utilisez un graphique lorsqu’une échelle quantitative encode des valeurs. Une flèche montante décorative ne doit pas sous-entendre une croissance mesurée.
• Utilisez une image en ligne pour représenter un objet, un lieu ou un résultat plutôt qu’un mécanisme.

N’utilisez pas un diagramme comme décoration ou répétition encadrée. Marquez les relations hypothétiques, contestées, conditionnelles ou simplifiées à la fois dans l’image et dans le texte.

Où le placer

Placez le diagramme après le paragraphe qui introduit le mécanisme et la question. Faites-le suivre de l’équivalent textuel visible, puis de l’interprétation, des preuves, des limites ou des actions.

Conservez le titre, l’image, la légende, la légende des symboles et l’équivalent textuel dans une seule zone de figure. Rien ne peut séparer l’image de son explication. Placez un équivalent plus long directement après, sous la rubrique « En texte ».

Un diagramme ne peut pas se trouver directement à côté d’un autre diagramme pleine largeur, d’un graphique, d’une vidéo, d’une galerie d’images, d’un tableau dense ou d’une capture d’écran. Insérez un texte explicatif avant le prochain visuel dense. Ne le placez pas à l’intérieur d’une cellule de tableau, d’un élément de liste, d’un accordéon, d’une info-bulle, d’une carte cliquable ou d’une figure.

Pour les procédures, placez une vue d’ensemble avant la première action, pas entre des étapes couplées. Dans les arguments, placez-le après l’affirmation du mécanisme et avant les preuves. Sur les pages produit, placez-le après l’explication de la fonctionnalité, jamais au-dessus de la réponse directe dans le seul but de faire technique.

Anatomie

L’anatomie décrit le sens, pas le style. Les ombres des boîtes, le style d’illustration, l’épaisseur des flèches, le rayon des coins et la couleur de fond relèvent du rendu ou de la direction artistique.

1. Titre : Nomme le mécanisme ou la question en trois à dix mots.
2. Déclaration de périmètre : Définit en une phrase ce que le diagramme inclut, exclut ou simplifie.
3. Nœud : Représente un composant, un état, un acteur, une entrée ou un résultat.
4. Étiquette du nœud : Utilise une phrase nominale concrète, pas une abréviation non expliquée.
5. Connecteur : Représente une relation déclarée entre deux nœuds.
6. Étiquette du connecteur : Nomme cette relation avec un verbe ou un objet transféré, comme « envoie des événements » ou « produit des passages ».
7. Marqueur de direction : Montre la direction de lecture ou de transfert sans reposer uniquement sur l’emplacement.
8. Limite : Regroupe les éléments qui partagent une propriété, une phase, un environnement ou un périmètre.
9. Légende : Définit tout motif de ligne, symbole ou couleur qui change de sens.
10. Légende d’illustration : Énonce la conclusion principale sans répéter le titre.
11. Note de source : Identifie la preuve ou le propriétaire lorsque le modèle est issu de recherches, de politiques ou d’un système propriétaire.
12. Équivalent textuel : Restitue chaque nœud porteur de sens, connecteur, direction, condition, limite et exception dans un ordre lisible.

Exemples de conception

Chaque variante nécessite un titre, une légende d’illustration, un équivalent textuel et des significations de connecteurs explicites. Choisissez la variante la plus simple qui répond à la question.

Flux de processus linéaire

Utilisez trois à sept étapes lorsque le mécanisme se déplace principalement dans une seule direction. Étiquetez ce qui circule entre les étapes ; ne vous fiez pas uniquement aux flèches. Si le lecteur doit exécuter les étapes, associez la vue d’ensemble à une liste d’étapes séparée.

Schéma système

Utilisez trois à neuf composants lorsque la propriété, les interfaces ou les échanges de données importent plus que la chronologie. Les limites identifient les environnements ou les équipes ; les lignes qui se croisent signalent un besoin de regrouper ou de diviser la vue.

Chaîne causale

Utilisez ceci pour une cause, un mécanisme intermédiaire et un résultat. Marquez les conditions et l’incertitude. Les flèches ne doivent jamais transformer une corrélation en causalité ; la prose et les sources doivent étayer toute affirmation causale.

Boucle de cycle de vie

Utilisez une boucle uniquement lorsqu’une sortie devient une entrée ultérieure. Numérotez les étapes et indiquez le déclencheur de redémarrage ; un cercle décoratif laisse croire à tort à une répétition.

Vue d’ensemble avec encart de détail

Utilisez un encart lorsqu’un composant a besoin de détails mais dépend du contexte système. Répétez son étiquette. Plus d’un encart nécessite généralement un diagramme séparé.

Sur mobile, empilez les diagrammes linéaires dans l’ordre de lecture. Un schéma système peut devenir une vue d’ensemble simplifiée accompagnée de relations numérotées. N’exigez jamais de défilement horizontal ou de zoom pour comprendre le sens.

Paramètres

Le modèle de contenu stocke le mécanisme. Les coordonnées, couleurs, tailles de police, choix d’icônes, chemins de connecteurs et points d’adaptation responsive appartiennent au rendu ou à l’œuvre source.

source est requis pour les recherches externes, les normes, les processus réglementés ou les modèles adaptés. Chaque nœud et connecteur doit apparaître dans l’équivalent textuel ; la prose peut combiner les répétitions.

Syntaxe et exemples de code

Les trois correspondances préservent les mêmes champs. Les chemins d’actifs donnés en exemple décrivent le contrat de production ; ils ne doivent pas apparaître comme références d’images réelles tant que ces fichiers n’existent pas.

Directive Markdown portable

:::diagram{variant=process src="/cdn-assets/seo-playbook/examples/content-pipeline.svg" alt="Three-stage flow from source pages through extraction and normalization to an answer index"}
## How a page becomes retrievable

The model covers content processing after a page has been fetched.

::item{id=source-pages}
### Source pages

Provide HTML, headings, images, and structured fields.
::
::item{id=extract-normalize}
### Extract and normalize

Preserve useful text, hierarchy, entities, and relationships.
::
::item{id=answer-index}
### Answer index

Stores passages that can be matched to a question.
::
::relationship{from=source-pages to=extract-normalize label="sends page representation" kind=flow}
::relationship{from=extract-normalize to=answer-index label="produces retrievable passages" kind=flow}

Normalized passages reach the answer index only after useful structure is preserved.

### In text

Source pages send their page representation to extraction and normalization. That stage preserves useful text, hierarchy, entities, and relationships, then produces retrievable passages for the answer index.
:::

Le premier titre correspond à title ; le paragraphe suivant correspond à scope ; les directives d’élément définissent les nœuds ; les directives de relation définissent les connecteurs ; le paragraphe après celles-ci correspond à caption ; et la section In text correspond à textEquivalent.

Correspondance shortcode Hugo

{{< diagram variant="process" src="/cdn-assets/seo-playbook/examples/content-pipeline.svg" alt="Three-stage flow from source pages through extraction and normalization to an answer index" >}}
## How a page becomes retrievable
{{< diagram-node id="source-pages" label="Source pages" >}}Provides page content.{{< /diagram-node >}}
{{< diagram-node id="extract-normalize" label="Extract and normalize" >}}Preserves useful structure.{{< /diagram-node >}}
{{< diagram-node id="answer-index" label="Answer index" >}}Stores passages.{{< /diagram-node >}}
{{< diagram-relationship from="source-pages" to="extract-normalize" label="sends page representation" kind="flow" >}}
{{< diagram-relationship from="extract-normalize" to="answer-index" label="produces retrievable passages" kind="flow" >}}
### In text
Source pages send content for extraction and normalization, which produces passages for the answer index.
{{< /diagram >}}

Les paramètres nommés sont utilisés exclusivement. Il s’agit d’une spécification d’adaptateur portable, pas d’une affirmation que ces shortcodes sont enregistrés dans le thème actuel. Jusqu’à ce qu’un moteur de rendu approuvé existe, publiez une figure sémantique via le pipeline d’images établi et conservez son équivalent textuel dans le contenu normal de la page.

Bloc WordPress

<!-- wp:amicited/diagram {"variant":"process","src":"/cdn-assets/seo-playbook/examples/content-pipeline.svg","alt":"Three-stage flow from source pages through extraction and normalization to an answer index"} -->
<figure>
  <h2>How a page becomes retrievable</h2>
  <img src="/cdn-assets/seo-playbook/examples/content-pipeline.svg"
       alt="Three-stage flow from source pages through extraction and normalization to an answer index">
  <figcaption>Normalized passages reach the answer index only after useful structure is preserved.</figcaption>
  <div class="diagram-text-equivalent">
    <h3>In text</h3>
    <p>Source pages send content for extraction and normalization, which produces passages for the answer index.</p>
  </div>
</figure>
<!-- /wp:amicited/diagram -->

Stockez les nœuds et les connecteurs comme attributs de bloc. L’exportation doit les conserver ainsi que l’équivalent textuel ; une image aplatie n’est pas un contenu portable.

Exemples

Bon : le dessin et la prose portent la même affirmation

La version correcte répond à une question : comment une question soumise devient une réponse étayée. Quatre nœuds concrets suivent une direction claire. Les étiquettes des connecteurs distinguent le routage de la récupération et de la composition. Un chemin de rétroaction en pointillés est défini dans la légende comme une révision humaine facultative, afin de ne pas sous-entendre une boucle automatique. La légende énonce la conclusion, et le texte adjacent nomme chaque étape et transfert.

Cela offre aux lecteurs visuels un modèle rapide, tandis que le texte véhicule le même mécanisme et les mêmes nuances. Les machines reçoivent des relations nommées sans avoir à deviner à partir des coordonnées.

Mauvais : un enchevêtrement persuasif sans signification déclarée

La version incorrecte place « IA » au centre et l’entoure de noms vagues comme contenu, données, utilisateurs, confiance, revenus et croissance. Des flèches non étiquetées pointent dans les deux sens, mais le lecteur ne peut pas savoir si elles signifient causalité, échange, séquence ou association. La couleur semble significative mais n’a pas de légende. La flèche de croissance sous-entend une amélioration sans données. Les petites étiquettes deviennent illisibles sur mobile, et aucun texte n’explique le mécanisme revendiqué.

Pour la corriger, choisissez une question, supprimez les nœuds non pertinents, nommez les connecteurs, séparez les causes des associations, et ajoutez le périmètre, la légende d’illustration, l’équivalent textuel et les sources. S’il ne reste que des avantages, rédigez une liste.

Balisage de schéma et accessibilité

Un diagramme n’a pas de type Schema.org dédié ni d’éligibilité indépendante aux résultats enrichis. Un diagramme pertinent peut renseigner Article.image ou un ImageObject avec une URL, une légende, des dimensions, un créateur, un crédit, un droit d’auteur et des données de licence précis. N’inventez pas de métadonnées ni de vocabulaire de relations ; les nœuds et connecteurs restent du contenu visible.

Utilisez <figure> pour l’image et la légende. Le texte alternatif identifie le mécanisme et la conclusion plutôt que de le transcrire. Visez 40 à 180 caractères et évitez « diagramme de ». Exemple : « Flux en trois étapes des pages sources à l’index de réponses via l’extraction et la normalisation. »

L’équivalent textuel visible inclut chaque nœud, connecteur, condition, déclencheur de rétroaction, limite, légende de symboles et exception pertinent. Ne le cachez pas dans ARIA, un texte au survol, des métadonnées ou un accordéon fermé.

Associez la couleur, les icônes, les motifs, les formes et la position à des étiquettes textuelles. Maintenez le contraste, des pointes de flèche visibles et un ordre de lecture correspondant à l’équivalent textuel. Le texte SVG réel est utile, mais ne remplace pas un texte visible.

À 320 pixels CSS, empilez, simplifiez ou affichez une vue mobile à partir des mêmes données. Ne supprimez jamais de nœuds, ne coupez pas de connecteurs et ne modifiez pas l’ordre de lecture. Le texte à proximité doit conserver tout le sens essentiel sans zoom.

Règles d’écriture

Rédigez et vérifiez d’abord le texte, puis ne dessinez que les relations qu’il contient. Cela évite qu’un polissage visuel n’introduise des affirmations.

• Donnez au diagramme une seule question ou un seul mécanisme. Ne combinez pas architecture, flux de travail, avantages et feuille de route dans un seul schéma.
• Utilisez 3 à 9 nœuds principaux, avec 12 comme maximum. Divisez un modèle surchargé en figures de vue d’ensemble et de détail.
• Étiquetez les nœuds avec 1 à 6 mots concrets. Définissez les abréviations à leur première utilisation dans le texte de la page et évitez les noms d’équipes internes que les lecteurs ne peuvent pas interpréter.
• Étiquetez chaque connecteur porteur de sens avec une phrase verbale ou un objet transféré de 1 à 6 mots. « Envoie des événements » est plus clair que « intégration ».
• Gardez la légende d’illustration entre 8 et 30 mots et faites-lui énoncer la conclusion ou la relation que le lecteur doit retenir.
• Limitez la déclaration de périmètre à une phrase. Indiquez les exclusions ou simplifications lorsque les omettre pourrait changer l’interprétation.
• Gardez l’équivalent textuel entre 50 et 250 mots, sauf si l’exactitude en exige plus.
• Utilisez un ton explicatif et neutre. Séparez ce que le système fait de ce qu’il peut faire, devrait faire ou est supposé faire.
• Marquez l’incertitude avec des mots comme « peut », « conditionnel » ou « proposé », et définissez les chemins en pointillés ou en tirets dans la légende.
• Ne mettez jamais de paragraphes, de citations, d’URL brutes, de slogans promotionnels, de preuves précises ou d’instructions complètes à l’intérieur de l’œuvre graphique. Placez-les dans le texte sélectionnable de la page.
• N’utilisez jamais d’icônes sans étiquettes, de couleur sans second indice, ou de flèches sans signification déclarée.
• Ne sous-entendez jamais une échelle, une quantité, une force causale, une certitude ou une croissance mesurée par la taille ou la direction, à moins que les preuves et la légende ne soutiennent ce codage.
• Ne publiez jamais un chemin d’actif inexistant ; conservez les œuvres en attente sous forme de commentaire de capture avec screenshotsPending = true.

Types d’articles qui l’utilisent

Le postTypes dans le frontmatter est l’enregistrement de jointure. Chaque type d’article listé utilise le même contrat de diagramme mais à un seuil différent.

Liste de vérification QA

• Objectif : Un mécanisme ou flux est plus facile à saisir visuellement qu’avec la prose seule.
• Texte d’abord : L’explication revue précède l’œuvre graphique ; aucune relation non étayée n’a été ajoutée.
• Périmètre : Le titre et la déclaration de périmètre clarifient les limites, simplifications et exclusions.
• Nœuds : Il y a généralement 3 à 9 nœuds, chacun concret et nécessaire.
• Connecteurs : Chacun a une direction et une étiquette ; les styles et couleurs ont une légende.
• Affirmations : La causalité, l’automatisation, l’échelle, la force, la certitude et la croissance ne sont montrées que lorsque les preuves les soutiennent.
• Équivalent textuel : Le texte visible inclut chaque nœud, relation, condition, limite, légende de symbole et exception.
• Légende d’illustration : Elle énonce la conclusion en 8 à 30 mots.
• Accessibilité : La couleur n’est pas le seul indice ; le contraste, les pointes de flèche, le texte alternatif et l’ordre de lecture fonctionnent.
• Mobile : Le sens est conservé à 320 pixels CSS sans défilement ni zoom au niveau de la page.
• Placement : Le contexte introductif précède le diagramme ; la légende d’illustration et l’équivalent textuel restent attachés ; les visuels denses concurrents ne sont pas placés à côté.
• Source : Les recherches, normes, processus réglementés et modèles adaptés ont une note de source ou de propriété visible et précise.
• Portabilité : Toutes les correspondances préservent le titre, les nœuds, les connecteurs, la légende d’illustration et l’équivalent textuel.
• Sécurité des actifs : Le fichier existe avant la publication d’un chemin en ligne, les droits sont documentés et les œuvres en attente restent un commentaire SCREENSHOT.
• Précédence : Le bloc est typé comme diagramme parce que son objet correspond à cet élément, pas parce qu’une image générique lui ressemble par hasard.

FAQ

Le modèle academy affiche les cinq questions examinées stockées dans le [[faq]] du frontmatter de cette page. Elles couvrent le seuil d’utilisation d’un diagramme, l’équivalent textuel obligatoire, le périmètre du texte alternatif, les données structurées et les limites de nœuds.