excalidraw-diagram

Create technical and conceptual diagrams in Excalidraw JSON format.

85|18|Updated Mar 6, 2026

Search Tags:#workflow #excalidraw #visualization #system architecture #diagram #evidence artifacts

Ready to run

npx skills add https://github.com/walidboulanouar/Ay-Skills --skill excalidraw-diagram-walidboulanouar

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: excalidraw-diagram
Source: https://github.com/walidboulanouar/Ay-Skills/tree/main/skills/excalidraw-diagram
Command: npx skills add https://github.com/walidboulanouar/Ay-Skills --skill excalidraw-diagram-walidboulanouar

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill enables the generation of Excalidraw diagrams that visually argue concepts and systems, simplifying complex information into clear visual arguments.

Core Features & Use Cases

Visual Argumentation: Generate diagrams that illustrate workflows, architectures, and ideas with meaningful shapes and connections.
Educational Diagrams: Create visuals for teaching, internal documentation, or client onboarding that clearly demonstrate relationships and components.
Use Case: Design a detailed system diagram showing data flow and system components for a technical architecture, including evidence artifacts like code snippets and data samples.

Quick Start

Drop the excalidraw-diagram skill into your project's .claude/skills/ directory and run your AI agent to generate, edit, and render diagrams as needed.

Frequently Asked Questions about excalidraw-diagram

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

FAQPage Schema

How do I generate Excalidraw diagrams to visualize system architecture?▼

This skill facilitates the creation of Excalidraw diagrams by using Excalidraw JSON format and rendering tools to produce high-fidelity images that visually communicate complex system architectures and workflows.

What is the best way to create educational diagrams for technical documentation?▼

The best way to create educational diagrams is to generate Excalidraw visuals that clearly demonstrate component relationships, simplifying complex information into clear visual arguments for teaching, internal documentation, or client onboarding.

How do I map process workflows with meaningful shapes and connections?▼

To map process workflows, you generate Excalidraw diagrams that illustrate ideas with meaningful shapes and connections, focusing on accurate representation and visual clarity to visually argue and educate.

Can I include evidence artifacts like code snippets in system design diagrams?▼

Yes, you can include evidence artifacts like code snippets and data samples when designing detailed system diagrams that show data flow and system components for a technical architecture.

Do I need playwright to render Excalidraw JSON into high-fidelity images?▼

Yes, Playwright is required as a dependency to render the Excalidraw JSON format into high-fidelity images that visually communicate complex ideas, workflows, and architectures.