How does it handle complex layouts?

The skill uses a structured layout algorithm that organizes elements into logical rows (e.g., Users, Gateway, Services, Data) to ensure readability.

Can I edit the diagrams after they are generated?

Yes, the output is a standard .excalidraw JSON file that can be opened and modified at excalidraw.com or within VS Code using the Excalidraw extension.

Which programming languages and frameworks are supported?

It is language-agnostic; it identifies architectural patterns across various ecosystems by looking for things like API routes, controllers, and resource definitions.

Does this skill require existing documentation to work?

No, the skill performs a live analysis of your source code, Docker configs, and IaC files to generate architecture diagrams from scratch.

Where are the generated diagram files saved?

Diagrams are typically saved to a /docs/ or /docs/architecture/ directory within your project, or to a custom path you specify.

Excalidraw Diagram Generator

Name: Excalidraw Diagram Generator
Author: ooiyeefei

byooiyeefei

•

设计工具

Generates professional architecture and system diagrams as editable .excalidraw files directly from codebase analysis.

关于

This skill empowers Claude to visualize complex software architectures by scanning codebases—including monorepos, microservices, and infrastructure-as-code—and translating them into structured, editable Excalidraw files. It handles the intricacies of Excalidraw's JSON format, ensuring clean elbow-style arrows, proper label binding, and semantic color-coding without requiring pre-existing documentation or external design tools. It is ideal for developers needing instant, high-quality visual representations of their system's components, data flows, and dependencies.

主要功能

Advanced elbow-arrow routing for clean, 90-degree system connections
Intelligent layout planning with vertical flow and column-based organization
Automated codebase analysis for components, services, and databases
Generates valid .excalidraw JSON with proper element binding and labels
Built-in semantic color palettes for frontend, backend, AI, and data layers
74 GitHub stars

使用场景

Visualizing microservice dependencies and data flow across a system
Creating system design diagrams for technical reviews and RFCs
Generating architectural documentation for onboarding or legacy codebases

关于

主要功能

Advanced elbow-arrow routing for clean, 90-degree system connections
Intelligent layout planning with vertical flow and column-based organization
Automated codebase analysis for components, services, and databases
Generates valid .excalidraw JSON with proper element binding and labels
Built-in semantic color palettes for frontend, backend, AI, and data layers
74 GitHub stars

使用场景

Visualizing microservice dependencies and data flow across a system
Creating system design diagrams for technical reviews and RFCs
Generating architectural documentation for onboarding or legacy codebases