{"id":11936,"date":"2026-03-05T10:48:15","date_gmt":"2026-03-05T02:48:15","guid":{"rendered":"https:\/\/www.cybermedian.com\/de\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/"},"modified":"2026-03-05T10:48:15","modified_gmt":"2026-03-05T02:48:15","slug":"a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc","status":"publish","type":"post","link":"https:\/\/www.cybermedian.com\/de\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/","title":{"rendered":"Eine umfassende Schritt-f\u00fcr-Schritt-Fallstudie: Anwendung des C4-Modells auf das Internet-Banking-System (Big Bank plc)"},"content":{"rendered":"<p>Die\u00a0<strong>C4-Modell<\/strong>, entwickelt von Simon Brown, ist eine einfache, hierarchische und entwicklungsfreundliche Methode zur Visualisierung von Softwarearchitekturen. Es verwendet vier Abstraktionsstufen (daher \u201eC4\u201c), um ein System von der h\u00f6chsten \u00dcbersichtsebene bis hin zu Code-Ebenen detailliert zu beschreiben:<\/p>\n<ol>\n<li><strong>Systemkontext<\/strong>\u00a0(Ebene 1) \u2013 Das gro\u00dfe Ganze: das System und seine Benutzer\/externen Abh\u00e4ngigkeiten.<\/li>\n<li><strong>Container<\/strong>\u00a0(Ebene 2) \u2013 Hochrangige technologische Entscheidungen und Verantwortlichkeiten.<\/li>\n<li><strong>Komponenten<\/strong>\u00a0(Ebene 3) \u2013 Wichtige logische Bausteine innerhalb eines Containers.<\/li>\n<li><strong>Code<\/strong>\u00a0(Ebene 4) \u2013 Optional Details auf Klassenebene oder zur Code-Struktur.<\/li>\n<\/ol>\n<p>Es wird durch drei zus\u00e4tzliche Diagrammtypen unterst\u00fctzt:<\/p>\n<ul>\n<li><strong>Systemlandschaft<\/strong><\/li>\n<li><strong>Dynamisch<\/strong><\/li>\n<li><strong>Bereitstellung<\/strong><\/li>\n<\/ul>\n<p class=\"\">Das Modell ist notationsunabh\u00e4ngig (Sie k\u00f6nnen jedes Diagrammierungstool verwenden) und legt den Fokus auf Klarheit, Konsistenz und ma\u00dfgeschneiderte Detailtiefe f\u00fcr die Zielgruppe. Es wird weithin eingesetzt, da es \u201eBig Ball of Mud\u201c-Architekturdiagramme vermeidet und von Whiteboard-Skizzen bis hin zu automatisierter Dokumentation skalierbar ist.<\/p>\n<p>F\u00fcr diese\u00a0<strong>gezielte Fallstudie<\/strong>, verwenden wir das kanonische Beispiel von der offiziellen C4-Website:\u00a0<strong>Internet-Banking-System<\/strong>\u00a0f\u00fcr die fiktive \u201eBig Bank plc\u201c. Das Gesch\u00e4ftsziel besteht darin, privaten Kunden die M\u00f6glichkeit zu geben, ihre Konten online einzusehen und Zahlungen vorzunehmen, wobei das System mit den bestehenden Kernsystemen der Bank integriert wird.<\/p>\n<p>Wir werden durch\u00a0<strong>jede Ebene<\/strong>\u00a0mit:<\/p>\n<ul>\n<li>Zweck und Zielgruppe<\/li>\n<li>Wichtige Elemente + Verantwortlichkeiten<\/li>\n<li>Beziehungen<\/li>\n<li>Ein sofort verwendbares\u00a0<strong>PlantUML C4-Diagramm<\/strong> (PlantUML unterst\u00fctzt C4-Syntax und wird in den meisten Markdown-Viewern wundersch\u00f6n gerendert)<\/li>\n<li>Rationale und wesentliche Entscheidungen<\/li>\n<li>Wie das Diagramm die Stakeholder unterst\u00fctzt<\/li>\n<\/ul>\n<h3>Schritt 1: Umfang definieren und das Systemkontextdiagramm erstellen (Ebene 1)<\/h3>\n<p><strong>Zweck<\/strong>: Zeigen, wie das neue Internet-Banking-System in die Welt passt. Zielgruppe: Gesch\u00e4ftsstakeholder, nicht-technische Personen, neue Teammitglieder.<\/p>\n<p><strong>Elemente<\/strong>\u00a0(aus dem offiziellen Beispiel):<\/p>\n<ul>\n<li><strong>Privatkunden des Online-Bankings<\/strong>\u00a0(Person) \u2013 Ein Kunde mit einem oder mehreren privaten Bankkonten.<\/li>\n<li><strong>Internet-Banking-System<\/strong>\u00a0(Software-System) \u2013 Das neue System, das wir entwickeln.<\/li>\n<li><strong>Kernbank-System<\/strong>\u00a0(Software-System, vorhanden) \u2013 Mainframe, der Kundendaten, Konten und Transaktionen verwaltet.<\/li>\n<li><strong>E-Mail-System<\/strong>\u00a0(Software-System, extern) \u2013 Amazon Web Services Simple Email Service (AWS SES) zur Versendung von Best\u00e4tigungen.<\/li>\n<\/ul>\n<p><strong>Beziehungen<\/strong>:<\/p>\n<ul>\n<li>Kunde \u2192 nutzt \u2192 Internet-Banking-System (zum Anzeigen von Konten und zur Zahlung)<\/li>\n<li>Internet-Banking-System \u2192 nutzt \u2192 Kernbank-System (f\u00fcr Kontodaten und Zahlungen)<\/li>\n<li>Internet-Banking-System \u2192 sendet E-Mail \u00fcber \u2192 E-Mail-System<\/li>\n<\/ul>\n<p>Hier ist das\u00a0<strong>PlantUML C4-Kontextdiagramm<\/strong>:<\/p>\n<p id=\"GeUKeRH\"><img alt=\"\" class=\"alignnone size-full wp-image-15959\" decoding=\"async\" height=\"739\" loading=\"lazy\" sizes=\"auto, (max-width: 527px) 100vw, 527px\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8e7e9e8ab5.png\" srcset=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8e7e9e8ab5.png 527w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8e7e9e8ab5-214x300.png 214w\" width=\"527\"\/><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">PlantUML<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com#plantuml:bLF9Zjf04BqZyGyLJaO2h4WvvJG4h6GaPq0n2Ct9Akm2Mkd5wYwsV7swRSCW9YZ9qQ_ULbtoasEql5Uos_aWT27t9S6EkNAVuzYFM1IZWt1xbCCABPPYgqQ5KN4bKGVLq74fnJgUV1hE0xJydiOA7PFrK3unckd4ewhsxtRIyUjikSWNita-dQrUeluLMZqllkLfyZLvcGQqss71aY0xUoi5hGzC1MujAeXIEf24ZttO60lFVcWrCNn1_LFeRQiABdEopkYes3isYkm0UWs2yagUjBEU7uxXmeIZu1qOJU03bB44rKMuzaB0eZ1xpMxKyssRl4YqFV9rOvsx6lU-3ng6oCMEGDCH6cwzpq7GCP0k6O2w18MriCApehlSmjTxdpa9fT_d9IVXE40AXTxun_JdzluoGDVbIsGSNFC7TG6sg1qMB8o-JS-J4qVapUHRT18-RpB72dyP3IjQGqRs80foa0bL-GEtr0Q5QBpA84kovgwET5dNCdeZhCAtw6xd1ycRgpv--QKZ5nI1_v3rvmVy9-dTvfclx1hGdn6RhYcUy-dVs_OlpF_fsOgMToTu7F7a6_g_yJS0\" 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>PlantUML 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\">PlantUML<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com#plantuml:ZL7DRjf04BuZyGvJJY35e4ezzHGIh3OA2QY6eFPYBNXYLkoEhTqnJNYUFaPkl5XcRMXGAjJSx6zdlh-vzAmSLzQqMvyqhKoL8QoPI_zrC90drgl-LljAcQXKJcKwj_rLOGUbKHIs8i-PqSl1zPTe6g3vtNXWbMTq0gNN1J4-SR-i-TkjyV3dP3vBPvDfEfeixhkzlz3YPlOz7SVVuljHGDijrcmGacUXifk69jCgTyfQwCPB98JFFNZSlpZ8b8SRcN2475qfscZAesOpC4tH-OAwcueol83ErEcjuleFClGm8QC9Ztk-8oEn9hYj1wncG7csK6JemEBQeKE2iYQHZx1MswD-HtmtgbrzS9Ck6zRKrxXGd_4PL4SIWx0wXePTPM58EzIvw6mBiLJhW1YJDmU_rDfKb9_gReGxIBxftHwG4vs7mgsLX2C9TASqFKgdKap8LuUcB2IxE9MREKLURLWN5BoW-wqC8vz8f_4JTz4gRTwquqZepOdoqAgTv5ZW4X9qMxsI-XDjIpbq75QFA7I7YmIIEEdLGH_aWE9AijOrNA7d_H_MkG27sjkj7sYE5pvV_dt5EmxpOVhisBybVcplNVf4B2D3KmBiNvRe6gjZzPoE_cEsTnpxgCl3mlpT3SxJNuP6hNa5\" \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 PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-plantuml\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">\r\n@startuml\r\n!include https:\/\/static.visual-paradigm.com\/plantuml-stdlib\/C4-PlantUML\/master\/C4_Context.puml\r\n\r\nLAYOUT_TOP_DOWN()\r\nLAYOUT_WITH_LEGEND()\r\n\r\ntitle Systemkontextdiagramm (Ebene 1) f\u00fcr das Internet-Banking-System\r\n\r\nPerson(kunde, \"Privatkunde des Online-Bankings\", \"Ein Kunde mit einem oder mehreren privaten Bankkonten.\")\r\nSystem(internet_banking_system, \"Internet-Banking-System\", \"Das neue System zum Anzeigen von Konten und zur Zahlung.\")\r\nSystem(kernbank_system, \"Kernbank-System\", \"Vorhandener Mainframe, der Kundendaten, Konten und Transaktionen verwaltet.\")\r\nSystem_Ext(email_system, \"E-Mail-System\", \"Amazon Web Services Simple Email Service (AWS SES) zur Versendung von Best\u00e4tigungen.\")\r\n\r\nRel(kunde, internet_banking_system, \"Nutzt\")\r\nRel(internet_banking_system, kernbank_system, \"Nutzt\")\r\nRel(internet_banking_system, email_system, \"Sendet E-Mail \u00fcber\")\r\n\r\nLay_D(kunde, internet_banking_system)\r\nLay_D(internet_banking_system, kernbank_system)\r\nLay_U(email_system, internet_banking_system)\r\n@enduml<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com#plantuml:ZL7DRjf04BuZyGvJJY35e4ezzHGIh3OA2QY6eFPYBNXYLkoEhTqnJNYUFaPkl5XcRMXGAjJSx6zdlh-vzAmSLzQqMvyqhKoL8QoPI_zrC90drgl-LljAcQXKJcKwj_rLOGUbKHIs8i-PqSl1zPTe6g3vtNXWbMTq0gNN1J4-SR-i-TkjyV3dP3vBPvDfEfeixhkzlz3YPlOz7SVVuljHGDijrcmGacUXifk69jCgTyfQwCPB98JFFNZSlpZ8b8SRcN2475qfscZAesOpC4tH-OAwcueol83ErEcjuleFClGm8QC9Ztk-8oEn9hYj1wncG7csK6JemEBQeKE2iYQHZx1MswD-HtmtgbrzS9Ck6zRKrxXGd_4PL4SIWx0wXePTPM58EzIvw6mBiLJhW1YJDmU_rDfKb9_gReGxIBxftHwG4vs7mgsLX2C9TASqFKgdKap8LuUcB2IxE9MREKLURLWN5BoW-wqC8vz8f_4JTz4gRTwquqZepOdoqAgTv5ZW4X9qMxsI-XDjIpbq75QFA7I7YmIIEEdLGH_aWE9AijOrNA7d_H_MkG27sjkj7sYE5pvV_dt5EmxpOVhisBybVcplNVf4B2D3KmBiNvRe6gjZzPoE_cEsTnpxgCl3mlpT3SxJNuP6hNa5\" \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 PlantUML 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#plantuml:bLF9Zjf04BqZyGyLJaO2h4WvvJG4h6GaPq0n2Ct9Akm2Mkd5wYwsV7swRSCW9YZ9qQ_ULbtoasEql5Uos_aWT27t9S6EkNAVuzYFM1IZWt1xbCCABPPYgqQ5KN4bKGVLq74fnJgUV1hE0xJydiOA7PFrK3unckd4ewhsxtRIyUjikSWNita-dQrUeluLMZqllkLfyZLvcGQqss71aY0xUoi5hGzC1MujAeXIEf24ZttO60lFVcWrCNn1_LFeRQiABdEopkYes3isYkm0UWs2yagUjBEU7uxXmeIZu1qOJU03bB44rKMuzaB0eZ1xpMxKyssRl4YqFV9rOvsx6lU-3ng6oCMEGDCH6cwzpq7GCP0k6O2w18MriCApehlSmjTxdpa9fT_d9IVXE40AXTxun_JdzluoGDVbIsGSNFC7TG6sg1qMB8o-JS-J4qVapUHRT18-RpB72dyP3IjQGqRs80foa0bL-GEtr0Q5QBpA84kovgwET5dNCdeZhCAtw6xd1ycRgpv--QKZ5nI1_v3rvmVy9-dTvfclx1hGdn6RhYcUy-dVs_OlpF_fsOgMToTu7F7a6_g_yJS0\" 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>PlantUML in VPasCode bearbeiten<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p><strong>Rationale und Nutzen<\/strong>: Dieses einzige Diagramm beantwortet sofort die Frage \u201eWas bauen wir und mit wem kommuniziert es?\u201c. Es verhindert Scope Creep, indem externe Abh\u00e4ngigkeiten explizit gemacht werden. Gesch\u00e4ftsstakeholder lieben es, weil noch keine technischen Details enthalten sind.<\/p>\n<h3>Schritt 2: Container-Diagramm (Ebene 2)<\/h3>\n<p><strong>Zweck<\/strong>: Zoomen Sie in das Internet-Banking-System hinein und zeigen Sie die wichtigsten bereitstellbaren\/ausf\u00fchrbaren Einheiten (Container) sowie deren technologische Auswahl. Zielgruppe: Architekten, Leitentwickler, Betrieb.<\/p>\n<p><strong>Container innerhalb des Internet-Banking-Systems<\/strong>:<\/p>\n<ul>\n<li><strong>Einseitenanwendung<\/strong>\u00a0(Web-Browser \u2013 JavaScript + Angular) \u2013 Vollst\u00e4ndige Internet-Banking-Oberfl\u00e4che.<\/li>\n<li><strong>Mobile App<\/strong>\u00a0(Mobilger\u00e4t \u2013 iOS\/Android-nativ oder React Native) \u2013 Eingeschr\u00e4nkte Funktionalit\u00e4t f\u00fcr den Einsatz unterwegs.<\/li>\n<li><strong>API-Anwendung<\/strong>\u00a0(Server-seitig \u2013 Java + Spring Boot) \u2013 JSON\/HTTPS-API, die von beiden Frontends genutzt wird.<\/li>\n<li><strong>Datenbank<\/strong>\u00a0(Relationale DB \u2013 PostgreSQL) \u2013 Speichert Sitzungsdaten, Benutzereinstellungen, zwischengespeicherte Kontozusammenfassungen (Kerndaten verbleiben im Hauptrechner).<\/li>\n<\/ul>\n<p><strong>Wichtige Beziehungen<\/strong>\u00a0(Identische externe Systeme wie Ebene 1):<\/p>\n<ul>\n<li>SPA &amp; Mobile-App \u2192 Aufruf \u2192 API-Anwendung<\/li>\n<li>API-Anwendung \u2194 Datenbank<\/li>\n<li>API-Anwendung \u2192 Kernbankensystem &amp; E-Mail-System<\/li>\n<\/ul>\n<p><strong>PlantUML C4-Container-Diagramm<\/strong>:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/uml.planttext.com\/plantuml\/png\/lLN1ZY8t4BqZyGyL52azoW27x2bIf6M0P2TY1tORDCe9LNSNuCHjExORbaIHyW_vm_sIBRiRwDbXjCfbEU5oLRrNhbVLhvr7wwjITZlV29NBgY3OUM_SZyCXNtcH3_R2LIZx1YqMObiESbqEZKGLelhE5r9am_6h_YAOLczdmnAT9ykczLWhZqAH7PZh21OFWwtmkogh7DcStKdv2E0hWuNzuG8a-BQ_OO--CrPuSYUSWlRXpWrHRIk9NmVhTzpZLm4oslcj9VUdRE2wdTdej_bgkLxE5-l9_F4XkJcR7k-NRzQpwI_JXqcmTZjUU4amVWNdJi14uDPY2HjjuPwfMKKUxb3z8TGMqYEZbo5oGTPfbUILyxeaUmkzseBox3nkxdfyEOAJ9nouTD2AW05ARGdCAJ3ZGC0yrvNoRj2B36l4zHtR2hJ7H3IKrbcDidRHWI5U81lGbpi2HGUeVMDfUq67u7I20rG5b1W33HvBgYd0tzqEyE_yFeapo1bJzfFKN-2MO6IC53cFWbO1x5TkVPfROJny3wDQSy7-SoKbdEX3GnzMztptRTtTdtgDH4FfJr5BdGb9QpI6CxsDXu0RyefvEXofmcfHGFAUCFVmm6JsT1DkPwBap0LiAfK7XYY5FyONO6Nv7VMt6bY6RH8sv7XE0Orey4UB-sj5Sxaff-2YxhJsqPhE7uPlbij52Y66SGh8Zf1fLi361bcJAbmREypDC-X9bXJeCKD7d7JI_0q0YrhzwRjPEAMUvUJ0aNDC2qBCRG2rO2njo9BAoTr2ZlcEYJIT1rUL9Lf1JtXSnYgm-UUYn2HdZEVY6mSXFnVUz8DmFfXABcJ3OyLRW8KcW-ay43NFan1lenAzHUKmTgoUX6OEfXzyGfnCNg2duTZ279Nu5rV_I1caP7bDy9EaeZIicCQrja8oUamXdQOtKGwEMn5fQRKHjiGBTBVp7RmdMLjsmhXkXu-jqOyZSVhrLYu-vSKG1H0IFOrgI_fBKMs4imxPQOnIjiDQYZk5jc7-PsZB7Iu2X1uFMU62WClOgqFSpE1rbFpaRZmCUhoIuxfqtbKKr0T3M1b6YS_m1JAVAI0DKrGRUQzXY3-7XkRDyAWh3piHzboYJRq7uEE__y6Ef75m-ZG3MjOThpII53SWPEHvOOKl21xNarRtNjZ3PyyNz_ILHsY2Lfyf-sM8RkSrbyoVkqy0\"\/><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">PlantUML<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com#plantuml:lLNDZjis4BuRy3jCZGBLeklLeJaLA12lxJPRE6idih7eoHX9OvijHR8aPSSf2lGTyePvaWuf-M_ZHNlAJHpEpFSDvvlHQ-VH-hgItSutGXMoBWastXltOvhobHV5tLQu6cNVeCLIhAkxGbUfaQX2LD_vKeey7Rxgpu9fyNQILkWyMJOjXrfv58hidRcEO75tjnP-K-Ur8rkmEoaV0NnjiBG_d804t_PNxD5tnWfFxe1JqZRSkHJLkfRuTR1-nor-5I2ZdLzRSd_A5gxRcGn-coxco_bqjXnDdnwJcwFfwM7-PZaP_p9-70Lhj-E5bmJ3Lt3i18m4hYrMiD8M7fYQLUJX7jKVGgqXspDw5I9dP9rMIL4xhokojz1hB2YFpiFshiUN0pXumevB1wq86A3Ibi0S0dCE12mANIllxdgHOOEul6TRYNQVY9RICczGbYuwCCGBP0FwV4EWQ0UDRonjAsWNd0vmWAg42cEWmNr53GNugzivlatY37AsZ7qazMUu9XWO8qN1Ow1L0FgLsvuLLXWFtyEWqLkm_rnB2GVgq5A7nGFVVTjqzgTUAyzGzWcnqhcGj4HZEClRU0YO8QUOPkb0bLQB4fBtX8M7HoQofPjmEn4LPorXLQiYi4Cf_3vMpeho6-glDR3ypWdOaECI7ereiGUpXsl5SfaPXtCnzrhxQCscZ-cR-NoMGOXXZ1BoFUIQkxwoGSgaIdUE6sRb0dQK9oLwpD4H9nordo7vh55xzcuIJfbd-JXmv1nJWX1p6m0j64ihigGAShTGOB5X4csdmTLLXLRG1OVJ60KcVv-KbnICyQNOXa6uNmfj_44u7qmL5xBYCUAfPs79O3eEGCFp8BpRg3nlKJcCdMgKt-f-_C4dnCda2NeSZcUOWme_SlLFb4D6bjS2FqacAiDAQLqRAoI3fmooSNOJPU2u3P6MLYjXApn1TplVmNkIZMKZZEjs-7WswiqOB5nymbxiTOYxTBfGxbNVcEQai25AwIuLTF0yp_M_0evEPphY4IbTa60LNtmNzobu7JECxeTfKDNp-ElTVrTJ412ai32CGF_5uba7ip01ZP7t45uyJ7Zy2UvrxM4ZmbvAj6dc5px_ymas98s3mwyKqB9kU0sHfBYn82VFIoPiVDmlHsVjU65l7ZrVtAjNNg0DMZnJviiGtSvhBfb_J_y2\" 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>PlantUML 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\">PlantUML<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com#plantuml:lLNDRkCs4BuRy3jCWm9rK2i-T4y52gmSUvjq7TkDd0tQYp6onX9hYb99ocvS5EWxz1NsCVQMD-cJT4Z9lqtGdlOIXwCPVX_d-uPyQongM-MotVf2g8Mi4eBCsj9ys-ln9oiMLsjXAfH1YHeJaUPNYoBlbHALgmgCJQI8UzTlWgaBFToDUZaQIvf3y-j2MHIAz5NvCeB6pLKgR5R5bI6zu7HIrWFOgiH4VtC04lmrM796O4ejB9aTJa9hzytqKAMLnC-3zGkkyRC0bOMngIRpgspWsgrH-DFaOJQVJQRpmUHntBdSXnvlPpVpqV3xuNZWeksM5LOIi3Xx9OA1m5HZdiFo-PE610tSCa6jo0PzL2kXqY1wOWwvgv-IDeNgh2gLK1SkfbgiqVgLydylE3WK2jwx1UJ20Z583aL26dBAD6bIKFeo_iS1h7m_hYuylnfftY-u7lLJHpHKvd5DPMvy0gEyGj8H6F0P55K4TGYsLGwXCfGnuhfWSXuH60B2ol2nCzry-HapMQdKqu7VswrzbpgcnFfeXbWMXMf3Ak5KX_S3Qnyjj2WjVCr0tdGk_g6GqjZdZugdXFxTrKbCUYcVFouorxOlQy6_ksXSw_fnWC-BM4YQOrdoldT-0M5PEXGnYNgXIdGX4kZS4ouiZ7bCrtJPY96IMMIQQQmimRkAVqIXK0fcPXlH-VZkQ6Ytt1MckQ7K77FIRjjJHbYAXauulGt2ytvm9o8kLYdqYyBwQ3GPzsvcisaKS4KN4a6-vp49X_zEUrKI0zp-ocujR8HEZacu4JlXC8Wx2LgCqP1NdSkTJHpOj9wIwCUHMqKb2UwojX09ksMM9d79NUXxAFOa7zwIhBNlmdOZk6NaEhUh9E-QObiP7XLIIpJ69nyJF8oce_d7mS-T5Illg97Q-_VzMQWsZCxGpH8FomrMfTMqo7Z1pUA8dodLC3_oy4mZI-TLTJPczL1QidwYcdaQ_cOxbAEGX_aP1dUyFfgQCCSjo_58CKIa-ROXm-tAItRQq9Nkej097oE8Xj4b3vQ63tmZrD9xDVla76z5kXiZruMlEBmLbFbOktLFSdU3r6CrTdex3juUhkOevSJwBsVwNGw6lA-M5h1Qdhfkbtoyt_-jsUST-Mqa-AXSOhm8RiH8n1Q4ybiC-jSzvxxp3LvmGXWlDN9Ze0VXolBBAenmr-H_K3dJiz61BDJAmlCdlbzEMkM46E5JKTdWHl302iDY5cLz7S3VV_u5cP3SXjt3tOMX93OxcpycmqyNeDfMXKxOP-wDmQVvOAVIAnVrFktLY_oy8Kt5mvbVNz-_tNhh_9VBVm00\" \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 PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-plantuml\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">\r\n@startuml\r\n!include https:\/\/static.visual-paradigm.com\/plantuml-stdlib\/C4-PlantUML\/master\/C4_Container.puml\r\n!include https:\/\/raw.githubusercontent.com\/tupadr3\/plantuml-icon-font-sprites\/master\/devicons\/angular.puml\r\n!include https:\/\/raw.githubusercontent.com\/tupadr3\/plantuml-icon-font-sprites\/master\/devicons\/java.puml\r\n!include https:\/\/raw.githubusercontent.com\/tupadr3\/plantuml-icon-font-sprites\/master\/devicons\/postgresql.puml\r\n\r\nLAYOUT_TOP_DOWN()\r\nLAYOUT_WITH_LEGEND()\r\n\r\ntitle C4-Container-Diagramm f\u00fcr das Internet-Banking-System\r\n\r\nPerson(kunde, \"Privatkundenkunde\", \"Ein Kunde mit einem oder mehreren privaten Bankkonten.\")\r\n\r\nSystem_Boundary(internet_banking_system, \"Internet-Banking-System\", \"Das neue System zum Ansehen von Konten und Ausf\u00fchren von Zahlungen.\") {\r\nContainer(spa, \"Einseitenanwendung\", \"JavaScript + Angular\", \"Vollst\u00e4ndige Internet-Banking-Oberfl\u00e4che\", $sprite=\"angular\")\r\nContainer(mobile_app, \"Mobile App\", \"iOS\/Android (React Native)\", \"Eingeschr\u00e4nkte Funktionalit\u00e4t f\u00fcr den Einsatz unterwegs\", $sprite=\"react\")\r\nContainer(api_app, \"API-Anwendung\", \"Java + Spring Boot\", \"JSON\/HTTPS-API, die von beiden Frontends genutzt wird\", $sprite=\"java\")\r\nContainerDb(database, \"Datenbank\", \"PostgreSQL\", \"Speichert Sitzungsdaten, Benutzereinstellungen, zwischengespeicherte Kontozusammenfassungen\", $sprite=\"postgresql\")\r\n}\r\n\r\nSystem(kernbankensystem, \"Kernbankensystem\", \"Vorhandener Hauptrechner, der Kundendaten, Konten und Transaktionen verwaltet.\")\r\nSystem_Ext(email_system, \"E-Mail-System\", \"Amazon Web Services Simple Email Service (AWS SES) zur Versendung von Best\u00e4tigungen.\")\r\n\r\n' Beziehungen\r\nRel(kunde, spa, \"Nutzt\", \"HTTPS\")\r\nRel(kunde, mobile_app, \"Nutzt\", \"HTTPS\")\r\nRel(spa, api_app, \"Ruft auf\", \"JSON\/HTTPS\")\r\nRel(mobile_app, api_app, \"Ruft auf\", \"JSON\/HTTPS\")\r\nRel(api_app, database, \"Liest aus und schreibt in\", \"JDBC\/SQL\")\r\nRel(api_app, kernbankensystem, \"Abfragen \/ Aktualisieren\", \"JSON\/HTTPS\")\r\nRel(api_app, email_system, \"Versendet E-Mail \u00fcber\", \"HTTPS\")\r\n\r\n' Layout-Hinweise (optional \u2013 hilft PlantUML, Elemente besser anzuordnen)\r\nLay_D(kunde, internet_banking_system)\r\nLay_D(internet_banking_system, kernbankensystem)\r\nLay_U(email_system, internet_banking_system)\r\n\r\n@enduml\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com#plantuml:lLNDRkCs4BuRy3jCWm9rK2i-T4y52gmSUvjq7TkDd0tQYp6onX9hYb99ocvS5EWxz1NsCVQMD-cJT4Z9lqtGdlOIXwCPVX_d-uPyQongM-MotVf2g8Mi4eBCsj9ys-ln9oiMLsjXAfH1YHeJaUPNYoBlbHALgmgCJQI8UzTlWgaBFToDUZaQIvf3y-j2MHIAz5NvCeB6pLKgR5R5bI6zu7HIrWFOgiH4VtC04lmrM796O4ejB9aTJa9hzytqKAMLnC-3zGkkyRC0bOMngIRpgspWsgrH-DFaOJQVJQRpmUHntBdSXnvlPpVpqV3xuNZWeksM5LOIi3Xx9OA1m5HZdiFo-PE610tSCa6jo0PzL2kXqY1wOWwvgv-IDeNgh2gLK1SkfbgiqVgLydylE3WK2jwx1UJ20Z583aL26dBAD6bIKFeo_iS1h7m_hYuylnfftY-u7lLJHpHKvd5DPMvy0gEyGj8H6F0P55K4TGYsLGwXCfGnuhfWSXuH60B2ol2nCzry-HapMQdKqu7VswrzbpgcnFfeXbWMXMf3Ak5KX_S3Qnyjj2WjVCr0tdGk_g6GqjZdZugdXFxTrKbCUYcVFouorxOlQy6_ksXSw_fnWC-BM4YQOrdoldT-0M5PEXGnYNgXIdGX4kZS4ouiZ7bCrtJPY96IMMIQQQmimRkAVqIXK0fcPXlH-VZkQ6Ytt1MckQ7K77FIRjjJHbYAXauulGt2ytvm9o8kLYdqYyBwQ3GPzsvcisaKS4KN4a6-vp49X_zEUrKI0zp-ocujR8HEZacu4JlXC8Wx2LgCqP1NdSkTJHpOj9wIwCUHMqKb2UwojX09ksMM9d79NUXxAFOa7zwIhBNlmdOZk6NaEhUh9E-QObiP7XLIIpJ69nyJF8oce_d7mS-T5Illg97Q-_VzMQWsZCxGpH8FomrMfTMqo7Z1pUA8dodLC3_oy4mZI-TLTJPczL1QidwYcdaQ_cOxbAEGX_aP1dUyFfgQCCSjo_58CKIa-ROXm-tAItRQq9Nkej097oE8Xj4b3vQ63tmZrD9xDVla76z5kXiZruMlEBmLbFbOktLFSdU3r6CrTdex3juUhkOevSJwBsVwNGw6lA-M5h1Qdhfkbtoyt_-jsUST-Mqa-AXSOhm8RiH8n1Q4ybiC-jSzvxxp3LvmGXWlDN9Ze0VXolBBAenmr-H_K3dJiz61BDJAmlCdlbzEMkM46E5JKTdWHl302iDY5cLz7S3VV_u5cP3SXjt3tOMX93OxcpycmqyNeDfMXKxOP-wDmQVvOAVIAnVrFktLY_oy8Kt5mvbVNz-_tNhh_9VBVm00\" \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 PlantUML 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#plantuml:lLNDZjis4BuRy3jCZGBLeklLeJaLA12lxJPRE6idih7eoHX9OvijHR8aPSSf2lGTyePvaWuf-M_ZHNlAJHpEpFSDvvlHQ-VH-hgItSutGXMoBWastXltOvhobHV5tLQu6cNVeCLIhAkxGbUfaQX2LD_vKeey7Rxgpu9fyNQILkWyMJOjXrfv58hidRcEO75tjnP-K-Ur8rkmEoaV0NnjiBG_d804t_PNxD5tnWfFxe1JqZRSkHJLkfRuTR1-nor-5I2ZdLzRSd_A5gxRcGn-coxco_bqjXnDdnwJcwFfwM7-PZaP_p9-70Lhj-E5bmJ3Lt3i18m4hYrMiD8M7fYQLUJX7jKVGgqXspDw5I9dP9rMIL4xhokojz1hB2YFpiFshiUN0pXumevB1wq86A3Ibi0S0dCE12mANIllxdgHOOEul6TRYNQVY9RICczGbYuwCCGBP0FwV4EWQ0UDRonjAsWNd0vmWAg42cEWmNr53GNugzivlatY37AsZ7qazMUu9XWO8qN1Ow1L0FgLsvuLLXWFtyEWqLkm_rnB2GVgq5A7nGFVVTjqzgTUAyzGzWcnqhcGj4HZEClRU0YO8QUOPkb0bLQB4fBtX8M7HoQofPjmEn4LPorXLQiYi4Cf_3vMpeho6-glDR3ypWdOaECI7ereiGUpXsl5SfaPXtCnzrhxQCscZ-cR-NoMGOXXZ1BoFUIQkxwoGSgaIdUE6sRb0dQK9oLwpD4H9nordo7vh55xzcuIJfbd-JXmv1nJWX1p6m0j64ihigGAShTGOB5X4csdmTLLXLRG1OVJ60KcVv-KbnICyQNOXa6uNmfj_44u7qmL5xBYCUAfPs79O3eEGCFp8BpRg3nlKJcCdMgKt-f-_C4dnCda2NeSZcUOWme_SlLFb4D6bjS2FqacAiDAQLqRAoI3fmooSNOJPU2u3P6MLYjXApn1TplVmNkIZMKZZEjs-7WswiqOB5nymbxiTOYxTBfGxbNVcEQai25AwIuLTF0yp_M_0evEPphY4IbTa60LNtmNzobu7JECxeTfKDNp-ElTVrTJ412ai32CGF_5uba7ip01ZP7t45uyJ7Zy2UvrxM4ZmbvAj6dc5px_ymas98s3mwyKqB9kU0sHfBYn82VFIoPiVDmlHsVjU65l7ZrVtAjNNg0DMZnJviiGtSvhBfb_J_y2\" 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>PlantUML in VPasCode bearbeiten<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p><strong>Begr\u00fcndung<\/strong>: Wir haben ein modernes SPA + API-Backend-Muster f\u00fcr das Web gew\u00e4hlt, eine native Mobile-App f\u00fcr Leistungsf\u00e4higkeit und die Datenbank leicht gehalten (die meisten Daten befinden sich im veralteten Hauptrechner). Dieses Diagramm ist die einzig wahre Quelle f\u00fcr Entscheidungen auf hoher Ebene bez\u00fcglich der Technologie und unterst\u00fctzt DevOps bei der Planung der Infrastruktur.<\/p>\n<h3>Schritt 3: Komponentendiagramm (Ebene 3)<\/h3>\n<p><strong>Zweck<\/strong>: Zoomen Sie in einen Container hinein (normalerweise der komplexeste \u2013 die API-Anwendung) und zeigen Sie deren wichtigste logische Komponenten. Zielgruppe: Entwicklerteams.<\/p>\n<p><strong>Beispiel: Komponenten innerhalb der API-Anwendung<\/strong>:<\/p>\n<ul>\n<li>Konten-Controller (Spring MVC)<\/li>\n<li>Authentifizierungs-Controller<\/li>\n<li>Passwort-Zur\u00fccksetzungs-Controller<\/li>\n<li>Sicherheitskomponente (verwaltet Authentifizierung, JWT usw.)<\/li>\n<li>Komponente zur Kontoverwaltung (koordiniert Aufrufe an das Kernbanking-System)<\/li>\n<li>Komponente f\u00fcr E-Mail-Benachrichtigungen<\/li>\n<\/ul>\n<p><strong>PlantUML C4-Komponentendiagramm<\/strong>\u00a0(fokussiert auf die API-Anwendung):<\/p>\n<p id=\"fzJuCAx\"><img alt=\"\" class=\"alignnone size-full wp-image-15962\" decoding=\"async\" height=\"916\" loading=\"lazy\" sizes=\"auto, (max-width: 1684px) 100vw, 1684px\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8eafc11b62.png\" srcset=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8eafc11b62.png 1684w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8eafc11b62-300x163.png 300w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8eafc11b62-1024x557.png 1024w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8eafc11b62-768x418.png 768w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8eafc11b62-1536x835.png 1536w\" width=\"1684\"\/><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">PlantUML<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com#plantuml:fLLDJzj04BqZyH-cEGKfa4jFFP44L4048XnAUuh6ziRPTZ-itNKeglhVExEsOuVIj5AH8fpTyNjlvxtPdFk0BbHQ7H-zaoPJLIvW4qBfFup7j1LaThQLla9rMgB3N1RwBBDwN2eq_DQf3xcIwNZs_dJ1Iu_psx567uIZfTNCwj8QOS9P6HcEZsudN-uVbwkdw-NLwlRou-NTnV24ruCCIi2k7dA9XKCDQ-lWsX2S4G6cQBv9Kq3oGWGQJc6ok8P9MIgPaL1h66XcJK1fX1lw4aSmIEW5GbvW8Vgb0zhwYblqcPDb03GvVOfAeUETXRDRcGiFg1I4ZG3PIaWR2UlAP8o3IeON21QooWUhXVEmbSZlI0VF8eNKsMSltDdWfAzDixIvJQMAgfZpCsfqqkpJWv9Q1f63hr9Fz7Rz7t9qpPUBhSp4lg2BT9Ydn7o10LFqWbKy28Kr9hJBa6GReP5tas0TAQpeRE148NrmiPgqaMSwFezWWtv3wh4Y1IOqlOVCYPo_el8Zm2mJteEo1NqH8Ol2QeTNbz_3KAUUUqKornG8yIe4FIdiLTEVZ1PslUa90anj5RhcH7PRcK1FfDzuZ5ti2UdrQ3MboXpTon1BIRIlmZSuWH_7Hq1_knGFE_J1f7a4ndDMAH6JbfIEDSu_pVQDhwl9Tisfu1LAQ8eqOjIjFOEZp5Uqr6wctE_w8U8hWbUjdMI59EyysSBlQJGqF9gGHb55iD-4WK9GIoBm6mB83X5YX3Yq2_J-sRhye8A9KZGeKK0yNuHeWbks09nbofzKRt1waLMEqi_8pMEts-ER2ZJz8-zdSmGtJylVZbWVV2U3KqrGRtM-zaqNEdIUmtpNmOEAxXrDLvmZafLHd6CZECyppdCRV5_VVdmpjZ6nPIFqhJJ4XX7y9V-7Enlakel4dzKamkI-EtFjHyIgmzXoRuNh09jzzYcPBnVD2B4Ukarwuz0pwv5oregEHJ6y1mgQS1s2wBjGtn-nX6zP-dswMYuNIR--wL2y0Hy4vh7ovc8wuwAVV0AkYhydlObk8M-I-xiEiwkiX_0lLUsa_BbC_okh_XTI_LVES_ATVgn_0G00\" 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>PlantUML 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\">PlantUML<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com#plantuml:bLNDSk964BwxokymyGbN8NF9AQS5JBB-swK2kqxsGhMaHapGZ5Gz8nEpbRV9C-Ja6o-MxX4_aaq5nmSRztJtz_NNFtnm7iXN9Zy_-q7R9AzIL0llI_TJhyTFNYTNJzfLa4Sb4AGwCrT9ONfb3bQY8kVJNCUzuO_HM4nV7kvx1fn7OjDiM9Yoi6ZzLHaGpi_k-xz__ZATFTvCFyxkHx-CFbrtBiNkjSzHtUtyqQOQCW9Zr7ppGYe5fsxOJ1PzD02xr3QB9i-COrIa-kERg6zN75JPJB8D2-j1MwIEAw6hBaRQEjIS5NPU5spz0vx09QHBhogRAh1PbGF9oq2ZHwyWpz6gEtxaFvkN64df1V7dHunZAbQE3Qb6bQ43u_4jmvyhk_Iwi91hl_dRNrrSDhaPeVPGn9ehxvUb0Fy61aZR1eVNw2e4P4YSJo7daLzC85cmXT4uLULMiCYvdfE4qBOfNSUTD6RiQ-2dc6E4oA-OGns3JkrV610DoFkaHCt_a5S3j9LV8n5csddIIAoqIoMaoo8jMEr58EWNt6Czr-ksoxSg8psVkv8ANomBLbznBO5YtUlPw4_VCR4JtPZmd0S4GsreNN1eyv7-gJjM80xbpmioeHBMSrrjbUtoqDc0FYMm3fPRXnrmGvtPeE0GeESEb9g1McDtSQc-dvyf_jaFVGUIX2EyqAr18ib5KXZLJBdNcNhuEdpRy3eWjDrfaSs68HLpuRXtx1JulK9aQONP6uN_4_ahqWfo0Tzr4Ap1NChggedsQydmL3lnnq1aMh3eI6kiCZOTeKBeq7FoCJYtAiX7tohQl2HBjgvFCXgHsVoJvLBudfCDLw2HXIMHTNHg1-5KoKioYdWsyYEC72OLQVyiQ6525dmJt79_SmuqeW62RIlpHjAkkdsSHcqPWZ9xDW7Zk3ZRoJ2PyM4uTXHuBgdkyK7k8xJkYe9IRRKCUR-QKpL7MNVHvp3k-mCPBcX86YDGp4LprktgjsdnHkkyJIW4rv8ol0M-Cz8LdOKSnoLpl18iMHtbk2RpgcrfgsaYMhFkWyRRipTvc8wtooXy-I0rLglHLUbMWDvL5Zp3IfposaxhoMJDljM7wE0dzvk__ZvEf-D9CsYhQhYiznfTyBoz7Wp5wI-fIhp2DrNZOhJotau-VpeaFhZNw_uUrzqwdl0r_uk4UJS7ypuA7-IOclnV\" \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 PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-plantuml\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">\r\n@startuml\r\n!include https:\/\/static.visual-paradigm.com\/plantuml-stdlib\/C4-PlantUML\/master\/C4_Component.puml\r\n\r\nLAYOUT_WITH_LEGEND()\r\n\r\ntitle Komponentendiagramm f\u00fcr das Internet-Banking-System - API-Anwendung\r\n\r\nContainer(spa, \"Einseitenanwendung\", \"javascript und angular\", \"Bietet allen Kunden \u00fcber ihren Webbrowser die gesamte Internet-Banking-Funktionalit\u00e4t.\")\r\nContainer(ma, \"Mobile App\", \"Xamarin\", \"Bietet Kunden \u00fcber ihr Mobilger\u00e4t eine eingeschr\u00e4nkte Auswahl an Internet-Banking-Funktionalit\u00e4ten.\")\r\nContainerDb(db, \"Datenbank\", \"Relationales Datenbankschema\", \"Speichert Benutzerregistrierungsdaten, gehaschte Authentifizierungsdaten, Zugriffsprotokolle usw.\")\r\nSystem_Ext(mbs, \"Mainframe-Bankensystem\", \"Speichert alle Kernbankinformationen zu Kunden, Konten, Transaktionen usw.\")\r\n\r\nContainer_Boundary(api, \"API-Anwendung\") {\r\n    Component(accounts, \"Konten-Controller\", \"Spring MVC\", \"Bietet Kunden Konten\u00fcbersichten und Kontost\u00e4nde.\")\r\n    Component(auth, \"Authentifizierungs-Controller\", \"Spring MVC\", \"Verwaltet Benutzeranmeldung, Sitzungsverwaltung und Tokenerzeugung.\")\r\n    Component(reset, \"Passwort-Zur\u00fccksetzungs-Controller\", \"Spring MVC\", \"Erm\u00f6glicht Benutzern das Zur\u00fccksetzen ihres Passworts per E-Mail.\")\r\n    Component(security, \"Sicherheitskomponente\", \"Spring-Bean\", \"Verwaltet Authentifizierung, JWT-Tokenerzeugung und Passwortsicherung.\")\r\n    Component(accountmgmt, \"Komponente zur Kontoverwaltung\", \"Spring-Bean\", \"Koordiniert Aufrufe an das Kernbanking-System f\u00fcr Kontobearbeitungen.\")\r\n    Component(email, \"Komponente f\u00fcr E-Mail-Benachrichtigungen\", \"Spring-Bean\", \"Versendet E-Mails zum Zur\u00fccksetzen des Passworts und zur Kontoverifizierung \u00fcber SMTP.\")\r\n\r\n    Rel(accounts, security, \"Verwendet\")\r\n    Rel(auth, security, \"Verwendet\")\r\n    Rel(reset, security, \"Verwendet\")\r\n    Rel(accountmgmt, mbs, \"Verwendet\", \"XML\/HTTPS\")\r\n    Rel(email, db, \"Liest\", \"JDBC\")\r\n}\r\n\r\nRel(spa, accounts, \"Verwendet\", \"JSON\/HTTPS\")\r\nRel(spa, auth, \"Verwendet\", \"JSON\/HTTPS\")\r\nRel(spa, reset, \"Verwendet\", \"JSON\/HTTPS\")\r\nRel(ma, accounts, \"Verwendet\", \"JSON\/HTTPS\")\r\nRel(ma, auth, \"Verwendet\", \"JSON\/HTTPS\")\r\nRel(ma, reset, \"Verwendet\", \"JSON\/HTTPS\")\r\n@enduml\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com#plantuml:bLNDSk964BwxokymyGbN8NF9AQS5JBB-swK2kqxsGhMaHapGZ5Gz8nEpbRV9C-Ja6o-MxX4_aaq5nmSRztJtz_NNFtnm7iXN9Zy_-q7R9AzIL0llI_TJhyTFNYTNJzfLa4Sb4AGwCrT9ONfb3bQY8kVJNCUzuO_HM4nV7kvx1fn7OjDiM9Yoi6ZzLHaGpi_k-xz__ZATFTvCFyxkHx-CFbrtBiNkjSzHtUtyqQOQCW9Zr7ppGYe5fsxOJ1PzD02xr3QB9i-COrIa-kERg6zN75JPJB8D2-j1MwIEAw6hBaRQEjIS5NPU5spz0vx09QHBhogRAh1PbGF9oq2ZHwyWpz6gEtxaFvkN64df1V7dHunZAbQE3Qb6bQ43u_4jmvyhk_Iwi91hl_dRNrrSDhaPeVPGn9ehxvUb0Fy61aZR1eVNw2e4P4YSJo7daLzC85cmXT4uLULMiCYvdfE4qBOfNSUTD6RiQ-2dc6E4oA-OGns3JkrV610DoFkaHCt_a5S3j9LV8n5csddIIAoqIoMaoo8jMEr58EWNt6Czr-ksoxSg8psVkv8ANomBLbznBO5YtUlPw4_VCR4JtPZmd0S4GsreNN1eyv7-gJjM80xbpmioeHBMSrrjbUtoqDc0FYMm3fPRXnrmGvtPeE0GeESEb9g1McDtSQc-dvyf_jaFVGUIX2EyqAr18ib5KXZLJBdNcNhuEdpRy3eWjDrfaSs68HLpuRXtx1JulK9aQONP6uN_4_ahqWfo0Tzr4Ap1NChggedsQydmL3lnnq1aMh3eI6kiCZOTeKBeq7FoCJYtAiX7tohQl2HBjgvFCXgHsVoJvLBudfCDLw2HXIMHTNHg1-5KoKioYdWsyYEC72OLQVyiQ6525dmJt79_SmuqeW62RIlpHjAkkdsSHcqPWZ9xDW7Zk3ZRoJ2PyM4uTXHuBgdkyK7k8xJkYe9IRRKCUR-QKpL7MNVHvp3k-mCPBcX86YDGp4LprktgjsdnHkkyJIW4rv8ol0M-Cz8LdOKSnoLpl18iMHtbk2RpgcrfgsaYMhFkWyRRipTvc8wtooXy-I0rLglHLUbMWDvL5Zp3IfposaxhoMJDljM7wE0dzvk__ZvEf-D9CsYhQhYiznfTyBoz7Wp5wI-fIhp2DrNZOhJotau-VpeaFhZNw_uUrzqwdl0r_uk4UJS7ypuA7-IOclnV\" \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 PlantUML 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#plantuml:fLLDJzj04BqZyH-cEGKfa4jFFP44L4048XnAUuh6ziRPTZ-itNKeglhVExEsOuVIj5AH8fpTyNjlvxtPdFk0BbHQ7H-zaoPJLIvW4qBfFup7j1LaThQLla9rMgB3N1RwBBDwN2eq_DQf3xcIwNZs_dJ1Iu_psx567uIZfTNCwj8QOS9P6HcEZsudN-uVbwkdw-NLwlRou-NTnV24ruCCIi2k7dA9XKCDQ-lWsX2S4G6cQBv9Kq3oGWGQJc6ok8P9MIgPaL1h66XcJK1fX1lw4aSmIEW5GbvW8Vgb0zhwYblqcPDb03GvVOfAeUETXRDRcGiFg1I4ZG3PIaWR2UlAP8o3IeON21QooWUhXVEmbSZlI0VF8eNKsMSltDdWfAzDixIvJQMAgfZpCsfqqkpJWv9Q1f63hr9Fz7Rz7t9qpPUBhSp4lg2BT9Ydn7o10LFqWbKy28Kr9hJBa6GReP5tas0TAQpeRE148NrmiPgqaMSwFezWWtv3wh4Y1IOqlOVCYPo_el8Zm2mJteEo1NqH8Ol2QeTNbz_3KAUUUqKornG8yIe4FIdiLTEVZ1PslUa90anj5RhcH7PRcK1FfDzuZ5ti2UdrQ3MboXpTon1BIRIlmZSuWH_7Hq1_knGFE_J1f7a4ndDMAH6JbfIEDSu_pVQDhwl9Tisfu1LAQ8eqOjIjFOEZp5Uqr6wctE_w8U8hWbUjdMI59EyysSBlQJGqF9gGHb55iD-4WK9GIoBm6mB83X5YX3Yq2_J-sRhye8A9KZGeKK0yNuHeWbks09nbofzKRt1waLMEqi_8pMEts-ER2ZJz8-zdSmGtJylVZbWVV2U3KqrGRtM-zaqNEdIUmtpNmOEAxXrDLvmZafLHd6CZECyppdCRV5_VVdmpjZ6nPIFqhJJ4XX7y9V-7Enlakel4dzKamkI-EtFjHyIgmzXoRuNh09jzzYcPBnVD2B4Ukarwuz0pwv5oregEHJ6y1mgQS1s2wBjGtn-nX6zP-dswMYuNIR--wL2y0Hy4vh7ovc8wuwAVV0AkYhydlObk8M-I-xiEiwkiX_0lLUsa_BbC_okh_XTI_LVES_ATVgn_0G00\" 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>PlantUML in VPasCode bearbeiten<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p><strong>Begr\u00fcndung<\/strong>: Dieses Niveau zeigt, wie die Verantwortlichkeiten aufgeteilt sind (Trennung der Anliegen) und beschleunigt die Einarbeitung neuer Entwickler erheblich. Sie zeichnen Komponentendiagramme nur f\u00fcr Container, die komplex genug sind, um dies zu rechtfertigen.<\/p>\n<h3>Schritt 4: Code-Diagramm (Ebene 4) \u2013 Optional<\/h3>\n<p><strong>Zweck<\/strong>: Zeigt die interne Struktur einer einzelnen Komponente (Klassendiagramm, Ablaufdiagramm usw.). Zielgruppe: Entwickler, die an diesem Code arbeiten.<\/p>\n<p>Beispiel f\u00fcr die\u00a0<strong>Authentifizierungs-Controller<\/strong>Komponente \u2013 ein einfaches UML-Klassendiagramm in PlantUML:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/uml.planttext.com\/plantuml\/png\/XL91QiCm4BmR_0VXNX8AWRIb3Js4ECOvz5HA-m0XRHnXUJUiv8HGylTQTkea3gM2rM5cPtPMQE6yP5zNDexYo9K6jv9b9RxZI0Yc6hKYHc0n2q3AJFkCBB6uUsfFZwu8_Gsp9DR0Dt2ep4hdkZ63lcdwyFYIdmYfogADSIBpMPwkdZloOkHPSuoZOrX5jVv9MliDe3TAUaEODGecQu6JRlIzfSBWI37eq2Mj6xSmmvh1RJwf11oDhotVzhx5tvbsHf-j2cZUINheHBK3xhnsqXhTupxS0yUlflS3jkIC9pxy-gqDwkKXS2Whw5FyjP6OJEPYc4syYgH9uf9_TDS9BbGBGDryZXy0\"\/><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">PlantUML<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com#plantuml:XLBTQiCW5BuNV0V9Rbe6XVsmbLsCfbbwiQinjWSGFKqbnbEEfgMClViqJKiJA1CH_CxtSuwuy45IQ1lBcRBI-pSZAv8DPvpvshYjZ1VnmnbXwxH2Sa1YpbbEXFi2BPAuUUnMZwtGXH6-HD908v2p8iKbwq7zBhz_U2uZA5LTTQ5zePoN-Ug9iuk04_Uts_q08ilRi04NZ9B1e2iYdz1Qe2o5tLgiZ9ie0fquqlff10dM17xpXJMuoNHezxuF7Vv1k3FwP5D1V0aPu2XfFL3osKbhz1aDwHovVKVc9spHcu1qE7gjZTFBGweusS0v_zeSOZPx5UEkn8l8OXS--qStpBzGBS3f-0t-0000\" 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>PlantUML 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\">PlantUML<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com#plantuml:XLB1QiCm3BqR_0yckxGC2jt6LdOeJRFqiDCOsmUOM4rD7Al8Ja8P-_VPQLgMm9WnHdvwUayotZWloJUruQmmqhaNBKkIDMUSkKhRemmNySKPOMDLWMI1n8gpb0Yx30sIk7deru3jqFe9laLIG1EGiopQHUbHVfdUtJ_b0PH5LVQcGo9VvUdkaRDV1XVkTx-70KIIDlu0rkj2Ueqs2tn2Ou2IQ7PhiDHsLX2eo976pGD8i2TmXm-imCxcOxdNplVu6s6hrKMcXF0IqiEvf750KQULHgihwkCvKViCp7SuejCUwNJMsckhjgUOiRA6g_zVSuZ5OYscNObdaRH07LW5FlcdUDp4j7GJWl0XVW00\" \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 PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-plantuml\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">\r\n@startuml\r\nclassDiagram\r\n\r\nskinparam {\r\nroundcorner 8\r\nArrowColor #444444\r\nArrowFontColor #444444\r\nBorderColor #444444\r\n\r\nClass {\r\nBorderColor #1A237E\r\nBackgroundColor #E8EAF6\r\nFontColor #1A237E\r\n}\r\n}\r\n\r\nclass \"AuthenticationController\" {\r\n+login(credentials)\r\n+refreshToken()\r\n}\r\n\r\nclass \"JwtTokenProvider\" {\r\n+generateToken(user)\r\n+validateToken(token)\r\n}\r\n\r\nclass \"UserRepository\" {\r\n+findByUsername()\r\n}\r\n\r\nAuthenticationController ..&gt; JwtTokenProvider : \"verwendet\"\r\nAuthenticationController ..&gt; UserRepository : \"verwendet\"\r\n@enduml\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com#plantuml:XLB1QiCm3BqR_0yckxGC2jt6LdOeJRFqiDCOsmUOM4rD7Al8Ja8P-_VPQLgMm9WnHdvwUayotZWloJUruQmmqhaNBKkIDMUSkKhRemmNySKPOMDLWMI1n8gpb0Yx30sIk7deru3jqFe9laLIG1EGiopQHUbHVfdUtJ_b0PH5LVQcGo9VvUdkaRDV1XVkTx-70KIIDlu0rkj2Ueqs2tn2Ou2IQ7PhiDHsLX2eo976pGD8i2TmXm-imCxcOxdNplVu6s6hrKMcXF0IqiEvf750KQULHgihwkCvKViCp7SuejCUwNJMsckhjgUOiRA6g_zVSuZ5OYscNObdaRH07LW5FlcdUDp4j7GJWl0XVW00\" \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 PlantUML 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#plantuml:XLBTQiCW5BuNV0V9Rbe6XVsmbLsCfbbwiQinjWSGFKqbnbEEfgMClViqJKiJA1CH_CxtSuwuy45IQ1lBcRBI-pSZAv8DPvpvshYjZ1VnmnbXwxH2Sa1YpbbEXFi2BPAuUUnMZwtGXH6-HD908v2p8iKbwq7zBhz_U2uZA5LTTQ5zePoN-Ug9iuk04_Uts_q08ilRi04NZ9B1e2iYdz1Qe2o5tLgiZ9ie0fquqlff10dM17xpXJMuoNHezxuF7Vv1k3FwP5D1V0aPu2XfFL3osKbhz1aDwHovVKVc9spHcu1qE7gjZTFBGweusS0v_zeSOZPx5UEkn8l8OXS--qStpBzGBS3f-0t-0000\" 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>PlantUML in VPasCode bearbeiten<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p>In echten Projekten \u00fcberspringen Sie Level 4 oft und verweisen stattdessen auf den eigentlichen Quellcode.<\/p>\n<h3>Schritt 5: Unterst\u00fctzende Diagramme<\/h3>\n<p><strong>Dynamisches Diagramm<\/strong>\u00a0(Beispiel: Ablauf \u201eKonten\u00fcbersicht anzeigen\u201c)<\/p>\n<p><img alt=\"\" class=\"alignnone size-full wp-image-15964\" decoding=\"async\" height=\"823\" loading=\"lazy\" sizes=\"auto, (max-width: 533px) 100vw, 533px\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8ec710652f.png\" srcset=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8ec710652f.png 533w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8ec710652f-194x300.png 194w\" width=\"533\"\/><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">PlantUML<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com#plantuml:VP9FRzD04CNlblmTXbpgIiGMK2wScjff2ogjLGTwZ2QxqsJL_QVTCH1LV7VMTee2I4XxyPlVMxytslF86BWtEizUAIjqBmbsp3v-gAeqOYNARohsgESU0qgrDQLmfl8QxU2QHvPQRQhwRDuEqfVFDvN1o1IIj6x8QxStPBdquo_oZ1LhWcPlqIW1Kk4se8575-2hek-m4CBrbg7hZS6m7nmjXUXi8Vh8pb1u3RD9GGqNQ9-KtK9zcCrEuJdFQcSPbQLGH8y9xnAYQTxYbc3XlLOYrNBsRnYzIl2Y_VWVgDaKSfEe1Xat66aQT_jKsAoNFxWGBj0XLSBgzFKxv4JDJlFivz79itlIH-Mco6zAg5E4fmWdXut4ardI1_V0ZzGK-6q9LyiLL7ZW1knJTtTRNQzMRVTY6Dan-hiIxWab21GxaX2dHHzVFh9_5ZahuP9Ox40ZKsIGgVy_bYdw--5-xeE58SKBb9PqVVUmlbbUBM-R8WddP6Lw4hy0\" 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>PlantUML 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\">PlantUML<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com#plantuml:TP7FQjj04CRl0ht3r9SeK4kqJIyznOr4qZfDHEnIwCMCLcDvyUv8x1-dJkYRvPONwsgD8MafY0NDz_jcPxuzjmwDyrgboHl9GlcMOEFSO3yLHP2S5FbEMezgEg31LdOw5xqk1eKykgRMjKesnSNPj1vBtxzT5ngj8nDAgv86rUyriSk7U4MQEEaKGRbdrDAA3Lae9NO6jORryvE16LifDWxcFRl-mTiW4A_HMi_TwA_9s9wphUUMtiAaDdA7BlvnF2Udy9Wc5y6DaibaTi20LP8jIKUCV4_SXbv_SpZ8mCtgBzFPVv2ooTecC2M6FWtozg0lzc5RlQf-kKpqXZu7GN8Nk3cPY17RY4nEq-JtYozDxaWT5pcC-Iw7kP9Ywm3z6ax638XF9a4PpICUkSEixtEuh9PGe12zPsT7xElYzgQuMYxhnT4GsJZtXy2J8ajCy70Vm-UEx40XRpAEuEVhj5zU6xkyNkyiXrbZ_9eOMZB0v2bioH3Z-STxsEzZ3dVFJsBROKEmwnd6UOziYFBgziVgkhgiRiei5Cx7Pz3g3m00\" \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 PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-plantuml\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">\r\n@startuml\r\n!include https:\/\/static.visual-paradigm.com\/plantuml-stdlib\/C4-PlantUML\/master\/C4_Deployment.puml\r\n\r\ntitle Dynamisches Diagramm f\u00fcr Ansicht Kontozusammenfassung\r\n\r\nPerson(kunde, \"Privatkundenkunde\") {\r\nContainer(spa, \"Einseitenanwendung\") {\r\nContainer(api, \"API-Anwendung\") {\r\nContainerDb(db, \"Datenbank\") {\r\nSystem_Ext(coreBanking, \"Kernbankensystem\")\r\n}\r\n}\r\n}\r\n}\r\n\r\nRel(kunde, spa, \"1. Klickt auf 'Konten'\", \"\")\r\nRel(spa, api, \"2. GET \/accounts\", \"JSON\/HTTPS\")\r\nRel(api, db, \"3. Gelesene zwischengespeicherte Zusammenfassung\", \"\")\r\nRel(api, coreBanking, \"4. Abrufen der neuesten Daten\", \"\")\r\nRel(api, spa, \"5. R\u00fcckgabe von JSON\", \"\")\r\n\r\nSHOW_LEGEND()\r\n@enduml<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com#plantuml:TP7FQjj04CRl0ht3r9SeK4kqJIyznOr4qZfDHEnIwCMCLcDvyUv8x1-dJkYRvPONwsgD8MafY0NDz_jcPxuzjmwDyrgboHl9GlcMOEFSO3yLHP2S5FbEMezgEg31LdOw5xqk1eKykgRMjKesnSNPj1vBtxzT5ngj8nDAgv86rUyriSk7U4MQEEaKGRbdrDAA3Lae9NO6jORryvE16LifDWxcFRl-mTiW4A_HMi_TwA_9s9wphUUMtiAaDdA7BlvnF2Udy9Wc5y6DaibaTi20LP8jIKUCV4_SXbv_SpZ8mCtgBzFPVv2ooTecC2M6FWtozg0lzc5RlQf-kKpqXZu7GN8Nk3cPY17RY4nEq-JtYozDxaWT5pcC-Iw7kP9Ywm3z6ax638XF9a4PpICUkSEixtEuh9PGe12zPsT7xElYzgQuMYxhnT4GsJZtXy2J8ajCy70Vm-UEx40XRpAEuEVhj5zU6xkyNkyiXrbZ_9eOMZB0v2bioH3Z-STxsEzZ3dVFJsBROKEmwnd6UOziYFBgziVgkhgiRiei5Cx7Pz3g3m00\" \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 PlantUML 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#plantuml:VP9FRzD04CNlblmTXbpgIiGMK2wScjff2ogjLGTwZ2QxqsJL_QVTCH1LV7VMTee2I4XxyPlVMxytslF86BWtEizUAIjqBmbsp3v-gAeqOYNARohsgESU0qgrDQLmfl8QxU2QHvPQRQhwRDuEqfVFDvN1o1IIj6x8QxStPBdquo_oZ1LhWcPlqIW1Kk4se8575-2hek-m4CBrbg7hZS6m7nmjXUXi8Vh8pb1u3RD9GGqNQ9-KtK9zcCrEuJdFQcSPbQLGH8y9xnAYQTxYbc3XlLOYrNBsRnYzIl2Y_VWVgDaKSfEe1Xat66aQT_jKsAoNFxWGBj0XLSBgzFKxv4JDJlFivz79itlIH-Mco6zAg5E4fmWdXut4ardI1_V0ZzGK-6q9LyiLL7ZW1knJTtTRNQzMRVTY6Dan-hiIxWab21GxaX2dHHzVFh9_5ZahuP9Ox40ZKsIGgVy_bYdw--5-xeE58SKBb9PqVVUmlbbUBM-R8WddP6Lw4hy0\" 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>PlantUML in VPasCode bearbeiten<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p><strong>Bereitstellungsdigramm<\/strong>\u00a0(hohe Ebene physische Abbildung):<\/p>\n<p id=\"EQNbTiP\"><img alt=\"\" class=\"alignnone size-full wp-image-15965\" decoding=\"async\" height=\"562\" loading=\"lazy\" sizes=\"auto, (max-width: 714px) 100vw, 714px\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8edea159ca.png\" srcset=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8edea159ca.png 714w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8edea159ca-300x236.png 300w\" width=\"714\"\/><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">PlantUML<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com#plantuml:ZL9DJzj04Br7yd_Ovb97gcC9zTGJ8Ow0Ag4k1d6qnlPWLkoNTjS9jEA_CuFJfWqzz6RFlFVclPaz3H5y7BHA9X-aQTNGeNY8qOKlUKwjADlvLeO1LER0GoTxFM-jpfq2mwmin4x99bz-paektMxMkOOGqLEfBj0f-wpHnBbx6v5CeemAnQ4X2Wcz1otkhHUNXeW6epW3yoXDBwfdajBCEp3gAzjX2hlmIKmN6dvO8-wm4HNwhMmnJAcyL7RefZFnypqFsnC2h9OdOZ54crKjA1vqxktWcBgMPdWQgKjh8aY3FWKdULXvAHREATdIMgnXz5VOWgYSPuapQ-DqbanUtW_r7PkzBYhcb3R4tcFrVNqqfcZIhY500H4Q2BWNU_bN_7O8qMhY88VcoFl2no366e-YlUGRsqY5nuc20-fNv5jXLaAFVoMR_GdLRmA47fKOk7UMJCRxrAkdcBRMu_viR8V-ZgueKciov-b3a_0ztHndB9HChb6DXiOzR-0HW-1jqt5K4D5obekRcx9YFAD_UVfVGdqxtd2CNQ2IM_GC5F41HNlOtOvUKkFjBg0_elvUmp5xR90LDwQfBhxTrUlL-UggIAbmYgQZj_yA\" 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>PlantUML 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\">PlantUML<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com#plantuml:bPBFJXin4CRlaV8ERauRgPkLK4yzaNyAb8IcB8XZvDsTf1RssBB70LhnDdsCtdYnZdVJDa0llLdsz_jcvXkV1fAUej7ztZk5jOuDYAz4Bdmi2duYLO_sAaIfSoUzRDJEZ6fh2gSb9YeFr6XL5TCF-JfTtQoMXP61mFFLPWPEsqS3I2FNbkZtI946CG4FYbYcTSHTO5ilZH7RvvzUd2FJ25H9l5Euoyj7rfd4_hNRNDe6CdaVtel1sCXl5iKjLA84lrSrX05VJxMDpM0elh_be3vXmNnw8iQHR5xMKgT22n-TWyGk5SQ7ZfrQ9AaGV2QTIjNMv_aOxm4RRZnfFycz5ANpx20crj9WsEyzlQtfczJhrQnCpDe6sdaelonV5PbLMLEnO2O9C0LmS7lwr_Xt4Hl01VZd7yHCTn0D177HlgHAd4gnifNIhwS9JgOC50PU1A3yCzBmM6KIohhM0iJOkKD3_LwtbityWRBQUfXqssBj1MyljGuOMed8BEREys75fbjUD0oJIxzt1RhheuksJD-1H9jmtFgu1I7R8SwkhzTbGX9mQEa_aCrDjxjkvAM2BNXY7KVLVflAs_i0_ZYvb-3l58vH1U9bA9p8sUVRpNA-c5_EChuuJO4Q_Gi0\" \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 PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-plantuml\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">\r\n@startuml\r\n!include https:\/\/static.visual-paradigm.com\/plantuml-stdlib\/C4-PlantUML\/master\/C4_Deployment.puml\r\n\r\ntitle Bereitstellungsdigramm f\u00fcr Internetbanking-System\r\n\r\nDeployment_Node(aws, \"Amazon Web Services\", \"Cloud\") {\r\nDeployment_Node(ec2, \"EC2 Auto-Scaling-Gruppe\", \"Linux\") {\r\nContainer(api, \"API-Anwendung\", \"Java Spring Boot\")\r\n}\r\nDeployment_Node(rds, \"RDS\", \"PostgreSQL\") {\r\nContainerDb(db, \"Datenbank\")\r\n}\r\n}\r\n\r\nDeployment_Node(kundenGer\u00e4t, \"Ger\u00e4t des Kunden\", \"Web\/Mobil\") {\r\nContainer(spa, \"Einseitenanwendung\")\r\nContainer(mobil, \"Mobile App\")\r\n}\r\n\r\nSystem_Ext(coreBanking, \"Kernbankensystem (on-prem Mainframe)\")\r\n\r\nRel(spa, api, \"Stellt API-Aufrufe an\", \"HTTPS\")\r\nRel(mobil, api, \"Stellt API-Aufrufe an\", \"HTTPS\")\r\nRel_U(api, spa, \"Liefert an den Webbrowser des Kunden\")\r\nRel_U(api, mobil, \"Liefert an die Mobile App\")\r\n\r\nSHOW_LEGEND()\r\n@enduml\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com#plantuml:bPBFJXin4CRlaV8ERauRgPkLK4yzaNyAb8IcB8XZvDsTf1RssBB70LhnDdsCtdYnZdVJDa0llLdsz_jcvXkV1fAUej7ztZk5jOuDYAz4Bdmi2duYLO_sAaIfSoUzRDJEZ6fh2gSb9YeFr6XL5TCF-JfTtQoMXP61mFFLPWPEsqS3I2FNbkZtI946CG4FYbYcTSHTO5ilZH7RvvzUd2FJ25H9l5Euoyj7rfd4_hNRNDe6CdaVtel1sCXl5iKjLA84lrSrX05VJxMDpM0elh_be3vXmNnw8iQHR5xMKgT22n-TWyGk5SQ7ZfrQ9AaGV2QTIjNMv_aOxm4RRZnfFycz5ANpx20crj9WsEyzlQtfczJhrQnCpDe6sdaelonV5PbLMLEnO2O9C0LmS7lwr_Xt4Hl01VZd7yHCTn0D177HlgHAd4gnifNIhwS9JgOC50PU1A3yCzBmM6KIohhM0iJOkKD3_LwtbityWRBQUfXqssBj1MyljGuOMed8BEREys75fbjUD0oJIxzt1RhheuksJD-1H9jmtFgu1I7R8SwkhzTbGX9mQEa_aCrDjxjkvAM2BNXY7KVLVflAs_i0_ZYvb-3l58vH1U9bA9p8sUVRpNA-c5_EChuuJO4Q_Gi0\" \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 PlantUML 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#plantuml:ZL9DJzj04Br7yd_Ovb97gcC9zTGJ8Ow0Ag4k1d6qnlPWLkoNTjS9jEA_CuFJfWqzz6RFlFVclPaz3H5y7BHA9X-aQTNGeNY8qOKlUKwjADlvLeO1LER0GoTxFM-jpfq2mwmin4x99bz-paektMxMkOOGqLEfBj0f-wpHnBbx6v5CeemAnQ4X2Wcz1otkhHUNXeW6epW3yoXDBwfdajBCEp3gAzjX2hlmIKmN6dvO8-wm4HNwhMmnJAcyL7RefZFnypqFsnC2h9OdOZ54crKjA1vqxktWcBgMPdWQgKjh8aY3FWKdULXvAHREATdIMgnXz5VOWgYSPuapQ-DqbanUtW_r7PkzBYhcb3R4tcFrVNqqfcZIhY500H4Q2BWNU_bN_7O8qMhY88VcoFl2no366e-YlUGRsqY5nuc20-fNv5jXLaAFVoMR_GdLRmA47fKOk7UMJCRxrAkdcBRMu_viR8V-ZgueKciov-b3a_0ztHndB9HChb6DXiOzR-0HW-1jqt5K4D5obekRcx9YFAD_UVfVGdqxtd2CNQ2IM_GC5F41HNlOtOvUKkFjBg0_elvUmp5xR90LDwQfBhxTrUlL-UggIAbmYgQZj_yA\" 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>PlantUML in VPasCode bearbeiten<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<h3>So verwenden Sie dieses Fallbeispiel in der Praxis<\/h3>\n<ol>\n<li>Beginnen Sie mit einer Workshop-Sitzung: Zeichnen Sie den Kontext an einer Tafel.<\/li>\n<li>Gehen Sie schrittweise zu Containern und Komponenten mit Hilfe von PlantUML C4 \u00fcber.<\/li>\n<li>Halten Sie Diagramme im Code-Repository (als Code!) aufrecht, damit sie aktuell bleiben.<\/li>\n<li>Generieren Sie lebendige Dokumentation automatisch.<\/li>\n<\/ol>\n<p>Dieses exakte Beispiel f\u00fcr ein Internetbanking-System ist die offizielle Referenz, die von Simon Brown erstellt wurde, und wird weltweit von Tausenden von Organisationen genutzt. Durch die Einhaltung dieser Schritte verf\u00fcgen Sie nun \u00fcber eine vollst\u00e4ndige, produktionsfertige Architekturbeschreibung, die jeder \u2013 von der CEO bis zum neuen Junior-Entwickler \u2013 auf der richtigen Detailstufe verstehen kann.<\/p>\n<h3>C4-Diagramm-Artikel<\/h3>\n<ul>\n<li><a href=\"https:\/\/www.archimetric.com\/the-ultimate-guide-to-c4-model-visualization-with-visual-paradigms-ai-tools\/\"><strong>Ultimativer Leitfaden zur Visualisierung des C4-Modells mit den KI-Tools von Visual Paradigm<\/strong><\/a>: Dieser Leitfaden erkl\u00e4rt, wie Sie KI-gest\u00fctzte Werkzeuge nutzen, um die Visualisierung des C4-Modells zu automatisieren und zu verbessern, um eine schnellere Softwarearchitekturgestaltung zu erm\u00f6glichen.<\/li>\n<li><a href=\"https:\/\/www.archimetric.com\/leveraging-visual-paradigms-ai-c4-studio-a-comprehensive-guide-to-streamlined-architectural-documentation\/\"><strong>Nutzen Sie Visual Paradigms AI C4 Studio zur vereinfachten Architekturdokumentation<\/strong><\/a>: Dieser Artikel beschreibt die Nutzung eines KI-optimierten Studios zur Erstellung sauberer, skalierbarer und wartbarer Dokumentation der Softwarearchitektur.<\/li>\n<li><a href=\"https:\/\/blog.visual-paradigm.com\/the-ultimate-guide-to-c4-plantuml-studio-revolutionizing-software-architecture-design\/\"><strong>Der ultimative Leitfaden zum C4-PlantUML Studio: Die Revolutionierung der Softwarearchitekturgestaltung<\/strong><\/a>: Diese Ressource untersucht die Kombination von KI-getriebener Automatisierung, der Klarheit des C4-Modells und der Flexibilit\u00e4t von PlantUML zu einem einzigen leistungsstarken Werkzeug.<\/li>\n<li><a href=\"https:\/\/www.cybermedian.com\/%F0%9F%A7%A0-a-comprehensive-guide-to-visual-paradigms-ai-powered-c4-plantuml-studio\/\"><strong>Ein umfassender Leitfaden zu Visual Paradigms KI-gest\u00fctztem C4-PlantUML Studio<\/strong><\/a>: Dieser Leitfaden beschreibt ein speziell entwickeltes Werkzeug, das Ende 2025 ver\u00f6ffentlicht wurde und nat\u00fcrliche Sprachanfragen in mehrschichtige C4-Diagramme umwandelt.<\/li>\n<li><a href=\"https:\/\/www.visual-paradigm.com\/features\/c4-plantuml-studio\/\"><strong>C4-PlantUML Studio | KI-gest\u00fctzter C4-Diagramm-Generator<\/strong><\/a>: Diese Funktions\u00fcbersicht hebt ein KI-getriebenes Werkzeug hervor, das entwickelt wurde, um C4-Softwarearchitekturdigramme aus einfachen Textbeschreibungen zu generieren.<\/li>\n<li><a href=\"https:\/\/www.archimetric.com\/comprehensive-tutorial-generating-and-modifying-c4-component-diagrams-with-visual-paradigm-ai-chatbot\/\"><strong>Generieren und \u00c4ndern von C4-Komponentendiagrammen mit dem Visual Paradigm AI-Chatbot<\/strong><\/a>: Dieses Tutorial zeigt, wie Sie einen KI-gest\u00fctzten Chatbot verwenden, um schrittweise die Architektur auf Komponentenebene f\u00fcr komplexe Systeme zu erstellen und zu verfeinern.<\/li>\n<li><a href=\"https:\/\/ai.visual-paradigm.com\/tool\/ai-powered-c4-plantuml-studio\/about-the-diagrams\/\"><strong>KI-gest\u00fctzter C4-Diagramm-Generator: Kern-Ebenen und unterst\u00fctzende Ansichten<\/strong><\/a>: Diese Seite erkl\u00e4rt, wie der KI-Generator die vier Kern-Ebenen des C4-Modells \u2013 Kontext, Container, Komponente und Bereitstellung \u2013 unterst\u00fctzt, um umfassende Dokumentation zu liefern.<\/li>\n<li><a href=\"https:\/\/updates.visual-paradigm.com\/releases\/ai-diagram-generator-complete-c4-model\/\"><strong>AI-Diagramgenerator: Vollst\u00e4ndige Unterst\u00fctzung f\u00fcr C4-Modelle ver\u00f6ffentlicht<\/strong><\/a>: Diese Aktualisierung beschreibt die Integration von KI-gest\u00fctzten Funktionen zur automatisierten Erstellung hierarchischer C4-Modell-Diagramme.<\/li>\n<li><a href=\"https:\/\/www.ez-knowledge.com\/beyond-the-code-how-ai-automates-c4-model-diagrams-for-devops-and-cloud-teams\/\"><strong>C4-Modell-KI-Generator: Automatisierung des gesamten Modellierungslebenszyklus<\/strong><\/a>: Diese Ressource zeigt auf, wie ein spezialisierter KI-Chatbot conversationalen Eingaben nutzt, um Konsistenz in der Architekturdokumentation f\u00fcr DevOps-Teams sicherzustellen.<\/li>\n<li><a href=\"https:\/\/www.archimetric.com\/comprehensive-review-generic-ai-chatbots-vs-visual-paradigms-c4-tools\/\"><strong>Umfassende Bewertung: Allgemeine KI-Chatbots im Vergleich zu Visual Paradigms C4-Tools<\/strong><\/a>: Dieser Vergleich erkl\u00e4rt, warum spezialisierte Werkzeuge wie der C4 PlantUML Studio strukturiertere und professionellere Ergebnisse liefern als allgemeine Sprachmodelle.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Die\u00a0C4-Modell, entwickelt von Simon Brown, ist eine einfache, hierarchische und entwicklungsfreundliche Methode zur Visualisierung von Softwarearchitekturen. Es verwendet vier Abstraktionsstufen<\/p>\n","protected":false},"author":11,"featured_media":11937,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_yoast_wpseo_title":"","_yoast_wpseo_metadesc":"","footnotes":""},"categories":[110],"tags":[],"class_list":["post-11936","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-c4-model"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Eine umfassende Schritt-f\u00fcr-Schritt-Fallstudie: Anwendung des C4-Modells auf das Internet-Banking-System (Big Bank plc) - Cybermedian<\/title>\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.cybermedian.com\/de\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Eine umfassende Schritt-f\u00fcr-Schritt-Fallstudie: Anwendung des C4-Modells auf das Internet-Banking-System (Big Bank plc) - Cybermedian\" \/>\n<meta property=\"og:description\" content=\"Die\u00a0C4-Modell, entwickelt von Simon Brown, ist eine einfache, hierarchische und entwicklungsfreundliche Methode zur Visualisierung von Softwarearchitekturen. Es verwendet vier Abstraktionsstufen\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.cybermedian.com\/de\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/\" \/>\n<meta property=\"og:site_name\" content=\"Cybermedian\" \/>\n<meta property=\"article:published_time\" content=\"2026-03-05T02:48:15+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8e7e9e8ab5.png\" \/><meta property=\"og:image\" content=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8e7e9e8ab5.png\" \/>\n\t<meta property=\"og:image:width\" content=\"527\" \/>\n\t<meta property=\"og:image:height\" content=\"739\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"curtis\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8e7e9e8ab5.png\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"curtis\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"7\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.cybermedian.com\/de\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.cybermedian.com\/de\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/\"},\"author\":{\"name\":\"curtis\",\"@id\":\"https:\/\/www.cybermedian.com\/de\/#\/schema\/person\/016578d8c88d35825fd3fbafc4f76b4d\"},\"headline\":\"Eine umfassende Schritt-f\u00fcr-Schritt-Fallstudie: Anwendung des C4-Modells auf das Internet-Banking-System (Big Bank plc)\",\"datePublished\":\"2026-03-05T02:48:15+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.cybermedian.com\/de\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/\"},\"wordCount\":1190,\"image\":{\"@id\":\"https:\/\/www.cybermedian.com\/de\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.cybermedian.com\/de\/wp-content\/uploads\/sites\/12\/2026\/03\/img_69a8e7e9e8ab5-1.png\",\"articleSection\":[\"C4 Model\"],\"inLanguage\":\"de\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.cybermedian.com\/de\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/\",\"url\":\"https:\/\/www.cybermedian.com\/de\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/\",\"name\":\"Eine umfassende Schritt-f\u00fcr-Schritt-Fallstudie: Anwendung des C4-Modells auf das Internet-Banking-System (Big Bank plc) - Cybermedian\",\"isPartOf\":{\"@id\":\"https:\/\/www.cybermedian.com\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.cybermedian.com\/de\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.cybermedian.com\/de\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.cybermedian.com\/de\/wp-content\/uploads\/sites\/12\/2026\/03\/img_69a8e7e9e8ab5-1.png\",\"datePublished\":\"2026-03-05T02:48:15+00:00\",\"author\":{\"@id\":\"https:\/\/www.cybermedian.com\/de\/#\/schema\/person\/016578d8c88d35825fd3fbafc4f76b4d\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.cybermedian.com\/de\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.cybermedian.com\/de\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/www.cybermedian.com\/de\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#primaryimage\",\"url\":\"https:\/\/www.cybermedian.com\/de\/wp-content\/uploads\/sites\/12\/2026\/03\/img_69a8e7e9e8ab5-1.png\",\"contentUrl\":\"https:\/\/www.cybermedian.com\/de\/wp-content\/uploads\/sites\/12\/2026\/03\/img_69a8e7e9e8ab5-1.png\",\"width\":527,\"height\":739},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.cybermedian.com\/de\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.cybermedian.com\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Eine umfassende Schritt-f\u00fcr-Schritt-Fallstudie: Anwendung des C4-Modells auf das Internet-Banking-System (Big Bank plc)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.cybermedian.com\/de\/#website\",\"url\":\"https:\/\/www.cybermedian.com\/de\/\",\"name\":\"Cybermedian\",\"description\":\"Jeden Tag eine neue Sache lernen\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.cybermedian.com\/de\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.cybermedian.com\/de\/#\/schema\/person\/016578d8c88d35825fd3fbafc4f76b4d\",\"name\":\"curtis\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/www.cybermedian.com\/de\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/6910084565fcc601ec03c6693bb8ea480c1e52ccaa0efb299eb038bb6a1edc87?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/6910084565fcc601ec03c6693bb8ea480c1e52ccaa0efb299eb038bb6a1edc87?s=96&d=mm&r=g\",\"caption\":\"curtis\"},\"url\":\"https:\/\/www.cybermedian.com\/de\/author\/curtis\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Eine umfassende Schritt-f\u00fcr-Schritt-Fallstudie: Anwendung des C4-Modells auf das Internet-Banking-System (Big Bank plc) - Cybermedian","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.cybermedian.com\/de\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/","og_locale":"de_DE","og_type":"article","og_title":"Eine umfassende Schritt-f\u00fcr-Schritt-Fallstudie: Anwendung des C4-Modells auf das Internet-Banking-System (Big Bank plc) - Cybermedian","og_description":"Die\u00a0C4-Modell, entwickelt von Simon Brown, ist eine einfache, hierarchische und entwicklungsfreundliche Methode zur Visualisierung von Softwarearchitekturen. Es verwendet vier Abstraktionsstufen","og_url":"https:\/\/www.cybermedian.com\/de\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/","og_site_name":"Cybermedian","article_published_time":"2026-03-05T02:48:15+00:00","og_image":[{"url":"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8e7e9e8ab5.png","type":"","width":"","height":""},{"width":527,"height":739,"url":"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8e7e9e8ab5.png","type":"image\/png"}],"author":"curtis","twitter_card":"summary_large_image","twitter_image":"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8e7e9e8ab5.png","twitter_misc":{"Verfasst von":"curtis","Gesch\u00e4tzte Lesezeit":"7\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.cybermedian.com\/de\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#article","isPartOf":{"@id":"https:\/\/www.cybermedian.com\/de\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/"},"author":{"name":"curtis","@id":"https:\/\/www.cybermedian.com\/de\/#\/schema\/person\/016578d8c88d35825fd3fbafc4f76b4d"},"headline":"Eine umfassende Schritt-f\u00fcr-Schritt-Fallstudie: Anwendung des C4-Modells auf das Internet-Banking-System (Big Bank plc)","datePublished":"2026-03-05T02:48:15+00:00","mainEntityOfPage":{"@id":"https:\/\/www.cybermedian.com\/de\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/"},"wordCount":1190,"image":{"@id":"https:\/\/www.cybermedian.com\/de\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#primaryimage"},"thumbnailUrl":"https:\/\/www.cybermedian.com\/de\/wp-content\/uploads\/sites\/12\/2026\/03\/img_69a8e7e9e8ab5-1.png","articleSection":["C4 Model"],"inLanguage":"de"},{"@type":"WebPage","@id":"https:\/\/www.cybermedian.com\/de\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/","url":"https:\/\/www.cybermedian.com\/de\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/","name":"Eine umfassende Schritt-f\u00fcr-Schritt-Fallstudie: Anwendung des C4-Modells auf das Internet-Banking-System (Big Bank plc) - Cybermedian","isPartOf":{"@id":"https:\/\/www.cybermedian.com\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.cybermedian.com\/de\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#primaryimage"},"image":{"@id":"https:\/\/www.cybermedian.com\/de\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#primaryimage"},"thumbnailUrl":"https:\/\/www.cybermedian.com\/de\/wp-content\/uploads\/sites\/12\/2026\/03\/img_69a8e7e9e8ab5-1.png","datePublished":"2026-03-05T02:48:15+00:00","author":{"@id":"https:\/\/www.cybermedian.com\/de\/#\/schema\/person\/016578d8c88d35825fd3fbafc4f76b4d"},"breadcrumb":{"@id":"https:\/\/www.cybermedian.com\/de\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.cybermedian.com\/de\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.cybermedian.com\/de\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#primaryimage","url":"https:\/\/www.cybermedian.com\/de\/wp-content\/uploads\/sites\/12\/2026\/03\/img_69a8e7e9e8ab5-1.png","contentUrl":"https:\/\/www.cybermedian.com\/de\/wp-content\/uploads\/sites\/12\/2026\/03\/img_69a8e7e9e8ab5-1.png","width":527,"height":739},{"@type":"BreadcrumbList","@id":"https:\/\/www.cybermedian.com\/de\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.cybermedian.com\/de\/"},{"@type":"ListItem","position":2,"name":"Eine umfassende Schritt-f\u00fcr-Schritt-Fallstudie: Anwendung des C4-Modells auf das Internet-Banking-System (Big Bank plc)"}]},{"@type":"WebSite","@id":"https:\/\/www.cybermedian.com\/de\/#website","url":"https:\/\/www.cybermedian.com\/de\/","name":"Cybermedian","description":"Jeden Tag eine neue Sache lernen","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.cybermedian.com\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Person","@id":"https:\/\/www.cybermedian.com\/de\/#\/schema\/person\/016578d8c88d35825fd3fbafc4f76b4d","name":"curtis","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.cybermedian.com\/de\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6910084565fcc601ec03c6693bb8ea480c1e52ccaa0efb299eb038bb6a1edc87?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6910084565fcc601ec03c6693bb8ea480c1e52ccaa0efb299eb038bb6a1edc87?s=96&d=mm&r=g","caption":"curtis"},"url":"https:\/\/www.cybermedian.com\/de\/author\/curtis\/"}]}},"_links":{"self":[{"href":"https:\/\/www.cybermedian.com\/de\/wp-json\/wp\/v2\/posts\/11936","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cybermedian.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cybermedian.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cybermedian.com\/de\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cybermedian.com\/de\/wp-json\/wp\/v2\/comments?post=11936"}],"version-history":[{"count":0,"href":"https:\/\/www.cybermedian.com\/de\/wp-json\/wp\/v2\/posts\/11936\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.cybermedian.com\/de\/wp-json\/wp\/v2\/media\/11937"}],"wp:attachment":[{"href":"https:\/\/www.cybermedian.com\/de\/wp-json\/wp\/v2\/media?parent=11936"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cybermedian.com\/de\/wp-json\/wp\/v2\/categories?post=11936"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cybermedian.com\/de\/wp-json\/wp\/v2\/tags?post=11936"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}