Archify Diagram Builder
Unclecheng-li/AI_Animation
Builds validated architecture, workflow, sequence, data-flow and lifecycle diagrams as standalone interactive HTML from a small JSON spec, with optional motion and image export.
Creates interactive architecture, workflow, sequence, data-flow and lifecycle diagrams as standalone HTML with inline SVG, themes and image or video export.
$ npx skills add tt-a1i/archify --skill archify -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install tt-a1i/archify archify --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/tt-a1i/archify.git skills-src && mkdir -p .claude/skills && cp -r skills-src/archify .claude/skills/archify && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "archify" agent skill from https://github.com/tt-a1i/archify/tree/main/archify into .claude/skills/archify/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "archify", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/tt-a1i/archify/tree/main/archifyType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add tt-a1i/archify --skill archify -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install tt-a1i/archify archify --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/tt-a1i/archify.git skills-src && mkdir -p .agents/skills && cp -r skills-src/archify .agents/skills/archify && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "archify" agent skill from https://github.com/tt-a1i/archify/tree/main/archify into .agents/skills/archify/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "archify", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add tt-a1i/archify --skill archify -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install tt-a1i/archify archify --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/tt-a1i/archify.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/archify .cursor/skills/archify && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "archify" agent skill from https://github.com/tt-a1i/archify/tree/main/archify into .cursor/skills/archify/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "archify", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/tt-a1i/archify.git --path archify--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add tt-a1i/archify --skill archify -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install tt-a1i/archify archify --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/tt-a1i/archify.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/archify .gemini/skills/archify && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "archify" agent skill from https://github.com/tt-a1i/archify/tree/main/archify into .gemini/skills/archify/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "archify", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install tt-a1i/archify archifyInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add tt-a1i/archify --skill archify -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/tt-a1i/archify.git skills-src && mkdir -p .github/skills && cp -r skills-src/archify .github/skills/archify && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "archify" agent skill from https://github.com/tt-a1i/archify/tree/main/archify into .github/skills/archify/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "archify", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add tt-a1i/archify --skill archify -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install tt-a1i/archify archify --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/tt-a1i/archify.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/archify .opencode/skills/archify && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "archify" agent skill from https://github.com/tt-a1i/archify/tree/main/archify into .opencode/skills/archify/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "archify", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
archifyCreates interactive architecture, workflow, sequence, data-flow and lifecycle diagrams as standalone HTML with inline SVG, themes and image or video export.
Archify generates a diagram from typed JSON. The agent picks one of five modes (architecture, workflow, sequence, dataflow or lifecycle), writes a candidate file against the matching schema, and the bundled command-line tool validates it and renders an explorable HTML page. Output supports dark and light themes, optional trace motion and export to PNG, JPEG, WebP, SVG or WebM.
It accepts plain-language requirements or pasted Mermaid flowcharts, sequence diagrams and state diagrams, and for a real codebase it reads repository evidence so the drawing matches the code. Each request gets its own timestamped folder so earlier versions stay intact, and a finalize step runs automated quality gates before delivery. Beyond software, it also handles everyday processes such as approval steps or where documents go, but not numeric charts or dashboards.
5 steps, taken from the first numbered list in SKILL.md.
Read from SKILL.md and the folder at commit 73aaa06. It shows what the files ask for, not the result of running them.
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Ships 1 file in scripts/ (JavaScript, from the files we listed), which the agent can run.
Shell commands in SKILL.md call:
nodeFrom the folder's file list and the shell code blocks in SKILL.md.
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Archify Diagrams loads about 2.9k tokens when it runs, and up to ~27k if it reads all its reference files. Until then it costs about 235 tokens; SKILL.md has 1,255 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.
The full file from tt-a1i/archify at commit 73aaa06, republished under its MIT licence (© tt-a1i). 1,255 words, ~2,910 tokens.
.claude/skills/archify/SKILL.md (or your agent's skills folder). This skill also uses 338 other files; get the full folder from GitHub.Create an interactive HTML diagram from typed JSON. Static output is the default; enable motion only when requested.
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 relative HTML path, 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.
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.
Use this path for ordinary generation. Read branch references only when their stated trigger applies.
Choose architecture, workflow, sequence, dataflow, or lifecycle 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 Sequence, Dataflow, and Lifecycle, 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.
Once the requested scope and, for a real codebase, source evidence are covered, write the complete candidate directly without planning coordinates in prose. Choose Architecture abstraction and connected placement using Authoring defaults before coordinates: show the main user journey and necessary branches, preserve control roles and behavior-changing conditions, and leave enough room for actual relationship labels. No node, relationship, source, view, card, or boundary count is a target or ceiling. Use automatic routes first; add explicit routing only for necessary branch, return, supplied geometry, or measured repair. Set meta.quality_profile to "showcase" unless the user requests dense standard.
Once the complete first candidate is written, run finalize directly. Its first gate is showcase validation; successful first drafts need no separate pre-validation. Keep the candidate unchanged while the command runs:
node bin/archify.mjs finalize <type> <candidate.json> <output.html> --quality showcase --jsonFor a repository-backed candidate, include evidence on the first draft and use the complete first command: node bin/archify.mjs finalize <type> <candidate.json> <output.html> --repo-root <repo-root> --quality showcase --json.
A passing receipt proves the included validate, deliver, strict check, and real-browser browser-check gates passed. Use its compact summary; run standalone commands only for a separate request or focused failure diagnosis.
A non-zero exit is never success. Read compact stdout or evidence.summaryReceipt, then repair the failed gate, including its repair limit. Preserve requested meaning and source evidence. For several tangled Architecture routes, read Architecture layout repair; for measured field or geometry failures, read Authoring contract. Edit the connected neighborhood and rerun the complete finalize command from step 4.
finalize and standalone deliver include update in their receipts. Do not run a separate check for the same delivery. If update.noticeRequired is true, read references/update-awareness.md and keep one update line in your final response to the user, even after a quality gate fails. For a task with several diagrams, mention the update once in the final response. Snooze or ignore a reminder only when the user explicitly asks; never install or update on your own initiative.
Before the first candidate, use the authoring references and relevant repository source, not Archify implementation or tests. Inspect Archify implementation if diagnostics remain unactionable after focused repairs.
| Type | Use for | Schema | Example |
|---|---|---|---|
architecture | Components, services, cloud/security boundaries, infrastructure; what something everyday is made of | schemas/architecture.schema.json | System descriptions, services, libraries, and CLI repos: examples/web-app.architecture.json; deployment repos: examples/production-deployment.architecture.json |
workflow | Processes, approval gates, tool calls, runbooks, CI/CD; plans and step-by-step life processes | schemas/workflow.schema.json | examples/agent-tool-call.workflow.json |
sequence | API call chains, request lifecycles, async traces, returns; back-and-forth between people | schemas/sequence.schema.json | examples/cache-miss-request.sequence.json |
dataflow | Pipelines, ETL/ELT, lineage, governance, consumers; where money or documents go | schemas/dataflow.schema.json | examples/product-analytics.dataflow.json |
lifecycle | State/status transitions, retries, waiting and terminal states; where an application or order stands | schemas/lifecycle.schema.json | examples/deployment-release.lifecycle.json |
When ambiguous, run node bin/archify.mjs guide "<scenario>" --json. Scenario proof examples are structural references, not facts to copy.
For an everyday subject, keep the same five modes and semantic types, then name them for the reader: use everyday icon values and meta.legend labels as in Node icons. Ask for missing personal facts instead of inventing dates, amounts, or rules.
Read Mermaid for topology and meaning, then author fresh Archify JSON; do not mechanically render Mermaid styling.
flowchart / graph → workflow, or architecture for a component map.sequenceDiagram → sequence; participants become semantic participants and arrows become messages.stateDiagram → lifecycle; states and transitions retain meaning, not Mermaid style.Use the finalize command above for the first candidate and after a repair.
finalize stops at the first non-passing gate. Its compact stdout and <output-stem>.finalize-summary.json are ordinary evidence. A passing run creates no screenshots and reports visualReview: "not-requested".
When a passing Architecture receipt reports visualReviewRecommendation.signals.resolvedCrossovers, copy the candidate aside and apply the hints in one edit that changes only node positions and sizes: every node, relationship (including its from and to), label, and source stays as it was. Rerun the complete finalize once with --out-dir <folder>/review-2, because the previous HTML already owns its browser evidence. If that run fails or reports more crossings, restore the copy and finalize it with --out-dir <folder>/review-3. Do not start a second placement round. Hints about extra bends alone are optional.
When layoutReviewRecommendation.action is inspect-sequence-width, follow Sequence width review before handing off a newly authored Sequence.
Perceptual review is optional for ordinary generation, including a newly positioned Architecture. Use Optional capture evidence, with --out-dir <folder>/visual-check, when the user requests visual review, during development audits, or for a concrete route/browser concern. visualReviewRecommendation is advisory. Inspect captures before claiming visual quality; otherwise report automated checks only.
Read Delivery contract for failed gates, standalone commands, provenance/recovery, repeated delivery, exports, or opening. Recovery follows deliver → strict provenance check → browser-check; captures require strict provenance.
For workflow viewport overflow, read Workflow viewport repair before the next layout edit.
Report artifact checks, browser evidence, captures, and actual perceptual review as distinct results. For an explicitly requested immediate preview or active desktop loop, see Optional opening.
meta.animation: "trace" is opt-in.
Read references/viewer-runtime.md only when the user explicitly asks for Share Cards, Route/Reach cards, motion, deep links, presentation, search/focus, or another Viewer Runtime feature.
No install is required inside the skill package. For setup diagnosis, verify with:
node bin/archify.mjs doctor
node bin/archify.mjs demo <output-directory>When shell access is unavailable, hand-place architecture SVG into assets/template.html, use CSS semantic classes rather than inline colors, and follow the visual review contract in references/delivery-contract.md.
Return the checked HTML as an absolute path, diagram type, validation summary, specification/artifact receipt, browser-evidence status, and truthful visual-review status. Do not claim success for a non-zero command or claim visual inspection you did not perform.
© tt-a1i, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
SKILL.md and 338 other files (scripts, references, assets) in archify of tt-a1i/archify.
Open the folder on GitHubat commit 73aaa06
Archify Diagrams next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Archify Diagrams this skilltt-a1i/archify | 79k | — | ~2.9k | Automated safety check: Pass | MIT | |
| Archify Diagram BuilderUnclecheng-li/AI_Animation | 1.5k | 2 repos | ~4.1k | Automated safety check: Pass | MIT | |
| Code Graph Mermaid Diagramstrailofbits/skills | 7.4k | 1 repos | ~1.7k | Automated safety check: Pass | CC-BY-SA-4.0 | |
| GitDiagram Repository Overviewahmedkhaleel2004/gitdiagram | 18k | — | ~427 | Automated safety check: Pass | MIT | |
| Mermaid Diagramsjjmartres/opencode | 133 | 6 repos | ~1.9k | Automated safety check: Pass | MIT | |
| GitDiagram Repo Architectureahmedkhaleel2004/gitdiagram | 18k | — | ~429 | Automated safety check: Pass | MIT |
Unclecheng-li/AI_Animation
Builds validated architecture, workflow, sequence, data-flow and lifecycle diagrams as standalone interactive HTML from a small JSON spec, with optional motion and image export.
trailofbits/skills
Generates Mermaid diagrams from Trailmark code graphs, including call graphs, class hierarchies, module dependency maps, complexity heatmaps and attack surface data flows.
ahmedkhaleel2004/gitdiagram
Explains the architecture of a public GitHub repository through GitDiagram: how the code is organized, the main components with paths, and a Mermaid diagram.
jjmartres/opencode
Helps an agent pick the right Mermaid diagram type and write the syntax for class, sequence, flow, ER, C4, state and other software diagrams.
ahmedkhaleel2004/gitdiagram
Explains how a public GitHub repository is built by fetching its GitDiagram architecture diagram, components and optional explainer video.
tech-leads-club/agent-skills
Creates, validates and renders Mermaid diagrams to SVG, PNG or ASCII, including C4 and AWS architecture-beta, flowcharts, sequence diagrams and ERDs.
tt-a1i/archify
Review Archify issues, PRs, or code through value, cost, and impact to support evidence-based maintenance decisions. Use for issue triage, change reviews, and…
Works with
Categories
Creates interactive architecture, workflow, sequence, data-flow and lifecycle diagrams as standalone HTML with inline SVG, themes and image or video export. Archify generates a diagram from typed JSON. The agent picks one of five modes (architecture, workflow, sequence, dataflow or lifecycle), writes a candidate file against the matching schema, and the bundled command-line tool validates it and renders an explorable HTML page.
Archify Diagrams fits situations like: drawing a system architecture from a description or a codebase; converting a Mermaid diagram into a polished interactive page; mapping a request lifecycle or data pipeline; visualizing an approval or application process.
Run `npx skills add tt-a1i/archify --skill archify -a claude-code`. Or copy the skill folder (archify in tt-a1i/archify) into .claude/skills/archify in your project. Claude Code loads it when a task matches its description.
Run `npx skills add tt-a1i/archify --skill archify -a codex`. Or copy the skill folder (archify in tt-a1i/archify) into .agents/skills/archify in your project. Codex loads it when a task matches its description.
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add tt-a1i/archify --skill archify -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/archify, .gemini/skills/archify, .github/skills/archify and .opencode/skills/archify in your project.
Going by SKILL.md and its folder, Archify Diagrams needs JavaScript for the scripts in its folder and the command-line tools its instructions call (node). Our summary lists: Node.js to run the bundled bin/archify.mjs tool.
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.
Archify Diagrams is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.
About 2.9k tokens (SKILL.md is roughly 12k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 24k tokens, read only when the agent opens those files.
Skills that share tags, products or a category with Archify Diagrams: Archify Diagram Builder (Unclecheng-li/AI_Animation, 1.5k stars), Code Graph Mermaid Diagrams (trailofbits/skills, 7.4k stars), GitDiagram Repository Overview (ahmedkhaleel2004/gitdiagram, 18k stars) and Mermaid Diagrams (jjmartres/opencode, 133 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
tt-a1i (a GitHub user) maintains it in tt-a1i/archify, which has 79,370 GitHub stars. The repository holds 2 skills in this directory. The repository was last updated on October 8, 2026.
Source: tt-a1i/archify on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.