excalidraw

Generate architecture diagrams in Excalidraw JSON from codebase analysis.

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/whyleonardo/agent-config --skill excalidraw-whyleonardo
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: excalidraw
Source: https://github.com/whyleonardo/agent-config/tree/main/templates/skills/excalidraw
Command: npx skills add https://github.com/whyleonardo/agent-config --skill excalidraw-whyleonardo

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

The Excalidraw diagram generator helps engineers quickly visualize complex codebases by converting analysis results into interactive diagrams.

Core Features & Use Cases

  • Generate architecture diagrams from any language or framework to illustrate components, services, databases, and data flows.
  • Visualize system structure for architecture reviews, onboarding, and documentation.
  • Use case: When documenting a microservices layout, produce an Excalidraw file with labeled shapes and connections.

Quick Start

Use the excalidraw skill to generate a diagram for the current codebase.

Frequently Asked Questions about excalidraw

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

FAQPage Schema
How do I generate Excalidraw architecture diagrams from code?

To generate Excalidraw architecture diagrams from code, the skill analyzes your codebase and outputs valid Excalidraw JSON with labeled shapes, edge bindings, and 90-degree elbow arrows. It visualizes components, services, databases, and data flows for system design.

Can I visualize system design for any programming language or framework?

Yes, you can visualize system design for projects of any programming language or framework. The skill applies codebase analysis universally to produce architecture diagrams detailing components, services, and data flows.

What is the best way to document a microservices layout in Excalidraw format?

The best way to document a microservices layout is using codebase analysis to produce an Excalidraw file. It generates valid Excalidraw JSON with labeled shapes and connections, illustrating services and data flows for architecture reviews.

Does the generated Excalidraw JSON follow edge-point routing rules for connections?

Yes, the generated Excalidraw JSON follows edge-point routing rules using 90-degree elbow arrows. It ensures properly labeled shapes and edge bindings for accurate architecture diagrams and data flow visualization.

When do I need to generate architecture diagrams from a codebase?

You need to generate architecture diagrams from a codebase when preparing for architecture reviews, onboarding new engineers, or creating system documentation. It helps quickly visualize complex structures, components, and data flows.