Schéma fonctionnel
Le diagramme en blocs est composé de blocs et de connecteurs, afin de représenter visuellement des systèmes, des processus ou des architectures complexes. Les blocs représentent des composants ou des fonctions de base, et les connecteurs montrent les relations ou les flux entre ces composants ; le diagramme en blocs est essentiel dans de nombreux domaines tels que l'ingénierie, le développement logiciel et la gestion des processus.
Copier
Intégrer
block-beta
columns 1
db(("DB"))
blockArrowId6<[" "]>(down)
block:ID
A
B["A wide one in the middle"]
C
end
space
D
ID --> D
C --> D
style B fill:#f96,stroke:#333,stroke-width:4px
Usages du diagramme en blocs
L'objectif principal du diagramme en blocs est de fournir une vue d'ensemble du système, permettant de le comprendre et de l'analyser facilement, sans entrer dans les détails complexes de chaque composant. Cela rend le diagramme en blocs particulièrement utile pour simplifier des systèmes complexes, ainsi que pour expliquer la structure globale et les interactions des différents composants d'un système.
Scénarios d'utilisation
Le diagramme en blocs a de nombreuses applications dans divers secteurs et disciplines, notamment :
- Architecture logicielle : dans le développement logiciel, le diagramme en blocs peut servir à illustrer l'architecture d'une application logicielle. Cela comprend la manière dont les différents modules ou services interagissent, les flux de données et les interactions entre composants de haut niveau.
- Topologie réseau : le diagramme en blocs convient parfaitement pour représenter les architectures réseau dans l'informatique et les télécommunications. Il peut montrer comment différents équipements et services réseau sont interconnectés, y compris les routeurs, les commutateurs, les pare-feu ainsi que la circulation des données dans le réseau.
- Diagramme de flux de processus : dans le commerce et l'industrie, le diagramme en blocs peut servir à créer des diagrammes de flux. Ces diagrammes représentent les différentes étapes d'un processus métier ou de fabrication et aident à visualiser l'ordre des étapes, les points de décision et le flux de contrôle.
- Systèmes électriques : les ingénieurs utilisent le diagramme en blocs pour représenter les systèmes électriques et les circuits. Il peut illustrer la structure de haut niveau d'un système électrique, les interactions entre différents composants électriques et la circulation du courant.
- Objectifs pédagogiques : le diagramme en blocs est également largement utilisé dans les supports pédagogiques pour expliquer des concepts et des systèmes complexes de manière simplifiée. Il aide à décomposer et à visualiser des théories scientifiques, des principes d'ingénierie et des systèmes techniques.
Nous allons maintenant approfondir la création et la manipulation de diagrammes en blocs avec Mermaid, en couvrant tout, de la syntaxe de base aux configurations et styles avancés.
Diagramme en blocs simple
Structure de base
Un diagramme en blocs est composé de blocs représentant différentes entités ou composants ; dans Mermaid, les blocs peuvent être facilement créés à l'aide de simples étiquettes textuelles. La forme la plus élémentaire d'un diagramme en blocs peut être une série de blocs sans aucune ligne de connexion.
Exemple de diagramme en blocs simple : pour créer un diagramme en blocs simple comportant trois blocs étiquetés a, b et c, la syntaxe est la suivante :
Copier
Intégrer
block-beta
a b c
Ce code génère trois blocs disposés horizontalement, chaque bloc étant automatiquement espacé et aligné pour une lisibilité optimale.
Définir le nombre de colonnes à utiliser
Diagramme multi-colonnes
Bien que le diagramme en blocs simple soit linéaire et élémentaire, des systèmes plus complexes peuvent nécessiter une mise en page structurée. Mermaid permet d'organiser les blocs en plusieurs colonnes, ce qui aide à créer des diagrammes plus complexes et détaillés.
Exemple de diagramme multi-colonnes : lorsqu'il faut répartir des blocs sur plusieurs colonnes, vous pouvez spécifier le nombre de colonnes et disposer les blocs en conséquence. Voici comment créer un diagramme en blocs à trois colonnes et quatre blocs, le quatrième bloc apparaissant sur la deuxième ligne :
Copier
Intégrer
block-beta
columns 3
a b c d
Avec cette syntaxe, Mermaid dispose les blocs a, b, c et d sur trois colonnes et effectue un retour à la ligne si nécessaire. Cette fonctionnalité est particulièrement utile pour représenter des systèmes à plusieurs niveaux.
Configuration avancée des blocs
La syntaxe avancée de Mermaid offre une plus grande flexibilité et complexité dans la conception des diagrammes, s'adaptant à un plus large éventail de cas d'usage et de scénarios.
Ajuster la largeur des blocs
S'étendre sur plusieurs colonnes
Dans des diagrammes plus complexes, vous pouvez avoir besoin de blocs s'étendant sur plusieurs colonnes, afin de mettre en avant certains composants ou de représenter des entités plus grandes. Mermaid permet d'ajuster la largeur des blocs pour couvrir plusieurs colonnes, ce qui améliore la lisibilité et la structure du diagramme.
Exemple : pour créer un bloc s'étendant sur deux colonnes, vous pouvez spécifier la largeur souhaitée pour chaque bloc :
Copier
Intégrer
block-beta
columns 3
a["A label"] b:2 c:2 d
Dans cet exemple, le bloc étiqueté A label occupe une colonne, tandis que les blocs b et c s'étendent sur 2 colonnes, et d est affecté à sa propre colonne. Cette souplesse dans la taille des blocs est essentielle pour représenter fidèlement des systèmes dont les composants ont une importance ou une taille différentes.
Créer un bloc composite
Blocs imbriqués
Les blocs composites permettent de représenter des systèmes imbriqués ou hiérarchiques, dans lesquels un composant contient plusieurs sous-composants.
Exemple : créer un bloc composite consiste à définir un bloc parent, puis à y imbriquer des blocs enfants. Voici la syntaxe pour définir un bloc composite comportant des éléments imbriqués :
Copier
Intégrer
block-beta
block
D
end
A["A: I am a wide one"]
Dans cette syntaxe, D est un bloc enfant imbriqué dans un bloc parent plus grand. Cette fonctionnalité est particulièrement utile pour décrire des structures complexes, comme un serveur comportant plusieurs services ou un service au sein d'une organisation plus large.
Largeur de colonne automatique
Ajuster la largeur
Mermaid permet d'ajuster dynamiquement la largeur des colonnes en fonction du contenu des blocs. La largeur d'une colonne est déterminée par le bloc le plus large de la colonne, ce qui garantit que le diagramme reste équilibré et lisible.
Exemple : dans un diagramme comportant des blocs de tailles différentes, Mermaid ajuste automatiquement la largeur des colonnes pour s'adapter au plus grand bloc de chaque colonne.
Copier
Intégrer
block-beta
columns 3
a:3
block:group1:2
columns 2
h i j k
end
g
block:group2:3
%% columns auto (default)
l m n o p q r
end
Voici une démonstration de la manière dont Mermaid ajuste dynamiquement la largeur des colonnes pour s'adapter au bloc le plus large.
Fusion horizontale de blocs : lorsqu'il faut empiler des blocs horizontalement, cela peut se faire à l'aide de la largeur des colonnes. Voici la syntaxe pour créer un diagramme en blocs à 4 blocs empilés ensemble :
Copier
Intégrer
block-beta
block
columns 1
a["A label"] b c d
end
Dans cet exemple, la largeur des blocs fusionnés est automatiquement ajustée à la largeur du plus grand sous-bloc.
Types et formes des blocs
Le diagramme en blocs Mermaid ne se limite pas aux formes rectangulaires standard. Mermaid propose de nombreuses formes de blocs, permettant une représentation plus nuancée et personnalisée de différents types d'informations ou d'entités.
Formes de blocs standard
Rectangle aux coins arrondis
Crée un bloc rectangulaire aux coins arrondis, qui peut servir à représenter des composants plus souples ou plus flexibles :
Copier
Intégrer
block-beta
id1("This is the text in the box")
Forme de stade
Un bloc en forme de stade peut servir à représenter des composants orientés processus :
Copier
Intégrer
block-beta
id1(["This is the text in the box"])
Forme de sous-processus
Sert à représenter un sous-processus ou un processus imbriqué, à l'aide d'un bloc rectangulaire doté de deux lignes verticales :
Copier
Intégrer
block-beta
id1[["This is the text in the box"]]
Forme cylindrique
La forme cylindrique convient parfaitement pour représenter une base de données ou un composant de stockage :
Copier
Intégrer
block-beta
id1[("Database")]
Cercle
La forme circulaire peut servir à représenter un composant centralisé ou critique :
Copier
Intégrer
block-beta
id1(("This is the text in the circle"))
Formes asymétriques, losange et hexagone
Utilisez un losange pour les décisions, et des formes asymétriques et hexagonales pour les processus uniques ou spécialisés :
Forme asymétrique
Copier
Intégrer
block-beta
id1>"This is the text in the box"]
Copier
Intégrer
block-beta
id1{"This is the text in the box"}
Copier
Intégrer
block-beta
id1{{"This is the text in the box"}}
Parallélogramme et trapèze
Le parallélogramme et le trapèze conviennent parfaitement aux flux d'entrée/sortie et de transition
Copier
Intégrer
block-beta
id1[/"This is the text in the box"/]
id2["This is the text in the box"]
A[/"Christmas"]
B["Go shopping"/]
Double cercle
Pour mettre en surbrillance des composants critiques ou hautement prioritaires, l'utilisation d'un double cercle est très efficace :
Copier
Intégrer
block-beta
id1((("This is the text in the circle")))
Blocs flèches et blocs vides
Bloc flèche
Le bloc flèche peut afficher visuellement la direction ou le flux à l'intérieur d'un processus :
Copier
Intégrer
block-beta
blockArrowId<["Label"]>(right)
blockArrowId2<["Label"]>(left)
blockArrowId3<["Label"]>(up)
blockArrowId4<["Label"]>(down)
blockArrowId5<["Label"]>(x)
blockArrowId6<["Label"]>(y)
blockArrowId6<["Label"]>(x, down)
Bloc vide
Le bloc vide peut servir à créer des espaces, ce qui est utile pour la mise en page et la lisibilité :
Copier
Intégrer
block-beta
columns 3
a space b
c d e
Copier
Intégrer
block-beta
ida space:3 idb idc
Notez que vous pouvez définir le nombre de colonnes occupées par un bloc vide à l'aide de la notation numérique space:num, où num indique la largeur de la colonne. Vous pouvez également utiliser space, qui vaut une colonne par défaut.
Les formes standard et spéciales de Mermaid renforcent l'expressivité du diagramme en blocs, permettant une représentation plus précise et plus contextuelle.
Relier les blocs à l'aide de lignes
Une caractéristique clé du diagramme en blocs Mermaid est la possibilité de relier les blocs à l'aide de divers types de lignes ou de liens.
Connexions de base et types de flèches
La connexion des blocs nécessite des flèches ou des lignes. Ces connecteurs décrivent les relations ou les flux d'informations entre les blocs. Mermaid propose une série de types de flèches pour répondre aux différents besoins des diagrammes.
Lien de base
Crée un lien simple avec une flèche, montrant la direction ou le flux d'un bloc vers un autre :
Copier
Intégrer
block-beta
A space B
A-->B
Cet exemple illustre une connexion directe du bloc A vers le bloc B.
Texte sur les liens
Outre la connexion des blocs, il est souvent nécessaire de décrire ou d'étiqueter la relation. Mermaid permet d'ajouter du texte sur les liens, afin de leur fournir un contexte.
Pour ajouter du texte sur un lien, la syntaxe consiste à inclure ce texte dans la définition du lien :
Copier
Intégrer
block-beta
A space:2 B
A-- "X" -->B
Copier
Intégrer
block-beta
columns 1
db(("DB"))
blockArrowId6<[" "]>(down)
block:ID
A
B["A wide one in the middle"]
C
end
space
D
ID --> D
C --> D
style B fill:pink,stroke:#333,stroke-width:4px
Styles et personnalisation
Outre la structure et la mise en page du diagramme en blocs, Mermaid propose de nombreuses options de style ; ces fonctionnalités de personnalisation permettent de créer des diagrammes plus esthétiques et plus informatifs.
Style d'un bloc individuel
Mermaid permet de styliser en détail un bloc individuel ; vous pouvez y appliquer diverses propriétés CSS, telles que la couleur, le contour et l'épaisseur de bordure.
Personnaliser le style d'un bloc individuel
Pour appliquer un style personnalisé à un bloc, vous pouvez utiliser la syntaxe style, suivie de l'identifiant du bloc et des propriétés CSS souhaitées :
Copier
Intégrer
block-beta
id1 space id2
id1("Start")-->id2("Stop")
style id1 fill:pink,stroke:#333,stroke-width:4px
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
Style de classe
Mermaid prend en charge l'application de styles aux classes. Si vous souhaitez appliquer un ensemble de styles spécifiques à plusieurs éléments, la définition de style est parfois plus simple, car il vous suffit de relier ces éléments à une classe.
Définir le style d'une seule classe
Copier
Intégrer
block-beta
A space B
A-->B
classDef blue fill:pink,stroke:#333,stroke-width:4px;
class A blue
style B fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
Ici, une classe nommée blue est définie et appliquée au bloc A, tandis que le bloc B reçoit un style distinct.
Cas d'utilisation
Lorsque les diagrammes modulaires du diagramme en blocs Mermaid sont appliqués à des scénarios réels, leur polyvalence s'exprime pleinement.
Exemples détaillés de diverses fonctionnalités
Grâce aux éléments de structure, de lien et de style, nous pouvons créer des diagrammes en blocs Mermaid jouant un rôle spécifique dans différents contextes.
Architecture système
Voici une architecture de système logiciel simple comportant des composants interconnectés :
Copier
Intégrer
block-beta
columns 3
Frontend blockArrowId6<[" "]>(right) Backend
space:2 down<[" "]>(down)
Disk left<[" "]>(left) Database[("Database")]
classDef front fill:pink,stroke:#333;
classDef back fill:#f96,stroke:#333;
class Frontend front
class Backend,Database back
Cet exemple présente une architecture de base comprenant un front-end, un back-end et une base de données, chaque bloc ayant une apparence différente afin de distinguer les types de composants.
Processus métier
Voici un processus métier comportant des points de décision et plusieurs phases :
Copier
Intégrer
block-beta
columns 3
Start(("Start")) space:2
down<[" "]>(down) space:2
Decision{{"Make Decision"}} right<["Yes"]>(right) Process1["Process A"]
downAgain<["No"]>(down) space r3<["Done"]>(down)
Process2["Process B"] r2<["Done"]>(right) End(("End"))
style Start fill:pink;
style End fill:pink;
Ces cas concrets soulignent la valeur pratique du diagramme en blocs Mermaid pour simplifier des informations complexes et permettre une communication efficace entre les domaines.
Dépannage
La création de diagrammes en blocs complexes avec la syntaxe Mermaid présente parfois des difficultés ; voici les erreurs de syntaxe courantes et des astuces pour gérer des structures de diagramme plus complexes.
Erreurs de syntaxe courantes
Éviter les erreurs de syntaxe courantes est la clé d'une utilisation fluide du diagramme en blocs Mermaid.
Erreur de lien
L'utilisation d'une syntaxe de lien incorrecte peut produire des résultats inattendus ou un diagramme corrompu :
Copier
Intégrer
block-beta
A - B
Correction : assurez-vous d'utiliser correctement les flèches de connexion (--> ou ---) entre les blocs, afin de définir la direction et le type de connexion. De plus, l'un des principes fondamentaux du diagramme en blocs est de laisser à l'auteur un contrôle total sur la position des blocs ; dans le cas ci-dessus, il faut donc ajouter des espaces entre les blocs :
Copier
Intégrer
block-beta
A space B
A --> B
Style mal aligné
Appliquer un style dans un contexte erroné ou avec une syntaxe incorrecte peut empêcher le style de s'appliquer comme prévu :
Copier
Intégrer
block-beta
A
style A fillpink;
Correction : assurez-vous de bien séparer les propriétés de style par des virgules et d'utiliser le bon format de propriété CSS pour corriger la syntaxe :
Copier
Intégrer
block-beta
A
style A fill:pink,stroke:#333;
