Can it analyze my existing code to build the diagram?

Yes, the skill is designed to scan your project structure, README files, and source code to automatically identify tech stacks, data sources, and processing logic.

Do I need external design tools like Lucidchart or Visio?

No, this skill creates the visuals programmatically using SVG code, eliminating the need for manual drag-and-drop design tools.

What format are the diagrams generated in?

The skill generates standalone HTML files containing CSS styling and inline SVG diagrams, ensuring they can be viewed in any web browser without external dependencies.

Are the generated diagrams mobile-friendly?

Yes, the output HTML includes responsive meta tags and CSS to ensure the documentation and diagrams are readable on various screen sizes.

Architecture Diagram Creator

Name: Architecture Diagram Creator
Author: prof-ramos

byprof-ramos

•

学习与文档

Generates comprehensive, interactive HTML architecture diagrams with SVG visualizations of data flows and system layers.

This skill empowers Claude to create professional-grade technical documentation by synthesizing project source code and requirements into visually rich HTML architecture diagrams. It automatically extracts business context, defines data processing pipelines, and maps out system components using semantic SVG elements and responsive CSS. It is an essential tool for developers who need to provide high-level overviews, onboarding materials, or technical specifications directly from their codebase without relying on external manual drawing tools.

主要功能

01Automated SVG generation for data flows and processing pipelines

02Business context integration including objectives and user value metrics

03Layered system architecture visualization from data to service layers

04Interactive HTML/CSS documentation output for portable sharing

05Deployment workflow and technical prerequisite mapping

061 GitHub stars

使用场景

01Creating high-level architectural summaries for stakeholders and project READMEs

02Documenting complex data processing pipelines for technical specifications

03Generating visual system overviews for onboarding new team members

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add prof-ramos/.codex architecture-diagram-creator

For use in Claude.ai and ChatGPT

Download Skill