skills.rest
10x-Anit
10x-AnitCOMMUNITY
Explore all skills by this author →
GitHub

excalidraw

Generate architecture diagrams as Excalidraw JSON from codebase analysis.

10|3|Updated Jan 18, 2026
Search Tags:#excalidraw#visualization#system-design#architecture-diagrams#codebase-analysis#diagram-generation
One-click install
npx skills add https://github.com/10x-Anit/10x-Accountability-Coach --skill excalidraw-10x-anit
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: excalidraw
Source: https://github.com/10x-Anit/10x-Accountability-Coach/tree/main/.opencode/skills/excalidraw
Command: npx skills add https://github.com/10x-Anit/10x-Accountability-Coach --skill excalidraw-10x-anit

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Generate architecture diagrams as Excalidraw files directly from codebase analysis to communicate system structures clearly and quickly.

Core Features & Use Cases

  • Codebase-to-diagram: Analyze a project to identify components, services, databases, and APIs and render them as a diagram.
  • Dynamic IDs & Labels: Produce Excalidraw-compatible JSON with unique IDs and labeled shapes for easy sharing and editing.
  • Guidelines & Validation: Enforce diagram rules (no diamond shapes, proper edge routing) to ensure clean diagrams that load in Excalidraw.

Quick Start

Provide a codebase scope and ask for an architecture diagram to generate a ready-to-load excalidraw file.

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?▼

Yes, you can visualize system design automatically by analyzing any language or framework. The tool maps components, services, data flows, and APIs to render comprehensive architecture diagrams without manual drawing.

How do I create an Excalidraw diagram from source code analysis?▼

To create an Excalidraw diagram from source code, provide the codebase scope and request a diagram. The tool outputs valid Excalidraw JSON with dynamic IDs and labeled shapes, saving it to your specified path.

Can I generate architecture diagrams for any programming language or framework?▼

Yes, codebase analysis for diagram generation applies to any language or framework. It identifies components, services, databases, and APIs across different tech stacks to map comprehensive system structures.

Do I need to manually fix diagram shapes when generating Excalidraw files?▼

No, manual fixes are not needed because the generation enforces diagram rules and validation. It avoids diamond shapes, ensures proper edge routing, and produces clean diagrams that load correctly in Excalidraw.

What is the best way to visualize codebase architecture and data flows?▼

The best way to visualize codebase architecture and data flows is automated Excalidraw diagram generation. It maps components, services, databases, and APIs directly from source code into editable, shareable JSON files.

Related Skills

Explore More Design & Creative Skills→
cndoit18cndoit18
11

excalidraw

Generate .excalidraw architecture diagrams from codebase analysis.

Community
Advanced
ooiyeefeiooiyeefei
472

excalidraw

Generates Excalidraw-compatible JSON architecture diagrams from analyzed codebases.

Community
Basic
sunLeeesunLeee

doc-sys

Generate system architecture documentation with Mermaid diagrams from a codebase.

Community
Advanced
blackcaterblackcater

beautiful-mermaid-diagrams

Generate Mermaid code for flowcharts, sequence, class, ER, and state diagrams.

Community
Intermediate