{"id":2094,"date":"2026-07-02T09:03:07","date_gmt":"2026-07-02T09:03:07","guid":{"rendered":"https:\/\/www.vpascode.com\/de\/docs\/uncategorized\/mermaid-js-venn-diagram-syntax-layout-guide\/"},"modified":"2026-07-02T09:03:07","modified_gmt":"2026-07-02T09:03:07","slug":"mermaid-js-venn-diagram-syntax-layout-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/mermaid-js-venn-diagram-syntax-layout-guide\/","title":{"rendered":"Mermaid.js Venn-Diagramm-Syntax- und Layout-Leitfaden"},"content":{"rendered":"

Venn-Diagramme zeigen logische Beziehungen zwischen verschiedenen Mengen oder Gruppen von Daten anhand \u00fcberlappender Kreise. Dieser textbasierte Ansatz erm\u00f6glicht es Ihnen, Konzepte schnell darzustellen, die sich im Schnittpunkt mehrerer Kategorien befinden, ohne sich mit manuellen Grafik-Design-Tools besch\u00e4ftigen zu m\u00fcssen.<\/p>\n

Grundlegende Syntaxstruktur<\/h2>\n

Jedes Venn-Diagramm beginnt mit der venn-beta<\/code> Deklaration, gefolgt von der Definition einzelner Gruppen mithilfe des set<\/code> Schl\u00fcsselwort. Anschlie\u00dfend definieren Sie, wie diese Gruppen sich \u00fcberlappen, mithilfe des union<\/code> Schl\u00fcsselworts.<\/p>\n

\n
\nMermaid<\/span>
\n
\n<\/path><\/path><\/svg>
\nMermaid in VPasCode bearbeiten<\/span>
\n<\/a>\n<\/div>\n
\n
\r\n
\r\n Mermaid<\/span>\r\n \r\n <\/path><\/path><\/svg>\r\n Edit Mermaid in VPasCode<\/span>\r\n <\/a>\r\n <\/div>\r\n
\r\n 
venn-beta\r\nset GroupA [\"Beschriftung A\"]\r\nset GroupB [\"Beschriftung B\"]\r\nunion GroupA, GroupB [\"Schnittstellenbeschriftung\"]<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nMermaid in VPasCode bearbeiten<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
Syntax-Referenz<\/h2>\n
Die Tabelle unten zeigt die wichtigsten Elemente, die zur Erstellung eines Venn-Diagramms in Mermaid.js verwendet werden.<\/p>\n\n\n\n\n\n\n\n\n\n
Komponente<\/th>\nBeschreibung<\/th>\nSyntax-Beispiel<\/th>\n<\/tr>\n<\/thead>\n
Deklaration<\/strong><\/td>\nInitialisiert den Venn-Diagramm-Renderer (derzeit in der Beta-Phase).<\/td>\nvenn-beta<\/code><\/td>\n<\/tr>\n
Set<\/strong><\/td>\nDefiniert eine eigenst\u00e4ndige Datenkategorie oder einen Kreis. Geben Sie immer einen Bezeichner und eine Anzeigebeschriftung an.<\/td>\nset A [\"Marketing-Team\"]<\/code><\/td>\n<\/tr>\n
Vereinigung<\/strong><\/td>\nDefiniert einen \u00fcberlappenden Bereich zwischen zwei oder mehr Mengen. Trennen Sie Bezeichner durch ein Komma.<\/td>\nunion A,B [\"Gemeinsame Ziele\"]<\/code><\/td>\n<\/tr>\n
Gr\u00f6\u00dfenmodifikator<\/strong><\/td>\nEin optionaler :N<\/code>Suffix, der die Gr\u00f6\u00dfe des Kreises oder der Schnittmenge relativ skaliert.<\/td>\nset A [\"Gro\u00dfe Gruppe\"]:15<\/code><\/td>\n<\/tr>\n
Textknoten<\/strong><\/td>\nEin einger\u00fcckter Block, der verwendet wird, um spezifische Punkte direkt innerhalb einer Menge oder eines Schnittbereichs aufzulisten.<\/td>\ntext ItemId [\"Spezifischer Punkt\"]<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n
Realit\u00e4tsnahes Blueprint: Produktchancenanalyse<\/h2>\n
Dieses Blueprint zeigt ein klassisches Framework zur Produktentwicklungstrategie, das Nutzerprobleme, Gesch\u00e4ftsziele und technische Machbarkeit abbildet, um die ideale Funktionsfreigabe zu identifizieren.<\/p>\n
\n
\nMermaid<\/span>
\n
\n<\/path><\/path><\/svg>
\nMermaid in VPasCode bearbeiten<\/span>
\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    Mermaid<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
venn-beta\r\nset Nutzbedarf [\"Nutzerprobleme\"]\r\nset Geschaeftsziel [\"Gesch\u00e4ftsziele\"]\r\nset TechnischM\u00f6glich [\"Technische F\u00e4higkeiten\"]\r\n\r\nunion Nutzbedarf, Geschaeftsziel [\"Strategische Erfolge\"]\r\nunion Nutzbedarf, TechnischM\u00f6glich [\"Nicht monetarisierte Funktionen\"]\r\nunion Geschaeftsziel, TechnischM\u00f6glich [\"Interne Automatisierung\"]\r\n\r\nunion Nutzbedarf, Geschaeftsziel, TechnischM\u00f6glich [\"Das Produkt-Schmankerl\"]<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nMermaid in VPasCode bearbeiten<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n\n
Syntax-Tipp:<\/strong>unionunion<\/code> mit allen drei Bezeichnern, die durch Kommas getrennt sind, und die Engine platziert die Beschriftung perfekt im zentralen \u00dcberlappungsbereich.<\/em><\/p>\n\n
Fortgeschrittenes Konzept: Aufz\u00e4hlungspunkte und Skalierung<\/h2>\n
F\u00fcr detailliertere technische Dokumentation k\u00f6nnen Sie spezifische Textaufz\u00e4hlungspunkte direkt in Ihre Kreise einf\u00fcgen und die Kreisgr\u00f6\u00dfen anpassen, um echte Proportionen darzustellen (z.\u202fB. Datenbankgr\u00f6\u00dfen oder Teamgr\u00f6\u00dfen).<\/p>\n
\n
\nMermaid<\/span>
\n
\n<\/path><\/path><\/svg>
\nMermaid in VPasCode bearbeiten<\/span>
\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    Mermaid<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
venn-beta\r\nset Front [\"Frontend\"]:10\r\n  text F1 [\"React\"]\r\n  text F2 [\"CSS\"]\r\nset Back [\"Backend\"]:15\r\n  text B1 [\"Node.js\"]\r\n  text B2 [\"PostgreSQL\"]\r\n\r\nunion Front, Back [\"Full-Stack\"]:3\r\n  text FB1 [\"OpenAPI Specs\"]\r\n  text FB2 [\"Next.js SSR\"]\r\n\r\nstyle Front fill:#E8F4FD, stroke:#0072B1\r\nstyle Back fill:#FDF0E8, stroke:#E06000<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nMermaid in VPasCode bearbeiten<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
H\u00e4ufige Syntax-Fehler<\/h2>\n
Venn-Diagramme sind neu im Kern der Mermaid-Syntax. Behalten Sie diese drei strukturellen Gestaltungsregeln im Ged\u00e4chtnis, um sicherzustellen, dass Ihre Grafiken reibungslos angezeigt werden:<\/p>\n
    \n
  • Reihenfolge priorisieren:<\/strong> Sie m\u00fcssen Ihre einzelnen set<\/code> Zeilen vollst\u00e4ndig deklarieren, bevor Sie sie in irgendeinem union<\/code> Block referenzieren. Die Referenzierung eines Bezeichners, der nicht explizit erstellt wurde, bricht den Build.<\/li>\n
  • Achten Sie auf die Kommata bei Union:<\/strong> Beim Erstellen einer Vereinigung<\/code> aus 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\"]<\/code> ist korrekt.<\/li>\n
  • Stabilit\u00e4t der Beta-Version:<\/strong> Da dieser Layout-Stil das venn-beta<\/code>Flag verwendet, k\u00f6nnen erweiterte Regeln zur benutzerdefinierten Formatierung von Elementen zwischen Versionen variieren. Verwenden Sie f\u00fcr die Variablen F\u00fcllung<\/code> und Strich<\/code> grundlegende Hex-Farbcodes, um maximale Kompatibilit\u00e4t zu gew\u00e4hrleisten.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
    Venn-Diagramme zeigen logische Beziehungen zwischen verschiedenen Mengen oder Gruppen von Daten anhand \u00fcberlappender Kreise. Dieser textbasierte Ansatz erm\u00f6glicht es Ihnen, Konzepte schnell darzustellen, die sich im Schnittpunkt mehrerer Kategorien befinden, ohne sich mit manuellen Grafik-Design-Tools besch\u00e4ftigen zu m\u00fcssen. Grundlegende Syntaxstruktur…<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":11,"template":"","meta":{"inline_featured_image":false,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}}},"ld_collection":[14],"class_list":["post-2094","ld_docs","type-ld_docs","status-publish","hentry","ld_collection-vpascode-docs"],"yoast_head":"\nMermaid Venn Diagram Syntax | VPasCode Text to Diagram Guide<\/title>\n<meta name=\"description\" content=\"Illustrate set overlaps and logical relationships with Mermaid Venn diagrams in VPasCode, a free diagram-as-code tool.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/mermaid-js-venn-diagram-syntax-layout-guide\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mermaid Venn Diagram Syntax | VPasCode Text to Diagram Guide\" \/>\n<meta property=\"og:description\" content=\"Illustrate set overlaps and logical relationships with Mermaid Venn diagrams in VPasCode, a free diagram-as-code tool.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/mermaid-js-venn-diagram-syntax-layout-guide\/\" \/>\n<meta property=\"og:site_name\" content=\"VPasCode\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a46298fd9cf8.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data1\" content=\"3\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/docs\\\/vpascode-docs\\\/mermaid-js-venn-diagram-syntax-layout-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/docs\\\/vpascode-docs\\\/mermaid-js-venn-diagram-syntax-layout-guide\\\/\",\"name\":\"Mermaid Venn Diagram Syntax | VPasCode Text to Diagram Guide\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/docs\\\/vpascode-docs\\\/mermaid-js-venn-diagram-syntax-layout-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/docs\\\/vpascode-docs\\\/mermaid-js-venn-diagram-syntax-layout-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a46298fd9cf8.png\",\"datePublished\":\"2026-07-02T09:03:07+00:00\",\"description\":\"Illustrate set overlaps and logical relationships with Mermaid Venn diagrams in VPasCode, a free diagram-as-code tool.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/docs\\\/vpascode-docs\\\/mermaid-js-venn-diagram-syntax-layout-guide\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/de\\\/docs\\\/vpascode-docs\\\/mermaid-js-venn-diagram-syntax-layout-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/docs\\\/vpascode-docs\\\/mermaid-js-venn-diagram-syntax-layout-guide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a46298fd9cf8.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a46298fd9cf8.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/docs\\\/vpascode-docs\\\/mermaid-js-venn-diagram-syntax-layout-guide\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Lean Docs\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/docs\\\/%ld_collection%\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Mermaid.js Venn-Diagramm-Syntax- und Layout-Leitfaden\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/#website\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/\",\"name\":\"VPasCode\",\"description\":\"by Visual Paradigm\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/#organization\",\"name\":\"VPasCode\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/wp-content\\\/uploads\\\/sites\\\/4\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/wp-content\\\/uploads\\\/sites\\\/4\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"width\":128,\"height\":138,\"caption\":\"VPasCode\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Mermaid Venn Diagram Syntax | VPasCode Text to Diagram Guide","description":"Illustrate set overlaps and logical relationships with Mermaid Venn diagrams in VPasCode, a free diagram-as-code tool.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/mermaid-js-venn-diagram-syntax-layout-guide\/","og_locale":"de_DE","og_type":"article","og_title":"Mermaid Venn Diagram Syntax | VPasCode Text to Diagram Guide","og_description":"Illustrate set overlaps and logical relationships with Mermaid Venn diagrams in VPasCode, a free diagram-as-code tool.","og_url":"https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/mermaid-js-venn-diagram-syntax-layout-guide\/","og_site_name":"VPasCode","og_image":[{"url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a46298fd9cf8.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Gesch\u00e4tzte Lesezeit":"3\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/mermaid-js-venn-diagram-syntax-layout-guide\/","url":"https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/mermaid-js-venn-diagram-syntax-layout-guide\/","name":"Mermaid Venn Diagram Syntax | VPasCode Text to Diagram Guide","isPartOf":{"@id":"https:\/\/www.vpascode.com\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/mermaid-js-venn-diagram-syntax-layout-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/mermaid-js-venn-diagram-syntax-layout-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a46298fd9cf8.png","datePublished":"2026-07-02T09:03:07+00:00","description":"Illustrate set overlaps and logical relationships with Mermaid Venn diagrams in VPasCode, a free diagram-as-code tool.","breadcrumb":{"@id":"https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/mermaid-js-venn-diagram-syntax-layout-guide\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/mermaid-js-venn-diagram-syntax-layout-guide\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/mermaid-js-venn-diagram-syntax-layout-guide\/#primaryimage","url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a46298fd9cf8.png","contentUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a46298fd9cf8.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/mermaid-js-venn-diagram-syntax-layout-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vpascode.com\/de\/"},{"@type":"ListItem","position":2,"name":"Lean Docs","item":"https:\/\/www.vpascode.com\/de\/docs\/%ld_collection%\/"},{"@type":"ListItem","position":3,"name":"Mermaid.js Venn-Diagramm-Syntax- und Layout-Leitfaden"}]},{"@type":"WebSite","@id":"https:\/\/www.vpascode.com\/de\/#website","url":"https:\/\/www.vpascode.com\/de\/","name":"VPasCode","description":"by Visual Paradigm","publisher":{"@id":"https:\/\/www.vpascode.com\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vpascode.com\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/www.vpascode.com\/de\/#organization","name":"VPasCode","url":"https:\/\/www.vpascode.com\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.vpascode.com\/de\/#\/schema\/logo\/image\/","url":"https:\/\/www.vpascode.com\/de\/wp-content\/uploads\/sites\/4\/2026\/06\/cropped-vp-online-logo-v1.png","contentUrl":"https:\/\/www.vpascode.com\/de\/wp-content\/uploads\/sites\/4\/2026\/06\/cropped-vp-online-logo-v1.png","width":128,"height":138,"caption":"VPasCode"},"image":{"@id":"https:\/\/www.vpascode.com\/de\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/www.vpascode.com\/de\/wp-json\/wp\/v2\/ld_docs\/2094","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vpascode.com\/de\/wp-json\/wp\/v2\/ld_docs"}],"about":[{"href":"https:\/\/www.vpascode.com\/de\/wp-json\/wp\/v2\/types\/ld_docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.vpascode.com\/de\/wp-json\/wp\/v2\/users\/3"}],"wp:attachment":[{"href":"https:\/\/www.vpascode.com\/de\/wp-json\/wp\/v2\/media?parent=2094"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/de\/wp-json\/wp\/v2\/ld_collection?post=2094"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}