Skip to content

docs: Add C4 architecture diagrams (L1–L3) in Mermaid #29

@shouze

Description

@shouze

Context

Parent epic: #24
Depends on: #25 (VitePress + vitepress-plugin-mermaid initialized)

Pages to create in docs/architecture/

overview.md — C4 Level 1: System Context

C4Context
  Person(user, "Developer", "Runs github-code-search from a terminal")
  System(cli, "github-code-search", "Interactive CLI — aggregates GitHub code search results, drives TUI, outputs markdown/JSON")
  System_Ext(github, "GitHub REST API", "Code search endpoint, org team listing")
  Rel(user, cli, "Runs query, navigates TUI, confirms selection")
  Rel(cli, github, "HTTPS — /search/code, /orgs/{org}/teams, /orgs/{org}/teams/{slug}/repos")
Loading

Prose introduction: who uses the tool, what external system it depends on.

containers.md — C4 Level 2: Containers

Show the main processes/modules as containers:

Container File Responsibility
CLI parser github-code-search.ts Commander subcommands, option parsing, orchestration
API client src/api.ts GitHub REST calls, pagination, retry
TUI src/tui.ts TTY read/write, keyboard interaction
Output renderer src/output.ts Markdown and JSON formatters
Upgrader src/upgrade.ts Binary self-replacement

components.md — C4 Level 3: Components (zoom on pure-function core)

Zoom into the pure-function layer called by the CLI and TUI:

Component File Key exports
Filter & aggregation src/aggregate.ts applyFiltersAndExclusions()
Team grouping src/group.ts groupByTeamPrefix(), flattenTeamSections()
Row builder src/render/rows.ts buildRows(), rowTerminalLines(), isCursorVisible()
Summary builder src/render/summary.ts buildSummary(), buildSummaryFull(), buildSelectionSummary()
Filter stats src/render/filter.ts buildFilterStats()
Selection src/render/selection.ts applySelectAll(), applySelectNone()
Highlighter src/render/highlight.ts highlight()
Output src/output.ts buildOutput()

Acceptance criteria

  • All 3 pages exist and render without errors (no Mermaid parse errors)
  • Each diagram has a prose introduction explaining what it shows
  • Component names, arrows and file references match the actual source code
  • Diagrams are readable in both light and dark mode

Metadata

Metadata

Assignees

Labels

Type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions