# Dynamic Archify

Create professional architecture, workflow, sequence, data-flow, and lifecycle/state...

- Repository: https://github.com/Unclecheng-li/AI_Animation (1689 stars)
- Category: Design
- License: MIT
- Last updated: 2026-10-26
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add Unclecheng-li/AI_Animation --skill dynamic-archify -g -a claude-code -y`
Codex: `npx skills add Unclecheng-li/AI_Animation --skill dynamic-archify -g -a codex -y`
Cursor: `npx skills add Unclecheng-li/AI_Animation --skill dynamic-archify -g -a cursor -y`
Gemini CLI: `npx skills add Unclecheng-li/AI_Animation --skill dynamic-archify -g -a gemini-cli -y`

## Description

Create professional architecture, workflow, sequence, data-flow, and lifecycle/state diagrams as standalone animated HTML files with SVG graphics, flowing animation effects, a built-in dark/light theme toggle, and one-click export to PNG / JPEG / WebP / SVG / GIF / WebM. Accepts plain-language descriptions or pasted Mermaid code and lays the diagram out from scratch. Use when the user asks for system architecture diagrams, infrastructure diagrams, cloud architecture visualizations, security diagrams, network topology, technical workflows, approval flows, runbooks, CI/CD flows, process diagrams, API call sequences, request lifecycles, data pipelines, ETL/ELT maps, PII boundaries, data lineage, state machines, lifecycle diagrams, status transitions, or asks to convert/beautify a Mermaid diagram.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Dynami-carchify Skill

Create professional technical diagrams as self-contained HTML files with inline SVG, a theme toggle, and a built-in image/SVG export menu.

Every diagram ships with a **dark/light theme toggle** (persists in `localStorage`, respects `prefers-color-scheme`), an **export menu** (copy PNG to clipboard; download PNG/JPEG/WebP rasterized natively at up to 4× resolution; download a **dual-theme SVG** that follows the embedding host's `prefers-color-scheme`, ideal for GitHub READMEs), and a **CSS-variable color system** that keeps both themes consistent.

## Setup (one-time, renderer modes only)

The four typed renderers validate JSON against schemas via `ajv`. From this skill's folder:

```bash
npm install
```

Without it the renderers still run, they print a warning and skip schema validation, keeping their own layout checks. The **generated HTML never has dependencies**; only the renderers do.

If you have no shell access at all (e.g. the skill was added as project knowledge), fall back to architecture mode for every request: hand-place SVG into `assets/template.html` following the Design System below, and run the self-review checklist before delivering.

## Choosing a Diagram Type

The rest: https://github.com/Unclecheng-li/AI_Animation/blob/HEAD/skills/dynamic-archify/SKILL.md