Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
jiatastic avatar

Excalidraw Ai

jiatastic/open-python-skills

  • 55 installs
  • 7 repo stars
  • Updated January 25, 2026
  • jiatastic/open-python-skills

Creates Excalidraw diagrams by generating JSON directly, using the schema reference and icon libraries for architecture diagrams, flowcharts, and mind maps.

About

Generates Excalidraw diagrams by writing the JSON schema directly, without templates. A developer uses it to create architecture diagrams, flowcharts, mind maps, or data-flow visualizations with precise control over layout and styling.

  • Full Excalidraw JSON schema reference with element type examples
  • Professional icon libraries for autonomous diagram generation

Excalidraw Ai by the numbers

  • 55 all-time installs (skills.sh)
  • +4 installs in the week ending Aug 2, 2026 (Skillselion tracking)
  • Ranked #1,227 of 1,880 Design & UI/UX skills by installs in the Skillselion catalog
  • Data as of Aug 2, 2026 (Skillselion catalog sync)
npx skills add https://github.com/jiatastic/open-python-skills --skill excalidraw-ai

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs55
repo stars★ 7
Last updatedJanuary 25, 2026
Repositoryjiatastic/open-python-skills ↗

What it does

Creates Excalidraw diagrams by generating JSON directly, using the schema reference and icon libraries for architecture diagrams, flowcharts, and mind maps.

Files

SKILL.mdMarkdownGitHub ↗

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

PropertyTypeDescription
idstringUnique identifier (use UUID or similar)
typestringrectangle, ellipse, diamond, text, arrow, line
x, ynumberPosition coordinates
width, heightnumberDimensions
strokeColorstringBorder/stroke color (hex)
backgroundColorstringFill color (hex) or "transparent"
fillStylestring"solid", "hachure", "cross-hatch"
strokeWidthnumberLine thickness (1, 2, 4)
strokeStylestring"solid", "dashed", "dotted"
roughnessnumber0 = sharp, 1 = normal, 2 = sketchy
opacitynumber0-100
anglenumberRotation in radians
groupIdsarrayGroup element IDs together
seednumberRandom seed for hand-drawn effect

Text Properties

PropertyTypeDescription
textstringThe text content
fontSizenumberFont size in pixels
fontFamilynumber1 = Virgil (hand-drawn), 2 = Helvetica, 3 = Cascadia
textAlignstring"left", "center", "right"
verticalAlignstring"top", "middle"

Arrow Properties

PropertyTypeDescription
pointsarrayArray of [x, y] coordinates relative to element origin
startBindingobjectConnection to source element
endBindingobjectConnection to target element
startArrowheadstringnull, "arrow", "bar", "dot", "triangle"
endArrowheadstringnull, "arrow", "bar", "dot", "triangle"

Color Palette Reference

Component-Based Colors (Recommended for Architecture Diagrams)

Component TypeStrokeBackgroundUse For
Database#7c3aed#ede9fePostgreSQL, MySQL, MongoDB
Cache#dc2626#fee2e2Redis, Memcached
Queue#16a34a#dcfce7Kafka, RabbitMQ, SQS
Load Balancer#0891b2#cffafeNginx, HAProxy, ALB
Gateway#475569#f1f5f9API Gateway, Kong
CDN#06b6d4#e0f2feCloudFront, Fastly
Auth#e11d48#ffe4e6OAuth, IAM, Cognito
Storage#d97706#fef3c7S3, Blob Storage
Service#2563eb#dbeafeBackend services, APIs
Container#0284c7#bae6fdDocker, Kubernetes
Function#f59e0b#fef3c7Lambda, Serverless
Monitoring#84cc16#ecfccbPrometheus, Grafana
Web App#4f46e5#e0e7ffReact, Vue, Frontend
Mobile#6366f1#eef2ffiOS, 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:

LibraryComponentsContent
aws-architecture-icons.excalidrawlib248AWS service icons (Lambda, S3, EC2, RDS, DynamoDB, SQS, etc.)
system-design.excalidrawlib24System design elements (server, database, storage, etc.)
drwnio.excalidrawlib18Draw.io style icons
system-design-template.excalidrawlib8Pre-built templates (steps, flow, db, etc.)
software-architecture.excalidrawlib7Software 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

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

Related skills

anthropicsFrontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.716k165kvercel-labsWeb Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.498k29.6klarksuiteLark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst389k16ksleekdotdesignSleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k476leonxlnxDesign Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.301k69.4knextlevelbuilderUi Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.290k112k
Design & UI/UXui
Browse by category
AI & AgentsFrontend & DesignBackend & DataDev ToolsAutomationTesting & ReviewSecurityMonitoring & CloudDocs & Planning
Design & frontend
Design systemsAnimation & motionAccessibility (a11y)CSS & TailwindUI designUXDesign to codeshadcn/uiLanding pagesBest design skills
Most searched skills
find-skillscavemanfrontend-designbrainstormingsystematic-debuggingstop-slopemil-design-engui-ux-pro-maxkarpathy-guidelinesweb-design-guidelinesreact-best-practicesgrill-meimprovemicrosoft-foundryagent-browser
Browse all listings
All agent skillsAll MCP serversAll marketplacesAll plugins

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.