Excalidraw Generation

Generate Excalidraw diagrams from descriptive prompts with semantic redesign.

49|13|Updated Dec 4, 2025
One-click install
npx skills add https://github.com/rhuss/cc-slidev --skill excalidraw-generation
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: Excalidraw Generation
Source: https://github.com/rhuss/cc-slidev/tree/main/skills/excalidraw-generation
Command: npx skills add https://github.com/rhuss/cc-slidev --skill excalidraw-generation

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires excalidraw-brute-export-cli, playwright, chromium, and includes scripts (resource) and references (resource) components.

What problem does it solve?

The Excalidraw Generation skill provides semantic redesign to transform descriptions into hand-crafted, spatial Excalidraw diagrams, ensuring clarity, accessibility, and cognitive-load guardrails.

Core Features & Use Cases

  • Semantic Concept Extraction: Analyze input to identify containment, flow, hierarchy, and annotations to guide diagram layout.
  • Element Factories & Layouts: Generate shapes, bound text, arrows, frames, and radial mind maps with layout algorithms and binding logic that enforce cognitive-load and accessibility rules.
  • Rendering & Validation: Save diagrams to diagrams/<slug>.excalidraw and render SVGs via render-excalidraw.sh, with JSON validation and color/contrast checks.
  • Auto-Trigger & Integration: Propose Excalidraw diagrams for spatial, informal, or annotated content within slide design workflows.

Quick Start

Describe the concept you want diagrammed and the skill will generate a semantic Excalidraw diagram, save the JSON to diagrams/<slug>.excalidraw, and render an SVG via the render-excalidraw.sh script.

Frequently Asked Questions about Excalidraw Generation

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

FAQPage Schema
How do I generate hand-drawn diagrams from text descriptions?

You generate hand-drawn diagrams by providing a descriptive prompt or slide content, which the system analyzes to extract semantic layout concepts and automatically render an Excalidraw SVG.

Can I automate Excalidraw SVG rendering and validation in a pipeline?

Yes, you can automate Excalidraw SVG rendering and validation in a pipeline using the render-excalidraw.sh script, which handles JSON validation and performs color and contrast checks for accessibility compliance.

Does Excalidraw diagram generation require Chromium and Playwright?

Excalidraw diagram generation requires Chromium and Playwright dependencies to execute the brute-export-cli, enabling the automated rendering of SVG files from the saved diagram JSON structures.

What is semantic redesign for diagram layout?

Semantic redesign for diagram layout is the process of analyzing input text to identify containment, flow, hierarchy, and annotations, then using element factories to generate spatial shapes and bound text while enforcing cognitive-load constraints.

Are there cognitive-load and accessibility constraints for generated diagrams?

Generated diagrams enforce strict cognitive-load and accessibility constraints by applying layout algorithms and binding logic that perform color and contrast checks during the JSON validation phase.

What is the best way to create radial mind maps from slide content?

The best way to create radial mind maps from slide content is using element factories that extract hierarchy and annotations to generate bound text and spatial layouts adhering to accessibility rules.