@startuml !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml !define DEVICONS https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/master/devicons !define FONTAWESOME https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/master/font-awesome-5 !include DEVICONS/angular.puml !include DEVICONS/java.puml !include DEVICONS/msql_server.puml !include FONTAWESOME/users.puml Person(user, "Customer", "People that need products", $sprite="users") Container(spa, "SPA", "angular", "The main interface that the customer interacts with", $sprite="angular") Container(api, "API", "java", "Handles all business logic", $sprite="java") ContainerDb(db, "Database", "Microsoft SQL", "Holds product, order and invoice information", $sprite="msql_server") Rel(user, spa, "Uses") Rel(spa, api, "Uses") Rel_R(api, db, "Reads/Writes") SHOW_FLOATING_LEGEND() Lay_Distance(LEGEND(), db, 1) @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