skills.rest
agentteamland
agentteamlandOFFICIAL
Explore all skills by this author →
GitHub

create-code-diagram

Generate a complete Mermaid class diagram from the codebase.

Updated Apr 12, 2026
Search Tags:#architecture#documentation#mermaid#codebase#visualization#diagram#class-diagram
One-click install
npx skills add https://github.com/agentteamland/core --skill create-code-diagram
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: create-code-diagram
Source: https://github.com/agentteamland/core/tree/main/skills/create-code-diagram
Command: npx skills add https://github.com/agentteamland/core --skill create-code-diagram

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Visualize code architecture by generating a complete Mermaid class diagram from your project, making complex relationships easy to understand.

Core Features & Use Cases

  • Scans the codebase for classes, interfaces, enums, and their relationships (inheritance, implementation, composition, dependencies).
  • Organizes types by architectural layers and outputs a ready-to-view classDiagram compatible with Mermaid.
  • Use Case: Onboard new developers by presenting the full system diagram for a large-codebase.

Quick Start

Run the /create-code-diagram command to generate and save the full project diagram to .claude/docs/code-diagram.md.

Frequently Asked Questions about create-code-diagram

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

FAQPage Schema
How do I generate a class diagram from a large codebase?▼

To generate a class diagram from a large codebase, scan the project to discover classes, interfaces, enums, and their relationships, then render the output as a Mermaid classDiagram file compatible with Markdown.

Can I visualize architectural layers and dependencies using Mermaid?▼

Yes, you can visualize architectural layers and dependencies using Mermaid by scanning the codebase for types and organizing them by layer to output a complete architectural relationship diagram.

What's the best way to document code architecture for developer onboarding?▼

The best way to document code architecture for onboarding is generating a full system diagram that visualizes domains, layers, and dependencies, making complex structural relationships easy for new developers to understand.

Does this code visualization tool work for projects of any size?▼

Yes, this code visualization tool applies to software projects of any size, discovering and rendering all types including classes, interfaces, and enums alongside their inheritance, implementation, and composition relationships.

How are code relationships like inheritance and composition mapped in the diagram?▼

Code relationships like inheritance, implementation, composition, and dependencies are mapped by discovering all project types and rendering their structural connections directly within a Mermaid classDiagram output.

What format is the generated code diagram saved in?▼

The generated code diagram is saved in Markdown format as a Mermaid classDiagram file, specifically outputted to the .claude/docs/code-diagram.md directory path for ready-to-view architectural documentation.

Related Skills

Explore More Software Engineering Skills→
ReefBytesReefBytes
1

docs-diagrams

Generate Mermaid diagrams from project structure and deployment architecture.

Community
Intermediate
bwgzbwgz

mermaid-render

Render Mermaid diagrams to PNG, SVG, or PDF with Trimble themes.

Community
Advanced
saajunaidsaajunaid

plantuml

Generate brand-consistent PlantUML diagrams from textual inputs.

Community
Intermediate
walterfanwalterfan
1

Diagram Render Skill

Render PlantUML, Mermaid, and Graphviz code blocks into PNG or SVG images.

Community
Intermediate