How do I use the Excalidraw skill?

Simply ask Claude Code to 'generate an architecture diagram' or 'visualize the system structure' for your current project and it will output a .excalidraw file.

Does it require existing documentation or Terraform files?

No, the skill analyzes your actual source code, package manifests, and configuration files to build the diagram from scratch.

What programming languages are supported?

The skill is language-agnostic and discovers components by scanning for common patterns like API routes, controllers, database models, and container definitions.

Can I edit the generated diagrams?

Yes, the skill produces standard .excalidraw files that you can open and edit at excalidraw.com or via various IDE extensions.

Why does the skill avoid using diamond shapes?

Diamond shape connections are often broken in raw Excalidraw JSON; the skill uses styled rectangles and specific color coding to ensure visual clarity and technical stability.

Excalidraw Architecture Generator

Name: Excalidraw Architecture Generator
Author: ooiyeefei

byooiyeefei

•

设计工具

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

关于

This skill empowers Claude to automatically visualize complex codebases by identifying services, databases, and dependencies to generate fully editable Excalidraw diagrams. It eliminates the manual effort of mapping system architecture by programmatically creating high-quality, structured .excalidraw JSON files that follow strict best practices for layout, color-coding, and connector routing. Whether you are onboarding to a new project or documenting a legacy system, this skill provides an instant, accurate visual overview of any project's internal structure.

主要功能

74 GitHub stars
Automated codebase analysis to discover components and services
Standardized color-coding for frontend, backend, and data layers
Smart layout planning for vertical and horizontal system patterns
Generates valid .excalidraw JSON with precise element positioning
Optimized 90-degree elbow-arrow routing for clean architectural flows

使用场景

Visualizing microservice dependencies and data flow paths
Generating system architecture overviews for technical documentation
Mapping infrastructure-as-code resources into readable diagrams

关于

主要功能

74 GitHub stars
Automated codebase analysis to discover components and services
Standardized color-coding for frontend, backend, and data layers
Smart layout planning for vertical and horizontal system patterns
Generates valid .excalidraw JSON with precise element positioning
Optimized 90-degree elbow-arrow routing for clean architectural flows

使用场景

Visualizing microservice dependencies and data flow paths
Generating system architecture overviews for technical documentation
Mapping infrastructure-as-code resources into readable diagrams