skills.rest
PedroGiudice
PedroGiudiceCOMMUNITY
Explore all skills by this author →
GitHub

architecture-diagram-creator

Generate HTML architecture diagrams with data flows and deployment layers.

5|3|Updated Nov 4, 2025
Search Tags:#architecture#deployment#SVG#diagram#data-flow
One-click install
npx skills add https://github.com/PedroGiudice/Claude-Code-Projetos --skill architecture-diagram-creator
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: architecture-diagram-creator
Source: https://github.com/PedroGiudice/Claude-Code-Projetos/tree/main/skills/architecture-diagram-creator
Command: npx skills add https://github.com/PedroGiudice/Claude-Code-Projetos --skill architecture-diagram-creator

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes assets (resource) and references (resource) components.

What problem does it solve?

This Skill helps you create comprehensive HTML architecture diagrams that visualize data flows, business context, and deployment layers.

Core Features & Use Cases

  • Business Context to Diagram: map objectives, users, and metrics into visuals.
  • Data Flow Diagrams: left-to-right data sources, processing, and outputs.
  • Deployment & Layers: show data/processing/services/output layers.
  • Diagrams & Patterns: include architecture components and patterns with SVG.

Quick Start

Generate an architecture HTML file (e.g., [project]-architecture.html) with the provided system details.

Frequently Asked Questions about architecture-diagram-creator

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create an architecture diagram for my system?▼

Architecture diagrams visualize your system's structure, data flows, and deployment layers in a single HTML file. This Skill generates comprehensive diagrams from system details you provide, showing business context, processing pipelines, and technical components in SVG format for clear documentation.

What should I include when describing my system architecture?▼

Provide your system's objectives, users, data sources, processing steps, service layers, and deployment details. The Skill maps this information into business context visuals, data flow diagrams, layered architecture views, and deployment specifications in one HTML artifact.

Can I use this for documenting deployment architecture?▼

Yes. The Skill generates deployment diagrams showing data, processing, services, and output layers alongside your architecture components. This creates complete technical specifications suitable for infrastructure documentation and high-level system overviews.

What format does the architecture diagram output?▼

The Skill generates an interactive HTML file containing SVG diagrams. This single-file format is shareable, viewable in any browser, and includes data flow visualizations, architecture patterns, and deployment details without requiring external tools.

Can I include architecture patterns and non-functional requirements in the diagram?▼

Yes. The diagram incorporates architecture components, design patterns, feature requirements, and non-functional requirements alongside data flows and deployment layers, giving stakeholders a complete view of system design and constraints.

Is this suitable for project documentation and technical specifications?▼

Yes. The Skill creates comprehensive diagrams for project documentation, technical specifications, and high-level system overviews. The HTML output serves as standalone documentation across software systems of varying complexity.

Related Skills

Explore More Software Engineering Skills→
codatacodata
8

architect

Create Mermaid.js system architecture diagrams from descriptive texts.

Official
Advanced
Tommy-ywTommy-yw
539

architecture-diagram

Generates SVG-based architecture diagrams as standalone HTML files.

Community
Intermediate
B4sanB4san

documentation

Generate project documentation including READMEs, API docs, and Mermaid/PlantUML architecture diagrams.

Community
Intermediate
xloxn69xloxn69
7

diagram-generator

Generate Mermaid and ASCII diagrams from natural language descriptions.

Community
Basic