RepoSimpleView

Read any GitHub repo, identify its algorithms, and see them as flowcharts and DRAKON charts — with hover-to-explain pseudocode on every step.

What it does

1. You paste a repo (owner/name or a github.com URL).
2. It pulls the repo tree, ranks the most interesting source files, and downloads them.
3. A control-flow parser turns each function into a normalized step tree.
4. Every function can be viewed two ways:
   • Flowchart — classic boxes/diamonds (rendered with Mermaid).
   • DRAKON — the vertical "skewer" chart, questions branching right and rejoining.
5. Hover any box to read what that step does in plain English. A full step-by-step pseudocode panel sits under the chart.

Supported languages

Brace family (C, C++, JavaScript/TS, JSX/TSX, Java, C#, Go, Rust, Swift, Kotlin, PHP) and Python. The JS parser understands arrow functions and ASI / semicolon-less code, so modern JS repos analyze correctly.

Live site

https://juandresrodca.github.io/RepoSimpleView

Try the juandresrodca/FlipperKit example button.

Project layout

src/
  pages/index.astro     UI + client wiring, tab switching, hover tooltips
  lib/
    github.js           fetch repo tree + raw files (public GitHub API, no token)
    lang.js             extension → language, file ranking
    parser.js           the engine: source → control-flow tree (C-family + Python)
    pseudocode.js       step → plain-English explanation + step-by-step list
    flowchart.js        tree → Mermaid flowchart definition (+ hover tooltips)
    drakon.js           tree → DRAKON-style SVG (+ hover tooltips)
    analyze.js          orchestrates the whole pipeline
  styles/global.css     grey + red theme

Notes & limits

• Anonymous GitHub API is rate-limited (60 requests/hour per IP). Each repo costs 2 API calls; raw file downloads don't count against it.
• The parser is heuristic, not a compiler — unusual constructs degrade gracefully to plain "action" steps rather than failing.
• Large functions are truncated in the flowchart for readability.