HLD vs. LLD

High level design (Architectural design)
… provides an overview of the system.

Example: Infotainment-System (focus on media and navigation only)

  • Behavior (here: use case diagram)

    PlantUML Syntax:<br /> actor User as user<br /> package “Infotainment system” {<br /> usecase “Play audio or video” as play<br /> usecase “Navigate to destination” as navi<br /> }</p> <p> user –> play<br /> user –> navi<br />

  • Structure (here: component diagram)

    PlantUML Syntax:<br /> package “Infotainment system” {<br /> package “Touch screen” {<br /> component “User interface” as user_int<br /> }<br /> package “Sound system” {<br /> component Loudspeaker as speaker<br /> }<br /> package “Head unit” {<br /> component “Media player” as med_player<br /> component “Audio service” as audio_serv<br /> component “Navigation client” as nav_client<br /> component “Storage device” as store_dev<br /> }<br /> }<br /> cloud “Backend” {<br /> component “Navigation service” as nav_serv<br /> component “Streaming service” as stream_serv<br /> }</p> <p> user_int <-down-> med_player : CAN<br /> user_int <-down-> nav_client : CAN<br /> audio_serv -up-> speaker : CAN<br /> med_player <-right-> audio_serv<br /> nav_client <-left-> audio_serv<br /> nav_client -down-> store_dev<br /> med_player -down-> store_dev<br /> nav_client <-down-> nav_serv : Inet<br /> med_player <-down-> stream_serv : Inet<br />

Low level design (Detailed design)
… provides the details of the components.

Example: Infotainment-System (focus on media only)

  • Behavior (here: state diagram)

    PlantUML Syntax:<br /> state Passive<br /> state Active {<br /> state Playing<br /> state Paused<br /> state Stopped<br /> }</p> <p> [*] -right-> Passive : Startup<br /> Passive –> Playing : Medium added<br /> Playing -right-> Paused : Pause<br /> Playing –> Stopped : Stop<br /> Paused -left-> Playing : Play<br /> Paused -right-> Stopped : Stop<br /> Stopped –> Playing : Play<br /> Active –> Passive : Medium removed<br /> Active -right-> [*] : Shutdown<br />

  • Structure (here: class diagram)

    PlantUML Syntax:<br /> left to right direction</p> <p> class Player {<br /> virtual play()<br /> virtual pause()<br /> virtual stop()<br /> int : curTrackId<br /> }<br /> class PassivePlayer extends Player<br /> class ActivePlayer extends Player<br /> class PlayingPlayer extends ActivePlayer<br /> class PausedPlayer extends ActivePlayer<br /> class StoppedPlayer extends ActivePlayer<br /> class Playlist<br /> Class PlaylistItem<br /> class AudioItem extends PlaylistItem<br /> class VideoItem extends PlaylistItem</p> <p> Player “1” *– “1” Playlist<br /> Playlist “1” *– “0..*” PlaylistItem<br />