Graphs that teach > graphs that impress. Turn any code into an interactive knowledge graph you can explore, search, and ask questions about. Works with Claude Code, Codex, Cursor, Copilot, Gemini CLI, and more.
Pre-indexed code knowledge graph, auto syncs on code changes, for Claude Code, Codex, Gemini, Cursor, OpenCode, AntiGravity, Kiro, and Hermes Agent — fewer tokens, fewer tool calls, 100% local
npx @colbymchenry/codegraphA hand-picked collection of the finest of resources for the most awesome of agents, Claude Code, the undisputed champion of coding companions, from the unstoppable team at Anthropic PBC. A delectable showcase of top tier skills, ambidextrous agents, scintillating status lines, top notch developer tooling, and also we have plugins
Shows active maintenance signals
Carries strong trust indicators from repository metadata
3234 GitHub stars recorded
Install Archify globally, then select your agent when prompted:
npx skills add tt-a1i/archify -g
Want to try it without a permanent install? This starts Codex with a temporary copy of the skill:
npx skills use tt-a1i/archify@archify --agent codex
Replace codex with claude-code or opencode to start either of those agents instead. These commands use the open-source skills CLI.
Map a real repository:
Analyze this repository, then use archify to create an architecture diagram of its runtime components, data flow, external dependencies, and trust boundaries.
Explain a request path:
Use archify to draw this login flow: Browser -> Web App -> API -> JWT validation -> Redis session lookup -> PostgreSQL fallback. Show the cache-miss path clearly.
Visualize delivery:
Use archify to create a CI/CD workflow diagram: pull request -> tests -> approval gate -> build image -> staging deploy -> smoke test -> production deploy, with rollback on failure.
The distributed skill includes standalone Schema validators, so it is ready to render immediately — no npm install or runtime dependencies required.
Ask for focused changes such as add Redis, move auth to the left, or highlight the rollback path. Archify returns a self-contained HTML file you can open in any browser and export as PNG, JPEG, WebP, or SVG.
Archify is packaged as an agent skill directory (archify/SKILL.md), so the same archify.zip works with Claude, Codex CLI, and opencode.
Claude.ai:
archify.zipClaude Code CLI:
# Global (all projects)
unzip archify.zip -d ~/.claude/skills/
# Or project-local
unzip archify.zip -d ./.claude/skills/
Codex CLI:
# Global (all projects)
unzip archify.zip -d ~/.agents/skills/
# Or project-local
unzip archify.zip -d ./.agents/skills/
opencode:
# Global (opencode-native)
unzip archify.zip -d ~/.config/opencode/skills/
# Or project-local
unzip archify.zip -d ./.opencode/skills/
# Also works: the shared agent directory used above for Codex
unzip archify.zip -d ~/.agents/skills/
Renderer-backed diagrams follow a small quality loop before delivery:
| Step | What happens |
|---|---|
| Generate JSON IR | The agent writes a typed architecture / workflow / sequence / dataflow / lifecycle description instead of hand-editing the final SVG. |
| Validate | Bundled standalone validators check the JSON Schema with no runtime dependency installation. |
| Render | The typed renderer produces the self-contained HTML/SVG output. |
| Check artifact | The post-render checker catches malformed SVG, non-finite coordinates, accidental diagonal arrows, and legend-crossing routes. |
| Iterate | Fixes are made against the JSON IR or semantic classes, so targeted edits do not require regenerating the whole diagram from scratch. |
You can run the final artifact check directly:
node scripts/check-render-output.mjs output.html
The bundled CLI wraps the same renderer and checker commands:
node bin/archify.mjs doctor
node bin/archify.mjs demo /tmp/archify-demo
node bin/archify.mjs render workflow examples/agent-tool-call.workflow.json workflow.html
node bin/archify.mjs validate workflow examples/agent-tool-call.workflow.json --json
node bin/archify.mjs check workflow.html
node bin/archify.mjs examples
Renderer-backed diagrams can also opt into lightweight motion for demos:
{ "meta": { "title": "Release Flow", "animation": "trace" } }
Trace animation runs inside the generated HTML/SVG: arrows flow in order, nodes pulse lightly, and prefers-reduced-motion disables movement for users who request it. Omit animation for the default static diagram.
Claude.ai Projects (alternative):
Upload archify.zip to your Project Knowledge.
What each install surface can do:
| Install surface | Capability |
|---|---|
| Claude Code | Full — runs the typed renderers + schema validation |
| Codex CLI | Full — install to ~/.agents/skills/ or .agents/skills/ |
| opencode | Full — install to .opencode/skills/, .agents/skills/, or another supported skills directory |
| Claude.ai (zip upload) | Usually full — depends on whether the sandbox allows Node.js execution |
| Project Knowledge | Architecture mode only — no code execution, purely prompt-driven |
| Component Type | Color | Use for |
|---|---|---|
| Frontend | Cyan | Client apps, UI, edge devices |
| Backend | Emerald | Servers, APIs, services |
| Database | Violet | Databases, storage, AI/ML |
| Cloud / AWS | Amber | Cloud services, infrastructure |
| Security | Rose | Auth, security groups, encryption |
| Message Bus | Orange | Kafka, RabbitMQ, SNS, event buses |
| External | Slate | Generic, external systems |
Each color has coordinated dark-mode and light-mode variants that switch together via the theme toggle.
Archify is not trying to ship a complete AWS / Azure / GCP icon runtime. Instead, it treats technology names and optional labels as semantic hints that guide color, grouping, and copy:
| Label examples | Visual category |
|---|---|
react, nextjs, ios, android, browser | Frontend |
node, go-service, python-worker, api-gateway | Backend |
postgres, mysql, redis, s3, , |
bigquerysnowflake| Database / storage |
aws.lambda, aws.cloudfront, gcp.pubsub, azure.functions, kubernetes | Cloud / infrastructure |
auth0, cognito, oauth, vault, security-group | Security |
kafka, rabbitmq, sns, sqs, nats | Message bus |
stripe, github-actions, openai, anthropic, slack | External |
Use these labels in prompts or JSON IR when the exact technology matters. The generated diagram stays self-contained HTML/SVG; the labels improve semantic styling and layout without forcing a heavyweight icon dependency.
Imagecanvas.toBlobimage/webp