@startuml
' PlantUML diagram for a Mobile App Sitemap with emojis instead of sprites/icons
!theme spacelab
skinparam shadowing true
skinparam rectangle {
BackgroundColor #F8F9FA
BorderColor #2C3E50
FontColor #2C3E50
FontSize 16
RoundCorner 25
}
skinparam package {
BackgroundColor #E3F2FD
BorderColor #1565C0
FontColor #1565C0
}
skinparam note {
BackgroundColor #FFF9C4
BorderColor #FBC02D
FontColor #F57C00
FontSize 14
Shadowing true
}
' Watermark
note as Watermark
[[https://buildthenmarket.com]]
© 2025 BuildThenMarket
end note
package "Mobile App" as MainApp {
rectangle "🏠 Home" as Home #A5D6A7
rectangle "👤 Profile" as Profile #B3E5FC
rectangle "⚙️ Settings" as Settings #FFCC80
package "Onboarding & Auth" #F8BBD0 {
rectangle "📧 Email Login" as EmailLogin #E1BEE7
rectangle "🔢 OTP Verification" as OTP #FFCDD2
rectangle "📝 Register" as Register #FCE4EC
rectangle "❓ Forgot Password" as Forgot #FFF9C4
}
rectangle "🔔 Notifications" as Notifications #E0E0E0
rectangle "🔍 Search" as Search #AED581
rectangle "💬 Messages" as Messages #BCAAA4
}
Home -down-> Notifications
Home -down-> Search
Home -down-> Messages
Home -down-> Profile
Home -down-> Settings
Home -left-> EmailLogin : "If not authenticated"
EmailLogin -down-> OTP : "If 2FA/OTP enabled"
EmailLogin -down-> Register : "No account?"
EmailLogin -down-> Forgot : "Forgot password?"
Profile -down-> Settings : "Edit profile / Preferences"
Register -down-> OTP : "Verify Email/Phone"
OTP -down-> Home : "Success"
note right of OTP
- Secure OTP input (auto-fill, paste protection)
- Rate limiting
- Expiry timer
- Multi-channel (SMS/Email)
end note
note right of EmailLogin
- Secure password storage (hashed)
- Email validation
- "Remember Me" option (device-bound tokens)
end note
note right of Register
- Password strength meter
- CAPTCHA or anti-bot
- Double opt-in (email confirmation)
end note
@enduml