Les diagrammes de Venn montrent les relations logiques entre différents ensembles ou groupes de données à l’aide de cercles superposés. Cette approche basée sur le texte vous permet de représenter rapidement des concepts situés à l’intersection de plusieurs catégories, sans avoir à manipuler des outils de conception graphique manuelle.
Structure de syntaxe de base
Chaque diagramme de Venn commence par la déclaration venn-beta déclaration, suivie de la définition des groupes individuels à l’aide du mot-clé set mot-clé. Vous définissez ensuite la manière dont ces groupes se chevauchent à l’aide du mot-clé union mot-clé.
venn-beta
set GroupA ["Étiquette A"]
set GroupB ["Étiquette B"]
union GroupA, GroupB ["Étiquette d'intersection"]
Référence de syntaxe
Le tableau ci-dessous détaille les éléments principaux utilisés pour construire un diagramme de Venn dans Mermaid.js.
| Composant | Description | Exemple de syntaxe |
|---|---|---|
| Déclaration | Initialise le rendu du diagramme de Venn (actuellement en version bêta). | venn-beta |
| Set | Définit une catégorie de données indépendante ou un cercle. Fournissez toujours un identifiant et une étiquette d’affichage. | set A ["Équipe Marketing"] |
| Union | Définit une zone de chevauchement entre deux ou plusieurs ensembles. Séparez les identifiants par une virgule. | union A,B ["Objectifs communs"] |
| Modificateur de taille | Un optionnel :N suffixe qui ajuste la taille du cercle ou de l’intersection de manière relative. |
set A ["Grand Groupe"]:15 |
| Nœud de texte | Un bloc indenté utilisé pour lister des points spécifiques directement à l’intérieur d’un ensemble ou d’une zone d’intersection. | text ItemId ["Puce spécifique"] |
Maquette du monde réel : Analyse des opportunités produit
Cette maquette met en évidence un cadre classique de stratégie de développement produit qui cartographie les points de douleur des utilisateurs, les objectifs commerciaux et la faisabilité technique afin d’identifier la mise en œuvre idéale d’une fonctionnalité.
venn-beta
set BesoinUtilisateur ["Points de douleur des utilisateurs"]
set ObjectifCommercial ["Valeurs commerciales"]
set FactibiliteTechnique ["Capacité technique"]
union BesoinUtilisateur, ObjectifCommercial ["Victoires stratégiques"]
union BesoinUtilisateur, FactibiliteTechnique ["Fonctionnalités non monétisées"]
union ObjectifCommercial, FactibiliteTechnique ["Automatisation interne"]
union BesoinUtilisateur, ObjectifCommercial, FactibiliteTechnique ["Le point idéal du produit"]
Astuce de syntaxe : Lorsque vous utilisez trois catégories ou plus, Mermaid cartographie automatiquement les intersections imbriquées pour vous. Déclarez simplement le dernier bloc à trois voies union avec les trois identifiants séparés par des virgules, et le moteur placera l’étiquette parfaitement au centre de la superposition.
Concept avancé : Puces et dimensionnement
Pour une documentation plus technique, vous pouvez insérer directement des puces de texte dans vos cercles et ajuster l’échelle des cercles pour représenter des proportions réelles (comme les tailles des bases de données ou les effectifs d’équipes).
venn-beta
set Front ["Frontend"]:10
text F1 ["React"]
text F2 ["CSS"]
set Back ["Backend"]:15
text B1 ["Node.js"]
text B2 ["PostgreSQL"]
union Front, Back ["Full-Stack"]:3
text FB1 ["Spécifications OpenAPI"]
text FB2 ["SSR Next.js"]
style Front fill:#E8F4FD, stroke:#0072B1
style Back fill:#FDF0E8, stroke:#E06000
Péchés courants de syntaxe
Les diagrammes de Venn sont tout nouveaux dans le noyau de la syntaxe Mermaid. Gardez ces trois règles de conception structurelle à l’esprit pour vous assurer que vos graphiques s’affichent correctement :
- Priorité à l’ordre : Vous devez déclarer entièrement vos lignes individuelles
setavant de les référencer dans n’importe quel blocunionbloc. Référencer un identifiant qui n’a pas été explicitement créé interrompra la compilation. - Attention aux virgules dans les unions : Lors de la construction d’une
unionde plusieurs ensembles, assurez-vous qu’il y a des virgules séparant vos identifiants, mais aucune virgule ne doit suivre immédiatement avant l’étiquette entre crochets.union A, B, C ["Étiquette"]est correct. - Stabilité de la version bêta : Étant donné que ce style de mise en page utilise le
drapeau venn-betadrapeau, les règles avancées de personnalisation des éléments peuvent varier d’une version à l’autre. Restez sur des codes couleur hexadécimaux basiques pour les variablesremplissageettraitafin d’assurer une compatibilité maximale entre les versions.