|
| 1 | +# code-explainer |
| 2 | + |
| 3 | +`code-explainer` is an open-source skill that analyzes either a local repository folder or a GitHub URL and produces onboarding explainers for PMs, designers, and engineers. |
| 4 | + |
| 5 | +Outputs include: |
| 6 | + |
| 7 | +- Crisp top-level overview (`OVERVIEW.md`) |
| 8 | +- Linked deep explainers (architecture, modules, flows, dependencies, glossary) |
| 9 | +- Mermaid source diagrams (`.mmd`) |
| 10 | +- Rendered SVG and PNG diagrams |
| 11 | +- Confidence, attribution, and quality reports (`meta/*.json`) |
| 12 | + |
| 13 | +## Repository Layout |
| 14 | + |
| 15 | +```text |
| 16 | +code-explainer/ |
| 17 | + SKILL.md |
| 18 | + agents/openai.yaml |
| 19 | + scripts/ |
| 20 | + references/ |
| 21 | + assets/templates/ |
| 22 | +``` |
| 23 | + |
| 24 | +## Dependencies (Required for Skill Installation/Use) |
| 25 | + |
| 26 | +Install these before using the skill: |
| 27 | + |
| 28 | +- Python `3.10+` |
| 29 | +- Node.js `18+` and npm |
| 30 | +- Git |
| 31 | + |
| 32 | +For high-fidelity diagram rendering (`SVG` + `PNG` via Mermaid CLI): |
| 33 | + |
| 34 | +- Mermaid CLI (`mmdc`) from `@mermaid-js/mermaid-cli` |
| 35 | + |
| 36 | +If `mmdc` is missing, the skill still runs but uses fallback rendering and reports it in `meta/render_report.json`. |
| 37 | + |
| 38 | +## Install Runtime Dependencies |
| 39 | + |
| 40 | +### Windows (PowerShell) |
| 41 | + |
| 42 | +```powershell |
| 43 | +powershell -ExecutionPolicy Bypass -File .\code-explainer\scripts\install_runtime.ps1 |
| 44 | +``` |
| 45 | + |
| 46 | +### macOS/Linux |
| 47 | + |
| 48 | +```bash |
| 49 | +bash ./code-explainer/scripts/install_runtime.sh |
| 50 | +``` |
| 51 | + |
| 52 | +## Troubleshooting Dependencies |
| 53 | + |
| 54 | +### 1) `mmdc` is not recognized |
| 55 | + |
| 56 | +If you see: `mmdc: command not found` or `The term 'mmdc' is not recognized` |
| 57 | + |
| 58 | +Run: |
| 59 | + |
| 60 | +```bash |
| 61 | +npm install -g @mermaid-js/mermaid-cli |
| 62 | +mmdc --version |
| 63 | +``` |
| 64 | + |
| 65 | +If it still fails: |
| 66 | + |
| 67 | +1. Open a new terminal session. |
| 68 | +2. Check global npm bin path: |
| 69 | + |
| 70 | +```bash |
| 71 | +npm bin -g |
| 72 | +``` |
| 73 | + |
| 74 | +3. Ensure that path is on your `PATH` environment variable. |
| 75 | + |
| 76 | +### 2) Mermaid rendering fails with Chromium/Puppeteer errors |
| 77 | + |
| 78 | +If you see browser launch errors from `mmdc`: |
| 79 | + |
| 80 | +1. Reinstall Mermaid CLI: |
| 81 | + |
| 82 | +```bash |
| 83 | +npm uninstall -g @mermaid-js/mermaid-cli |
| 84 | +npm install -g @mermaid-js/mermaid-cli |
| 85 | +``` |
| 86 | + |
| 87 | +2. Re-run: |
| 88 | + |
| 89 | +```bash |
| 90 | +mmdc --version |
| 91 | +``` |
| 92 | + |
| 93 | +3. If still blocked, the skill will continue with fallback rendering and report it in `meta/render_report.json`. |
| 94 | + |
| 95 | +### 3) `npm install -g` permission errors |
| 96 | + |
| 97 | +- Windows: run PowerShell as Administrator and retry. |
| 98 | +- macOS/Linux: avoid `sudo npm install -g` if possible; use Node version managers (`nvm`, `fnm`, `asdf`) and retry. |
| 99 | + |
| 100 | +### 4) `python` command not found |
| 101 | + |
| 102 | +Confirm Python install: |
| 103 | + |
| 104 | +```bash |
| 105 | +python --version |
| 106 | +``` |
| 107 | + |
| 108 | +If unavailable on Windows but `py` exists: |
| 109 | + |
| 110 | +```powershell |
| 111 | +py --version |
| 112 | +``` |
| 113 | + |
| 114 | +Install Python 3.10+ and ensure it is added to `PATH`. |
| 115 | + |
| 116 | +### 5) `git` command not found for GitHub URL analysis |
| 117 | + |
| 118 | +Install Git and verify: |
| 119 | + |
| 120 | +```bash |
| 121 | +git --version |
| 122 | +``` |
| 123 | + |
| 124 | +Local folder analysis can still run without Git, but GitHub URL source mode requires it. |
| 125 | + |
| 126 | +## Install Sequence (Fresh Machine) |
| 127 | + |
| 128 | +1. Install runtime dependencies (section above). |
| 129 | +2. Install skill into Codex: |
| 130 | + |
| 131 | +```powershell |
| 132 | +powershell -ExecutionPolicy Bypass -File .\install_to_codex.ps1 |
| 133 | +``` |
| 134 | + |
| 135 | +3. Restart Codex to load the new skill. |
| 136 | + |
| 137 | +## Run |
| 138 | + |
| 139 | +```bash |
| 140 | +cd code-explainer |
| 141 | +python scripts/analyze.py analyze \ |
| 142 | + --source <local_path_or_github_url> \ |
| 143 | + --output <output_dir> \ |
| 144 | + --mode standard \ |
| 145 | + --audience nontech \ |
| 146 | + --enable-web-enrichment true |
| 147 | +``` |
| 148 | + |
| 149 | +## Install Into Codex |
| 150 | + |
| 151 | +Use the installer script: |
| 152 | + |
| 153 | +```powershell |
| 154 | +powershell -ExecutionPolicy Bypass -File .\install_to_codex.ps1 |
| 155 | +``` |
| 156 | + |
| 157 | +Or copy manually to: |
| 158 | + |
| 159 | +```text |
| 160 | +~/.codex/skills/code-explainer |
| 161 | +``` |
| 162 | + |
| 163 | +Then restart Codex so it picks up the new skill. |
| 164 | + |
| 165 | +## Open-Source Publishing |
| 166 | + |
| 167 | +1. Initialize git in this repository. |
| 168 | +2. Commit files. |
| 169 | +3. Push to GitHub. |
| 170 | +4. Add `topics` such as: `codex-skill`, `agent-skill`, `mermaid`, `codebase-analysis`, `onboarding`. |
| 171 | +5. Submit/list the repository on skill directories (see notes in your assistant response). |
0 commit comments