{"id":2115,"date":"2026-05-26T08:05:43","date_gmt":"2026-05-26T08:05:43","guid":{"rendered":"https:\/\/www.vpascode.com\/de\/docs\/uncategorized\/mermaid-js-class-diagram-syntax-guide\/"},"modified":"2026-05-26T08:05:43","modified_gmt":"2026-05-26T08:05:43","slug":"mermaid-js-class-diagram-syntax-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/mermaid-js-class-diagram-syntax-guide\/","title":{"rendered":"Mermaid.js Klassendiagramm-Syntaxanleitung"},"content":{"rendered":"<h2>Was ist ein Klassendiagramm?<\/h2>\n<p>Ein <strong>Klassendiagramm<\/strong> ist ein strukturelles <strong>UML-Diagramm<\/strong> das die statische Architektur eines objektorientierten Softwaresystems visualisiert. Als unverzichtbares <strong>UML-Diagrammtyp<\/strong>, zeichnet die einzelnen Klassen, Schnittstellen und Datenmodelle innerhalb Ihrer Anwendung auf und dokumentiert explizit deren interne Felder (Attribute), operativen Funktionen (Methoden) sowie die strukturellen Beziehungen, die sie verbinden. Diese Baupl\u00e4ne sind f\u00fcr Softwareingenieure von entscheidender Bedeutung, die hochgradige Dom\u00e4nenkonzepte in saubere, wartbare Objektstrukturen umsetzen m\u00fcssen.<\/p>\n<p>Mit <strong>Mermaid.js<\/strong>, k\u00f6nnen Sie Ihre Datenmodelle und Systemdienste mit intuitiven, textbasierten Definitionen darstellen. Der Layout-Engine werden automatisch Boxgr\u00f6\u00dfen berechnet, standardm\u00e4\u00dfige UML-Datenkammern strukturiert und relationale Pfeile \u00fcber Ihre Leinwand hinweg ausgerichtet, ohne dass manuelle Formatierungsarbeiten erforderlich sind.<\/p>\n<h2>Grundlagen der Syntaxanleitung: Elemente und Konstrukte<\/h2>\n<p>Um ein genaues, standardskonformes UML-Klassendiagramm in Mermaid zu erstellen, m\u00fcssen Sie Mitgliedsdeklarationen, Zugriffsmodifizierer und strukturelle Beziehungspfeile beherrschen.<\/p>\n<h3>1. Klassen und Klassenkammern deklarieren<\/h3>\n<p>Sie k\u00f6nnen eine Klasse mit zwei g\u00fcltigen Formatvorlagen definieren. F\u00fcr eine einfache Klasse verwenden Sie das <code>class<\/code>Schl\u00fcsselwort gefolgt vom Klassennamen. Wenn Sie Felder und Methoden sofort einbeziehen m\u00f6chten, verwenden Sie abschlie\u00dfende geschweifte Klammern, um einen klaren K\u00f6rperteil zu erstellen:<\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLzkksLnbJTEwvSszl5VIAgmSQiEJocWpRQFF+WmZOqkI1RAIEtINLijLz0hVKgdJ5ibmpmDKpuYmZOUjCpQUpiSWpriBRjbzUcjBDU6EsPzMFoqgWAOaDJdQ=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Mermaid in VPasCode bearbeiten<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">Mermaid<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLzkksLnbJTEwvSszl5VIAgmSQiEJocWpRQFF+WmZOqkI1RAIEtINLijLz0hVKgdJ5ibmpmDKpuYmZOUjCpQUpiSWpriBRjbzUcjBDU6EsPzMFoqgWAOaDJdQ=\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-mermaid\"><code class=\"language-mermaid\" data-language=\"mermaid\" class=\"language-mermaid\">classDiagram\r\n    class UserProfile {\r\n        +String username\r\n        +String email\r\n        +updateEmail(newEmail) void\r\n    }<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLzkksLnbJTEwvSszl5VIAgmSQiEJocWpRQFF+WmZOqkI1RAIEtINLijLz0hVKgdJ5ibmpmDKpuYmZOUjCpQUpiSWpriBRjbzUcjBDU6EsPzMFoqgWAOaDJdQ=\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLzkksLnbJTEwvSszl5VIAgmSQiEJocWpRQFF+WmZOqkI1RAIEtINLijLz0hVKgdJ5ibmpmDKpuYmZOUjCpQUpiSWpriBRjbzUcjBDU6EsPzMFoqgWAOaDJdQ=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Mermaid in VPasCode bearbeiten<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"QKYoRec\"><img fetchpriority=\"high\" alt=\"\" class=\"alignnone size-full wp-image-618\" decoding=\"async\" fetchpriority=\"high\" height=\"184\" sizes=\"(max-width: 303px) 100vw, 303px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a19030c532c9.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a19030c532c9.png 303w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a19030c532c9-300x182.png 300w\" width=\"303\"\/><\/p>\n<h3>2. Sichtbarkeit \/ Zugriffsmodifizierer hinzuf\u00fcgen<\/h3>\n<p>Um die Standard-UML-Encapsulation-Regeln zu dokumentieren, platzieren Sie ein spezifisches Symbol direkt vor dem Namen Ihres Attributs oder Ihrer Methode, um deren Sichtbarkeitsstufe zu definieren:<\/p>\n<ul>\n<li><code>+<\/code> **\u00d6ffentlich:** Von jeder anderen Klasse zug\u00e4nglich.<\/li>\n<li><code>-<\/code> **Privat:** Nur innerhalb der deklarierenden Klasse zug\u00e4nglich.<\/li>\n<li><code>#<\/code> **Gesch\u00fctzt:** Innerhalb der Klasse und ihrer Unterklassen zug\u00e4nglich.<\/li>\n<li><code>~<\/code> **Paket \/ Intern:** Innerhalb derselben Paketgrenze zug\u00e4nglich.<\/li>\n<\/ul>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLzkksLnbJTEwvSszl5VIAgmSQiIJTYl62Y3JyfmleiUI1RAIEdFPyS5NyUhWSEnMS85JTERLKwSVFmXnpCokQPR75OSmpRQhp7fTUEieIHg1NBYghENlaANmyJWY=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Mermaid in VPasCode bearbeiten<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">Mermaid<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLzkksLnbJTEwvSszl5VIAgmSQiIJTYl52dn5eSb5CNUQYBHRT8kuTclIVihNzUvIRwsrBJUWZeekKYPWZeRmJSalFCFnt9NSSYJAGDU0FiH6IXC0AxdsjFw==\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-mermaid\"><code class=\"language-mermaid\" data-language=\"mermaid\" class=\"language-mermaid\">classDiagram\r\n    class Bankkonto {\r\n        -double saldo\r\n        #String kontoinhaber\r\n        +getSaldo() double\r\n    }<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLzkksLnbJTEwvSszl5VIAgmSQiIJTYl52dn5eSb5CNUQYBHRT8kuTclIVihNzUvIRwsrBJUWZeekKYPWZeRmJSalFCFnt9NSSYJAGDU0FiH6IXC0AxdsjFw==\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLzkksLnbJTEwvSszl5VIAgmSQiIJTYl62Y3JyfmleiUI1RAIEdFPyS5NyUhWSEnMS85JTERLKwSVFmXnpCokQPR75OSmpRQhp7fTUEieIHg1NBYghENlaANmyJWY=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Mermaid in VPasCode bearbeiten<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"XgBkvsQ\"><img alt=\"\" class=\"alignnone size-full wp-image-619\" decoding=\"async\" height=\"184\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a1903106882d.png\" width=\"249\"\/><\/p>\n<h3>3. Beherrschen von Beziehungspfeilen und Vererbungsverbindungen<\/h3>\n<p>Um darzustellen, wie Klassen innerhalb Ihres UML-Diagrammmodells interagieren, verbinden Sie ihre IDs mithilfe spezialisierter Beziehungszeichenketten. In Mermaid ist die Richtung der Linie entscheidend: die Pfeilspitze zeigt auf die \u00fcbergeordnete oder Container-Klasse.<\/p>\n<ul>\n<li><strong>Vererbung \/ Verallgemeinerung (gestrichelter oder fester Pfeil):<\/strong> <code>Kind --|&gt; Elternteil<\/code> (Stellt eine \u201eist-ein\u201c-Beziehung dar).<\/li>\n<li><strong>Realisierung \/ Implementierung:<\/strong> <code>Klasse ..|&gt; Schnittstelle<\/code> (Stellt eine Klasse dar, die einen Schnittstellenvertrag erf\u00fcllt).<\/li>\n<li><strong>Zusammensetzung (fester Diamant):<\/strong> <code>Kind --* Elternteil<\/code> (Stellt strenge Eigentumsverh\u00e4ltnisse dar; wenn der Elternteil stirbt, stirbt auch das Kind).<\/li>\n<li><strong>Aggregation (klarer Diamant):<\/strong> <code>Kind --o Elternteil<\/code> (Stellt eine lose Sammlungsbeziehung dar; das Kind kann unabh\u00e4ngig existieren).<\/li>\n<li><strong>Abh\u00e4ngigkeit:<\/strong> <code>KlasseA ..&gt; KlasseB<\/code> (Stellt einen zeitweiligen Laufzeitverweis dar).<\/li>\n<\/ul>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLzkksLnbJTEwvSszl5VIAAufEIgVd3Ro7hbDUjMzknFQFKwUlz7yM1KLMkmKFtKL8XCWIOte89My8VKBSLbAWkKpihYLEohKF\/DQlAHyeGXI=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Mermaid in VPasCode bearbeiten<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">Mermaid<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLzkksLnbJTEwvSszl5VIAAsfSknwFXd0aOwW3xIyiqtTSdAUrBSXXoqQShbL8PCWIIt\/8kvwioCotiHKgAs\/iEoWQ1MwcsCIAYuIZXg==\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-mermaid\"><code class=\"language-mermaid\" data-language=\"mermaid\" class=\"language-mermaid\">classDiagram\r\n    Auto --|&gt; Fahrzeug : \"Erbt von\"\r\n    Motor --* Auto : \"Ist Teil von\"<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLzkksLnbJTEwvSszl5VIAAsfSknwFXd0aOwW3xIyiqtTSdAUrBSXXoqQShbL8PCWIIt\/8kvwioCotiHKgAs\/iEoWQ1MwcsCIAYuIZXg==\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLzkksLnbJTEwvSszl5VIAAufEIgVd3Ro7hbDUjMzknFQFKwUlz7yM1KLMkmKFtKL8XCWIOte89My8VKBSLbAWkKpihYLEohKF\/DQlAHyeGXI=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Mermaid in VPasCode bearbeiten<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"wCxJKDf\"><img alt=\"\" class=\"alignnone size-full wp-image-620\" decoding=\"async\" height=\"416\" sizes=\"(max-width: 123px) 100vw, 123px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a1903163fbcf.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a1903163fbcf.png 123w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a1903163fbcf-89x300.png 89w\" width=\"123\"\/><\/p>\n<h2>Best Practices f\u00fcr saubere Klassenarchitekturlayouts<\/h2>\n<ul>\n<li><strong>Klassenmember visuell gruppieren:<\/strong> Gruppieren Sie Ihre Klassenvariablen immer am Anfang des K\u00f6rpers und Ihre Funktionen am Ende. Dieses Layout entspricht den Standard-IDE-Klassenstrukturen und macht Ihre Diagramme sofort lesbar.<\/li>\n<li><strong>Geben Sie R\u00fcckgabetypen an:<\/strong> Wenn Sie Methoden deklarieren, f\u00fcgen Sie den R\u00fcckgabetyp am Ende der Methodenzeile an (z. B. <code>+fetchData() DataSet<\/code>). Dadurch erhalten Ihr Ingenieurteam pr\u00e4zise Implementierungskontextinformationen.<\/li>\n<li><strong>Halten Sie die Vielzahl klar:<\/strong> Um Arrayanzahlen oder Sammlungsgr\u00f6\u00dfen anzugeben, f\u00fcgen Sie Vielzahl-Textzeichenfolgen direkt an die Beziehungslinienh\u00fclle an (z. B. <code>Kunde \"1\" --o \"viele\" Bestellung<\/code>).<\/li>\n<\/ul>\n<h2>Realit\u00e4tsnahe Mermaid.js-Klassendiagramm-Beispiele<\/h2>\n<h3>Beispiel 1: Zahlungs-Gateway-Dom\u00e4nen-Unter-Subsystem (Kapselung &amp; Schnittstellen)<\/h3>\n<p>Dieser funktionale Entwurf modelliert einen Online-Kassen-Dom\u00e4nen-Service. Er zeigt, wie man Zugriffsmodifizierer verwendet, Klassenmember gruppiert und Schnittstellenbeziehungen sauber implementiert.<\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNq1UUFqw0AMvAfyhyWnhNI8IASfAsX0Ymj7AHVXcRd2pUUrtzVp\/147ToiTlNJLdBzNSDOSDZDzxkMtEKcT05XtEVNBG5G0EraYM4vZDd2+1mtPirIFi0Vxgu\/SQD5I5xC5IV2YV+aAQCOi4LYhd+TpJ5XugvY9nYzdPKn4hA+g+AHt2Mp936HaQPKP2F7jSC5x5\/ZFwm2M7pcFrp8FKINVzzTPCtrkhXln736N0w2sIPwRJ6LYNyAt3Y3Pe37Y5fKruP78yszKmAL2aJ4NuvME\/9H9AGFPu8s=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Mermaid in VPasCode bearbeiten<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">Mermaid<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNq1kcFqAjEQhu+C7xA8KaIPILInoSxeBNuLtzEZYyA7CZPZ1lX77s1WimsrxYtz\/Oebyf9PtIeUFg4sQ9XvqVy6VdQG9r4mmyKHI6YUWJ0u7bbmc0eCvAONRXGVxxnWGV5BUyHJcIvCYEdqG4JHoA7IuKvJ\/HByoNL8wj77va6dtbCL+AKCH9B0rUzaDlkF0S2x+asjmRiy2zf2zzH6\/ZgP9pWBEmhxgYZJQOo0Uu\/Bmbtx8sIV+H\/iVMh6DySlefJ5bw87nZ6LO18\/U4Oyih7bdQ5ZBpfZ2xSPzn4BiGy\/3w==\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-mermaid\"><code class=\"language-mermaid\" data-language=\"mermaid\" class=\"language-mermaid\">classDiagram\r\n    class Zahlungsprozessor {\r\n        &lt;&lt;interface&gt;&gt;\r\n        +processPayment(betrag) boolean\r\n        +refundPayment(txnId) boolean\r\n    }\r\n\r\n    class StripeGateway {\r\n        -String apiKey\r\n        -String endpointUrl\r\n        +processPayment(betrag) boolean\r\n        +refundPayment(txnId) boolean\r\n        -logTransaction(status) void\r\n    }\r\n\r\n    class PayPalGateway {\r\n        -String merchantId\r\n        +processPayment(betrag) boolean\r\n        +refundPayment(txnId) boolean\r\n    }\r\n\r\n    StripeGateway ..|&gt; Zahlungsprozessor : \"Implementiert\"\r\n    PayPalGateway ..|&gt; Zahlungsprozessor : \"Implementiert\"<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNq1kcFqAjEQhu+C7xA8KaIPILInoSxeBNuLtzEZYyA7CZPZ1lX77s1WimsrxYtz\/Oebyf9PtIeUFg4sQ9XvqVy6VdQG9r4mmyKHI6YUWJ0u7bbmc0eCvAONRXGVxxnWGV5BUyHJcIvCYEdqG4JHoA7IuKvJ\/HByoNL8wj77va6dtbCL+AKCH9B0rUzaDlkF0S2x+asjmRiy2zf2zzH6\/ZgP9pWBEmhxgYZJQOo0Uu\/Bmbtx8sIV+H\/iVMh6DySlefJ5bw87nZ6LO18\/U4Oyih7bdQ5ZBpfZ2xSPzn4BiGy\/3w==\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNq1UUFqw0AMvAfyhyWnhNI8IASfAsX0Ymj7AHVXcRd2pUUrtzVp\/147ToiTlNJLdBzNSDOSDZDzxkMtEKcT05XtEVNBG5G0EraYM4vZDd2+1mtPirIFi0Vxgu\/SQD5I5xC5IV2YV+aAQCOi4LYhd+TpJ5XugvY9nYzdPKn4hA+g+AHt2Mp936HaQPKP2F7jSC5x5\/ZFwm2M7pcFrp8FKINVzzTPCtrkhXln736N0w2sIPwRJ6LYNyAt3Y3Pe37Y5fKruP78yszKmAL2aJ4NuvME\/9H9AGFPu8s=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Mermaid in VPasCode bearbeiten<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"dKUznWo\"><img loading=\"lazy\" alt=\"\" class=\"alignnone size-full wp-image-621\" decoding=\"async\" height=\"480\" loading=\"lazy\" sizes=\"auto, (max-width: 751px) 100vw, 751px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a19031bd8def.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a19031bd8def.png 751w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a19031bd8def-300x192.png 300w\" width=\"751\"\/><\/p>\n<p><strong>Syntax-Aufschl\u00fcsselung:<\/strong> Das <code>&lt;&lt;interface&gt;&gt;<\/code> -Tag markiert `Zahlungsprozessor` eindeutig als hochrangigen architektonischen Vertrag. Die beiden konkreten Gateway-Implementierungsklassen verwenden private Felder (<code>-apiKey<\/code>) f\u00fcr sensible Anmeldeinformationen, w\u00e4hrend \u00f6ffentliche Zahlungsprozeduren (<code>+processPayment<\/code>) \u00fcber die Realisierungs-Pfeil (<code>..|&gt;<\/code>).<\/p>\n<h3>Beispiel 2: Unternehmens-Order-Verarbeitungs-Engine (Zusammensetzung &amp; Vielzahl)<\/h3>\n<p>Dieser fortgeschrittene Systementwurf modelliert ein komplexes E-Commerce-Order-Management-Schema und zeigt, wie man strukturelle Eigentumsverh\u00e4ltnisse und Objektanzahlen \u00fcber mehrere miteinander verbundene Klassen dokumentiert.<\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNp1UctqAzEMvAfyD8KnNmEDufZQKJtLTi2k\/QDVFqnBj62spYTQf6\/3kcTbbX2wYEbjGcnaYUo7i0dGv1xAPrpDoG6TRE8M5wHtztoGAT0Se1MQB2EbjhDQU4E2DjU9syG+u4e+DuT3clFa9czMJ3boxGSHQmDyVTPlu6Cq0T\/riAO6g6C0qZBqdLp1WfQaBV1OY2L77uj\/OHshP4tkMzhJ1IGfLQaxcirg4XFo2Gp6IX4LVv50ejKGKdfzfJNJmEjmuJ46jWgTUx6rjub3RNdfVFsFVRVBeQwnNa78AVT8CkkNvbe51XazWXX9q153bdbRZye6CC7xh7cfb33pwzYJJKofTEiiUg==\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Mermaid in VPasCode bearbeiten<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">Mermaid<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNp9UUFOAzEMvFfqH6ycoGgr9coBCdoL4gBS4QFuYi2RssniOCCK+DtZsohsF5GDD2OPZ8bRDmPcWWwZu+UC8tMDAnfJG4KPAg3vwnoBnaKEjvjWVI29sPUteOyoQnuHmu7ZEJ+dww1FIeeSb8vE53JRi\/22Z4ph2DCR26EQmFy2TLlWrWZ0knnEHt1eUFKsqBqdTi6THoOgy75MSAdH\/3nqQ7Rig58Zs0LdxNcAviT0YuW9gosE9Gw1PRA\/eSt\/6l0bphinJx\/zRGEimeN6qjSi2XEOtw3mNFf5UrVR0DQB1KslR6q+\/SWoA+W4R1GFcXoDtVmvVwN99b1mRhV6FsAUR\/pPpCJ5dTL\/ZtnAMbUFzDyvvgB\/0bYA\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-mermaid\"><code class=\"language-mermaid\" data-language=\"mermaid\" class=\"language-mermaid\">classDiagram\r\n    class Kunde {\r\n        +int customerId\r\n        +String name\r\n        +placeOrder() Bestellung\r\n    }\r\n\r\n    class Bestellung {\r\n        +int orderId\r\n        +Date dateCreated\r\n        -String internalStatus\r\n        +calculateTotal() double\r\n    }\r\n\r\n    class Bestellposition {\r\n        +int itemId\r\n        +int quantity\r\n        +double pricePerUnit\r\n    }\r\n\r\n    class Adresse {\r\n        +String street\r\n        +String city\r\n        +String postalCode\r\n    }\r\n\r\n    Kunde \"1\" --o \"viele\" Bestellung : \"besitzt\"\r\n    Bestellposition \"1..*\" --* \"1\" Bestellung : \"besteht aus\"\r\n    Adresse \"1\" --&gt; Bestellung : \"wird zugestellt an\"<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNp9UUFOAzEMvFfqH6ycoGgr9coBCdoL4gBS4QFuYi2RssniOCCK+DtZsohsF5GDD2OPZ8bRDmPcWWwZu+UC8tMDAnfJG4KPAg3vwnoBnaKEjvjWVI29sPUteOyoQnuHmu7ZEJ+dww1FIeeSb8vE53JRi\/22Z4ph2DCR26EQmFy2TLlWrWZ0knnEHt1eUFKsqBqdTi6THoOgy75MSAdH\/3nqQ7Rig58Zs0LdxNcAviT0YuW9gosE9Gw1PRA\/eSt\/6l0bphinJx\/zRGEimeN6qjSi2XEOtw3mNFf5UrVR0DQB1KslR6q+\/SWoA+W4R1GFcXoDtVmvVwN99b1mRhV6FsAUR\/pPpCJ5dTL\/ZtnAMbUFzDyvvgB\/0bYA\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNp1UctqAzEMvAfyD8KnNmEDufZQKJtLTi2k\/QDVFqnBj62spYTQf6\/3kcTbbX2wYEbjGcnaYUo7i0dGv1xAPrpDoG6TRE8M5wHtztoGAT0Se1MQB2EbjhDQU4E2DjU9syG+u4e+DuT3clFa9czMJ3boxGSHQmDyVTPlu6Cq0T\/riAO6g6C0qZBqdLp1WfQaBV1OY2L77uj\/OHshP4tkMzhJ1IGfLQaxcirg4XFo2Gp6IX4LVv50ejKGKdfzfJNJmEjmuJ46jWgTUx6rjub3RNdfVFsFVRVBeQwnNa78AVT8CkkNvbe51XazWXX9q153bdbRZye6CC7xh7cfb33pwzYJJKofTEiiUg==\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Mermaid in VPasCode bearbeiten<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"nhNYQKB\"><img loading=\"lazy\" alt=\"\" class=\"alignnone size-full wp-image-622\" decoding=\"async\" height=\"450\" loading=\"lazy\" sizes=\"auto, (max-width: 731px) 100vw, 731px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a190321054b5.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a190321054b5.png 731w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a190321054b5-300x185.png 300w\" width=\"731\"\/><\/p>\n<p><strong>Syntaxanalyse:<\/strong> Dieses Beispiel veranschaulicht den Unterschied zwischen Aggregation und Komposition. Der feste Diamantpfeil (<code>--*<\/code>) zeigt, dass ein `OrderItem` eng mit einem `Order` verkn\u00fcpft ist (wenn eine Bestellung gel\u00f6scht wird, werden auch ihre einzelnen Zeilenartikel zerst\u00f6rt). Umgekehrt zeigt der klare Diamantpfeil (<code>--o<\/code>) zeigt an, dass ein `Customer` mehrere Bestellungen besitzt, aber beide Entit\u00e4ten unabh\u00e4ngig voneinander existieren k\u00f6nnen. Vielfachkeitszeichen (wie <code>\"1..*\"<\/code>) definieren die relationalen Anforderungen des Systems.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Was ist ein Klassendiagramm? Ein Klassendiagramm ist ein strukturelles UML-Diagramm das die statische Architektur eines objektorientierten Softwaresystems visualisiert. Als unverzichtbares UML-Diagrammtyp, zeichnet die einzelnen Klassen, Schnittstellen und Datenmodelle innerhalb Ihrer Anwendung auf und dokumentiert explizit deren interne Felder (Attribute), operativen&#8230;<\/p>\n","protected":false},"author":4,"featured_media":2116,"parent":0,"menu_order":2,"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-2115","ld_docs","type-ld_docs","status-publish","has-post-thumbnail","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 Class Diagram Syntax | VPasCode Text to Diagram Guide<\/title>\n<meta name=\"description\" content=\"Document code structures and object relationships using Mermaid class 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-class-diagram-syntax-guide\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mermaid Class Diagram Syntax | VPasCode Text to Diagram Guide\" \/>\n<meta property=\"og:description\" content=\"Document code structures and object relationships using Mermaid class 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-class-diagram-syntax-guide\/\" \/>\n<meta property=\"og:site_name\" content=\"VPasCode\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.vpascode.com\/de\/wp-content\/uploads\/sites\/4\/2026\/05\/img_6a190321054b5-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"731\" \/>\n\t<meta property=\"og:image:height\" content=\"450\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/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=\"4\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-class-diagram-syntax-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/docs\\\/vpascode-docs\\\/mermaid-js-class-diagram-syntax-guide\\\/\",\"name\":\"Mermaid Class 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-class-diagram-syntax-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/docs\\\/vpascode-docs\\\/mermaid-js-class-diagram-syntax-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/wp-content\\\/uploads\\\/sites\\\/4\\\/2026\\\/05\\\/img_6a190321054b5-1.png\",\"datePublished\":\"2026-05-26T08:05:43+00:00\",\"description\":\"Document code structures and object relationships using Mermaid class diagrams in VPasCode, a free diagram-as-code tool.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/docs\\\/vpascode-docs\\\/mermaid-js-class-diagram-syntax-guide\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/de\\\/docs\\\/vpascode-docs\\\/mermaid-js-class-diagram-syntax-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/docs\\\/vpascode-docs\\\/mermaid-js-class-diagram-syntax-guide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/wp-content\\\/uploads\\\/sites\\\/4\\\/2026\\\/05\\\/img_6a190321054b5-1.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/wp-content\\\/uploads\\\/sites\\\/4\\\/2026\\\/05\\\/img_6a190321054b5-1.png\",\"width\":731,\"height\":450},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/docs\\\/vpascode-docs\\\/mermaid-js-class-diagram-syntax-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 Klassendiagramm-Syntaxanleitung\"}]},{\"@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 Class Diagram Syntax | VPasCode Text to Diagram Guide","description":"Document code structures and object relationships using Mermaid class 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-class-diagram-syntax-guide\/","og_locale":"de_DE","og_type":"article","og_title":"Mermaid Class Diagram Syntax | VPasCode Text to Diagram Guide","og_description":"Document code structures and object relationships using Mermaid class diagrams in VPasCode, a free diagram-as-code tool.","og_url":"https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/mermaid-js-class-diagram-syntax-guide\/","og_site_name":"VPasCode","og_image":[{"width":731,"height":450,"url":"https:\/\/www.vpascode.com\/de\/wp-content\/uploads\/sites\/4\/2026\/05\/img_6a190321054b5-1.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_misc":{"Gesch\u00e4tzte Lesezeit":"4\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/mermaid-js-class-diagram-syntax-guide\/","url":"https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/mermaid-js-class-diagram-syntax-guide\/","name":"Mermaid Class 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-class-diagram-syntax-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/mermaid-js-class-diagram-syntax-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vpascode.com\/de\/wp-content\/uploads\/sites\/4\/2026\/05\/img_6a190321054b5-1.png","datePublished":"2026-05-26T08:05:43+00:00","description":"Document code structures and object relationships using Mermaid class diagrams in VPasCode, a free diagram-as-code tool.","breadcrumb":{"@id":"https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/mermaid-js-class-diagram-syntax-guide\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/mermaid-js-class-diagram-syntax-guide\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/mermaid-js-class-diagram-syntax-guide\/#primaryimage","url":"https:\/\/www.vpascode.com\/de\/wp-content\/uploads\/sites\/4\/2026\/05\/img_6a190321054b5-1.png","contentUrl":"https:\/\/www.vpascode.com\/de\/wp-content\/uploads\/sites\/4\/2026\/05\/img_6a190321054b5-1.png","width":731,"height":450},{"@type":"BreadcrumbList","@id":"https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/mermaid-js-class-diagram-syntax-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 Klassendiagramm-Syntaxanleitung"}]},{"@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\/2115","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:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.vpascode.com\/de\/wp-json\/wp\/v2\/media\/2116"}],"wp:attachment":[{"href":"https:\/\/www.vpascode.com\/de\/wp-json\/wp\/v2\/media?parent=2115"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/de\/wp-json\/wp\/v2\/ld_collection?post=2115"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}