Product Architecture Diagram Generator

Problem

When explaining a system, product, or process, manually built diagrams can suffer from missing modules, inconsistent styling, and HTML output that depends on external assets. This skill targets business-tech visuals by turning short prompts into self-contained HTML diagrams.

How It Works

• Trigger: Use natural language such as “generate an architecture diagram” or “draw a flow diagram.”
• Input: Provide only a system name, or add details like module list, workflow steps, and data flow.
• Output: Produces {SystemName}-architecture.html with inline CSS and SVG; open it in a browser and use Ctrl+P to print a PDF.
• Stability: It constrains special-character escaping, over-large module sets, adaptive layout, and fallback behavior, making it useful for quick reviews, documentation visuals, and sharing.

Boundaries

It fits module maps, technical architecture diagrams, workflow diagrams, product panoramas, and ecosystem maps, but not interactive prototypes, live charts, 3D visualization, or hand-drawn styles. If a diagram has more than 16 modules, split it into multiple views.