tech-architecture-diagram

Generate Mermaid, HTML, and SVG architecture diagrams from repository structure and dependencies.

1|Updated Feb 23, 2026
One-click install
npx skills add https://github.com/oto1720/claude-agents-skills --skill tech-architecture-diagram
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: tech-architecture-diagram
Source: https://github.com/oto1720/claude-agents-skills/tree/main/skills/tech-architecture-diagram
Command: npx skills add https://github.com/oto1720/claude-agents-skills --skill tech-architecture-diagram

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Manually documenting a project's tech landscape is time-consuming and error-prone; this skill automates the discovery and visualization of architecture.

Core Features & Use Cases

  • Automated discovery of languages, frameworks, infra, and dependencies to reveal a complete tech landscape.
  • Multi-format diagrams: Mermaid, HTML, and SVG representations for documentation, presentations, and dashboards.
  • Onboarding and governance: generates system overview, tech stack map, module structure, and data-flow diagrams to accelerate team ramp-up and architectural reviews.
  • Use Case: quickly generate an up-to-date architecture diagram for a new project to communicate structure to stakeholders.

Quick Start

Supply the repository path or current project directory to generate and visualize architecture diagrams.

Frequently Asked Questions about tech-architecture-diagram

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

FAQPage Schema
How do I automatically generate project architecture diagrams from a codebase?

To generate project architecture diagrams automatically, supply your repository path to analyze the codebase structure and dependencies. The tool detects languages, frameworks, and data stores to produce system overview and data-flow diagrams.

Can I create Mermaid and SVG diagrams for software documentation?

Yes, you can create Mermaid and SVG diagrams for software documentation. The process analyzes your repository to output ready-to-render visualizations in Mermaid, HTML, and SVG formats for presentations and onboarding.

What is the best way to visualize tech stack and module structure for onboarding?

The best way to visualize tech stack and module structure for onboarding is to automate repository analysis. This approach discovers your infrastructure and dependencies to reveal the complete technology landscape and system overview.

Does this architecture diagram generator work with projects of any size?

Yes, this architecture diagram generation applies to projects of any size. It analyzes your codebase to estimate architecture patterns and layer boundaries, producing module structure diagrams regardless of scale.

How to map data-flow and inter-component dependencies in a repository?

To map data-flow and inter-component dependencies, analyze the repository structure and dependencies directly. The tool detects your tech stack and estimates layer boundaries to output comprehensive data-flow diagrams.

Why should I automate tech landscape discovery instead of manual documentation?

You should automate tech landscape discovery because manually documenting a project is time-consuming and error-prone. Automating the discovery of languages, frameworks, and infrastructure ensures accurate, up-to-date architectural reviews.