excalidraw-diagram-skill

excalidraw-diagram-skill

Enables coding agents to generate visually appealing and practical Excalidraw diagrams.

Agent SkillDevOpen source
Type
Agent Skill
Open source
Yes
GitHub Stars
★ 3.9k
Source
skill-github

Overview

This is a capability designed for coding agents that can generate visually appealing and practical Excalidraw diagrams from natural language descriptions. It goes beyond simple boxes and arrows, using visual reasoning to convey concepts. Compatible with any coding agent supporting skills. Simply place it in the `.claude/skills/` directory to use. The capability includes a Playwright-based rendering pipeline that allows the agent to inspect and fix layout issues before delivery. Colors and brand styles can be customized by editing a single file.

Capabilities

  • Generate Excalidraw diagrams from natural language
  • Visual reasoning rather than simple visualization
  • Include actual code snippets and technical details
  • Built-in visual validation to correct layout issues
  • Customizable brand colors

Use cases

Create technical architecture diagramsDraw flowchartsGenerate data flow diagramsBuild user interface prototypes

Setup

Requires: Node 环境Python 环境
git clone https://github.com/coleam00/excalidraw-diagram-skill.git && cp -r excalidraw-diagram-skill .claude/skills/excalidraw-diagram

This information was compiled by AI from public sources and may contain inaccuracies — please refer to the source.

FAQ

How do I install this skill?

Clone the repository and copy the folder into the `.claude/skills/` directory.

How do I set up the rendering pipeline?

You can instruct the agent to follow the setup instructions in SKILL.md, or run the relevant commands manually.

Related skills