@startuml !definelong COMP_TEXTGENCOMP(name) skinparam nodesep 4 skinparam ranksep 2 skinparam linetype polyline hide stereotype frame "name## Frontend" { ' i tag is effective node "<i><<device>></i> Dell PowerEdge T30" <<device>> as name##_front_serv{ ' size tag is effective node "<size:11><<OS>></size> SUSE Linux Ent 10" <<OS>> as name##_front_os{ ' b tag has no effect node "<b style="font-weight:normal;"><<web server>></b> Apache" <<web server>> as name##_front_ws{ artifact name##_front_specs <<deployment spec>> as "<size:12><<deployment spec>></size> package.json ---- config1: String config2: Int config3: Float" package name <<dist folder>> as name##_front_dist{ ' i tag is effective artifact "<i><<source>></i> index.html" <<source>> as name##_front_index ' size tag is effective artifact "<size:11><<source>></size> main-[V].[H].js" <<source>> as name##_front_main ' b tag is effective artifact "<b><<source>></b> polyfill-[V].[H].bundle.js" <<source>> as name##_front_poly artifact "<<source>> runtime-[V].[H].bundle.js" <<source>> as name##_front_run artifact "<<source>> style.[H].bundle.css" <<source>> as name##_front_style folder assets as name##_front_assets } } } } } !enddefinelong COMP_TEXTGENCOMP(DDDD) @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