skills.rest
smallnest
smallnestCOMMUNITY
Explore all skills by this author →
Website𝕏@smallnestGitHub

insight-diagram

Convert repository source structure into UML and architecture diagrams as HTML and SVG.

207|30|Updated May 16, 2026
Search Tags:#architecture#documentation#html#codebase analysis#svg#diagrams#uml
One-click install
npx skills add https://github.com/smallnest/goal-workflow --skill insight-diagram
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: insight-diagram
Source: https://github.com/smallnest/goal-workflow/tree/main/skills/insight-diagram
Command: npx skills add https://github.com/smallnest/goal-workflow --skill insight-diagram

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill turns a codebase into clear, presentation-ready diagrams so teams can understand architecture, behavior, and data flow without manually modeling the system.

Core Features & Use Cases

  • Architecture Visualization: Produces system architecture, component, deployment, and package views from repository structure and key source files.
  • UML and Workflow Diagrams: Generates class, object, sequence, communication, activity, state, swimlane, and interaction overview diagrams for deeper system understanding.
  • Document-Ready Output: Renders diagrams as HTML plus SVG and saves them into docs/ for sharing, review, and iteration.
  • Use Case: A developer can point it at an unfamiliar service and quickly get diagrams that explain modules, dependencies, execution flow, and runtime interactions.

Quick Start

Use the insight-diagram skill to analyze this repository and generate the most relevant diagrams into docs/ with the default light Claude style.

Frequently Asked Questions about insight-diagram

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

FAQPage Schema
How do I generate UML diagrams from a codebase automatically?▼

To generate UML diagrams from a codebase, you need a tool that parses source structure and key code paths to produce class, sequence, and activity diagrams. This Skill converts repository files directly into presentation-ready UML and architecture visualizations.

What is the best way to visualize software architecture for documentation?▼

Visualizing software architecture for documentation involves mapping components, deployment topology, and runtime interactions from the source code. This skill automates that process by analyzing repository structure and outputting HTML plus SVG diagrams into the docs directory.

Can I create SVG architecture diagrams from source code without manual modeling?▼

Yes, you can create SVG architecture diagrams from source code without manual modeling by analyzing the repository structure and key code paths. This skill automates reading the codebase and rendering document-ready HTML and SVG outputs for sharing.

Does this approach support generating sequence and activity diagrams from an unfamiliar service?▼

Generating sequence and activity diagrams from an unfamiliar service requires analyzing execution flow and runtime interactions within the codebase. This skill supports producing these workflow diagrams, alongside class, state, and communication views, from the source code.

How do I ensure generated diagrams have correct spacing and no overlapping elements?▼

Ensuring generated diagrams have correct spacing and no overlapping elements requires reviewing geometry, arrow placement, and spacing after generation. This skill applies layout checks to the HTML and SVG output to maintain clear, presentation-ready visual quality.

Related Skills

Explore More Software Engineering Skills→
abdullah1854abdullah1854
1

memory-systems

Design memory architectures with vector stores, knowledge graphs, and temporal knowledge graphs.

Community
Advanced
JongsixJongsix

moai-docs-generation

Generate technical documentation from source code and API definitions.

Community
Advanced
PedroGiudicePedroGiudice
5

technical-doc-creator

Generate HTML technical documentation with syntax-highlighted code and SVG architecture diagrams.

Community
Intermediate
shekerkammashekerkamma

uml

Render UML diagrams from PlantUML text into diagram images.

Community
Advanced