Repolode
coleam00

coleam00/excalidraw-diagram-skill

A coding agent skill that lets Claude Code and similar agents generate Excalidraw diagrams from natural language descriptions.

Open-source alternative to:Lucidchart

Stars
5,043
Forks
584
Open issues
34
Last commit
8 months ago

What is it?

This skill gives coding agents such as Claude Code and OpenCode the ability to produce Excalidraw diagrams from plain-language descriptions. The agent handles concept mapping, layout, JSON generation and rendering, so a user can ask for a diagram of a system or protocol and receive an editable Excalidraw file.

The project focuses on diagram structure rather than simple boxes and arrows. Shapes are arranged to reflect the concept, such as fan-outs for one-to-many relationships, timelines for sequences and convergence for aggregation. Technical diagrams can include code snippets and sample JSON payloads.

A Playwright-based render pipeline lets the agent view its own output, check for overlapping text or misaligned arrows, and iterate before delivering. Colors and brand styles are defined in a single palette file that can be replaced.

Key features

  • 01Generates Excalidraw diagrams from natural language descriptions.
  • 02Arranges shapes to match the concept, such as fan-outs, timelines and convergence.
  • 03Renders output with Playwright so the agent can check and fix layout issues.
  • 04Includes code snippets and JSON payload examples in technical diagrams.
  • 05Brand colors are centralized in one palette file for easy customization.

Use cases

  • Documenting a system architecture or data flow inside a coding agent session.
  • Illustrating an API or protocol sequence for a design doc.
  • Creating on-brand diagrams by editing the color palette file.

Quick start

  1. 1

    Clone the repository

    git clone https://github.com/coleam00/excalidraw-diagram-skill.git
  2. 2

    Copy the skill into your project's skills directory

    cp -r excalidraw-diagram-skill .claude/skills/excalidraw-diagram
  3. 3

    Install renderer dependencies and Chromium

    cd .claude/skills/excalidraw-diagram/references && uv sync && uv run playwright install chromium
  4. 4

    Ask your coding agent to create a diagram

Things to know

  • The README does not state a license, so usage rights are unclear.
  • The render pipeline requires uv and Playwright with Chromium installed.

Topics

FAQ

What is excalidraw-diagram-skill?
A coding agent skill that lets Claude Code and similar agents generate Excalidraw diagrams from natural language descriptions. This skill gives coding agents such as Claude Code and OpenCode the ability to produce Excalidraw diagrams from plain-language descriptions. The agent handles concept mapping, layout, JSON generation and rendering, so a user can ask for a diagram of a system or protocol and receive an editable Excalidraw file.
Is excalidraw-diagram-skill free to use? What license does it have?
excalidraw-diagram-skill has no declared license. Its code is public, but without a license you have no explicit permission to reuse it; ask the author before relying on it.
Is excalidraw-diagram-skill still maintained?
No commits for 6+ months. The last commit to excalidraw-diagram-skill was on Mar 1, 2026.
What can I use excalidraw-diagram-skill for?
Documenting a system architecture or data flow inside a coding agent session. Illustrating an API or protocol sequence for a design doc. Creating on-brand diagrams by editing the color palette file.
How do I install excalidraw-diagram-skill?
Clone the repository: git clone https://github.com/coleam00/excalidraw-diagram-skill.git Copy the skill into your project's skills directory: cp -r excalidraw-diagram-skill .claude/skills/excalidraw-diagram Install renderer dependencies and Chromium: cd .claude/skills/excalidraw-diagram/references && uv sync && uv run playwright install chromium Ask your coding agent to create a diagram
Where can I get excalidraw-diagram-skill?
The source code and installation instructions are on GitHub: https://github.com/coleam00/excalidraw-diagram-skill

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects