Dynamic Technical Diagram Generator
Paste the following prompt into your AI chat to install this skill:
Please follow https://skillhub.cn/install/skillhub.md to install @user_ab5ae6ee/dynamic-archify-unclecheng.
About this skill
Problem
Technical diagrams often get stuck in auto-layout: overlapping components, labels on boxes, inconsistent swimlanes and boundaries, and exports that do not follow light/dark themes. dynamic-archify turns architecture, workflow, sequence, dataflow, and lifecycle diagrams into validated JSON rendering tasks that output self-contained HTML.
How It Works
The skill first chooses the diagram type: architecture for system components, cloud resources, and security boundaries; workflow for processes, approvals, and CI/CD; sequence for call chains; dataflow for pipelines, ETL, and PII isolation; lifecycle for state machines. The core loop is to read the matching example, write JSON, render it with Node, and use error messages that point to JSON paths or layout issues such as overlapping nodes, over-wide labels, and off-canvas elements. It includes theme toggling, localStorage memory, PNG/JPEG/WebP/SVG export, and animated GIF/WebM export.
Boundaries
The generated HTML has no front-end dependencies, but the renderers need Node.js ≥18. Mermaid is used only as a structural reference and should not be parsed mechanically; complex diagrams need controlled columns, row height, label length, and boundary padding.
Use Cases
- Design a new service boundary by drawing an embeddable architecture diagram with APIs, gateways, databases, and security groups.
- Review a release incident by organizing approvals, manual checks, and automatic rollback into a workflow swimlane diagram.
- Debug timeout issues by rendering a sequence diagram for call chains, cache hits, and asynchronous returns in a review.
- Map PII pipelines by labeling collection, cleaning, storage, consumers, and sensitivity boundaries in a dataflow diagram.
Best For
- Backend engineers reviewing system architecture who need to turn component dependencies and security boundaries into shareable diagrams.
- SREs writing postmortems who need to convert incident timelines, call chains, and state changes into review diagrams.
- Platform engineers preparing data-compliance materials who need to label PII flows, processing stages, and permission boundaries.
- Developer maintainers updating technical docs who need theme-aware HTML diagrams with SVG export for READMEs.
Related Skills
Generate an interactive HTML product detail page from images and copy, with multi-product carousel, inline text editing, design controls, and PDF/JPG/PSD export support.
Enter a material name to get preview and download links for free, commercially usable video assets, with paid platform options, pricing, and search suggestions when results are limited.
A local CLI for Dreamina image and video generation, including credit checks, async submission, result queries, and task history review.
Generate and validate JianYing drafts from storyboard JSON with narrated commentary, original-sound preservation, timing checks, and draft inspection.