excalidraw-architect

Generate Excalidraw diagrams programmatically from JSON-based element definitions.

14|3|Updated Jun 24, 2021
One-click install
npx skills add https://github.com/samhvw8/dotfiles --skill excalidraw-architect
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: excalidraw-architect
Source: https://github.com/samhvw8/dotfiles/tree/main/dot_claude/skills/excalidraw-architect
Command: npx skills add https://github.com/samhvw8/dotfiles --skill excalidraw-architect

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Manually creating complex diagrams, flowcharts, and architecture visualizations can be time-consuming and tedious. This Skill automates the process of generating and manipulating Excalidraw diagrams programmatically, allowing you to focus on design concepts rather than drawing mechanics.

Core Features & Use Cases

  • Programmatic Diagram Creation: Generate diagrams by defining elements and their relationships (binding, grouping, framing) using a JSON-based data model.
  • Architecture Visualization: Create clear, elegant system architecture diagrams, flowcharts, and process maps.
  • Layout & Styling: Apply best practices for layout, alignment, size, color schemes, and clear connections to produce professional-grade visuals.
  • Use Case: You need to quickly visualize a new microservices architecture. This Skill takes your description and generates a complete Excalidraw diagram, including services, databases, and communication flows, with proper layout and styling, ready for presentation.

Quick Start

To use this skill, ensure you are on excalidraw.com.

Then, ask to create a diagram.

Example:

"Create a simple web application architecture diagram with a frontend, backend, and database."

"Draw a flowchart for user login process."