excalidraw

Q: How do I install excalidraw?

Run npx skills add https://github.com/aws-samples/sample-strands-agent-with-agentcore --skill excalidraw 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/ (personal) or .claude/skills/excalidraw/ (project).

by aws-samplesDevOps & Cloud

Create hand-drawn style diagrams and flowcharts using Excalidraw

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

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/aws-samples/sample-strands-agent-with-agentcore --skill excalidraw

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 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 Diagrams

Create hand-drawn style diagrams, flowcharts, architecture diagrams, and mind maps using the Excalidraw format. Diagrams are rendered interactively in the Canvas panel.

When to Use This Skill

Use create_excalidraw_diagram when the user wants to visualize structure, flow, or relationships — not raw numbers.

Use this skill for...	Use visualization skill for...
System architecture diagram	Sales figures by quarter
Flowchart or decision tree	Survey response percentages
Sequence / interaction diagram	Stock price over time
Mind map or concept map	Market share breakdown
Shapes, boxes, arrows, labels	Any x/y or segment/value data

Diagram Type

Choose based on user intent. For Swimlane, Class, Sequence, ER, and DFD diagrams, read diagram-patterns.md before generating.

Intent	Type	Pattern
Process steps, workflow, decisions	Flowchart	Rectangles + diamonds + arrows (see Example)
System components, dependencies	Architecture	Zone rectangles + boxes + arrows
Concept hierarchy, brainstorming	Mind Map	Center node + radial branch arrows
Entity connections, associations	Relationship	Boxes + labeled arrows
Cross-functional workflow, actor responsibilities	Swimlane	diagram-patterns.md
OOP class structure, inheritance	Class Diagram	diagram-patterns.md
Object interactions over time	Sequence Diagram	diagram-patterns.md
Database entities and relationships	ER Diagram	diagram-patterns.md
Data transformation, data movement	DFD	diagram-patterns.md

Available Tools

create_excalidraw_diagram(elements, title, background_color): Generate a diagram from Excalidraw element JSON

Color Palette

Use these colors consistently across all diagrams.

Primary Colors (strokes, arrows, text)

Name	Hex	Use
Blue	`#4a9eed`	Primary actions, links
Amber	`#f59e0b`	Warnings, highlights
Green	`#22c55e`	Success, positive
Red	`#ef4444`	Errors, negative
Purple	`#8b5cf6`	Accents, special items
Cyan	`#06b6d4`	Info, secondary

Fill Colors (shape backgrounds)

Color	Hex	Good For
Light Blue	`#a5d8ff`	Input, sources, primary nodes
Light Green	`#b2f2bb`	Success, output, completed
Light Orange	`#ffd8a8`	Warning, pending, external
Light Purple	`#d0bfff`	Processing, middleware
Light Red	`#ffc9c9`	Error, critical
Light Yellow	`#fff3bf`	Notes, decisions
Light Teal	`#c3fae8`	Storage, data

Background Zone Colors (use with `opacity: 35` for layer grouping)

Color	Hex	Good For
Blue zone	`#dbe4ff`	UI / frontend layer
Purple zone	`#e5dbff`	Logic / agent layer
Green zone	`#d3f9d8`	Data / tool layer

Element Format

Required Fields (all elements)

type, id (unique string), x, y, width, height

Defaults (skip if using these values)

strokeColor="#1e1e1e", backgroundColor="transparent", fillStyle="solid", strokeWidth=2, roughness=1, opacity=100

Shape Types

Rectangle

{ "type": "rectangle", "id": "r1", "x": 100, "y": 100, "width": 200, "height": 80,
  "roundness": { "type": 3 }, "backgroundColor": "#a5d8ff", "fillStyle": "solid" }

roundness: { type: 3 } for rounded corners

Ellipse

{ "type": "ellipse", "id": "e1", "x": 100, "y": 100, "width": 150, "height": 150 }

Diamond

{ "type": "diamond", "id": "d1", "x": 100, "y": 100, "width": 150, "height": 150 }

Label on shape (PREFERRED — no separate text element needed)

{ "type": "rectangle", "id": "r1", "x": 100, "y": 100, "width": 200, "height": 80,
  "label": { "text": "My Label", "fontSize": 20 } }

