excalidraw-diagram

Generate Excalidraw diagram JSON from natural language descriptions.

Updated Mar 30, 2026
One-click install
npx skills add https://github.com/erlebach/gordon --skill excalidraw-diagram-erlebach
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: excalidraw-diagram
Source: https://github.com/erlebach/gordon/tree/main/skills/illustration_skills/excalidraw-diagram
Command: npx skills add https://github.com/erlebach/gordon --skill excalidraw-diagram-erlebach

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Generate Excalidraw-compatible diagram JSON from natural-language prompts to turn ideas into shareable, visual arguments that convey structure and relationships clearly.

Core Features & Use Cases

  • Generate Excalidraw JSON from natural-language descriptions to produce iterative, testable diagrams.
  • Support multiple visual patterns (fan-out, convergence, timeline, tree) to mirror concept behavior.
  • Built-in color palette and templates that enforce brand-consistent visuals.
  • Render and validate diagrams with an integrated Playwright-based renderer to produce PNG previews.
  • Suitable for technical diagrams, workflows, architectures, and educational visuals that benefit from visual reasoning.

Quick Start

Describe the diagram you want and the skill will output a ready-to-render .excalidraw file and a rendered PNG

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 from a natural language description?

To generate Excalidraw diagrams, provide a natural language description of your workflow or architecture. The tool outputs ready-to-render Excalidraw JSON and a PNG preview, using built-in color palettes and templates to enforce brand-consistent visualizations.

Can I create workflow and architecture visualizations without manually drawing elements?

Yes, you can create workflow and architecture visualizations by describing the conceptual structure in text. The tool translates this into Excalidraw JSON, supporting visual patterns like fan-out, convergence, timeline, and tree to accurately mirror concept behavior.

Does the Excalidraw diagram generator provide a visual preview before exporting?

The Excalidraw diagram generator provides a PNG preview using an integrated Playwright-based renderer. This rendering validation loop confirms the visual output matches your natural language prompt before you export the final Excalidraw JSON file.

How do I customize diagram colors to match my brand in Excalidraw?

You customize diagram colors using built-in color palette references provided by the tool. These references ensure your generated Excalidraw sketches maintain strict brand-consistent visuals across technical diagrams, architectures, and educational workflows.

What is the best way to visually communicate complex system relationships for technical documentation?

The best way to visually communicate system relationships is generating Excalidraw sketches from natural language. This approach turns ideas into shareable visual arguments, using structured JSON to clearly convey relationships and conceptual patterns for technical documentation.

Can I use this tool for educational visuals and conceptual patterns like timelines and trees?

You can use this tool for educational visuals by describing your concepts naturally. It supports multiple visual patterns including timeline and tree structures, generating Excalidraw JSON that mirrors concept behavior for effective visual reasoning and educational diagrams.