excalidraw-ai

Q: How do I install excalidraw-ai?

Run npx skills add https://github.com/jiatastic/open-python-skills --skill excalidraw-ai in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/excalidraw-ai/ (personal) or .claude/skills/excalidraw-ai/ (project).

by jiatasticAI & Agents

Create professional Excalidraw diagrams by generating JSON directly. This skill provides the Excalidraw JSON schema reference and professional icon libraries for AI agents to autonomously create diagrams without templates.

Installs: 72
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/jiatastic/open-python-skills --skill excalidraw-ai

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads excalidraw-ai automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

excalidraw-ai

Generate Excalidraw diagrams by writing JSON directly. No templates needed - you have full control over every element.

When to Use This Skill

Use this skill when you need to:

Create architecture diagrams, flowcharts, or mind maps
Visualize system designs, data flows, or processes
Generate diagrams from code analysis or documentation
Create custom diagrams with precise control over layout and styling

Excalidraw JSON Schema

An Excalidraw file is a JSON object with this structure:

{
  "type": "excalidraw",
  "version": 2,
  "source": "https://excalidraw.com",
  "elements": [ /* array of element objects */ ],
  "appState": {
    "viewBackgroundColor": "#ffffff",
    "gridSize": null
  },
  "files": {}
}

Element Types

Rectangle

{
  "id": "unique-id-1",
  "type": "rectangle",
  "x": 100,
  "y": 100,
  "width": 200,
  "height": 100,
  "strokeColor": "#1971c2",
  "backgroundColor": "#a5d8ff",
  "fillStyle": "solid",
  "strokeWidth": 2,
  "strokeStyle": "solid",
  "roughness": 1,
  "opacity": 100,
  "groupIds": [],
  "angle": 0,
  "seed": 12345,
  "isDeleted": false
}

Ellipse

{
  "id": "unique-id-2",
  "type": "ellipse",
  "x": 100,
  "y": 100,
  "width": 150,
  "height": 100,
  "strokeColor": "#7c3aed",
  "backgroundColor": "#ede9fe",
  "fillStyle": "solid",
  "strokeWidth": 2,
  "roughness": 1
}

Diamond

{
  "id": "unique-id-3",
  "type": "diamond",
  "x": 100,
  "y": 100,
  "width": 120,
  "height": 120,
  "strokeColor": "#dc2626",
  "backgroundColor": "#fee2e2",
  "fillStyle": "solid"
}

Text

{
  "id": "unique-id-4",
  "type": "text",
  "x": 110,
  "y": 140,
  "width": 180,
  "height": 25,
  "text": "Your Label Here",
  "fontSize": 20,
  "fontFamily": 1,
  "textAlign": "center",
  "verticalAlign": "middle",
  "strokeColor": "#1e1e1e",
  "backgroundColor": "transparent"
}

Arrow

{
  "id": "unique-id-5",
  "type": "arrow",
  "x": 300,
  "y": 150,
  "width": 100,
  "height": 50,
  "strokeColor": "#1971c2",
  "strokeWidth": 2,
  "points": [[0, 0], [100, 50]],
  "startBinding": {
    "elementId": "source-element-id",
    "focus": 0.5,
    "gap": 5
  },
  "endBinding": {
    "elementId": "target-element-id",
    "focus": 0.5,
    "gap": 5
  },
  "startArrowhead": null,
  "endArrowhead": "arrow"
}

Line

{
  "id": "unique-id-6",
  "type": "line",
  "x": 100,
  "y": 100,
  "width": 200,
  "height": 0,
  "strokeColor": "#868e96",
  "strokeWidth": 1,
  "points": [[0, 0], [200, 0]],
  "startArrowhead": null,
  "endArrowhead": null
}

Element Properties Reference

Property	Type	Description
`id`	string	Unique identifier (use UUID or similar)
`type`	string	`rectangle`, `ellipse`, `diamond`, `text`, `arrow`, `line`
`x`, `y`	number	Position coordinates
`width`, `height`	number	Dimensions
`strokeColor`	string	Border/stroke color (hex)
`backgroundColor`	string	Fill color (hex) or `"transparent"`
`fillStyle`	string	`"solid"`, `"hachure"`, `"cross-hatch"`
`strokeWidth`	number	Line thickness (1, 2, 4)
`strokeStyle`	string	`"solid"`, `"dashed"`, `"dotted"`
`roughness`	number	0 = sharp, 1 = normal, 2 = sketchy
`opacity`	number	0-100
`angle`	number	Rotation in radians
`groupIds`	array	Group element IDs together
`seed`	number	Random seed for hand-drawn effect

