Do I need any special tools for image exports?

The PNG and SVG export features require Playwright MCP tools to programmatically render the diagrams without requiring manual file uploads.

Can it handle monorepos and microservices?

Absolutely. It is specifically designed to recognize workspace configurations, Docker Compose files, and Kubernetes manifests to map multi-service architectures.

How does the skill analyze my code?

It uses tools like Glob and Grep to scan for package configurations, Dockerfiles, API routes, and database models to identify and map system components automatically.

Why doesn't it use diamond shapes for decision logic?

Raw Excalidraw JSON has known issues with diamond shape arrow connections; the skill uses styled, color-coded rectangles to ensure technical reliability and visual consistency.

Can I edit the generated diagrams?

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

Excalidraw Architecture Generator

Name: Excalidraw Architecture Generator
Author: window-ook

bywindow-ook

0•

Design Tools

Generates professional architecture and system diagrams directly from codebase analysis as editable Excalidraw files or image exports.

The Excalidraw Architecture Generator empowers Claude to visualize complex codebases by automatically identifying components, services, and data flows. By analyzing project structures—ranging from microservices and monorepos to frontend hierarchies—it creates high-quality, editable .excalidraw files with optimized layouts and color-coded elements. This skill handles the intricate technicalities of Excalidraw's JSON format, such as label binding and elbow arrow routing, while providing optional PNG and SVG exports via Playwright for immediate documentation integration without manual intervention.

Key Features

01Advanced arrow routing for clean 90-degree 'elbow' connections without overlaps.

02Intelligent color-coding system for frontend, backend, and infrastructure components.

03Automatic codebase analysis to identify services, databases, and API structures.

04Generates editable .excalidraw files with logical vertical and horizontal layouts.

050 GitHub stars

06Built-in support for high-resolution PNG and SVG exports via Playwright.

Use Cases

01Mapping data flows and service dependencies in complex microservice environments.

02Creating system architecture diagrams for RFCs or technical design proposals.

03Visualizing legacy codebases for faster developer onboarding and documentation.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add window-ook/claude-code-lab excalidraw

For use in Claude.ai and ChatGPT

Key Features

01Advanced arrow routing for clean 90-degree 'elbow' connections without overlaps.

02Intelligent color-coding system for frontend, backend, and infrastructure components.

03Automatic codebase analysis to identify services, databases, and API structures.

04Generates editable .excalidraw files with logical vertical and horizontal layouts.

050 GitHub stars

06Built-in support for high-resolution PNG and SVG exports via Playwright.

Use Cases

01Mapping data flows and service dependencies in complex microservice environments.

02Creating system architecture diagrams for RFCs or technical design proposals.

03Visualizing legacy codebases for faster developer onboarding and documentation.