Archify: system diagrams from code
A system you have to explain: an HTML diagram you can search, trace up and downstream, compare across versions, export as PNG.
1.6K saves on X, as of Posted
Install Archify globally
npx skills add tt-a1i/archify -gTemplate
Turn [CODEBASE / FEATURE / WORKFLOW] into a [DIAGRAM TYPE] diagram. Choose from Architecture, Workflow, Sequence, Data Flow, or Lifecycle.Prompt: full system diagram
Then read this repo and use Archify to generate a system diagram.
Choose the diagram type that best fits what I need to understand: Architecture, Workflow, Sequence, Data Flow, or Lifecycle.
Keep the 8-12 most important components and one primary path. Label external services, databases, and component connections clearly. Put supporting details in cards instead of adding more edges to the main diagram.
Generate and verify a standalone HTML file. Confirm that component search and upstream/downstream tracing work, then export a high-resolution 2400 × 1260 PNG.Next Run the command in a terminal, then give Codex or Grok Bot the template or prompt in your repo.
If I could give Codex or Grok Bot just one skill for drawing system diagrams, I’d pick Archify. It already has 29K+ stars on GitHub, and I now use it by default whenever I need to map a system.
Once installed, your agent can:
- Create one self-contained HTML file and export it as PNG, SVG or video
- Search for any component and trace its upstream and downstream paths
- Compare before and after versions side by side to see what was added, removed or rearranged
Share this tip
