Can I edit the generated diagrams?

Yes, the skill produces .excalidraw files which can be opened and edited at excalidraw.com or via various IDE extensions.

What file formats are supported for export?

The skill generates a primary .excalidraw file and can optionally export the visualization to PNG and SVG formats using Playwright.

Does this skill require an existing diagram file?

No, it analyzes your source code, configuration files (like docker-compose or package.json), and IaC files to generate a diagram from scratch.

Does it work with any programming language?

Yes, it uses pattern matching and file structure analysis to identify components across any framework, language, or project type.

Excalidraw Diagram Generator

Name: Excalidraw Diagram Generator
Author: window-ook

bywindow-ook

0•

디자인 도구

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

The Excalidraw Diagram Generator empowers Claude Code to transform complex codebases into clear, visual architecture diagrams. By analyzing project structures, dependencies, and data flows, it automatically creates .excalidraw files that are fully editable and provides optional exports to PNG or SVG. This skill handles the technical nuances of the Excalidraw format—including complex arrow routing, label binding, and color-coded component categorization—making it an essential tool for documenting systems, onboarding new developers, or planning refactors without manual drawing.

주요 기능

01Automated codebase analysis to identify services, databases, and APIs

02Advanced arrow routing with elbow connections and edge-point calculation

03Standardized color palettes for different infrastructure components

04Generation of fully editable .excalidraw files with dynamic IDs

05Optional high-quality PNG and SVG export via Playwright integration

060 GitHub stars

사용 사례

01Planning and visualizing microservices or monorepo relationships

02Visualizing system architecture for documentation and README files

03Onboarding team members to a new codebase through structural diagrams

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

주요 기능

01Automated codebase analysis to identify services, databases, and APIs

02Advanced arrow routing with elbow connections and edge-point calculation

03Standardized color palettes for different infrastructure components

04Generation of fully editable .excalidraw files with dynamic IDs

05Optional high-quality PNG and SVG export via Playwright integration

060 GitHub stars

사용 사례

01Planning and visualizing microservices or monorepo relationships

02Visualizing system architecture for documentation and README files

03Onboarding team members to a new codebase through structural diagrams

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