Text Properties

Property	Type	Description
`text`	string	The text content
`fontSize`	number	Font size in pixels
`fontFamily`	number	1 = Virgil (hand-drawn), 2 = Helvetica, 3 = Cascadia
`textAlign`	string	`"left"`, `"center"`, `"right"`
`verticalAlign`	string	`"top"`, `"middle"`

Arrow Properties

Property	Type	Description
`points`	array	Array of [x, y] coordinates relative to element origin
`startBinding`	object	Connection to source element
`endBinding`	object	Connection to target element
`startArrowhead`	string	`null`, `"arrow"`, `"bar"`, `"dot"`, `"triangle"`
`endArrowhead`	string	`null`, `"arrow"`, `"bar"`, `"dot"`, `"triangle"`

Color Palette Reference

Component-Based Colors (Recommended for Architecture Diagrams)

Component Type	Stroke	Background	Use For
Database	`#7c3aed`	`#ede9fe`	PostgreSQL, MySQL, MongoDB
Cache	`#dc2626`	`#fee2e2`	Redis, Memcached
Queue	`#16a34a`	`#dcfce7`	Kafka, RabbitMQ, SQS
Load Balancer	`#0891b2`	`#cffafe`	Nginx, HAProxy, ALB
Gateway	`#475569`	`#f1f5f9`	API Gateway, Kong
CDN	`#06b6d4`	`#e0f2fe`	CloudFront, Fastly
Auth	`#e11d48`	`#ffe4e6`	OAuth, IAM, Cognito
Storage	`#d97706`	`#fef3c7`	S3, Blob Storage
Service	`#2563eb`	`#dbeafe`	Backend services, APIs
Container	`#0284c7`	`#bae6fd`	Docker, Kubernetes
Function	`#f59e0b`	`#fef3c7`	Lambda, Serverless
Monitoring	`#84cc16`	`#ecfccb`	Prometheus, Grafana
Web App	`#4f46e5`	`#e0e7ff`	React, Vue, Frontend
Mobile	`#6366f1`	`#eef2ff`	iOS, Android

Theme Colors

Modern (Default)

Primary: #1971c2 / #e7f5ff
Neutral: #64748b / #f1f5f9

Sketchy (Hand-drawn)

Primary: #495057 / #f8f9fa
Use roughness: 2 and fontFamily: 3

Technical

Primary: #2f9e44 / #ebfbee
Use strokeStyle: "dashed" for connections

Icon Libraries (305 Components Total)

Professional icons are available in .excalidrawlib files in the assets/ directory:

Library	Components	Content
`aws-architecture-icons.excalidrawlib`	248	AWS service icons (Lambda, S3, EC2, RDS, DynamoDB, SQS, etc.)
`system-design.excalidrawlib`	24	System design elements (server, database, storage, etc.)
`drwnio.excalidrawlib`	18	Draw.io style icons
`system-design-template.excalidrawlib`	8	Pre-built templates (steps, flow, db, etc.)
`software-architecture.excalidrawlib`	7	Software architecture components

Using Library Components

Library files contain element arrays that can be embedded directly into your diagram. Each library item is an array of Excalidraw elements that form a component.

To use: Parse the library JSON, find the component you need, adjust positions, and include in your diagram's elements array.

Layout Guidelines

Architecture Diagram Layout

Organize components in layers (top to bottom):

Layer 1: Client/External (y: 100)
Layer 2: Edge/CDN (y: 280)
Layer 3: Gateway/Load Balancer (y: 460)
Layer 4: Services (y: 640)
Layer 5: Data/Cache (y: 820)
Layer 6: Infrastructure (y: 1000)

Spacing recommendations:

Horizontal spacing between components: 240px
Vertical spacing between layers: 180px
Component width: 180-220px
Component height: 80-100px

Flowchart Layout

Arrange left-to-right or top-to-bottom:

Step spacing: 200px
Use rectangles for processes
Use diamonds for decisions
Use ellipses for start/end

Mind Map Layout

Radial layout from center:

Center node at (400, 300)
Child nodes at radius 250px
Distribute evenly using angle calculations

Complete Example

