Does this work with any programming language?

Yes, it analyzes the general structure, READMEs, and directory logic of a project to create a high-level architectural overview regardless of the tech stack.

Do I need external tools like Mermaid or Lucidchart?

No, this skill generates the SVG code directly within the HTML file, removing the need for third-party diagramming dependencies or subscriptions.

What format is the output diagram?

The skill generates a standalone, responsive HTML file containing custom CSS styling and embedded SVG diagrams.

What information is included in the diagrams?

The diagrams cover six key areas: Business Context, Data Flow, Processing Pipeline, System Architecture layers, Functional Features, and Deployment workflows.

Architecture Diagram Creator

Name: Architecture Diagram Creator
Author: pur3v4d3r

bypur3v4d3r

•

学習とドキュメンテーション

Generates comprehensive, interactive HTML architecture diagrams including data flows, system layers, and business context for any codebase.

This skill automates the creation of high-quality technical documentation by analyzing project structures and generating visual architecture diagrams in HTML. It translates complex codebases into clear, SVG-powered visualizations that cover data flows, processing pipelines, multi-layer system components, and deployment workflows. It is particularly useful for developers who need to provide high-level overviews, onboard new team members, or document technical specifications without the manual labor of external diagramming tools.

主な機能

011 GitHub stars

02Smart extraction of features and deployment requirements from source code

03Automated SVG-based data flow and pipeline visualization

04Business context integration including objectives and value metrics

05Multi-layered system architecture mapping for data, services, and UI

06Standards-based HTML/CSS output for easy sharing and hosting

ユースケース

01Visualizing complex data processing pipelines and backend service workflows

02Generating professional architecture documentation for project stakeholders

03Onboarding new developers by providing a visual map of the existing codebase

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add pur3v4d3r/pur3-pkb-codebase architecture-diagram-creator

For use in Claude.ai and ChatGPT

Download Skill