How does it handle complex layouts?

The skill uses a structured layout algorithm that organizes elements into logical rows (e.g., Users, Gateway, Services, Data) to ensure readability.

Can I edit the diagrams after they are generated?

Yes, the output is a standard .excalidraw JSON file that can be opened and modified at excalidraw.com or within VS Code using the Excalidraw extension.

Which programming languages and frameworks are supported?

It is language-agnostic; it identifies architectural patterns across various ecosystems by looking for things like API routes, controllers, and resource definitions.

Does this skill require existing documentation to work?

No, the skill performs a live analysis of your source code, Docker configs, and IaC files to generate architecture diagrams from scratch.

Where are the generated diagram files saved?

Diagrams are typically saved to a /docs/ or /docs/architecture/ directory within your project, or to a custom path you specify.

Excalidraw Diagram Generator

Name: Excalidraw Diagram Generator
Author: ooiyeefei

byooiyeefei

•

デザインツール

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

This skill empowers Claude to visualize complex software architectures by scanning codebases—including monorepos, microservices, and infrastructure-as-code—and translating them into structured, editable Excalidraw files. It handles the intricacies of Excalidraw's JSON format, ensuring clean elbow-style arrows, proper label binding, and semantic color-coding without requiring pre-existing documentation or external design tools. It is ideal for developers needing instant, high-quality visual representations of their system's components, data flows, and dependencies.

主な機能

01Advanced elbow-arrow routing for clean, 90-degree system connections

02Intelligent layout planning with vertical flow and column-based organization

03Automated codebase analysis for components, services, and databases

04Generates valid .excalidraw JSON with proper element binding and labels

05Built-in semantic color palettes for frontend, backend, AI, and data layers

0674 GitHub stars

ユースケース

01Visualizing microservice dependencies and data flow across a system

02Creating system design diagrams for technical reviews and RFCs

03Generating architectural documentation for onboarding or legacy codebases

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