{
  "type": "excalidraw",
  "version": 2,
  "source": "https://excalidraw.com",
  "elements": [
    {
      "id": "api-gateway",
      "type": "rectangle",
      "x": 100,
      "y": 100,
      "width": 180,
      "height": 80,
      "strokeColor": "#475569",
      "backgroundColor": "#f1f5f9",
      "fillStyle": "solid",
      "strokeWidth": 2,
      "roughness": 0,
      "opacity": 100,
      "groupIds": ["group-1"],
      "seed": 1234
    },
    {
      "id": "api-gateway-label",
      "type": "text",
      "x": 140,
      "y": 130,
      "width": 100,
      "height": 25,
      "text": "API Gateway",
      "fontSize": 16,
      "fontFamily": 1,
      "textAlign": "center",
      "strokeColor": "#1e1e1e",
      "groupIds": ["group-1"]
    },
    {
      "id": "redis",
      "type": "diamond",
      "x": 100,
      "y": 280,
      "width": 180,
      "height": 100,
      "strokeColor": "#dc2626",
      "backgroundColor": "#fee2e2",
      "fillStyle": "solid",
      "strokeWidth": 2,
      "roughness": 0,
      "seed": 5678
    },
    {
      "id": "redis-label",
      "type": "text",
      "x": 155,
      "y": 320,
      "width": 70,
      "height": 20,
      "text": "Redis",
      "fontSize": 16,
      "fontFamily": 1,
      "textAlign": "center",
      "strokeColor": "#1e1e1e"
    },
    {
      "id": "arrow-1",
      "type": "arrow",
      "x": 190,
      "y": 180,
      "width": 0,
      "height": 100,
      "strokeColor": "#64748b",
      "strokeWidth": 2,
      "points": [[0, 0], [0, 100]],
      "startBinding": {"elementId": "api-gateway", "focus": 0.5, "gap": 5},
      "endBinding": {"elementId": "redis", "focus": 0.5, "gap": 5},
      "endArrowhead": "arrow"
    }
  ],
  "appState": {
    "viewBackgroundColor": "#ffffff",
    "gridSize": null
  },
  "files": {}
}

Output

Save your diagram as a .excalidraw or .json file. It can be:

Imported directly into excalidraw.com
Embedded in documentation or web apps
Converted to PNG/SVG using Excalidraw's export features

Tips for AI Agents

Generate unique IDs: Use UUIDs or sequential IDs for each element
Group related elements: Use groupIds to keep shapes and their labels together
Use bindings for arrows: Connect arrows to elements using startBinding and endBinding
Apply consistent styling: Use the color palette for component types
Calculate text positions: Center text within shapes by adjusting x/y based on text length
Set seed values: Use seed: hash(id) for consistent hand-drawn rendering

FAQ

What does the excalidraw-ai skill do?

How do I install excalidraw-ai?

Run npx skills add https://github.com/jiatastic/open-python-skills --skill excalidraw-ai in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/excalidraw-ai/ (personal) or .claude/skills/excalidraw-ai/ (project).

Which AI agents can use excalidraw-ai?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is excalidraw-ai safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains excalidraw-ai?

It is published by jiatastic in jiatastic/open-python-skills. It has 72 recorded installs.

More from jiatastic/open-python-skills

View all →

python-backend

jiatastic/open-python-skills

Python backend development expertise for FastAPI, security patterns, database operations, Upstash integrations, and code quality. Use when: (1) Building REST APIs with FastAPI, (2) Implementing JWT/OAuth2 authentication, (3) Setting up SQLAlchemy/async databases, (4) Integrating Redis/Upstash caching, (5) Refactoring AI-generated Python code (deslopification), (6) Designing API patterns, or (7) Optimizing backend performance.

Backend & APIs2.2K installs

pydantic

jiatastic/open-python-skills

Open the skill to read its SKILL.md instructions.

183 installs

ty-skills

jiatastic/open-python-skills

Python type checking expertise using ty - the extremely fast type checker by Astral. Use when: (1) Adding type annotations to Python code, (2) Fixing type errors reported by ty, (3) Migrating from mypy/pyright to ty, (4) Configuring ty for projects, (5) Understanding advanced type patterns (generics, protocols, intersection types), (6) Setting up ty in editors (VS Code, Cursor, Neovim, PyCharm).

123 installs

linting

jiatastic/open-python-skills

Python linting with Ruff - an extremely fast linter written in Rust. Use when: (1) Standardizing code quality, (2) Fixing style warnings, (3) Enforcing rules in CI, (4) Replacing flake8/isort/pyupgrade/autoflake, (5) Configuring lint rules and suppressions.

Backend & APIs91 installs

error-handling

jiatastic/open-python-skills

Python error handling patterns for FastAPI, Pydantic, and asyncio. Follows "Let it crash" philosophy - raise exceptions, catch at boundaries. Covers HTTPException, global exception handlers, validation errors, background task failures. Use when: (1) Designing API error responses, (2) Handling RequestValidationError, (3) Managing async exceptions, (4) Preventing stack trace leakage, (5) Designing custom exception hierarchies.

