skills.rest
jonathan-vella
jonathan-vellaCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

excalidraw

Generate hand-drawn style diagrams, wireframes, and sketches in VS Code.

6|2|Updated Jan 29, 2026
Search Tags:#idea generation#diagramming#whiteboarding#sketching#diagram tool
One-click install
npx skills add https://github.com/jonathan-vella/azure-smb-rf --skill excalidraw-jonathan-vella
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: excalidraw
Source: https://github.com/jonathan-vella/azure-smb-rf/tree/main/.github/skills/excalidraw
Command: npx skills add https://github.com/jonathan-vella/azure-smb-rf --skill excalidraw-jonathan-vella

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

Excalidraw solves the challenge of quickly creating and sharing hand-drawn diagrams without the need for traditional drawing tools.

Core Features & Use Cases

  • Brainstorming: Easily explore ideas with a hand-drawn aesthetic.
  • Wireframes: Design UI mockups and layout sketches.
  • Whiteboarding: Real-time collaboration on sketches.
  • ERD diagrams: Draw entity-relationship diagrams with a personal touch.
  • Sequence sketches: Map out interaction flows in an informal manner.
  • NOT for Azure architecture diagrams: Use the drawio skill for these instead.

Quick Start

To create a new whiteboard, simply start typing or draw in the editor and save the file as an '.excalidraw' file.

Frequently Asked Questions about excalidraw

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

FAQPage Schema
How do I create hand-drawn style diagrams for brainstorming and quick sketching?▼

You can create hand-drawn style diagrams for brainstorming by typing or drawing in an editor and saving the file with an '.excalidraw' extension, requiring VS Code and the Excalidraw extension to generate visual representations quickly.

What is the best way to sketch UI wireframes and ERD diagrams informally?▼

Sketching UI wireframes and ERD diagrams informally is best done using a hand-drawn aesthetic tool, which maps out interaction flows and entity-relationship diagrams without the complexity of traditional diagramming tools.

Do I need VS Code and the Excalidraw extension to draw whiteboarding sketches?▼

Yes, you need VS Code and the Excalidraw extension installed to draw whiteboarding sketches and generate hand-drawn style diagrams for real-time collaboration and quick visual representation of ideas.

Can I use this hand-drawn diagram tool for Azure architecture diagrams?▼

No, this hand-drawn diagram tool is not suitable for Azure architecture diagrams; you should use a dedicated diagramming skill like drawio instead for creating formal Azure architecture diagrams.

What are the limitations of using hand-drawn sketches for sequence and interaction flows?▼

Hand-drawn sketches for sequence and interaction flows are limited to informal mapping and quick visual representation, lacking the precision and complexity of traditional diagramming tools for detailed technical documentation.

Related Skills

Explore More Design & Creative Skills→
cassm199-mitacassm199-mita

excalidraw

Generate hand-drawn style diagrams and sketches in Excalidraw JSON format.

Community
Basic
Avihai-HAvihai-H

excalidraw

Generate hand-drawn diagrams, wireframes, and sketches in Excalidraw.

Community
Basic
trungdo9trungdo9
3

excalidraw

Generate hand-drawn diagrams and wireframes with Excalidraw.

Community
Basic
PelekePeleke

sketches

Generate hand-drawn-style SVG sketches, wireframes, and diagrams.

Community
Intermediate