PlantUML Web Server

@startuml
!pragma layout smetana

skinparam componentStyle uml2
skinparam shadowing false
skinparam roundcorner 10
skinparam defaultTextAlignment center
skinparam wrapWidth 200
skinparam maxMessageSize 150
left to right direction

hide stereotype

skinparam padding 2

<style>

componentDiagram {
    fontsize: 12
}

.unchanged {
    fontcolor: Green
    linecolor: Green
    backgroundcolor: #PaleGreen
}

.decomm {
    fontcolor: Blue
    linecolor: Blue
    backgroundcolor: #LightBlue
}

.config {
    fontcolor: Orange
    linecolor: Orange
    backgroundcolor: #LightYellow
}

.modified {
    fontcolor: DarkOrange
    linecolor: DarkOrange
    backgroundcolor: #Khaki
}

.new {
    fontcolor: DarkRed
    linecolor: DarkRed
    backgroundcolor: #LightSalmon
}

legend {
 backgroundcolor: white
 fontsize: 10
}
</style>

title
Mug Factory Inventory Tracking System
end title

header
    //Inventory Management//
endheader

database "**Inventory Service** \n<size:10>[SYS1]</size>" as SYS1 <<new>>
rectangle "**Inventory API** \n<size:10>[SYS2]</size>" as SYS2 <<new>>
artifact "**User Interface** \n<size:10>[SYS3]</size>" as SYS3 <<new>>
cloud "**Monitoring and Reporting Service** \n<size:10>[SYS4]</size>" as SYS4 <<new>>

SYS1 <.r.> SYS2 <<new>> : Sends inventory data\n<size:10> real-time [CN.01]</size>
SYS1 <.d.> SYS4 <<new>> : Sends periodic inventory snapshots\n<size:10> daily [CN.02]</size>
SYS2 <.r.> SYS3 <<new>> : Receives requests and sends data\n<size:10> on-demand [CN.03]</size>
SYS3 <.l.> SYS2 <<new>> : Sends requests and receives data\n<size:10> as-needed [CN.04]</size>
SYS4 <.u.> SYS1 <<new>> : Receives inventory snapshots\n<size:10> daily [CN.05]</size>

footer

endfooter
@enduml

🎉 Discover the future PlantUML Web Editor! 🚀 PNG SVG ASCII Art