Backend & APIs86 installs

logfire

jiatastic/open-python-skills

Structured observability with Pydantic Logfire and OpenTelemetry. Use when: (1) Adding traces/logs to Python APIs, (2) Instrumenting FastAPI, HTTPX, SQLAlchemy, or LLMs, (3) Setting up service metadata, (4) Configuring sampling or scrubbing sensitive data, (5) Testing observability code.

DevOps & Cloud78 installs

Popular ai & agents skills

View category →

google-agents-cli-publish

google/agents-cli

This skill should be used when the user wants to "publish an agent", "publish my ADK agent", "register an agent with Gemini", "publish to Gemini" (formerly Gemini Enterprise), or needs guidance on the agents-cli publish gemini command. Also use when the user wants to "manage agents in Agent Registry", "list/update/delete registered agents", or "register an MCP server". Covers ADK vs A2A registration modes, programmatic and interactive usage, flag reference, auto-detection from deployment metadata, Agent Registry fleet management, and troubleshooting. Part of the agents-cli skills suite. Do NOT use for deployment (use google-agents-cli-deploy).

AI & Agents513.9K installs

google-agents-cli-eval

google/agents-cli

This skill should be used when the user wants to "run an evaluation", "evaluate my agent", "evaluate my ADK agent", "write an eval dataset", "analyze eval failures", "compare eval results", "optimize agent", or needs guidance on the Gemini platform eval methodology and the Quality Flywheel. Covers eval metrics, dataset schema, LLM-as-judge scoring, and common failure causes. Applies to any agents-cli project, whatever framework the agent is written in. Do NOT use for agent API code patterns (ADK: use google-agents-cli-adk-code), deployment (use google-agents-cli-deploy), or project scaffolding (use google-agents-cli-scaffold).

AI & Agents513.5K installs

skill-creator

anthropics/skills

Create new skills, modify and improve existing skills, and measure skill performance. Use when users want to create a skill from scratch, edit, or optimize an existing skill, run evals to test a skill, benchmark skill performance with variance analysis, or optimize a skill's description for better triggering accuracy.

OfficialAI & Agents416.4K installs

codex-pet

prime-skills/runcomfy-agent-skills

Codex Pet generator on RunComfy. Build a Codex-compatible Codex Pet spritesheet.webp + pet.json from a single reference image, drop it into ${CODEXHOME:-$HOME/.codex}/pets/ / and Codex picks it up as a custom Codex Pet next to the 8 built-ins. This skill produces the exact Codex Pet atlas Codex expects (1536x1872 PNG/WebP, 8 cols x 9 rows, 192x208 cells, 9 animation states — idle, running-right, running-left, waving, jumping, failed, waiting, running, review). Calls OpenAI GPT Image 2 edit ONCE via the local RunComfy CLI as runcomfy run openai/gpt-image-2/edit to produce a canonical Codex Pet pose, then assembles all 9 animation rows programmatically with ImageMagick micro-transforms — no Codex Pro, no $imagegen, no OPENAIAPIKEY required, only RUNCOMFYTOKEN. Triggers on "codex pet", "create codex pet", "make codex pet", "hatch codex pet", "/hatch image", "desktop pet codex", "codex pets", "spritesheet.webp", or any explicit ask to build a custom pet for OpenAI Codex.

AI & Agents402.1K installs

full-output-enforcement

leonxlnx/taste-skill

Overrides default LLM truncation behavior. Enforces complete code generation, bans placeholder patterns, and handles token-limit splits cleanly. Apply to any task requiring exhaustive, unabridged output.

AI & Agents401K installs

executing-plans

obra/superpowers

Use when executing an implementation plan in the current session as the implementer yourself — your human partner chose inline execution, or no subagent tool is available

AI & Agents245.7K installs

excalidraw-ai

Install

Install

Describe the task

Review the result

SKILL.md

excalidraw-ai

When to Use This Skill

Excalidraw JSON Schema

Element Types

Rectangle

Ellipse

Diamond

Text

Arrow

Line

Element Properties Reference

Text Properties

Arrow Properties

Color Palette Reference

Component-Based Colors (Recommended for Architecture Diagrams)

Theme Colors

Icon Libraries (305 Components Total)

Using Library Components

Layout Guidelines

Architecture Diagram Layout

Flowchart Layout

Mind Map Layout

Complete Example

Output

Tips for AI Agents

FAQ

More from jiatastic/open-python-skills

Popular ai & agents skills