Venn-Diagramme zeigen logische Beziehungen zwischen verschiedenen Mengen oder Gruppen von Daten anhand überlappender Kreise. Dieser textbasierte Ansatz ermöglicht es Ihnen, Konzepte schnell darzustellen, die sich im Schnittpunkt mehrerer Kategorien befinden, ohne sich mit manuellen Grafik-Design-Tools beschäftigen zu müssen.
Grundlegende Syntaxstruktur
Jedes Venn-Diagramm beginnt mit der venn-beta Deklaration, gefolgt von der Definition einzelner Gruppen mithilfe des set Schlüsselwort. Anschließend definieren Sie, wie diese Gruppen sich überlappen, mithilfe des union Schlüsselworts.
venn-beta
set GroupA ["Beschriftung A"]
set GroupB ["Beschriftung B"]
union GroupA, GroupB ["Schnittstellenbeschriftung"]
Syntax-Referenz
Die Tabelle unten zeigt die wichtigsten Elemente, die zur Erstellung eines Venn-Diagramms in Mermaid.js verwendet werden.
| Komponente | Beschreibung | Syntax-Beispiel |
|---|---|---|
| Deklaration | Initialisiert den Venn-Diagramm-Renderer (derzeit in der Beta-Phase). | venn-beta |
| Set | Definiert eine eigenständige Datenkategorie oder einen Kreis. Geben Sie immer einen Bezeichner und eine Anzeigebeschriftung an. | set A ["Marketing-Team"] |
| Vereinigung | Definiert einen überlappenden Bereich zwischen zwei oder mehr Mengen. Trennen Sie Bezeichner durch ein Komma. | union A,B ["Gemeinsame Ziele"] |
| Größenmodifikator | Ein optionaler :NSuffix, der die Größe des Kreises oder der Schnittmenge relativ skaliert. |
set A ["Große Gruppe"]:15 |
| Textknoten | Ein eingerückter Block, der verwendet wird, um spezifische Punkte direkt innerhalb einer Menge oder eines Schnittbereichs aufzulisten. | text ItemId ["Spezifischer Punkt"] |
Realitätsnahes Blueprint: Produktchancenanalyse
Dieses Blueprint zeigt ein klassisches Framework zur Produktentwicklungstrategie, das Nutzerprobleme, Geschäftsziele und technische Machbarkeit abbildet, um die ideale Funktionsfreigabe zu identifizieren.
venn-beta
set Nutzbedarf ["Nutzerprobleme"]
set Geschaeftsziel ["Geschäftsziele"]
set TechnischMöglich ["Technische Fähigkeiten"]
union Nutzbedarf, Geschaeftsziel ["Strategische Erfolge"]
union Nutzbedarf, TechnischMöglich ["Nicht monetarisierte Funktionen"]
union Geschaeftsziel, TechnischMöglich ["Interne Automatisierung"]
union Nutzbedarf, Geschaeftsziel, TechnischMöglich ["Das Produkt-Schmankerl"]
Syntax-Tipp:unionunion mit allen drei Bezeichnern, die durch Kommas getrennt sind, und die Engine platziert die Beschriftung perfekt im zentralen Überlappungsbereich.
Fortgeschrittenes Konzept: Aufzählungspunkte und Skalierung
Für detailliertere technische Dokumentation können Sie spezifische Textaufzählungspunkte direkt in Ihre Kreise einfügen und die Kreisgrößen anpassen, um echte Proportionen darzustellen (z. B. Datenbankgrößen oder Teamgrößen).
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 ["OpenAPI Specs"]
text FB2 ["Next.js SSR"]
style Front fill:#E8F4FD, stroke:#0072B1
style Back fill:#FDF0E8, stroke:#E06000
Häufige Syntax-Fehler
Venn-Diagramme sind neu im Kern der Mermaid-Syntax. Behalten Sie diese drei strukturellen Gestaltungsregeln im Gedächtnis, um sicherzustellen, dass Ihre Grafiken reibungslos angezeigt werden:
- Reihenfolge priorisieren: Sie müssen Ihre einzelnen
setZeilen vollständig deklarieren, bevor Sie sie in irgendeinemunionBlock referenzieren. Die Referenzierung eines Bezeichners, der nicht explizit erstellt wurde, bricht den Build. - Achten Sie auf die Kommata bei Union: Beim Erstellen einer
Vereinigungaus mehreren Mengen stellen Sie sicher, dass Kommata Ihre Bezeichner trennen, aber keine Komma am Ende direkt vor der eckigen Klammer steht.Vereinigung A, B, C ["Beschriftung"]ist korrekt. - Stabilität der Beta-Version: Da dieser Layout-Stil das
venn-betaFlag verwendet, können erweiterte Regeln zur benutzerdefinierten Formatierung von Elementen zwischen Versionen variieren. Verwenden Sie für die VariablenFüllungundStrichgrundlegende Hex-Farbcodes, um maximale Kompatibilität zu gewährleisten.