auto-diagram

Analyze a codebase and generate an Excalidraw architecture diagram automatically.

Updated Aug 19, 2026
One-click install
npx skills add https://github.com/rithm84/Manor --skill auto-diagram-rithm84
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: auto-diagram
Source: https://github.com/rithm84/Manor/tree/main/.agents/skills/general/excalidraw-toolkit/auto-diagram
Command: npx skills add https://github.com/rithm84/Manor --skill auto-diagram-rithm84

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires excalidraw-toolkit.

What problem does it solve? Understanding an unfamiliar codebase's architecture requires hours of reading files and tracing dependencies. This Skill automates that discovery process by scanning the repository, detecting components and connections, and rendering a complete architecture diagram on an Excalidraw canvas with zero configuration. ## Core Features & Use Cases - Automated Codebase Analysis: Detects project type (monorepo, microservices, standard app), frameworks (Next.js, Django, Spring, Rails, and more), and architectural components through structured grep and file-scanning phases. - Connection Mapping: Traces entry points to map directed edges between components, labeling each with its protocol (REST, SQL, gRPC, events, imports). - Smart Layout and Grouping: Selects vertical flow, pipeline, or hub-and-spoke layouts based on the detected pattern, and collapses large systems into grouped zones when more than 12 components are found. - Use Case: You clone an unfamiliar Next.js + Prisma repository and ask for an architecture overview. The Skill identifies the frontend, API routes, database, auth, and external services, confirms the findings with you, then draws a color-coded layered diagram on the Excalidraw canvas. ## Quick Start Ask the agent to diagram this repository's architecture and confirm the detected components before the Excalidraw diagram is generated.

Frequently Asked Questions about auto-diagram

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

FAQPage Schema
How do I generate an architecture diagram from a codebase automatically?

Run the auto-diagram workflow with the Excalidraw MCP server active. It scans root config files, detects the framework, discovers components via grep patterns, maps connections from entry points, then renders a color-coded diagram after you confirm the findings.

What project types does automatic codebase diagramming support?

It detects monorepos, microservices with multiple Dockerfiles, and standard single-service apps. Framework markers cover Next.js, Express, NestJS, Django, FastAPI, Spring, Go services, Rust, Rails, Laravel, and Phoenix.

Why does the Excalidraw diagram generation fail to start?

The Excalidraw MCP server must be running before analysis begins. Start it with 'npx excalidraw-toolkit start' on the default port 3000, or set a custom PORT during init and start, then open the canvas in your browser.

What happens when a codebase has more than 12 components?

Components are grouped by top-level directory into zones shown as dashed rectangles with a summary box. Directories with more than three components collapse into one zone, and you can request drill-down into any zone.

When should I use the excalidraw skill instead of auto-diagram?

Use the excalidraw skill when you already have a specific description, sample diagram, or component list to draw. Auto-diagram is only for zero-configuration cases where the tool must discover the architecture by reading the code itself.