Diagrammes
Les diagrammes doivent répondre à une question précise. Utilisez des libellés cohérents, une direction visible et seulement les détails nécessaires pour expliquer la relation, le flux ou la limite documentée.
Jetons de diagramme partagés#
Les diagrammes utilisent la collection de jetons de composant diagram.* : canevas, nœud, libellé de nœud, trait de nœud, accent, rayon, ombre, espacement intérieur et taille de libellé. Ces rôles se résolvent par les mêmes fondations de couleur, d’espacement et de mouvement que les sites; un changement de thème ne crée donc pas une palette distincte pour les diagrammes.
L’export de diagramme généré est le point de transfert portable pour les outils sur canevas. Il contient les valeurs résolues et une association themeVariables de Mermaid. Régénérez-le avec npm run tokens:diagrams après un changement de jeton; ne maintenez pas une deuxième liste de couleurs dans une application de diagrammes.
Consignes par outil#
| Outil | Utiliser la collection |
|---|---|
| Mermaid | Le site charge themeVariables depuis les variables CSS --diagram-*; les diagrammes rendus suivent donc le thème clair ou sombre actif. Ajoutez mermaid: true aux métadonnées de la page. |
| OmniGraffle | Définissez le canevas, le remplissage du nœud, le contour, le texte, le rayon de coin et l’ombre depuis l’export généré; gardez Orange signal pour l’emphase et les flux actifs seulement. |
| draw.io | Créez un ensemble de styles réutilisable depuis l’export, puis appliquez-le aux nœuds et connecteurs au lieu de saisir des valeurs forme par forme. |
| XMind | Utilisez l’export pour les styles de sujet central, d’étiquette de branche, de limite et de relation; n’utilisez pas sa palette arc-en-ciel automatique. |
Les outils externes ne peuvent pas consommer directement les propriétés personnalisées CSS. Leurs diagrammes exportés utilisent les valeurs résolues de la collection claire; les noms de jeton source restent la décision de conception durable.