Level 2 — Container

C4 Level 2: Container Diagram

Purpose

The Container diagram zooms into the system boundary to show:

  • Major deployable/runnable units
  • Technology choices
  • High-level communication patterns

Audience: Technical stakeholders — developers, architects, DevOps.

Train.md Container Diagram

flowchart TB
  subgraph Client
    browser["🌐 Web Browser"]
  end
  
  subgraph "Train.md System"
    hugo["📝 Hugo Static Site\n(Go, Markdown)"]
    theme["🎨 Hugo Book Theme\n(HTML/CSS/JS)"]
    content["📚 Content\n(Markdown + Mermaid)"]
  end
  
  subgraph Infrastructure
    cdn["☁️ CDN / GitHub Pages\n(Static Hosting)"]
  end
  
  browser -->|HTTPS| cdn
  cdn -->|serves| hugo
  content --> hugo
  theme --> hugo

Container Inventory

ContainerTechnologyPurpose
Hugo Static SiteGo, HugoBuilds Markdown into HTML
Hugo Book ThemeHTML, SCSS, JSProvides UI components and styling
ContentMarkdown, MermaidDocumentation source files
CDN/HostingGitHub Pages / NetlifyServes static assets globally

Communication Patterns

FromToProtocolNotes
BrowserCDNHTTPSAll traffic
CDNStatic filesFile systemPre-built at deploy time

Checklist for Container Diagrams

  • All deployable units shown
  • Technology stack indicated
  • Data stores identified (if any)
  • Communication protocols labeled