excalidraw

Generate Excalidraw diagrams from codebases and JSON files.

1|Updated May 4, 2026

Search Tags:#architecture #code analysis #system design #diagrams #Excalidraw

Ready to run

npx skills add https://github.com/auxi-wardrobe/auxi-all-in --skill excalidraw-auxi-wardrobe

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: excalidraw
Source: https://github.com/auxi-wardrobe/auxi-all-in/tree/main/.agents/skills/excalidraw
Command: npx skills add https://github.com/auxi-wardrobe/auxi-all-in --skill excalidraw-auxi-wardrobe

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright, excalidraw, mcp-excalidraw-server, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill allows users to create professional diagrams — architecture, data flow, workflows, and system design — using Excalidraw, with the ability to handle both live canvas editing and automated rendering from JSON files.

Core Features & Use Cases

Live Canvas Editing: Edit diagrams in real-time within an interactive canvas.
File-based Rendering: Generate diagrams from JSON files using headless Chromium and Playwright.
Auto-Diagram: Analyze codebases and generate architecture diagrams automatically.
Use Case: When you need to quickly create a visual representation of your application's architecture or data flow, this Skill can help you automate the process and produce a diagram from code.

Quick Start

Generate a diagram for the 'auxi-web' repository using the 'excalidraw' skill.

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

Generating architecture diagrams automatically from a codebase requires analyzing your project structure and rendering it visually. This Skill uses Excalidraw to produce visual representations of application architecture and data flow directly from your code.

Can I render Excalidraw diagrams from JSON files?▼

Rendering Excalidraw diagrams from JSON files is fully supported using headless Chromium and Playwright. This file-based rendering approach allows you to automate diagram generation and process configurations without manual canvas editing.

Does this diagram generation approach support live canvas editing?▼

Live canvas editing is supported for real-time, interactive diagram creation. You can edit diagrams directly on the canvas within your development environment to visualize system design and workflows dynamically.

Do I need Playwright installed to visualize system design with Excalidraw?▼

Playwright is required for headless rendering when generating diagrams from JSON files. You also need Excalidraw installed for drawing, as these dependencies work together to visualize application architecture and data flow.

What is the best way to visualize data flow in various programming environments?▼

Visualizing data flow across various programming environments is best handled by analyzing configurations and codebases to generate Excalidraw diagrams. This approach supports both interactive canvas editing and automated JSON rendering for system design.

Are there limitations when using Excalidraw for code analysis and system design diagrams?▼

Limitations include the dependency on Playwright for headless rendering and the need for Excalidraw for drawing capabilities. Complex code analysis may require structured JSON inputs to accurately visualize application architecture and data flow.