How does the PNG and SVG export functionality work?

It uses Playwright MCP tools to programmatically render the generated JSON into image formats, ensuring you get high-quality assets without manual steps.

Can it visualize any programming language?

Yes, the skill analyzes project structures, configuration files (like Docker or Terraform), and source code across all major languages to identify components and relationships.

Does it support complex layout patterns?

Yes, it includes logic for vertical flows, microservices orchestration, and tiered architectures (Frontend, API, Service, Data) to ensure diagrams are readable.

Do I need an Excalidraw account to use this?

No, it generates standalone .excalidraw files that can be opened locally in VS Code extensions or by dragging them into the Excalidraw web app.

Excalidraw Architecture Generator

Name: Excalidraw Architecture Generator
Author: window-ook

bywindow-ook

0•

디자인 도구

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

This skill empowers developers to visualize complex system architectures by automatically scanning source code, infrastructure files, and project structures. It transforms raw code insights into structured Excalidraw diagrams, managing complex layouts, color-coded components, and precise arrow routing. Whether documenting a microservices mesh, a frontend component hierarchy, or a database schema, this tool provides a seamless path from code to visual documentation, complete with high-quality PNG and SVG export capabilities.

주요 기능

01Automated codebase analysis to identify components, APIs, and data flows

02Programmatic PNG and SVG export via Playwright integration

03Pre-defined color palettes for Frontend, Backend, Databases, and Cloud services

04Advanced elbow arrow routing with precise 90-degree edge calculations

05Generates valid, editable .excalidraw JSON files with dynamic element IDs

060 GitHub stars

사용 사례

01Mapping Infrastructure-as-Code (IaC) files into readable visual cloud maps

02Visualizing a complex or legacy codebase for faster team onboarding

03Generating up-to-date system architecture diagrams for technical 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

주요 기능

01Automated codebase analysis to identify components, APIs, and data flows

02Programmatic PNG and SVG export via Playwright integration

03Pre-defined color palettes for Frontend, Backend, Databases, and Cloud services

04Advanced elbow arrow routing with precise 90-degree edge calculations

05Generates valid, editable .excalidraw JSON files with dynamic element IDs

060 GitHub stars

사용 사례

01Mapping Infrastructure-as-Code (IaC) files into readable visual cloud maps

02Visualizing a complex or legacy codebase for faster team onboarding

03Generating up-to-date system architecture diagrams for technical 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