Conception de Diagrammes Éditoriaux
Générez des diagrammes propres et de qualité publication sous forme de fichiers HTML autonomes (SVG + CSS intégrés). N'utilisez jamais de lueurs cyan foncé génériques, de mises en page Mermaid par défaut ou de lignes de connexion diagonales.
ADN Visuel & Palette de Couleurs
- Papier (Arrière-plan) :
#f5f5f5(toile plate). - Encre (Texte & Traits Dominants) :
#2d3142. - Atténué (Texte Secondaire & Lignes Standard) :
#4f5d75. - Bordures & Séparateurs :
rgba(45, 49, 66, 0.12). - Accent (Goulots d'étranglement / Focus Critique) :
#eb6c36(corail/terre cuite ; maximum 1–2 nœuds focaux par diagramme). - Limites Externes / Floues : Trait discontinu (
stroke-dasharray="4,4").
Typographie (Google Fonts)
À intégrer dans l'en-tête HTML :
<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">
- Titre du Diagramme :
Instrument Serif, 28px, poids normal. - Noms des Nœuds :
Geist(sans empattement), 12px, poids 600. - Sous-étiquettes & Métadonnées :
Geist Mono, 9px (ports, protocoles, intervalles de lots). - Badges de Connecteur / Sourcils :
Geist Mono, 7–8px, majuscules, espacées (letter-spacing: 0.08em).
Géométrie SVG & Normes de Disposition
- Discipline de Grille 4px : Toutes les coordonnées (
x,y), dimensions (width,height), rembourrages et espacements doivent être des multiples de 4. - Connecteurs Orthogonaux Uniquement : Ne tracez jamais de lignes obliques diagonales entre des nœuds non alignés. Chaque coude doit être un coude à angle droit avec un coin arrondi (
r=8). Réservez strictement la<line>droite pour les nœuds partageant des axes identiques. - Badges de Connecteur Masqués : Placez les étiquettes de protocole/données (par ex.,
CSV,XLSX,LOAD) à l'intérieur d'un<rect>opaque rempli de#f5f5f5(rx=2). Maintenez un espace visible de 6px à 10px par rapport au trait de ligne, afin que l'étiquette ne traverse jamais la flèche. - Zones & Conteneurs Fonctionnels : Regroupez les étapes en grandes colonnes/zones (par ex.,
COLLECTION,TRAITEMENT,DIFFUSION). Utilisez une bordure de 1px (rgba(45,49,66,0.12)), des coins arrondis (rx=8), et un onglet de titre mono en majuscules en haut à gauche. - Hiérarchie des Nœuds :
- Standard : Remplissage
#ffffff, trait 1px#2d3142, rayon 6px (rx=6). - Goulot d'étranglement / Point problématique : Remplissage
#fbeee8(rgba(235,108,54,0.08)), trait#eb6c36. - Externe : Remplissage transparent ou blanc, bordure discontinue (
stroke-dasharray="4,4").
- Standard : Remplissage
- Légende Horizontale en Bas : Placez une bande de légende horizontale sous les nœuds du diagramme, séparée par une règle fine pleine largeur.
Modèle SVG Structurel
Chargez references/template.md avant d'écrire le SVG (marqueurs, zones, connecteurs, badge masqué, boîte de nœud).