skills.rest
2lab-ai
2lab-aiOFFICIAL
Explore all skills by this author →
WebsiteGitHub

excalidraw-diagram

Generate Excalidraw JSON diagrams from natural language descriptions.

36|3|Updated Jan 6, 2026
Search Tags:#rendering#excalidraw#playwright#design-system#diagram#visual-argument#evidence-artifact
One-click install
npx skills add https://github.com/2lab-ai/oh-my-claude --skill excalidraw-diagram-2lab-ai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: excalidraw-diagram
Source: https://github.com/2lab-ai/oh-my-claude/tree/main/plugins/stv/skills/excalidraw-diagram-skill
Command: npx skills add https://github.com/2lab-ai/oh-my-claude --skill excalidraw-diagram-2lab-ai

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Create precise, educational Excalidraw diagrams from natural language so users can communicate workflows, architectures, and protocols visually without manual layout, JSON fiddling, or repeated render/inspect cycles.

Core Features & Use Cases

  • Converts natural language descriptions into well-structured Excalidraw .excalidraw JSON files that emphasize visual reasoning over decorative boxes.
  • Supports multi-zoom diagrams (summary flow, section boundaries, detailed evidence artifacts) and enforces research-first workflows for technical accuracy.
  • Includes a Playwright-based render-and-validate pipeline and a centralized color-palette reference so outputs are brand-consistent and visually verified before delivery.
  • Use cases: documenting streaming protocols with real event names and JSON payloads, teaching system architectures with embedded code examples, and producing presentation-ready technical diagrams.

Quick Start

Ask the skill to generate an Excalidraw diagram that visualizes the event streaming flow between an AI agent and a frontend UI, including a summary flow, section boundaries, and code or JSON evidence artifacts.

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 natural language descriptions?▼

Generate Excalidraw diagrams by providing natural language descriptions, which the skill converts into well-structured .excalidraw JSON files. This emphasizes visual reasoning for workflows and architectures without manual layout or JSON fiddling.

Can I create multi-zoom technical diagrams with code or JSON evidence artifacts?▼

Yes, you can create multi-zoom technical diagrams featuring summary flows, section boundaries, and detailed evidence artifacts. This supports documenting streaming protocols with real event names and teaching system architectures with embedded code examples.

How do I validate Excalidraw JSON outputs before delivery?▼

Validate Excalidraw JSON outputs using an integrated Playwright-based render-and-validate pipeline. This process checks that generated diagrams are visually verified, structurally valid, and presentation-ready before final delivery.

Does the diagram generation process enforce a shared color palette reference?▼

Yes, the diagram generation process respects a centralized color-palette reference to ensure brand consistency. This shared design system guarantees that all produced Excalidraw visual arguments maintain a unified visual style.

What is the best way to document event streaming flows between an AI agent and frontend UI?▼

The best way to document event streaming flows is generating a multi-zoom Excalidraw diagram with summary flows, section boundaries, and JSON payload evidence artifacts. This accurately visualizes interactions between an AI agent and frontend UI.

Related Skills

Explore More Design & Creative Skills→
rodrigotoledorodrigotoledo

excalidraw-studio

Generate Excalidraw diagrams from natural language descriptions.

Community
Advanced
Chris-MaskeyChris-Maskey

excalidraw-diagram

Generate Excalidraw JSON diagrams with multi-zoom sections and evidence artifacts.

Community
Advanced
redpanda-dataredpanda-data
34

visual-review

Automate visual and accessibility reviews of frontend UI changes with Playwright.

Official
Advanced
shafibabarshafibabar
1

miro-board-notation

Standardizes board-style visual artifacts into structured table-based specifications for Miro.

Community
Basic