How-to · Design & Creative · By Archify

How to use Archify Interactive Diagrams in your AI agent

Install and use the Archify Interactive Diagrams skill in Claude Code, Cursor, Codex, Gemini CLI, OpenCode, and Windsurf — with sample prompts.

What you'll get

Archify turns a plain-language description into an interactive diagram saved as a single web page you can open in any browser and send to others. It handles ten kinds of diagrams, including process flows, timelines, status maps, and how-things-connect maps, with light and dark themes and export to image or video. It leans toward software and system diagrams, but also covers everyday subjects like travel plans, approval steps, or where an order stands.

Step 1 — Get the skill source URL

The Archify Interactive Diagrams skill lives at:

Step 2 — Add it to your AI agent

Copy one of these prompts and paste it into your AI tool. The agent will fetch and install the skill for you.

Claude Code

Add the agent skill from https://github.com/tt-a1i/archify/tree/main/archify to my project.

Cursor

Install this agent skill: https://github.com/tt-a1i/archify/tree/main/archify

Codex

Add this skill to .codex/skills/: https://github.com/tt-a1i/archify/tree/main/archify

Gemini CLI

Add the skill at https://github.com/tt-a1i/archify/tree/main/archify to my .gemini/skills/ directory.

OpenCode

Install this agent skill from https://github.com/tt-a1i/archify/tree/main/archify

Windsurf

Add this skill: https://github.com/tt-a1i/archify/tree/main/archify

Step 3 — Try these prompts

Once the skill is installed, ask your AI things like:

  • Explain how a process or approval flow works to your team
  • You want a visual timeline of a project, launch, or incident
  • You are mapping how your tools and services connect for a planning doc
  • Turn a messy flowchart into something polished you can share

What this skill does

  • Turns a written description into a clean, clickable diagram
  • Supports workflows, timelines, status maps, data flows, org-style trees, and system maps
  • Lets viewers click parts of the diagram and trace paths through it
  • Exports diagrams as images, SVG files, or short WebM videos
  • Produces one shareable HTML file that works without any extra software
Made byArchify
CategoryDesign & Creative