architecture-diagram-creator_skill

Overview

This skill generates comprehensive HTML architecture diagrams that combine business context, data flows, processing pipelines, system layers, features, and deployment details. It produces a single self-contained HTML page with SVG diagrams and semantic color styling to communicate architecture clearly. Use it to create documentation-ready visuals and high-level technical overviews.

How this skill works

The skill analyzes project inputs (purpose, data sources, processing stages, tech stack, and outputs) and maps them into six structured sections: Business Context, Data Flow, Processing Pipeline, System Architecture, Features, and Deployment. It constructs responsive HTML with embedded SVG diagrams (data sources → processing → outputs), consistent semantic colors, and concise explanatory text. The output is a standalone HTML file you can review, share, or embed in docs.

When to use it

• You need a high-level system overview for stakeholders or architects
• Document data flows and processing pipelines for a project
• Prepare architecture visuals for proposals, design reviews, or onboarding
• Create deployment and prerequisites documentation alongside diagrams
• Translate README or design notes into a clear, shareable HTML diagram

Best practices

• Start with business objectives and user personas to keep the diagram focused
• Keep SVG diagrams simple: group related components and use arrows for flow
• Use the semantic color palette consistently: data (blue), processing (orange), AI (purple), success/output (green)
• Annotate each section with short bullets: purpose, inputs, outputs, and metrics
• Export the HTML as a single file for easy sharing and versioning

Example use cases

• Generate an architecture overview for a new ML-powered feature showing data ingress, model inference, and dashboards
• Document system architecture for an API-first microservices project with deployment notes
• Create a visual summary of a data pipeline from ingestion through ETL to analytics outputs
• Produce a stakeholder-friendly overview that links business objectives to technical components
• Prepare architecture slides by exporting the HTML and taking high-resolution screenshots