Works on rectangle, ellipse, diamond
Text auto-centers; container auto-resizes to fit
Also works on arrows: "label": { "text": "connects" }

Standalone Text (titles, annotations only)

{ "type": "text", "id": "t1", "x": 150, "y": 50, "text": "Title", "fontSize": 24 }

x is the LEFT edge. To center at position cx: set x = cx - text.length × fontSize × 0.25

Arrow

{ "type": "arrow", "id": "a1", "x": 300, "y": 150, "width": 150, "height": 0,
  "points": [[0,0],[150,0]], "endArrowhead": "arrow",
  "startBinding": { "elementId": "r1", "fixedPoint": [1, 0.5] },
  "endBinding": { "elementId": "r2", "fixedPoint": [0, 0.5] } }

points: [dx, dy] offsets from element x, y
endArrowhead: null | "arrow" | "bar" | "dot" | "triangle"
strokeStyle: "solid" | "dashed" | "dotted"
fixedPoint for bindings: top [0.5,0], bottom [0.5,1], left [0,0.5], right [1,0.5]

Pseudo-Elements (not drawn — control behavior)

cameraUpdate — sets the viewport

{ "type": "cameraUpdate", "width": 800, "height": 600, "x": 0, "y": 0 }

x, y: top-left corner of visible area (scene coordinates)
Must be 4:3 ratio: 400×300, 600×450, 800×600, 1200×900, 1600×1200
ALWAYS place a cameraUpdate as the first element to frame the diagram
No id needed

delete — removes elements by ID

{ "type": "delete", "ids": "r1,a1,t2" }

Comma-separated element IDs to remove
Use when updating an existing diagram to remove elements before adding replacements
Never reuse a deleted ID — assign new IDs to replacements

Camera Sizing Guide

The diagram displays at ~700px width. Use these standard sizes:

Size	Width × Height	Use When
S	400 × 300	2–3 elements, close-up
M	600 × 450	Small diagram section
L	800 × 600	Standard (default)
XL	1200 × 900	Large overview
XXL	1600 × 1200	Very complex diagrams

Font size rules:

Body text / labels: minimum 16
Titles / headings: minimum 20
Annotations: minimum 14 (use sparingly)
At XL/XXL camera: increase minimums by ~4px

Element sizing rules:

Labeled rectangles/ellipses: minimum 120 × 60
Leave 20–30px gaps between elements

Updating an Existing Diagram

When the user asks to modify a diagram, you will receive the current elements in context. Respond with the complete updated elements array:

Keep the same id for unchanged elements
Modify fields on elements you want to change
Omit elements you want to remove
Add new elements with unique IDs not used before

Example: Flowchart

[
  { "type": "cameraUpdate", "width": 800, "height": 600, "x": 0, "y": 0 },
  { "type": "rectangle", "id": "el-1",
    "x": 300, "y": 60, "width": 160, "height": 60,
    "strokeColor": "#4a9eed", "backgroundColor": "#a5d8ff",
    "fillStyle": "solid", "roundness": { "type": 3 },
    "label": { "text": "Start", "fontSize": 18 } },
  { "type": "diamond", "id": "el-2",
    "x": 280, "y": 170, "width": 200, "height": 90,
    "strokeColor": "#f59e0b", "backgroundColor": "#fff3bf",
    "fillStyle": "solid",
    "label": { "text": "Decision?", "fontSize": 16 } },
  { "type": "arrow", "id": "el-3",
    "x": 380, "y": 120, "width": 0, "height": 50,
    "points": [[0,0],[0,50]], "endArrowhead": "arrow",
    "startBinding": { "elementId": "el-1", "fixedPoint": [0.5, 1] },
    "endBinding": { "elementId": "el-2", "fixedPoint": [0.5, 0] } },
  { "type": "rectangle", "id": "el-4",
    "x": 300, "y": 320, "width": 160, "height": 60,
    "strokeColor": "#22c55e", "backgroundColor": "#b2f2bb",
    "fillStyle": "solid", "roundness": { "type": 3 },
    "label": { "text": "End", "fontSize": 18 } },
  { "type": "arrow", "id": "el-5",
    "x": 380, "y": 260, "width": 0, "height": 60,
    "points": [[0,0],[0,60]], "endArrowhead": "arrow",
    "startBinding": { "elementId": "el-2", "fixedPoint": [0.5, 1] },
    "endBinding": { "elementId": "el-4", "fixedPoint": [0.5, 0] } }
]

