Level 3 — Component

C4 Level 3: Component Diagram

Purpose

The Component diagram zooms into a single container to show:

• Internal logical components/modules
• Responsibilities of each component
• Internal dependencies and data flow

Audience: Developers working on or maintaining the container.

Train.md Build Pipeline Components

For a static site like Train.md, the “container” of interest is the build pipeline:

flowchart TB
  subgraph "Content Layer"
    md["📄 Markdown Files\n(/content)"]
    front["⚙️ Front Matter\n(YAML metadata)"]
    diagrams["📊 Mermaid Diagrams\n(embedded)"]
  end
  
  subgraph "Theme Layer"
    layouts["🧱 Layouts\n(HTML templates)"]
    partials["🧩 Partials\n(reusable components)"]
    shortcodes["⚡ Shortcodes\n(custom tags)"]
    assets["🎨 Assets\n(SCSS, JS)"]
  end
  
  subgraph "Build Layer"
    hugo["🔧 Hugo Engine"]
    config["📋 hugo.toml\n(site config)"]
  end
  
  subgraph "Output Layer"
    html["🌐 Static HTML"]
    css["🎨 Compiled CSS"]
    js["⚙️ JavaScript"]
  end
  
  md & front & diagrams --> hugo
  layouts & partials & shortcodes & assets --> hugo
  config --> hugo
  hugo --> html & css & js

Component Inventory

Checklist for Component Diagrams

• Scope limited to one container
• Components represent logical groupings
• Responsibilities clearly described
• Dependencies and data flow shown