Un diagramme de blocs est un moteur de disposition structuré utilisé pour représenter des architectures logicielles complexes, des plateformes matérielles ou des modèles organisationnels. Introduit nativement dans Mermaid.js, le blockmoteur traite la zone de disposition comme une matrice mathématique absolue. Cela permet un contrôle précis sur l’alignement des colonnes, les limites d’empilement de disposition isolées, les blocs d’espacement structurels et les configurations explicites de liaison des ports aux bords.
Comprendre la stratégie de la matrice de grille
Contrairement aux schémas de flux standards en libre-forme qui devinent dynamiquement les trajectoires de disposition, un diagramme de blocs repose sur un système rigide de grille de coordonnées linéaires :
- Le seuil de colonne :Vous définissez un plafond horizontal strict en utilisant le
colonnesmodificateur. Lorsque la grille est remplie de blocs, les éléments supplémentaires se replient proprement sur la ligne suivante automatiquement. - Taille par champs de grille :Par défaut, chaque bloc occupe une seule case de coordonnées ($1 times 1$). Vous pouvez modifier ce comportement en attribuant des largeurs de colonnes explicites pour étendre les éléments sur plusieurs pistes parfaitement.
Structure de syntaxe de base
Chaque disposition commence par la déclaration blocken-tête de déclaration. Elle est suivie de la définition de la capacité de largeur de ligne avec le mot-clé colonneset de la déclaration des blocs sur des lignes consécutives.
block
colonnes 3
componentA["Premier Bloc"]
componentB["Bloc du milieu"]
componentC["Bloc de droite"]
Référence de syntaxe
Le tableau ci-dessous détaille les paramètres de données fondamentaux, les mots-clés de style personnalisés et les conteneurs structurels reconnus nativement par l’interpréteur de blocs.
| Composant de syntaxe | Exigence de type | Description et règles de disposition visuelle |
|---|---|---|
| Déclaration | Identificateur de mot-clé | Initialise la zone de dessin de bloc de matrice de grille. Doit utiliser exactement bloc chaîne d’en-tête. |
| Jeux de colonnes | Mot-clé + Entier | Définit le nombre total de fentes horizontales avant le retour à la ligne (par exemple, colonnes 4). |
| Bloc standard | ID + Étiquette facultative | Crée une boîte de données standard : id["Texte de l'étiquette"]. Les décorateurs de forme correspondent à la syntaxe des diagrammes de flux (par exemple, (()) pour les cercles, [()] pour les bases de données). |
| Remplacement des dimensions du bloc | Bloc de paramètre deux-points | Remplace la taille par défaut de la grille d’agencement $1 times 1$ en attribuant explicitement des blocs de largeur de colonne personnalisés : id:largeur. |
| Élément d’espace | Mot-clé réservé | Insère une tuile invisible et structurale $1 times 1$ vide dans la ligne active en utilisant exactement le mot-clé espace mot-clé. Vous pouvez multiplier les largeurs en ligne comme espace:2. |
| Flèche du bloc | ID d’entité spécialisée | Affiche une boîte fléchée structurée et épaisse à l’intérieur d’une cellule de grille : arrowId<["Étiquette"]>(direction). Les directions incluent haut, bas, gauche, droite. |
| Enveloppe composite | Bloc / Conteneur de fin | Intègre une matrice de sous-grille autonome et isolée directement dans une cellule de bloc parent : bloc:SubID ... fin. Les sous-blocs peuvent déclarer leurs propres limites de colonnes indépendantes. |
Fonctionnalité avancée : Dimensions explicites de bloc et modificateurs d’espace
Pour les mises en page asymétriques, vous pouvez passer des métriques de taille horizontale explicites directement sur des blocs standards ou des séparateurs d’espace en utilisant un séparateur de notation deux-points (:largeur). Cela force les éléments à s’étendre sur plusieurs positions de grille de manière propre.
bloc
colonnes 4
wideComponent["En-tête de tableau de bord large"]:4
leftBar["Barre latérale"] espace:2 rightBar["Panneau principal"]
Fonctionnalité avancée : Types d’arêtes, directions et options de lien
Les connexions dans le bloc moteur sont divisées en lignes sémantiques standard et en flèches de bloc de disposition structurelle. Les lignes de connexion standard permettent de spécifier des contraintes directionnelles explicites pour déterminer comment les lignes s’enroulent autour des éléments.
1. Connecteurs de ligne standard
Les connexions de bloc utilisent les opérateurs de lien standard (-->, --, <-->). Toutefois, vous pouvez contrôler le routage en ajoutant des directions ou des modificateurs entre parenthèses :
A --> B: Dessine une ligne directionnelle standard depuis l’élément A vers l’élément B.A -- x B: Dessine un chemin de connexion terminé par une marque « X » indiquant un chemin bloqué.A -- o B: Dessine un chemin de connexion terminé par un point de connexion en cercle ouvert.
2. Flèches de bloc de mise en page dynamique
Les flèches de bloc sont traitées comme des composants de mise en page réels qui occupent un bloc d’indice de coordonnées réel dans votre matrice de budget de ligne. Elles utilisent des propriétés de syntaxe supérieure et inférieure pour cartographier les chemins de flux physiques :
block
columns 3
producer["Producteur de données"]
midArrow<["Transformer le trafic"]>(right)
consumer["Consommateur de données"]
Fonctionnalité avancée : Empilement de matrices de sous-bloc (regroupement composé)
Le block:id enveloppe agit comme un environnement contextuel de boîte de mise en page isolée. Un conteneur de groupe d’application peut établir son propre nombre unique de colonnes horizontales à l’intérieur d’un sous-bloc, permettant aux composants complexes de se regrouper étroitement sans influencer l’espacement de la grille du modèle global de canevas parent.
block
columns 2
rootGateway["Passerelle globale"]
block:microserviceCluster
columns 3
auth["Nœud d'authentification"]
api["API principale"]
worker["Moteur de traitement"]
end
Maquette du monde réel : Infrastructure multi-niveaux avec cache
Cette maquette complète, à plusieurs lignes, démontre une configuration d’infrastructure de production propre. Elle établit une disposition en grille de traitement à 3 colonnes, utilise des éléments structuraux espace éléments pour isoler un niveau de base de données, cartographie une descente épaisse flècheBloc, et isole un conteneur de sous-système interne séparé en utilisant un bloc:id ... fin enveloppe composite.
bloc
colonnes 3
%% Ligne 1 : Services d'entrée
dnsClient(("Client Web"))
chargeurEquilibrage["Équilibreur de charge Edge"]
espace
%% Ligne 2 : Flux de connexion descendant vers les microservices
espace
routeDescendante<["Transférer le trafic"]>(descendant)
espace
%% Ligne 3 : Cluster de l'environnement d'application composite
bloc:appCluster
colonnes 2
authService["Authentification"]
apiEngine["Travailleur API principale"]
fin
espace
baseDonnees[("Base de données PostgreSQL")]
%% Établir des alignements structurels clairs entre les matrices
chargeurEquilibrage --> appCluster
appCluster --> baseDonnees
Péchés courants de syntaxe et contraintes du système
Lors de la compilation de cartes matricielles précises, gardez à l’esprit ces vérifications de validation pour éviter les erreurs d’analyse syntaxique :
- Application du budget de colonnes : Suivez attentivement le nombre de colonnes. Si vous spécifiez
colonnes 3et écrivez 4 blocs séquentiels sur une ligne, le quatrième bloc passera automatiquement à la ligne 2, ce qui peut rompre les chemins de connexion gauche à droite prévus. - Ordre d’empilement composite : Lors de la construction de conteneurs internes avec
bloc:id, vous devez toujours sceller l’espace de travail sous-matrice en utilisant le mot-cléfinsur une ligne isolée avant de déclarer les éléments suivants. En oubliant de fermer le bloc, la construction du diagramme sera interrompue. - Limitations de la cible de flèche de bloc : La propriété de direction encadrée entre parenthèses après une flèche de bloc (par exemple,
(haut),(bas)) doit être un littéral en minuscules correspondant parfaitement aux mots-clés du système. Mettre en majuscule la direction entraînera des erreurs de traitement. - Chevauchements de limites d’étiquette : Décorateurs de forme de diagramme de flux standard (comme les parenthèses
()pour les boîtes rondes ou les accolades{}pour les diamants) sont entièrement pris en charge. Assurez-vous que toutes les étiquettes de texte affichées à l’intérieur des formes utilisent des guillemets doubles propres pour éviter la suppression de caractères.