Common Mistakes to Avoid

Camera must use exact 4:3 ratios — non-4:3 viewports cause distortion
Always start with cameraUpdate — without it the viewport is unpredictable
No comments in element arrays — elements must be valid JSON. Never add // or /* */ comments inside the array; they break JSON parsing
Text contrast — never use light gray on white. Minimum text color on white: #757575. For text on light fills use dark variants (#15803d not #22c55e)
Arrow labels need space — long labels overflow short arrows; keep labels short or widen arrows
No emoji — Excalidraw's font does not render emoji
Element overlap — check that labels, boxes, and zone overlays don't stack on each other (minimum 20px gap)
Camera padding — leave padding inside the camera frame; don't match camera size exactly to content size

UI Guidance (from tools-config)

Element Format:

Required: type, x, y, id
Shapes (rectangle/ellipse/diamond): add width, height
Arrows/lines: add width, height, points [[0,0],[dx,dy]]
Text: add text, fontSize
Use label field on shapes for centered text
Connect shapes with arrow elements using points routing

FAQ

What does the excalidraw skill do?

Create hand-drawn style diagrams and flowcharts using Excalidraw

How do I install excalidraw?

Run npx skills add https://github.com/aws-samples/sample-strands-agent-with-agentcore --skill excalidraw 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/ (personal) or .claude/skills/excalidraw/ (project).

Which AI agents can use excalidraw?

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 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?

It is published by aws-samples in aws-samples/sample-strands-agent-with-agentcore. It has 42 recorded installs.

Popular devops & cloud skills

View category →

microsoft-foundry

microsoft/azure-skills

