{"id":2118,"date":"2026-05-26T08:00:30","date_gmt":"2026-05-26T08:00:30","guid":{"rendered":"https:\/\/www.vpascode.com\/de\/docs\/uncategorized\/mermaid-js-syntax-basis\/"},"modified":"2026-05-26T08:00:30","modified_gmt":"2026-05-26T08:00:30","slug":"mermaid-js-syntax-basis","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/mermaid-js-syntax-basis\/","title":{"rendered":"Grundlage der Mermaid.js-Syntax"},"content":{"rendered":"<p>Bevor Sie sich spezifischen architektonischen Layouts wie komplexen Flussdiagrammen oder zeitlichen Ablaufdiagrammen widmen, ist es unbedingt erforderlich, die grundlegenden Regeln zu verstehen, die die<strong>Mermaid-Handbuch<\/strong>. Mermaid basiert auf einem sauberen, hochintuitiven Textnotationssystem. Sobald Sie verstehen, wie der Engine einen Canvas-Typ initialisiert, strukturelle Komponenten benennt und Richtungspfeile routet, wird das Erstellen jedes komplexen Systemlayouts v\u00f6llig nat\u00fcrlich.<\/p>\n<p>Dieser kurze \u00dcberblick behandelt die globalen strukturellen Syntaxmechanismen, die sich auf nahezu jedes Mermaid-Diagrammtyp innerhalb der VPasCode-Umgebung beziehen.<\/p>\n<h2>1. Die obligatorischen Diagrammtyp-Umwicklungen<\/h2>\n<p>Jeder einzelne Block von Mermaid-Code muss mit einer expliziten Deklaration seines Diagrammtyps in der allerersten Zeile beginnen. Dies sagt dem VPasCode-Parser genau, welchen strukturellen Engine er in Ihrem Vorschaucanvas starten soll:<\/p>\n<ul>\n<li><code>graph TD<\/code> \u2014 Gibt ein Flussdiagrammlayout von oben nach unten an.<\/li>\n<li><code>sequenceDiagram<\/code> \u2014 Gibt ein zeitlich geordnetes Ablaufdiagramm f\u00fcr die Laufzeit an.<\/li>\n<li><code>classDiagram<\/code> \u2014 Gibt eine strukturelle objektorientierte Software-Skizze an.<\/li>\n<\/ul>\n<p>Im Gegensatz zu anderen Text-zu-Diagramm-Engines erfordert Mermaid keine abschlie\u00dfenden End-Tags. Der Parser liest einfach die strukturelle Deklaration in Zeile eins und kompiliert alles, was direkt darunter in Ihrem Codeblock-Container geschachtelt ist.<\/p>\n<h2>2. Deklarieren von Elementen: IDs im Vergleich zu Anzeigetexten<\/h2>\n<p>Beim Modellieren eines Software-Systems erstellen Sie verschiedene strukturelle Elemente wie Komponenten, Datenbanken oder Mikrodienste. In Mermaid deklarieren Sie ein Element, indem Sie eine kurze interne alphanumerische ID definieren, gefolgt unmittelbar von einem eckigen Klammerstil, der seine visuelle Form steuert, sowie einem benutzerfreundlichen Anzeigetext:<\/p>\n<pre><code>microservice_id[Bezahlverarbeitungs-API]\r\ndb_id[(Benutzertransaktions-SQL)]<\/code><\/pre>\n<p><strong>Warum dies eine Best-Practice ist:<\/strong> Die Verwendung einer kurzen, sauberen internen ID (wie<code>microservice_id<\/code>) macht das Zeichnen von Beziehungslinien sp\u00e4ter deutlich schneller. Wenn Sie jemals den Kunden-facing-Label von \u201eBezahlverarbeitungs-API\u201c auf \u201eGlobaler Kassen-Service\u201c \u00e4ndern m\u00fcssen, m\u00fcssen Sie ihn nur in der einen Zeile bearbeiten, in der er deklariert ist, anstatt Dutzende von Zeilen in Ihrem Skript zu aktualisieren.<\/p>\n<h2>3. Beherrschen von Beziehungspfeilen und Richtungsverl\u00e4ufen<\/h2>\n<p>Verbindungen zwischen Systemknoten werden mit Kombinationen von Strichen (<code>-<\/code>), Gleichheitszeichen (<code>=<\/code>), und Pfeilklammern (<code>&gt;<\/code>). Die Art Ihrer Linien gibt Ihnen implizite Kontrolle dar\u00fcber, wie der automatisierte Layout-Engine Ihr Diagramm skaliert:<\/p>\n<ul>\n<li><code>A --&gt; B<\/code> zeichnet einen standardm\u00e4\u00dfigen gerichteten Pfeil, der von Element A geradewegs zu Element B zeigt.<\/li>\n<li><code>A --- B<\/code> zeichnet eine flache, ungerichtete Verbindungslinie ohne Pfeilspitze, ideal f\u00fcr einfache Assoziationen.<\/li>\n<li><code>A -.-&gt; B<\/code> erstellt eine gepunktete Abh\u00e4ngigkeitslinie, die als Branchenstandard f\u00fcr die Kennzeichnung asynchroner Abh\u00e4ngigkeiten oder Netzwerk-Webhooks gilt.<\/li>\n<li><code>A ==&gt; B<\/code> erstellt eine dicke, fettgedruckte Verbindungslinie, ideal zum Hervorheben prim\u00e4rer Datenverarbeitungspfade oder kritischer Infrastrukturverbindungen.<\/li>\n<\/ul>\n<h2>4. Inline-Hinzuf\u00fcgen von Kontext: Beschriftungen und Code-Kommentare<\/h2>\n<p>Klare Dokumentation beruht stark darauf, angemessenen Kontext um Ihre visuellen Linien und Text-Skripte zu setzen:<\/p>\n<h3>Beschriftung von Verbindungslinien<\/h3>\n<p>Sie k\u00f6nnen erkl\u00e4renden Text direkt auf jede Verbindungslinie setzen, indem Sie den Text zwischen zwei Strichmengen einf\u00fcgen oder ein Pipe-Zeichen (&#8220;<code>|Text|<\/code>) direkt nach Ihrer Beziehungskennzeichnung:<\/p>\n<pre><code>client_id -- \"HTTPS POST \/v1\/checkout\" --&gt; api_id\r\nclient_id --&gt; |HTTPS POST \/v1\/checkout| api_id<\/code><\/pre>\n<h3>Schreiben von Code-Kommentaren<\/h3>\n<p>Wenn Sie eine administrative Notiz, ein Design-Credit oder eine architektonische Erkl\u00e4rung innerhalb Ihrer Skript-Datei hinterlassen m\u00f6chten, ohne dass eine sichtbare Box auf der Leinwand angezeigt wird, verwenden Sie doppelte Prozentzeichen (<code>%%<\/code>). Dies teilt dem Engine mit, diese Zeile vollst\u00e4ndig zu \u00fcberspringen:<\/p>\n<pre><code>%% TODO: Wir m\u00fcssen diese Grenzbox aktualisieren, sobald die DevOps-Migration abgeschlossen ist\r\n[Legacy Monolith] --&gt; [Neues Microservice]<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Bevor Sie sich spezifischen architektonischen Layouts wie komplexen Flussdiagrammen oder zeitlichen Ablaufdiagrammen widmen, ist es unbedingt erforderlich, die grundlegenden Regeln zu verstehen, die dieMermaid-Handbuch. Mermaid basiert auf einem sauberen, hochintuitiven Textnotationssystem. Sobald Sie verstehen, wie der Engine einen Canvas-Typ initialisiert,&#8230;<\/p>\n","protected":false},"author":4,"featured_media":0,"parent":0,"menu_order":0,"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-2118","ld_docs","type-ld_docs","status-publish","hentry","ld_collection-vpascode-docs"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Mermaid.js Syntax Basics | VPasCode Text to Diagram Guide<\/title>\n<meta name=\"description\" content=\"Learn basic Mermaid.js notation in VPasCode, a flexible diagram-as-code tool that turns simple text to diagram assets.\" \/>\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-syntax-basis\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mermaid.js Syntax Basics | VPasCode Text to Diagram Guide\" \/>\n<meta property=\"og:description\" content=\"Learn basic Mermaid.js notation in VPasCode, a flexible diagram-as-code tool that turns simple text to diagram assets.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/mermaid-js-syntax-basis\/\" \/>\n<meta property=\"og:site_name\" content=\"VPasCode\" \/>\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-syntax-basis\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/docs\\\/vpascode-docs\\\/mermaid-js-syntax-basis\\\/\",\"name\":\"Mermaid.js Syntax Basics | VPasCode Text to Diagram Guide\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/#website\"},\"datePublished\":\"2026-05-26T08:00:30+00:00\",\"description\":\"Learn basic Mermaid.js notation in VPasCode, a flexible diagram-as-code tool that turns simple text to diagram assets.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/docs\\\/vpascode-docs\\\/mermaid-js-syntax-basis\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/de\\\/docs\\\/vpascode-docs\\\/mermaid-js-syntax-basis\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/docs\\\/vpascode-docs\\\/mermaid-js-syntax-basis\\\/#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\":\"Grundlage der Mermaid.js-Syntax\"}]},{\"@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.js Syntax Basics | VPasCode Text to Diagram Guide","description":"Learn basic Mermaid.js notation in VPasCode, a flexible diagram-as-code tool that turns simple text to diagram assets.","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-syntax-basis\/","og_locale":"de_DE","og_type":"article","og_title":"Mermaid.js Syntax Basics | VPasCode Text to Diagram Guide","og_description":"Learn basic Mermaid.js notation in VPasCode, a flexible diagram-as-code tool that turns simple text to diagram assets.","og_url":"https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/mermaid-js-syntax-basis\/","og_site_name":"VPasCode","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-syntax-basis\/","url":"https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/mermaid-js-syntax-basis\/","name":"Mermaid.js Syntax Basics | VPasCode Text to Diagram Guide","isPartOf":{"@id":"https:\/\/www.vpascode.com\/de\/#website"},"datePublished":"2026-05-26T08:00:30+00:00","description":"Learn basic Mermaid.js notation in VPasCode, a flexible diagram-as-code tool that turns simple text to diagram assets.","breadcrumb":{"@id":"https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/mermaid-js-syntax-basis\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/mermaid-js-syntax-basis\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/mermaid-js-syntax-basis\/#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":"Grundlage der Mermaid.js-Syntax"}]},{"@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\/2118","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\/4"}],"wp:attachment":[{"href":"https:\/\/www.vpascode.com\/de\/wp-json\/wp\/v2\/media?parent=2118"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/de\/wp-json\/wp\/v2\/ld_collection?post=2118"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}