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

•

Herramientas de Diseño

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.

Características Principales

0174 GitHub stars

02Automated codebase analysis to discover components and services

03Standardized color-coding for frontend, backend, and data layers

04Smart layout planning for vertical and horizontal system patterns

05Generates valid .excalidraw JSON with precise element positioning

06Optimized 90-degree elbow-arrow routing for clean architectural flows

Casos de Uso

01Visualizing microservice dependencies and data flow paths

02Generating system architecture overviews for technical documentation

03Mapping infrastructure-as-code resources into readable diagrams

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add ooiyeefei/ccc excalidraw

For use in Claude.ai and ChatGPT

Download Skill