@startuml architecture_timelapse

' Configuration pour rendre le diagramme plus compact
skinparam padding 1
skinparam nodesep 5
skinparam ranksep 1
skinparam componentMargin 1
skinparam packagePadding 2
skinparam defaultTextAlignment center
skinparam linetype ortho
skinparam rectangle {
   borderColor transparent
   stereotypeBorderColor transparent
}

!$ICONURL = "https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/v3.0.0/icons"
!include $ICONURL/common.puml
!include $ICONURL/devicons/javascript.puml
!include $ICONURL/devicons/html5.puml
!include $ICONURL/devicons/css3.puml
!include $ICONURL/devicons/nodejs.puml
!include $ICONURL/devicons/postgresql.puml

package "Hôte Proxmox" {
    package "Conteneur LXC" as lxc {
         package "Frontend" as frontend {
             DEV_HTML5(html, "HTML5")
             DEV_CSS3(css, "CSS3") #line:transparent
             DEV_JAVASCRIPT(js, "JavaScript") #line:transparent
         }
         
         package "Backend" as backend {
             DEV_NODEJS(express, "ExpressJS") #line:transparent
             [FFmpeg] as ffmpeg #line:transparent
             note right of ffmpeg: Image vers Vidéo
         }
         
         database "Base de données" as db {
             DEV_POSTGRESQL(pg, "PostgreSQL") #line:transparent
             note right of pg: Timelapses & Données
         }

         frontend --> backend : HTTP/REST
         backend --> db : Requêtes
         backend --> ffmpeg : Traitement
    }

    storage "Réplication Ceph" as ceph {
         [Stockage de données] as storage #line:transparent
         note right of storage: Stockage distribué
    }

    lxc --> ceph : Stockage
}

@enduml