How Coco Turns Codebases into Interactive Architecture Visualizations

Overview

Coco is an open‑source R&D efficiency analysis tool. Version 0.1.1 (macOS) provides two CLI utilities: coco for collecting code metrics using CLOC and Git, and visual for rendering an interactive architecture diagram.

Lightweight Architecture Visualization

Coco visualizes layered architectures that correspond to the directory structure of a project. It counts lines of code per file (including blank and comment lines) and maps the hierarchy to a D3.js‑driven interactive graph.

CLOC – counts physical, blank, and comment lines for many languages.

D3.js – JavaScript library for dynamic data‑driven visualizations.

Installation and Configuration

Install – download the binary from the GitHub Releases page or build from source (clone https://github.com/inherd/coco.git and run make or go build as described in the README).

Configure – create a coco.yml file that specifies the target repository (local path or remote URL). Example snippet:

repo:
  url: https://github.com/example/project.git
  branch: main
output: ./coco-output

Analyze – run coco in the project root. The tool invokes CLOC to produce a JSON report of line counts and extracts Git history (commit count, author statistics, file changes).

Visualize – start the web server with visual server. The server hosts a single‑page application that reads the JSON report and renders the layered diagram. Open http://localhost:8080 in a browser.

Example Output

The following diagram shows the architecture of the Redis codebase (≈125 k lines). Expanding the deps node reveals three primary dependencies: jemalloc, lua, and hiredis.

A second case visualizes a leaked Bilibili backend source (≈3 M lines, including dependencies) together with a hotspot heat map that highlights the most frequently changed files.

Technical Notes

The visualization assumes a layered architecture where each directory represents a logical layer. Non‑layered projects may require manual mapping.

Coco currently builds and tests only on macOS; other platforms are not yet verified.

All source code, issue tracker, and release assets are hosted at https://github.com/inherd/coco.

Additional case studies are listed at https://inherd.github.io/cases/.