Build, deploy, evaluate, optimize, fine-tune, and manage Microsoft Foundry agents, models, and resources end to end. USE FOR: foundry, azd ai agent, azd provision/deploy, hosted agent scaffold/develop/run/deploy/troubleshoot, prompt agent create, managed harness agent create, GitHub Copilot harness agent, create agent, update agent, add tool to agent, invoke agent, agent insights, evaluate agent, batch eval, continuous eval, continuous monitoring, agent CI/CD, optimize prompt, improve prompt, optimize agent instructions, Agent Optimizer scaffold, dataset curation from traces, deploy model, model fine-tuning (SFT/DPO/RFT), Foundry project, RBAC, role assignment, permissions, quota, capacity, region, deployment failure, AI Services, create Foundry resource, knowledge index, customize deployment, onboard, availability, training-data, grader, distillation, large file upload. DO NOT USE FOR: Azure Functions, App Service, general Azure deploy (use azure-deploy), general Azure prep (use azure

OfficialDevOps & Cloud579.1K installs

azure-diagnostics

microsoft/azure-skills

Debug Azure production issues on Azure using AppLens, Azure Monitor, resource health, and safe triage. WHEN: debug production issues, troubleshoot app service, app service high CPU, app service deployment failure, troubleshoot container apps, container app 503 or target port mismatch, troubleshoot functions, function telemetry missing or stopped after a config/connection-string change, troubleshoot AKS, VM RDP, Linux SSH, VM black screen, can't connect to VM, reset VM password, NSG or firewall blocking, kubectl cannot connect, kube-system/CoreDNS failures, pod pending, crashloop, node not ready, upgrade failures, analyze logs, KQL, insights, image pull failures, cold start issues, health probe failures, resource health, root cause of errors, troubleshoot event hubs, troubleshoot service bus, messaging SDK error, AMQP connection failure, message lock lost, lock renewal during long-running processing, service bus dead letter.

OfficialDevOps & Cloud569.8K installs

azure-prepare

microsoft/azure-skills

Prepare azd-based Azure projects for deployment: generates azure.yaml, infrastructure (Bicep/Terraform), and Dockerfiles for the Azure Developer CLI (azd) workflow. USE ONLY when the user explicitly wants to use azd as the deployment tool, or the project already has an azure.yaml file. DO NOT USE FOR: non-azd deployments, Python App Service code-only deploys (use python-appservice-deploy), or cross-cloud migration (use azure-cloud-migrate). WHEN: prepare app for azd, create azure.yaml, set up azd infrastructure, modernize app for Azure with azd, deploy with azd, function app, timer trigger, service bus trigger, event-driven function, managed identity, generate Bicep, generate Terraform, create and deploy to Azure.

OfficialDevOps & Cloud569K installs

azure-ai

microsoft/azure-skills

Use for Azure AI: Search, Speech, OpenAI, Document Intelligence. Helps with search, vector/hybrid search, speech-to-text, text-to-speech, transcription, OCR. WHEN: AI Search, query search, vector search, hybrid search, semantic search, speech-to-text, text-to-speech, transcribe, OCR, convert text to speech.

OfficialDevOps & Cloud568.8K installs

azure-deploy

microsoft/azure-skills

Execute Azure deployments for ALREADY-PREPARED applications that have existing .azure/deployment-plan.md and infrastructure files. DO NOT use this skill when the user asks to CREATE a new application — use azure-prepare instead. This skill runs azd up, azd deploy, terraform apply, and az deployment commands with built-in error recovery. Requires .azure/deployment-plan.md from azure-prepare and validated status from azure-validate. WHEN: "run azd up", "run azd deploy", "execute deployment", "push to production", "push to cloud", "go live", "ship it", "bicep deploy", "terraform apply", "publish to Azure", "launch on Azure". DO NOT USE WHEN: "create and deploy", "build and deploy", "create a new app", "set up infrastructure", "create and deploy to Azure using Terraform" — use azure-prepare for these.

OfficialDevOps & Cloud568.6K installs

azure-validate

microsoft/azure-skills

Pre-deployment validation for Azure readiness. Run deep checks on configuration, infrastructure (Bicep or Terraform), RBAC role assignments, managed identity permissions, and prerequisites before deploying. WHEN: validate my app, check deployment readiness, run preflight checks, verify configuration, check if ready to deploy, validate azure.yaml, validate Bicep, test before deploying, troubleshoot deployment errors, validate Azure Functions, validate function app, validate serverless deployment, verify RBAC roles, check role assignments, review managed identity permissions, what-if analysis, validate Container Apps deployment.

OfficialDevOps & Cloud568K installs

excalidraw

Install

Install

Describe the task

Review the result

SKILL.md

Excalidraw Diagrams

When to Use This Skill

Diagram Type

Available Tools

Color Palette

Primary Colors (strokes, arrows, text)

Fill Colors (shape backgrounds)

Background Zone Colors (use with `opacity: 35` for layer grouping)

Element Format

Required Fields (all elements)

Defaults (skip if using these values)

Shape Types

Pseudo-Elements (not drawn — control behavior)

Camera Sizing Guide

Updating an Existing Diagram

Example: Flowchart

Common Mistakes to Avoid

UI Guidance (from tools-config)

FAQ

More from aws-samples/sample-strands-agent-with-agentcore

financial-news

code-interpreter

word-documents

google-maps

wikipedia-search

arxiv-search

Popular devops & cloud skills

microsoft-foundry

azure-diagnostics

azure-prepare

azure-ai

azure-deploy

azure-validate

excalidraw

Install

Install

Describe the task

Review the result

SKILL.md

Excalidraw Diagrams

When to Use This Skill

Diagram Type

Available Tools

Color Palette

Primary Colors (strokes, arrows, text)

Fill Colors (shape backgrounds)

Background Zone Colors (use with opacity: 35 for layer grouping)

Element Format

Required Fields (all elements)

Defaults (skip if using these values)

Shape Types

Pseudo-Elements (not drawn — control behavior)

Camera Sizing Guide

Updating an Existing Diagram

Example: Flowchart

Common Mistakes to Avoid

UI Guidance (from tools-config)

FAQ

More from aws-samples/sample-strands-agent-with-agentcore

Popular devops & cloud skills

Background Zone Colors (use with `opacity: 35` for layer grouping)