@startuml !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml AddElementTag("v1.0", $borderColor="#d73027") AddElementTag("v1.1", $fontColor="#d73027") AddElementTag("backup", $fontColor="orange") AddRelTag("backup", $textColor="orange", $lineColor="orange", $lineStyle = DashedLine()) Person(user, "Customer", "People that need products") Person(admin, "Administrator", "People that administrates the products via the new v1.1 components", $tags="v1.1") Container(spa, "SPA", "angular", "The main interface that the customer interacts with via v1.0", $tags="v1.0") Container(spaAdmin, "Admin SPA", "angular", "The administrator interface that the customer interacts with via new v1.1", $tags="v1.1") Container(api, "API", "java", "Handles all business logic (incl. new v1.1 extensions)", $tags="v1.0+v1.1") ContainerDb(db, "Database", "Microsoft SQL", "Holds product, order and invoice information") Container(archive, "Archive", "Audit logging", "Stores 5 years", $tags="backup") Rel(user, spa, "Uses", "https") Rel(spa, api, "Uses", "https") Rel_R(api, db, "Reads/Writes") Rel(admin, spaAdmin, "Uses", "https") Rel(spaAdmin, api, "Uses", "https") Rel_L(api, archive, "Writes", "messages", $tags="backup") SHOW_LEGEND() @enduml Submit amiga aws-orange black-knight bluegray blueprint cerulean-outline cerulean crt-amber crt-green cyborg-outline cyborg hacker lightgray mars materia-outline materia metal mimeograph minty plain reddress-darkblue reddress-darkgreen reddress-darkorange reddress-darkred reddress-lightblue reddress-lightgreen reddress-lightorange reddress-lightred sandstone silver sketchy-outline sketchy spacelab spacelab-white superhero-outline superhero toy united vibrant       🎉 Discover the future PlantUML Web Editor! 🚀  PNG  SVG  ASCII Art