Archify: 한 문장을 인터랙티브 다이어그램으로
한 문장 설명을, 눌러서 경로를 따라가는 다이어그램 HTML 한 장으로 바꿔 주는 에이전트 스킬
- 누가
- tt-a1i가 만든 오픈소스 에이전트 스킬이에요. 시스템이나 계획을 그림으로 설명해야 하는 사람을 위해 만들었어요
- 언제
- 2026년 4월 저장소가 열렸고, 최신 릴리스는 2026년 10월 19일의 v3.2.0이에요
- 어디서
- Claude Code, Codex CLI, Cursor, OpenCode에서 Node.js 18 이상으로 로컬 실행, 결과는 브라우저에서 여는 HTML 파일
이게 불편했어요
시스템 구조나 계획을 남에게 설명하려면 그림이 필요한데, 그릴 때마다 상자를 하나씩 놓고 화살표를 이어야 했어요. 다 그려도 이미지 한 장이라, '캐시 미스일 때 경로만 보여 줘' 같은 질문이 오면 다시 그려야 했고요.
그래서 이렇게 풀어요
Archify는 에이전트에게 말로 설명하면 다이어그램을 HTML 파일 한 장으로 돌려줘요. 핵심은 에이전트가 그림을 직접 그리는 대신 타입이 정해진 JSON을 쓰고, 검증과 실제 브라우저 검사를 모두 통과한 결과만 파일이 된다는 점이에요. 받은 파일에서는 노드를 눌러 위아래로 이어진 곳을 따라가고, 두 지점 사이 경로를 강조하고, 테마를 바꾸거나 이미지로 내보낼 수 있어요. 그다음엔 '인증 추가해 줘'처럼 채팅으로 고쳐 나가면 돼요.
이걸로 만든 사람들
공무원 진로를 소개하는 영상을 에이전트(WorkBuddy, DeepSeek 모델)에게 정리시켜, 국가 시험·성 시험·선조생 세 갈래를 레인별 워크플로 다이어그램으로 만들어 올렸어요.
是参考一个介绍编制的视频 针对他的视频让ai跑了一下 包含图表，方便以后查看
Gemini Chat에 이 한 문장을 주고, Python 라우터와 Ollama·Llama 3로 도는 로컬 AI 비서 'Guts'의 구조도를 만들어 HTML과 검증 결과를 함께 올렸어요.
Map a privacy-first local AI assistant using a Python router to manage context, with Ollama handling local Llama 3 inference.
학생인 작성자가 Codex로 가상의 행사 신청 시스템 워크플로를 그린 뒤, 노드마다 쉬운 설명과 그 소스 줄을 붙여 주는 읽기 레이어를 덧붙여 공개했어요.
a small reading layer that sits on top of an Archify diagram and explains every node in plain language, paired with the exact source lines behind it
안에서는 이렇게 돌아가요
- 1
나 → Claude Code · Codex
"웹 요청을 그려 줘" 같은 한 문장말로 한 설명이나 Mermaid, 또는 저장소를 읽어 달라는 요청으로 시작해요archify/SKILL.md - 2
Claude Code · Codex → archify/SKILL.md
10가지 유형 중 하나와 그 스키마·예제Type router 표에서 유형을 고르고, 그 유형의 스키마와 예제를 읽어요archify/SKILL.md - 3
Claude Code · Codex → candidate.json
.archify/<type>-<slug>-<시각>/ 폴더에 JSON좌표를 그리는 대신 노드, 관계, 라벨을 스키마에 맞는 JSON으로 써요archify/schemas/architecture.schema.json - 4
candidate.json → archify.mjs finalize
finalize <type> candidate.json --quality showcasevalidate, deliver, check, browser-check 네 관문을 차례로 돌리고 처음 막힌 곳에서 멈춰요archify/bin/finalize.mjs - 5
archify.mjs finalize → Claude Code · Codex
실패하면 규칙 코드와 supportedFixes어디가 왜 막혔는지 JSON으로 돌려주고, 에이전트는 두 번까지 고쳐 다시 돌려요archify/renderers/shared/diagnostics.mjs - 6
archify.mjs finalize → <slug>.html
통과한 HTML만 기존 파일과 교체검사를 통과한 후보만 파일을 바꾸고, 실패하면 직전의 좋은 파일이 그대로 남아요archify/renderers/shared/atomic-output.mjs
넣으면 이렇게 나와요
나한테 맞을까요
이럴 때 좋아요
- 새로 맡은 저장소의 구조를 한 장으로 파악하고 싶을 때
- API 호출이나 캐시 미스 같은 흐름을 팀에 보여 줘야 할 때
- DB 스키마를 표와 키가 다 보이는 ERD로 정리할 때
- 여행 일정, 학습 계획처럼 단계가 있는 계획을 정리할 때
- 질문에 대한 답을 결론부터 보이는 한 페이지로 공유하고 싶을 때
이건 안 돼요
- Mermaid 자동 변환, 범용 자동 레이아웃, 호스팅 공유, WYSIWYG 편집은 지금 범위 밖이에요
- Timeline·Waterfall 예제의 시각과 시간은 예시 값이라, 로그나 트레이스에서 가져온 값일 때만 실제로 봐야 해요
- Claude.ai에 zip으로 올리면 샌드박스에서 Node.js를 쓸 수 있어야 하고, 프로젝트 지식으로 올리면 프롬프트만으로 구조도를 그려요
- 대시보드를 만드는 용도는 아니에요
발행 전에 Devalley 편집자가 검토했어요. 칼럼은 어떻게 만드나요
Archify: one sentence to an interactive diagram
An agent skill that turns one sentence into a single HTML diagram you can click through and trace paths in
- Who
- An open-source agent skill by tt-a1i, for anyone who has to explain a system or a plan with a picture
- When
- The repository opened in April 2026; the latest release is v3.2.0, on October 19, 2026
- Where
- Claude Code, Codex CLI, Cursor and OpenCode, running locally on Node.js 18 or later; the result is an HTML file you open in a browser
What was hard
Explaining a system or a plan to someone takes a picture, and every picture meant placing boxes one by one and wiring up arrows. The result was a flat image, so a question like "just show me the cache-miss path" meant drawing it again.
What it does about it
Archify takes a description you give your agent and hands back the diagram as one HTML file. The key idea: the agent doesn't draw the picture, it writes typed JSON, and only a result that passes validation and a real browser check becomes the file. In that file you click a node to follow what lies upstream or downstream, highlight the route between two points, switch themes or export an image. Then you keep refining it in chat, with requests like "add authentication".
What people made with it
They had an agent (WorkBuddy, DeepSeek) go through a video on civil-service careers and got a workflow of its three routes, one lane each.
是参考一个介绍编制的视频 针对他的视频让ai跑了一下 包含图表，方便以后查看
From this one sentence in Gemini Chat they got an architecture map of Guts, a local assistant built on a Python router with Ollama and Llama 3, and shared the HTML with its validation receipt.
Map a privacy-first local AI assistant using a Python router to manage context, with Ollama handling local Llama 3 inference.
A student drew a workflow for a made-up campus event sign-up system with Codex, then added a reading layer that explains each node in plain words next to its source lines.
a small reading layer that sits on top of an Archify diagram and explains every node in plain language, paired with the exact source lines behind it
How it runs inside
- 1
You → Claude Code · Codex
One sentence, like "diagram a web request"It starts from a description, Mermaid, or a request to read a repositoryarchify/SKILL.md - 2
Claude Code · Codex → archify/SKILL.md
One of 10 types, with its schema and exampleThe agent picks a type from the Type router table and reads that type's schema and examplearchify/SKILL.md - 3
Claude Code · Codex → candidate.json
JSON in .archify/<type>-<slug>-<time>/Instead of drawing coordinates, it writes nodes, relations and labels as schema-checked JSONarchify/schemas/architecture.schema.json - 4
candidate.json → archify.mjs finalize
finalize <type> candidate.json --quality showcaseRuns validate, deliver, check and browser-check in turn, stopping at the first that failsarchify/bin/finalize.mjs - 5
archify.mjs finalize → Claude Code · Codex
On failure, rule codes and supportedFixesIt returns what failed and why as JSON; the agent repairs and reruns, at most two roundsarchify/renderers/shared/diagnostics.mjs - 6
archify.mjs finalize → <slug>.html
Only passing HTML replaces the fileA candidate replaces the output only after it passes; on failure the last good file staysarchify/renderers/shared/atomic-output.mjs
What goes in, what comes out
Is it for you
Good for
- Getting the shape of a repository you just inherited on one page
- Showing your team a flow like an API call or a cache miss
- Turning a database schema into an ERD with every column and key
- Laying out a plan with steps, like a trip or a study plan
- Sharing an answer as one page that leads with the conclusion
Not for
- Automatic Mermaid parsing, general-purpose auto-layout, hosted sharing and WYSIWYG editing are outside its current scope
- Timeline and Waterfall examples use illustrative data; treat times as real only when they come from logs or traces
- Uploaded to Claude.ai as a zip it needs Node.js in the sandbox; as Project Knowledge it falls back to prompt-only architecture diagrams
- It is not for dashboards
Reviewed by Devalley’s editor before publishing. How the column is made