skills.rest
ooiyeefei
ooiyeefeiCOMMUNITY
Explore all skills by this author →
GitHub

excalidraw

Generates Excalidraw-compatible JSON architecture diagrams from analyzed codebases.

472|55|Updated Dec 6, 2025
Search Tags:#architecture#codebase#excalidraw#visualization#JSON#diagram
One-click install
npx skills add https://github.com/ooiyeefei/ccc --skill excalidraw-ooiyeefei
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: excalidraw
Source: https://github.com/ooiyeefei/ccc/tree/main/skills/excalidraw
Command: npx skills add https://github.com/ooiyeefei/ccc --skill excalidraw-ooiyeefei

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill enables teams to turn codebase structure into visual architecture diagrams by exporting Excalidraw-compatible JSON, saving time documenting systems.

Core Features & Use Cases

  • Analyze codebases to identify components, services, databases, and data flows.
  • Generate Excalidraw diagrams that can be edited or shared with teammates.
  • Use cases include visualizing system architecture, onboarding new engineers, and documenting dependencies.

Quick Start

Ask Claude Code to generate an excalidraw diagram for your project, e.g., "Visualize this repository as an excalidraw diagram".

Frequently Asked Questions about excalidraw

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate architecture diagrams from a codebase?▼

Generate architecture diagrams from a codebase by exporting Excalidraw-compatible JSON. The Skill analyzes multi-language projects to identify components, services, and data flows, then outputs valid Excalidraw diagram files for editing or sharing.

Can I visualize multi-language project dependencies as Excalidraw diagrams?▼

Yes, you can visualize multi-language project dependencies as Excalidraw diagrams. The Skill identifies services, databases, and data flows across complex systems, ensuring proper label binding and edge routing in the exported JSON.

What is the best way to document system architecture using JSON?▼

Document system architecture using JSON by generating Excalidraw-compatible files that map codebase components and relationships. This approach requires no extra tooling and produces editable diagrams for onboarding new engineers.

Do I need extra tooling to export Excalidraw JSON from my repository?▼

No, you do not need extra tooling to export Excalidraw JSON from your repository. The Skill outputs valid Excalidraw JSON directly, ensuring proper label binding and edge routing without requiring additional software.

How does automated codebase visualization handle complex systems?▼

Automated codebase visualization handles complex systems by analyzing the project to identify components, services, and databases. It maps data flows and relationships, exporting the structure as Excalidraw JSON for team collaboration.

Related Skills

Explore More Design & Creative Skills→
Fr-e-dFr-e-d
157

architecture-extract

Analyze project directory structures to generate architectural summaries.

Community
Basic
lengoctuong2005lengoctuong2005
5

excalidraw

Generate Excalidraw diagrams from JSON element data using Python scripts.

Community
Basic
rjroyrjroy
6

ddp

Generate Mermaid diagrams for data flows, class relationships, and architectures.

Community
Basic
cndoit18cndoit18
11

excalidraw

Generate .excalidraw architecture diagrams from codebase analysis.

Community
Advanced