Images & icons84k · #849

archify

Lets your agent create various diagram types from descriptions. It interactively visualizes architectures, flows, and data.

What it does

Archify creates interactive diagrams for architecture, workflows, sequences, and more, from text or code descriptions. It generates an HTML file that you can view in a browser, with theme and export options.

When to use it

✓When you need to visualize the structure of a software system.
✓To document a process or data flow.
✓When planning the organization of information in a database.

Example of what to ask your AI

“Create a workflow diagram showing a user's login process, from entering credentials to confirmation.”

Want more? Open the sections below.

How to use

The easiest way: copy the message below and paste it into Claude, ChatGPT, Cursor or any AI. It reads the skill and follows the instructions.

Skill link

https://github.com/tt-a1i/archify/blob/main/archify/SKILL.md

Ready-to-paste message

Use this skill to help me: https://github.com/tt-a1i/archify/blob/main/archify/SKILL.md Read the SKILL.md file at that link and follow its instructions for my task.

View on GitHub ↗Raw file

How it works

You provide a description of what you want to diagram (like text or code), and Archify transforms it into an interactive HTML file. It organizes everything into folders for easy management.

Installation

Easiest way: copy the skill link and paste it into Claude, ChatGPT or Cursor asking it to follow the instructions.

In the terminal (Claude Code, Codex, Cursor), in your project folder:

npx skills add tt-a1i/archify --skill archify

Or download just the file:

curl -L https://raw.githubusercontent.com/tt-a1i/archify/main/archify/SKILL.md -o SKILL.md

Technical content (original SKILL.md)

Original text by the author, straight from GitHub.

Archify

Create an interactive HTML diagram from typed JSON.

Run commands from your working directory. Unless the user names another location, give each new diagram request its own folder .archify/<type>-<slug>-<YYYYMMDD-HHMMSS>/ there (local time, chosen once when the request starts): keep candidate.json and <slug>.html in it, set meta.output to that HTML path relative to the working directory, and reuse the folder for every repair rerun. A later request gets a new folder, so earlier versions stay intact. Replace bin/archify.mjs in the commands below with the installed package's absolute path, or its path relative to your working directory; input and output paths resolve from that working directory.

For a real codebase, read Repository authoring while tracing the requested behavior. A system description uses the steps below; an existing JSON uses the handoff path.

Existing candidate handoff

When the user supplies a frozen candidate, run finalize first as one CLI invocation. Its passing receipt completes the automated gates; follow any visual review recommendation under Delivery before claiming visual quality. For repair, follow step 5.

finalize includes a bounded update check in its delivery receipt; see Update awareness.

Fast authoring path

Use this path for ordinary generation. Read branch references only when their stated trigger applies.

Choose architecture, workflow, sequence, dataflow, lifecycle, erd, class, tree, timeline, or waterfall from the question.
Use the exact schema and example paths in the Type router without listing their directories. Read Authoring defaults and the mode's example in a bounded batch separate from project documents and complete schemas so neither is truncated; recover any missing section before writing. For Architecture, use the matching showcase example. For every mode except Architecture, also read the mode and common schemas. Read the relevant schema definition before choosing any new field, enum, or constrained text, especially boundary kinds. Examples teach shape, not facts. Use fresh IDs, wording, and layout. Go directly to the candidate without preliminary help, doctor, starter validation, temporary diagrams, or output-path listing. Query brands only for an explicitly requested mark; read Brand marks for an unknown mark with a user-provided URL.

…

FAQ

What types of diagrams can Archify create?

It can create architecture, workflow, sequence, data-flow, lifecycle/state, entity-relationship, class/interface, tree, timeline, and execution waterfall diagrams.

How does Archify handle existing code?

It can inspect your code repository to create diagrams based on the code's structure and behavior.

Can I customize the diagram's appearance?

Yes, it offers dark/light themes and an optional motion feature.

Details

Original description by the author

Create validated architecture, workflow, sequence, data-flow, lifecycle/state, entity-relationship, class/interface, tree, timeline, and execution waterfall diagrams as explorable standalone HTML with inline SVG, dark/light themes, optional motion, and image/SVG/WebM export. Accept plain-language requirements or Mermaid; inspect repository evidence for code-backed diagrams. Use when visualizing in

repo: tt-a1i/archify

Popularity