@startuml
!theme plain
skinparam monochrome true
skinparam shadowing false

package "Frontend Architecture" {
  [Unified Documentation Interface] as UDI
  [Navigation Panel] as NP
  [Viewer Pane] as VP
  [Editor Panel] as EP
}

package "Format Renderers" {
  [MarkdownRenderer] as MR
  [UMLRenderer] as UR
  [SVGViewer] as SV
  [GenericRenderer] as GR
}

package "State Management" {
  [DocumentStore] as DS
  [ViewState] as VS
  [EditState] as ES
}

UDI --> NP
UDI --> VP
UDI --> EP

VP --> MR
VP --> UR
VP --> SV
VP --> GR

NP --> DS
VP --> VS
EP --> ES

DS --> VS
DS --> ES

@enduml