technical-diagram-skill
Create professional technical diagrams as standalone animated HTML files with SVG graphics, flowing effects, dark/light theme toggle, and export support. Use this skill 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, sequence diagrams, request lifecycles, data pipelines, ETL/ELT maps, PII boundaries, data lineage, state machines, lifecycle diagrams, status transitions, or asks to convert/beautify
Profile →npx skills add mingchen666/Reviva --skill technical-diagram-skill --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
What it does
Converts user requests for system architecture, infrastructure, cloud, security, network, workflows, runbooks, CI/CD, data pipelines, or state machines into self-contained animated HTML diagrams. Diagrams include inline SVG, a dark/light theme toggle persisted in localStorage, and an export menu. The skill supports multiple diagram types (architecture, workflow, sequence, dataflow, lifecycle) and provides a dual-theme SVG export option. It uses a built-in renderer pipeline to generate HTML from JSON specifications in dedicated renderers and has a hand-placed fallback for when renderers cannot run. Each diagram is self-contained with CSS-variable theming and an export capability to PNG/JPEG/WebP and a dual-theme SVG.
How it works
- The skill packages the dynamic archify renderer as a product-facing capability for producing professional technical diagrams.
- It renders diagrams as standalone HTML with inline SVG, theme toggle, and an export menu.
- It includes a per-mode renderer path: architecture, workflow, sequence, dataflow, and lifecycle, each invoked via specific paths like
node renderers/<type>/render-<type>.mjs <input>.json <output>.html. - If renderers are unavailable, it uses a hand-placed SVG fallback by placing SVG into
assets/template.htmlfollowing the Design System. - Generated diagrams are written to the current agent output directory or an approved workspace path.
- It supports a CSS-variable color system to maintain theme consistency across dark/light modes and an export workflow (PNG, JPEG, WebP, and dual-theme SVG).
When to use it
- Trigger phrases include terms like architecture diagram, workflow diagram, sequence diagram, dataflow diagram, lifecycle diagram, and related keywords in both English and Chinese (e.g., 架构图, 流程图, 时序图, 状态机, 数据流图).
- Use this skill for technical diagrams such as system components, cloud resources, security boundaries, data pipelines, PII boundaries, runbooks, CI/CD flows, API call sequences, or state machine lifecycles.
What it can touch
- It uses the tools: file_read, file_write, exec_command to interact with the filesystem and run renderers when available.
Caveats
- The generated HTML never has dependencies; only the renderers do.
- If npm install is not permitted, renderers may warn and skip schema validation, but diagrams can still render if possible.
- The skill relies on the availability of renderer binaries; when unavailable, it falls back to hand-placed SVG templates.
- Outputs are written to a user-approved workspace path or the current agent output directory.
# Technical Diagram Skill This Reviva built-in skill packages the original `dynamic-archify` renderer as a product-facing technical diagram capability. 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-s
What does the technical-diagram-skill skill do?
Create professional technical diagrams as standalone animated HTML files with SVG graphics, flowing effects, dark/light theme toggle, and export support. Use this skill 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, sequence diagrams, request lifecycles, data pipelines, ETL/ELT maps, PII boundaries, data lineage, state machines, lifecycle diagrams, status transitions, or asks to convert/beautify
How do I install it?
Run `npx skills add mingchen666/Reviva --skill technical-diagram-skill --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From mingchen666/Reviva, a repository with 181 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.