Skip to content
Get packs

Archify Diagram and Explainer Maker

Turn requirements, code or Mermaid into validated, interactive HTML diagrams and one-page explainers.

Source Download skill
Repository
tt-a1i/archify
Stars
92,587
Licence
Apache-2.0
Files
15 files

What it does

This skill teaches an AI agent to produce standalone HTML files that show a system as a diagram, such as an architecture, workflow, sequence, database schema, state lifecycle, or timeline. It can also turn an answer into a single explanatory page with a conclusion first and supporting panels. The agent builds a candidate file, runs a bundled command-line checker that validates it, renders it, and delivers the HTML with dark and light themes and image or SVG export. Files are written into a per-request folder inside the user's working directory.

Great for

  • Developers who want to visualize an architecture, API call flow or database schema from their own repository
  • Students or teams who want a shareable visual explanation of a process or comparison
  • Anyone who prefers a clickable HTML page to a plain text answer

Skip it if

  • Dashboards or live monitoring, which the skill description explicitly excludes
  • Situations where the output must be a verified, pixel-perfect design asset, since the skill asks for visual review before claiming visual quality
  • Repositories containing confidential code where the agent is not meant to read source files for evidence, since the skill inspects repository code for code-backed diagrams

Try asking

  • “Draw a sequence diagram of how an async job moves through our API, queue and worker, based on the code in this repo”
  • “Make a one-page explainer comparing two database options with a conclusion first and a trade-off table”
  • “Create an ERD of the orders and payments tables from the schema files in this project”
  • “Visualize the lifecycle states of an agent run as an explorable HTML diagram”
Step-by-step guide: how to use Archify Diagram and Explainer MakerInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 15 original files, the Apache-2.0 licence and an attribution note.

    archify.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip archify.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip archify.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Say explicitly that you want a page or explainer if you want a one-page HTML answer; otherwise the agent may answer in text or draw only the requested diagram.
  • Name the folder or output location you want, since by default each request gets a new timestamped folder under .archify in the working directory.
  • For diagrams of real code, point the agent at the specific module or flow you care about so it traces the requested behavior rather than the whole repository.

What's inside

  • assets/JetBrainsMono-OFL.txt
  • bin/delivery-update.mjs
  • bin/finalize.mjs
  • bin/open-artifact.mjs
  • bin/preview.mjs
  • bin/recover-output.mjs
  • brand-marks/catalog.json
  • brand-marks/README.md
  • examples/agent-run.lifecycle.json
  • examples/agent-tool-call.workflow.json
  • examples/archify-dev-activity.timeline.json
  • examples/archify-repository.tree.json
  • examples/async-job-roundtrip.sequence.json
  • SKILL.md
  • THIRD_PARTY_NOTICES.md

Redistributed unmodified from tt-a1i/archify under the Apache-2.0 licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.