{
  "schemaVersion": "1.0",
  "item": {
    "slug": "excalidraw-diagram-generator",
    "name": "Excalidraw Diagram Generator",
    "source": "tencent",
    "type": "skill",
    "category": "内容创作",
    "sourceUrl": "https://clawhub.ai/elihuvillaraus/excalidraw-diagram-generator",
    "canonicalUrl": "https://clawhub.ai/elihuvillaraus/excalidraw-diagram-generator",
    "targetPlatform": "OpenClaw"
  },
  "install": {
    "downloadMode": "redirect",
    "downloadUrl": "/downloads/excalidraw-diagram-generator",
    "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=excalidraw-diagram-generator",
    "sourcePlatform": "tencent",
    "targetPlatform": "OpenClaw",
    "installMethod": "Manual import",
    "extraction": "Extract archive",
    "prerequisites": [
      "OpenClaw"
    ],
    "packageFormat": "ZIP package",
    "includedAssets": [
      "references/excalidraw-schema.md",
      "references/element-types.md",
      "SKILL.md"
    ],
    "primaryDoc": "SKILL.md",
    "quickSetup": [
      "Download the package from Yavira.",
      "Extract the archive and review SKILL.md first.",
      "Import or place the package into your OpenClaw setup."
    ],
    "agentAssist": {
      "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.",
      "steps": [
        "Download the package from Yavira.",
        "Extract it into a folder your agent can access.",
        "Paste one of the prompts below and point your agent at the extracted folder."
      ],
      "prompts": [
        {
          "label": "New install",
          "body": "I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Tell me what you changed and call out any manual steps you could not complete."
        },
        {
          "label": "Upgrade existing",
          "body": "I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Summarize what changed and any follow-up checks I should run."
        }
      ]
    },
    "sourceHealth": {
      "source": "tencent",
      "status": "healthy",
      "reason": "direct_download_ok",
      "recommendedAction": "download",
      "checkedAt": "2026-04-23T16:43:11.935Z",
      "expiresAt": "2026-04-30T16:43:11.935Z",
      "httpStatus": 200,
      "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=4claw-imageboard",
      "contentType": "application/zip",
      "probeMethod": "head",
      "details": {
        "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=4claw-imageboard",
        "contentDisposition": "attachment; filename=\"4claw-imageboard-1.0.1.zip\"",
        "redirectLocation": null,
        "bodySnippet": null
      },
      "scope": "source",
      "summary": "Source download looks usable.",
      "detail": "Yavira can redirect you to the upstream package for this source.",
      "primaryActionLabel": "Download for OpenClaw",
      "primaryActionHref": "/downloads/excalidraw-diagram-generator"
    },
    "validation": {
      "installChecklist": [
        "Use the Yavira download entry.",
        "Review SKILL.md after the package is downloaded.",
        "Confirm the extracted package contains the expected setup assets."
      ],
      "postInstallChecks": [
        "Confirm the extracted package includes the expected docs or setup files.",
        "Validate the skill or prompts are available in your target agent workspace.",
        "Capture any manual follow-up steps the agent could not complete."
      ]
    },
    "downloadPageUrl": "https://openagent3.xyz/downloads/excalidraw-diagram-generator",
    "agentPageUrl": "https://openagent3.xyz/skills/excalidraw-diagram-generator/agent",
    "manifestUrl": "https://openagent3.xyz/skills/excalidraw-diagram-generator/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/excalidraw-diagram-generator/agent.md"
  },
  "agentAssist": {
    "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.",
    "steps": [
      "Download the package from Yavira.",
      "Extract it into a folder your agent can access.",
      "Paste one of the prompts below and point your agent at the extracted folder."
    ],
    "prompts": [
      {
        "label": "New install",
        "body": "I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Tell me what you changed and call out any manual steps you could not complete."
      },
      {
        "label": "Upgrade existing",
        "body": "I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Summarize what changed and any follow-up checks I should run."
      }
    ]
  },
  "documentation": {
    "source": "clawhub",
    "primaryDoc": "SKILL.md",
    "sections": [
      {
        "title": "Excalidraw Diagram Generator",
        "body": "A skill for generating Excalidraw-format diagrams from natural language descriptions. This skill helps create visual representations of processes, systems, relationships, and ideas without manual drawing."
      },
      {
        "title": "When to Use This Skill",
        "body": "Use this skill when users request:\n\n\"Create a diagram showing...\"\n\"Make a flowchart for...\"\n\"Visualize the process of...\"\n\"Draw the system architecture of...\"\n\"Generate a mind map about...\"\n\"Create an Excalidraw file for...\"\n\"Show the relationship between...\"\n\"Diagram the workflow of...\"\n\nSupported diagram types:\n\n📊 Flowcharts: Sequential processes, workflows, decision trees\n🔗 Relationship Diagrams: Entity relationships, system components, dependencies\n🧠 Mind Maps: Concept hierarchies, brainstorming results, topic organization\n🏗️ Architecture Diagrams: System design, module interactions, data flow\n📈 Data Flow Diagrams (DFD): Data flow visualization, data transformation processes\n🏊 Business Flow (Swimlane): Cross-functional workflows, actor-based process flows\n📦 Class Diagrams: Object-oriented design, class structures and relationships\n🔄 Sequence Diagrams: Object interactions over time, message flows\n🗃️ ER Diagrams: Database entity relationships, data models"
      },
      {
        "title": "Prerequisites",
        "body": "Clear description of what should be visualized\nIdentification of key entities, steps, or concepts\nUnderstanding of relationships or flow between elements"
      },
      {
        "title": "Step 1: Understand the Request",
        "body": "Analyze the user's description to determine:\n\nDiagram type (flowchart, relationship, mind map, architecture)\nKey elements (entities, steps, concepts)\nRelationships (flow, connections, hierarchy)\nComplexity (number of elements)"
      },
      {
        "title": "Step 2: Choose the Appropriate Diagram Type",
        "body": "User IntentDiagram TypeExample KeywordsProcess flow, steps, proceduresFlowchart\"workflow\", \"process\", \"steps\", \"procedure\"Connections, dependencies, associationsRelationship Diagram\"relationship\", \"connections\", \"dependencies\", \"structure\"Concept hierarchy, brainstormingMind Map\"mind map\", \"concepts\", \"ideas\", \"breakdown\"System design, componentsArchitecture Diagram\"architecture\", \"system\", \"components\", \"modules\"Data flow, transformation processesData Flow Diagram (DFD)\"data flow\", \"data processing\", \"data transformation\"Cross-functional processes, actor responsibilitiesBusiness Flow (Swimlane)\"business process\", \"swimlane\", \"actors\", \"responsibilities\"Object-oriented design, class structuresClass Diagram\"class\", \"inheritance\", \"OOP\", \"object model\"Interaction sequences, message flowsSequence Diagram\"sequence\", \"interaction\", \"messages\", \"timeline\"Database design, entity relationshipsER Diagram\"database\", \"entity\", \"relationship\", \"data model\""
      },
      {
        "title": "Step 3: Extract Structured Information",
        "body": "For Flowcharts:\n\nList of sequential steps\nDecision points (if any)\nStart and end points\n\nFor Relationship Diagrams:\n\nEntities/nodes (name + optional description)\nRelationships between entities (from → to, with label)\n\nFor Mind Maps:\n\nCentral topic\nMain branches (3-6 recommended)\nSub-topics for each branch (optional)\n\nFor Data Flow Diagrams (DFD):\n\nData sources and destinations (external entities)\nProcesses (data transformations)\nData stores (databases, files)\nData flows (arrows showing data movement from left-to-right or from top-left to bottom-right)\nImportant: Do not represent process order, only data flow\n\nFor Business Flow (Swimlane):\n\nActors/roles (departments, systems, people) - displayed as header columns\nProcess lanes (vertical lanes under each actor)\nProcess boxes (activities within each lane)\nFlow arrows (connecting process boxes, including cross-lane handoffs)\n\nFor Class Diagrams:\n\nClasses with names\nAttributes with visibility (+, -, #)\nMethods with visibility and parameters\nRelationships: inheritance (solid line + white triangle), implementation (dashed line + white triangle), association (solid line), dependency (dashed line), aggregation (solid line + white diamond), composition (solid line + filled diamond)\nMultiplicity notations (1, 0..1, 1..*, *)\n\nFor Sequence Diagrams:\n\nObjects/actors (arranged horizontally at top)\nLifelines (vertical lines from each object)\nMessages (horizontal arrows between lifelines)\nSynchronous messages (solid arrow), asynchronous messages (dashed arrow)\nReturn values (dashed arrows)\nActivation boxes (rectangles on lifelines during execution)\nTime flows from top to bottom\n\nFor ER Diagrams:\n\nEntities (rectangles with entity names)\nAttributes (listed inside entities)\nPrimary keys (underlined or marked with PK)\nForeign keys (marked with FK)\nRelationships (lines connecting entities)\nCardinality: 1:1 (one-to-one), 1:N (one-to-many), N:M (many-to-many)\nJunction/associative entities for many-to-many relationships (dashed rectangles)"
      },
      {
        "title": "Step 4: Generate the Excalidraw JSON",
        "body": "Create the .excalidraw file with appropriate elements:\n\nAvailable element types:\n\nrectangle: Boxes for entities, steps, concepts\nellipse: Alternative shapes for emphasis\ndiamond: Decision points\narrow: Directional connections\ntext: Labels and annotations\n\nKey properties to set:\n\nPosition: x, y coordinates\nSize: width, height\nStyle: strokeColor, backgroundColor, fillStyle\nFont: fontFamily: 5 (Excalifont - required for all text elements)\nText: Embedded text for labels\nConnections: points array for arrows\n\nImportant: All text elements must use fontFamily: 5 (Excalifont) for consistent visual appearance."
      },
      {
        "title": "Step 5: Format the Output",
        "body": "Structure the complete Excalidraw file:\n\n{\n  \"type\": \"excalidraw\",\n  \"version\": 2,\n  \"source\": \"https://excalidraw.com\",\n  \"elements\": [\n    // Array of diagram elements\n  ],\n  \"appState\": {\n    \"viewBackgroundColor\": \"#ffffff\",\n    \"gridSize\": 20\n  },\n  \"files\": {}\n}"
      },
      {
        "title": "Step 6: Save and Provide Instructions",
        "body": "Save as <descriptive-name>.excalidraw\nInform user how to open:\n\nVisit https://excalidraw.com\nClick \"Open\" or drag-and-drop the file\nOr use Excalidraw VS Code extension"
      },
      {
        "title": "Element Count Guidelines",
        "body": "Diagram TypeRecommended CountMaximumFlowchart steps3-1015Relationship entities3-812Mind map branches4-68Mind map sub-topics per branch2-46"
      },
      {
        "title": "Layout Tips",
        "body": "Start positions: Center important elements, use consistent spacing\nSpacing:\n\nHorizontal gap: 200-300px between elements\nVertical gap: 100-150px between rows\n\n\nColors: Use consistent color scheme\n\nPrimary elements: Light blue (#a5d8ff)\nSecondary elements: Light green (#b2f2bb)\nImportant/Central: Yellow (#ffd43b)\nAlerts/Warnings: Light red (#ffc9c9)\n\n\nText sizing: 16-24px for readability\nFont: Always use fontFamily: 5 (Excalifont) for all text elements\nArrow style: Use straight arrows for simple flows, curved for complex relationships"
      },
      {
        "title": "Complexity Management",
        "body": "If user request has too many elements:\n\nSuggest breaking into multiple diagrams\nFocus on main elements first\nOffer to create detailed sub-diagrams\n\nExample response:\n\n\"Your request includes 15 components. For clarity, I recommend:\n1. High-level architecture diagram (6 main components)\n2. Detailed diagram for each subsystem\n\nWould you like me to start with the high-level view?\""
      },
      {
        "title": "Example 1: Simple Flowchart",
        "body": "User: \"Create a flowchart for user registration\"\n\nAgent generates:\n\nExtract steps: \"Enter email\" → \"Verify email\" → \"Set password\" → \"Complete\"\nCreate flowchart with 4 rectangles + 3 arrows\nSave as user-registration-flow.excalidraw"
      },
      {
        "title": "Example 2: Relationship Diagram",
        "body": "User: \"Diagram the relationship between User, Post, and Comment entities\"\n\nAgent generates:\n\nEntities: User, Post, Comment\nRelationships: User → Post (\"creates\"), User → Comment (\"writes\"), Post → Comment (\"contains\")\nSave as user-content-relationships.excalidraw"
      },
      {
        "title": "Example 3: Mind Map",
        "body": "User: \"Mind map about machine learning concepts\"\n\nAgent generates:\n\nCenter: \"Machine Learning\"\nBranches: Supervised Learning, Unsupervised Learning, Reinforcement Learning, Deep Learning\nSub-topics under each branch\nSave as machine-learning-mindmap.excalidraw"
      },
      {
        "title": "Troubleshooting",
        "body": "IssueSolutionElements overlapIncrease spacing between coordinatesText doesn't fit in boxesIncrease box width or reduce font sizeToo many elementsBreak into multiple diagramsUnclear layoutUse grid layout (rows/columns) or radial layout (mind maps)Colors inconsistentDefine color palette upfront based on element types"
      },
      {
        "title": "Grid Layout (for Relationship Diagrams)",
        "body": "const columns = Math.ceil(Math.sqrt(entityCount));\nconst x = startX + (index % columns) * horizontalGap;\nconst y = startY + Math.floor(index / columns) * verticalGap;"
      },
      {
        "title": "Radial Layout (for Mind Maps)",
        "body": "const angle = (2 * Math.PI * index) / branchCount;\nconst x = centerX + radius * Math.cos(angle);\nconst y = centerY + radius * Math.sin(angle);"
      },
      {
        "title": "Auto-generated IDs",
        "body": "Use timestamp + random string for unique IDs:\n\nconst id = Date.now().toString(36) + Math.random().toString(36).substr(2);"
      },
      {
        "title": "Output Format",
        "body": "Always provide:\n\n✅ Complete .excalidraw JSON file\n📊 Summary of what was created\n📝 Element count\n💡 Instructions for opening/editing\n\nExample summary:\n\nCreated: user-workflow.excalidraw\nType: Flowchart\nElements: 7 rectangles, 6 arrows, 1 title text\nTotal: 14 elements\n\nTo view:\n1. Visit https://excalidraw.com\n2. Drag and drop user-workflow.excalidraw\n3. Or use File → Open in Excalidraw VS Code extension"
      },
      {
        "title": "Validation Checklist",
        "body": "Before delivering the diagram:\n\nAll elements have unique IDs\n Coordinates prevent overlapping\n Text is readable (font size 16+)\n All text elements use fontFamily: 5 (Excalifont)\n Arrows connect logically\n Colors follow consistent scheme\n File is valid JSON\n Element count is reasonable (<20 for clarity)"
      },
      {
        "title": "Icon Libraries (Optional Enhancement)",
        "body": "For specialized diagrams (e.g., AWS/GCP/Azure architecture diagrams), you can use pre-made icon libraries from Excalidraw. This provides professional, standardized icons instead of basic shapes."
      },
      {
        "title": "When User Requests Icons",
        "body": "If user asks for AWS/cloud architecture diagrams or mentions wanting to use specific icons:\n\nCheck if library exists: Look for libraries/<library-name>/reference.md\n\n\nIf library exists: Proceed to use icons (see AI Assistant Workflow below)\n\n\nIf library does NOT exist: Respond with setup instructions:\nTo use [AWS/GCP/Azure/etc.] architecture icons, please follow these steps:\n\n1. Visit https://libraries.excalidraw.com/\n2. Search for \"[AWS Architecture Icons/etc.]\" and download the .excalidrawlib file\n3. Create directory: skills/excalidraw-diagram-generator/libraries/[icon-set-name]/\n4. Place the downloaded file in that directory\n5. Run the splitter script:\n   python skills/excalidraw-diagram-generator/scripts/split-excalidraw-library.py skills/excalidraw-diagram-generator/libraries/[icon-set-name]/\n\nThis will split the library into individual icon files for efficient use.\nAfter setup is complete, I can create your diagram using the actual AWS/cloud icons.\n\nAlternatively, I can create the diagram now using simple shapes (rectangles, ellipses) \nwhich you can later replace with icons manually in Excalidraw."
      },
      {
        "title": "User Setup Instructions (Detailed)",
        "body": "Step 1: Create Library Directory\n\nmkdir -p skills/excalidraw-diagram-generator/libraries/aws-architecture-icons\n\nStep 2: Download Library\n\nVisit: https://libraries.excalidraw.com/\nSearch for your desired icon set (e.g., \"AWS Architecture Icons\")\nClick download to get the .excalidrawlib file\nExample categories (availability varies; confirm on the site):\n\nCloud service icons\nUI/Material icons\nFlowchart symbols\n\nStep 3: Place Library File\n\nRename the downloaded file to match the directory name (e.g., aws-architecture-icons.excalidrawlib)\nMove it to the directory created in Step 1\n\nStep 4: Run Splitter Script\n\npython skills/excalidraw-diagram-generator/scripts/split-excalidraw-library.py skills/excalidraw-diagram-generator/libraries/aws-architecture-icons/\n\nStep 5: Verify Setup\nAfter running the script, verify the following structure exists:\n\nskills/excalidraw-diagram-generator/libraries/aws-architecture-icons/\n  aws-architecture-icons.excalidrawlib  (original)\n  reference.md                          (generated - icon lookup table)\n  icons/                                (generated - individual icon files)\n    API-Gateway.json\n    CloudFront.json\n    EC2.json\n    Lambda.json\n    RDS.json\n    S3.json\n    ..."
      },
      {
        "title": "AI Assistant Workflow",
        "body": "When icon libraries are available in libraries/:\n\nRECOMMENDED APPROACH: Use Python Scripts (Efficient & Reliable)\n\nThe repository includes Python scripts that handle icon integration automatically:\n\nCreate base diagram structure:\n\nCreate .excalidraw file with basic layout (title, boxes, regions)\nThis establishes the canvas and overall structure\n\n\n\nAdd icons using Python script:\npython skills/excalidraw-diagram-generator/scripts/add-icon-to-diagram.py \\\n  <diagram-path> <icon-name> <x> <y> [--label \"Text\"] [--library-path PATH]\n\n\nEdit via .excalidraw.edit is enabled by default to avoid overwrite issues; pass --no-use-edit-suffix to disable.\n\nExamples:\n# Add EC2 icon at position (400, 300) with label\npython scripts/add-icon-to-diagram.py diagram.excalidraw EC2 400 300 --label \"Web Server\"\n\n# Add VPC icon at position (200, 150)\npython scripts/add-icon-to-diagram.py diagram.excalidraw VPC 200 150\n\n# Add icon from different library\npython scripts/add-icon-to-diagram.py diagram.excalidraw Compute-Engine 500 200 \\\n  --library-path libraries/gcp-icons --label \"API Server\"\n\n\n\nAdd connecting arrows:\npython skills/excalidraw-diagram-generator/scripts/add-arrow.py \\\n  <diagram-path> <from-x> <from-y> <to-x> <to-y> [--label \"Text\"] [--style solid|dashed|dotted] [--color HEX]\n\n\nEdit via .excalidraw.edit is enabled by default to avoid overwrite issues; pass --no-use-edit-suffix to disable.\n\nExamples:\n# Simple arrow from (300, 250) to (500, 300)\npython scripts/add-arrow.py diagram.excalidraw 300 250 500 300\n\n# Arrow with label\npython scripts/add-arrow.py diagram.excalidraw 300 250 500 300 --label \"HTTPS\"\n\n# Dashed arrow with custom color\npython scripts/add-arrow.py diagram.excalidraw 400 350 600 400 --style dashed --color \"#7950f2\"\n\n\n\nWorkflow summary:\n# Step 1: Create base diagram with title and structure\n# (Create .excalidraw file with initial elements)\n\n# Step 2: Add icons with labels\npython scripts/add-icon-to-diagram.py my-diagram.excalidraw \"Internet-gateway\" 200 150 --label \"Internet Gateway\"\npython scripts/add-icon-to-diagram.py my-diagram.excalidraw VPC 250 250\npython scripts/add-icon-to-diagram.py my-diagram.excalidraw ELB 350 300 --label \"Load Balancer\"\npython scripts/add-icon-to-diagram.py my-diagram.excalidraw EC2 450 350 --label \"EC2 Instance\"\npython scripts/add-icon-to-diagram.py my-diagram.excalidraw RDS 550 400 --label \"Database\"\n\n# Step 3: Add connecting arrows\npython scripts/add-arrow.py my-diagram.excalidraw 250 200 300 250  # Internet → VPC\npython scripts/add-arrow.py my-diagram.excalidraw 300 300 400 300  # VPC → ELB\npython scripts/add-arrow.py my-diagram.excalidraw 400 330 500 350  # ELB → EC2\npython scripts/add-arrow.py my-diagram.excalidraw 500 380 600 400  # EC2 → RDS\n\nBenefits of Python Script Approach:\n\n✅ No token consumption: Icon JSON data (200-1000 lines each) never enters AI context\n✅ Accurate transformations: Coordinate calculations handled deterministically\n✅ ID management: Automatic UUID generation prevents conflicts\n✅ Reliable: No risk of coordinate miscalculation or ID collision\n✅ Fast: Direct file manipulation, no parsing overhead\n✅ Reusable: Works with any Excalidraw library you provide\n\nALTERNATIVE: Manual Icon Integration (Not Recommended)\n\nOnly use this if Python scripts are unavailable:\n\nCheck for libraries:\nList directory: skills/excalidraw-diagram-generator/libraries/\nLook for subdirectories containing reference.md files\n\n\n\nRead reference.md:\nOpen: libraries/<library-name>/reference.md\nThis is lightweight (typically <300 lines) and lists all available icons\n\n\n\nFind relevant icons:\nSearch the reference.md table for icon names matching diagram needs\nExample: For AWS diagram with EC2, S3, Lambda → Find \"EC2\", \"S3\", \"Lambda\" in table\n\n\n\nLoad specific icon data (WARNING: Large files):\nRead ONLY the needed icon files:\n- libraries/aws-architecture-icons/icons/EC2.json (200-300 lines)\n- libraries/aws-architecture-icons/icons/S3.json (200-300 lines)\n- libraries/aws-architecture-icons/icons/Lambda.json (200-300 lines)\nNote: Each icon file is 200-1000 lines - this consumes significant tokens\n\n\n\nExtract and transform elements:\nEach icon JSON contains an \"elements\" array\nCalculate bounding box (min_x, min_y, max_x, max_y)\nApply offset to all x/y coordinates\nGenerate new unique IDs for all elements\nUpdate groupIds references\nCopy transformed elements into your diagram\n\n\n\nPosition icons and add connections:\nAdjust x/y coordinates to position icons correctly in the diagram\nUpdate IDs to ensure uniqueness across diagram\nAdd connecting arrows and labels as needed\n\nManual Integration Challenges:\n\n⚠️ High token consumption (200-1000 lines per icon × number of icons)\n⚠️ Complex coordinate transformation calculations\n⚠️ Risk of ID collision if not handled carefully\n⚠️ Time-consuming for diagrams with many icons"
      },
      {
        "title": "Example: Creating AWS Diagram with Icons",
        "body": "Request: \"Create an AWS architecture diagram with Internet Gateway, VPC, ELB, EC2, and RDS\"\n\nRecommended Workflow (using Python scripts):\nRequest: \"Create an AWS architecture diagram with Internet Gateway, VPC, ELB, EC2, and RDS\"\n\nRecommended Workflow (using Python scripts):\n\n# Step 1: Create base diagram file with title\n# Create my-aws-diagram.excalidraw with basic structure (title, etc.)\n\n# Step 2: Check icon availability\n# Read: libraries/aws-architecture-icons/reference.md\n# Confirm icons exist: Internet-gateway, VPC, ELB, EC2, RDS\n\n# Step 3: Add icons with Python script\npython scripts/add-icon-to-diagram.py my-aws-diagram.excalidraw \"Internet-gateway\" 150 100 --label \"Internet Gateway\"\npython scripts/add-icon-to-diagram.py my-aws-diagram.excalidraw VPC 200 200\npython scripts/add-icon-to-diagram.py my-aws-diagram.excalidraw ELB 350 250 --label \"Load Balancer\"\npython scripts/add-icon-to-diagram.py my-aws-diagram.excalidraw EC2 500 300 --label \"Web Server\"\npython scripts/add-icon-to-diagram.py my-aws-diagram.excalidraw RDS 650 350 --label \"Database\"\n\n# Step 4: Add connecting arrows\npython scripts/add-arrow.py my-aws-diagram.excalidraw 200 150 250 200  # Internet → VPC\npython scripts/add-arrow.py my-aws-diagram.excalidraw 265 230 350 250  # VPC → ELB\npython scripts/add-arrow.py my-aws-diagram.excalidraw 415 280 500 300  # ELB → EC2\npython scripts/add-arrow.py my-aws-diagram.excalidraw 565 330 650 350 --label \"SQL\" --style dashed\n\n# Result: Complete diagram with professional AWS icons, labels, and connections\n\nBenefits:\n\nNo manual coordinate calculation\nNo token consumption for icon data\nDeterministic, reliable results\nEasy to iterate and adjust positions\n\nAlternative Workflow (manual, if scripts unavailable):\n\nCheck: libraries/aws-architecture-icons/reference.md exists → Yes\nRead reference.md → Find entries for Internet-gateway, VPC, ELB, EC2, RDS\nLoad:\n\nicons/Internet-gateway.json (298 lines)\nicons/VPC.json (550 lines)\nicons/ELB.json (363 lines)\nicons/EC2.json (231 lines)\nicons/RDS.json (similar size)\nTotal: ~2000+ lines of JSON to process\n\n\nExtract elements from each JSON\nCalculate bounding boxes and offsets for each icon\nTransform all coordinates (x, y) for positioning\nGenerate unique IDs for all elements\nAdd arrows showing data flow\nAdd text labels\nGenerate final .excalidraw file\n\nChallenges with manual approach:\n\nHigh token consumption (~2000-5000 lines)\nComplex coordinate math\nRisk of ID conflicts"
      },
      {
        "title": "Supported Icon Libraries (Examples — verify availability)",
        "body": "This workflow works with any valid .excalidrawlib file you provide.\nExamples of library categories you may find on https://libraries.excalidraw.com/:\n\nCloud service icons\nKubernetes / infrastructure icons\nUI / Material icons\nFlowchart / diagram symbols\nNetwork diagram icons\n\n\nAvailability and naming can change; verify exact library names on the site before use."
      },
      {
        "title": "Fallback: No Icons Available",
        "body": "If no icon libraries are set up:\n\nCreate diagrams using basic shapes (rectangles, ellipses, arrows)\nUse color coding and text labels to distinguish components\nInform user they can add icons later or set up libraries for future diagrams\nThe diagram will still be functional and clear, just less visually polished"
      },
      {
        "title": "References",
        "body": "See bundled references for:\n\nreferences/excalidraw-schema.md - Complete Excalidraw JSON schema\nreferences/element-types.md - Detailed element type specifications\ntemplates/flowchart-template.json - Basic flowchart starter\ntemplates/relationship-template.json - Relationship diagram starter\ntemplates/mindmap-template.json - Mind map starter\nscripts/split-excalidraw-library.py - Tool to split .excalidrawlib files\nscripts/README.md - Documentation for library tools\nscripts/.gitignore - Prevents local Python artifacts from being committed"
      },
      {
        "title": "Limitations",
        "body": "Complex curves are simplified to straight/basic curved lines\nHand-drawn roughness is set to default (1)\nNo embedded images support in auto-generation\nMaximum recommended elements: 20 per diagram\nNo automatic collision detection (use spacing guidelines)"
      },
      {
        "title": "Future Enhancements",
        "body": "Potential improvements:\n\nAuto-layout optimization algorithms\nImport from Mermaid/PlantUML syntax\nTemplate library expansion\nInteractive editing after generation"
      }
    ],
    "body": "Excalidraw Diagram Generator\n\nA skill for generating Excalidraw-format diagrams from natural language descriptions. This skill helps create visual representations of processes, systems, relationships, and ideas without manual drawing.\n\nWhen to Use This Skill\n\nUse this skill when users request:\n\n\"Create a diagram showing...\"\n\"Make a flowchart for...\"\n\"Visualize the process of...\"\n\"Draw the system architecture of...\"\n\"Generate a mind map about...\"\n\"Create an Excalidraw file for...\"\n\"Show the relationship between...\"\n\"Diagram the workflow of...\"\n\nSupported diagram types:\n\n📊 Flowcharts: Sequential processes, workflows, decision trees\n🔗 Relationship Diagrams: Entity relationships, system components, dependencies\n🧠 Mind Maps: Concept hierarchies, brainstorming results, topic organization\n🏗️ Architecture Diagrams: System design, module interactions, data flow\n📈 Data Flow Diagrams (DFD): Data flow visualization, data transformation processes\n🏊 Business Flow (Swimlane): Cross-functional workflows, actor-based process flows\n📦 Class Diagrams: Object-oriented design, class structures and relationships\n🔄 Sequence Diagrams: Object interactions over time, message flows\n🗃️ ER Diagrams: Database entity relationships, data models\nPrerequisites\nClear description of what should be visualized\nIdentification of key entities, steps, or concepts\nUnderstanding of relationships or flow between elements\nStep-by-Step Workflow\nStep 1: Understand the Request\n\nAnalyze the user's description to determine:\n\nDiagram type (flowchart, relationship, mind map, architecture)\nKey elements (entities, steps, concepts)\nRelationships (flow, connections, hierarchy)\nComplexity (number of elements)\nStep 2: Choose the Appropriate Diagram Type\nUser Intent\tDiagram Type\tExample Keywords\nProcess flow, steps, procedures\tFlowchart\t\"workflow\", \"process\", \"steps\", \"procedure\"\nConnections, dependencies, associations\tRelationship Diagram\t\"relationship\", \"connections\", \"dependencies\", \"structure\"\nConcept hierarchy, brainstorming\tMind Map\t\"mind map\", \"concepts\", \"ideas\", \"breakdown\"\nSystem design, components\tArchitecture Diagram\t\"architecture\", \"system\", \"components\", \"modules\"\nData flow, transformation processes\tData Flow Diagram (DFD)\t\"data flow\", \"data processing\", \"data transformation\"\nCross-functional processes, actor responsibilities\tBusiness Flow (Swimlane)\t\"business process\", \"swimlane\", \"actors\", \"responsibilities\"\nObject-oriented design, class structures\tClass Diagram\t\"class\", \"inheritance\", \"OOP\", \"object model\"\nInteraction sequences, message flows\tSequence Diagram\t\"sequence\", \"interaction\", \"messages\", \"timeline\"\nDatabase design, entity relationships\tER Diagram\t\"database\", \"entity\", \"relationship\", \"data model\"\nStep 3: Extract Structured Information\n\nFor Flowcharts:\n\nList of sequential steps\nDecision points (if any)\nStart and end points\n\nFor Relationship Diagrams:\n\nEntities/nodes (name + optional description)\nRelationships between entities (from → to, with label)\n\nFor Mind Maps:\n\nCentral topic\nMain branches (3-6 recommended)\nSub-topics for each branch (optional)\n\nFor Data Flow Diagrams (DFD):\n\nData sources and destinations (external entities)\nProcesses (data transformations)\nData stores (databases, files)\nData flows (arrows showing data movement from left-to-right or from top-left to bottom-right)\nImportant: Do not represent process order, only data flow\n\nFor Business Flow (Swimlane):\n\nActors/roles (departments, systems, people) - displayed as header columns\nProcess lanes (vertical lanes under each actor)\nProcess boxes (activities within each lane)\nFlow arrows (connecting process boxes, including cross-lane handoffs)\n\nFor Class Diagrams:\n\nClasses with names\nAttributes with visibility (+, -, #)\nMethods with visibility and parameters\nRelationships: inheritance (solid line + white triangle), implementation (dashed line + white triangle), association (solid line), dependency (dashed line), aggregation (solid line + white diamond), composition (solid line + filled diamond)\nMultiplicity notations (1, 0..1, 1..*, *)\n\nFor Sequence Diagrams:\n\nObjects/actors (arranged horizontally at top)\nLifelines (vertical lines from each object)\nMessages (horizontal arrows between lifelines)\nSynchronous messages (solid arrow), asynchronous messages (dashed arrow)\nReturn values (dashed arrows)\nActivation boxes (rectangles on lifelines during execution)\nTime flows from top to bottom\n\nFor ER Diagrams:\n\nEntities (rectangles with entity names)\nAttributes (listed inside entities)\nPrimary keys (underlined or marked with PK)\nForeign keys (marked with FK)\nRelationships (lines connecting entities)\nCardinality: 1:1 (one-to-one), 1:N (one-to-many), N:M (many-to-many)\nJunction/associative entities for many-to-many relationships (dashed rectangles)\nStep 4: Generate the Excalidraw JSON\n\nCreate the .excalidraw file with appropriate elements:\n\nAvailable element types:\n\nrectangle: Boxes for entities, steps, concepts\nellipse: Alternative shapes for emphasis\ndiamond: Decision points\narrow: Directional connections\ntext: Labels and annotations\n\nKey properties to set:\n\nPosition: x, y coordinates\nSize: width, height\nStyle: strokeColor, backgroundColor, fillStyle\nFont: fontFamily: 5 (Excalifont - required for all text elements)\nText: Embedded text for labels\nConnections: points array for arrows\n\nImportant: All text elements must use fontFamily: 5 (Excalifont) for consistent visual appearance.\n\nStep 5: Format the Output\n\nStructure the complete Excalidraw file:\n\n{\n  \"type\": \"excalidraw\",\n  \"version\": 2,\n  \"source\": \"https://excalidraw.com\",\n  \"elements\": [\n    // Array of diagram elements\n  ],\n  \"appState\": {\n    \"viewBackgroundColor\": \"#ffffff\",\n    \"gridSize\": 20\n  },\n  \"files\": {}\n}\n\nStep 6: Save and Provide Instructions\nSave as <descriptive-name>.excalidraw\nInform user how to open:\nVisit https://excalidraw.com\nClick \"Open\" or drag-and-drop the file\nOr use Excalidraw VS Code extension\nBest Practices\nElement Count Guidelines\nDiagram Type\tRecommended Count\tMaximum\nFlowchart steps\t3-10\t15\nRelationship entities\t3-8\t12\nMind map branches\t4-6\t8\nMind map sub-topics per branch\t2-4\t6\nLayout Tips\nStart positions: Center important elements, use consistent spacing\nSpacing:\nHorizontal gap: 200-300px between elements\nVertical gap: 100-150px between rows\nColors: Use consistent color scheme\nPrimary elements: Light blue (#a5d8ff)\nSecondary elements: Light green (#b2f2bb)\nImportant/Central: Yellow (#ffd43b)\nAlerts/Warnings: Light red (#ffc9c9)\nText sizing: 16-24px for readability\nFont: Always use fontFamily: 5 (Excalifont) for all text elements\nArrow style: Use straight arrows for simple flows, curved for complex relationships\nComplexity Management\n\nIf user request has too many elements:\n\nSuggest breaking into multiple diagrams\nFocus on main elements first\nOffer to create detailed sub-diagrams\n\nExample response:\n\n\"Your request includes 15 components. For clarity, I recommend:\n1. High-level architecture diagram (6 main components)\n2. Detailed diagram for each subsystem\n\nWould you like me to start with the high-level view?\"\n\nExample Prompts and Responses\nExample 1: Simple Flowchart\n\nUser: \"Create a flowchart for user registration\"\n\nAgent generates:\n\nExtract steps: \"Enter email\" → \"Verify email\" → \"Set password\" → \"Complete\"\nCreate flowchart with 4 rectangles + 3 arrows\nSave as user-registration-flow.excalidraw\nExample 2: Relationship Diagram\n\nUser: \"Diagram the relationship between User, Post, and Comment entities\"\n\nAgent generates:\n\nEntities: User, Post, Comment\nRelationships: User → Post (\"creates\"), User → Comment (\"writes\"), Post → Comment (\"contains\")\nSave as user-content-relationships.excalidraw\nExample 3: Mind Map\n\nUser: \"Mind map about machine learning concepts\"\n\nAgent generates:\n\nCenter: \"Machine Learning\"\nBranches: Supervised Learning, Unsupervised Learning, Reinforcement Learning, Deep Learning\nSub-topics under each branch\nSave as machine-learning-mindmap.excalidraw\nTroubleshooting\nIssue\tSolution\nElements overlap\tIncrease spacing between coordinates\nText doesn't fit in boxes\tIncrease box width or reduce font size\nToo many elements\tBreak into multiple diagrams\nUnclear layout\tUse grid layout (rows/columns) or radial layout (mind maps)\nColors inconsistent\tDefine color palette upfront based on element types\nAdvanced Techniques\nGrid Layout (for Relationship Diagrams)\nconst columns = Math.ceil(Math.sqrt(entityCount));\nconst x = startX + (index % columns) * horizontalGap;\nconst y = startY + Math.floor(index / columns) * verticalGap;\n\nRadial Layout (for Mind Maps)\nconst angle = (2 * Math.PI * index) / branchCount;\nconst x = centerX + radius * Math.cos(angle);\nconst y = centerY + radius * Math.sin(angle);\n\nAuto-generated IDs\n\nUse timestamp + random string for unique IDs:\n\nconst id = Date.now().toString(36) + Math.random().toString(36).substr(2);\n\nOutput Format\n\nAlways provide:\n\n✅ Complete .excalidraw JSON file\n📊 Summary of what was created\n📝 Element count\n💡 Instructions for opening/editing\n\nExample summary:\n\nCreated: user-workflow.excalidraw\nType: Flowchart\nElements: 7 rectangles, 6 arrows, 1 title text\nTotal: 14 elements\n\nTo view:\n1. Visit https://excalidraw.com\n2. Drag and drop user-workflow.excalidraw\n3. Or use File → Open in Excalidraw VS Code extension\n\nValidation Checklist\n\nBefore delivering the diagram:\n\n All elements have unique IDs\n Coordinates prevent overlapping\n Text is readable (font size 16+)\n All text elements use fontFamily: 5 (Excalifont)\n Arrows connect logically\n Colors follow consistent scheme\n File is valid JSON\n Element count is reasonable (<20 for clarity)\nIcon Libraries (Optional Enhancement)\n\nFor specialized diagrams (e.g., AWS/GCP/Azure architecture diagrams), you can use pre-made icon libraries from Excalidraw. This provides professional, standardized icons instead of basic shapes.\n\nWhen User Requests Icons\n\nIf user asks for AWS/cloud architecture diagrams or mentions wanting to use specific icons:\n\nCheck if library exists: Look for libraries/<library-name>/reference.md\n\nIf library exists: Proceed to use icons (see AI Assistant Workflow below)\n\nIf library does NOT exist: Respond with setup instructions:\n\nTo use [AWS/GCP/Azure/etc.] architecture icons, please follow these steps:\n\n1. Visit https://libraries.excalidraw.com/\n2. Search for \"[AWS Architecture Icons/etc.]\" and download the .excalidrawlib file\n3. Create directory: skills/excalidraw-diagram-generator/libraries/[icon-set-name]/\n4. Place the downloaded file in that directory\n5. Run the splitter script:\n   python skills/excalidraw-diagram-generator/scripts/split-excalidraw-library.py skills/excalidraw-diagram-generator/libraries/[icon-set-name]/\n\nThis will split the library into individual icon files for efficient use.\nAfter setup is complete, I can create your diagram using the actual AWS/cloud icons.\n\nAlternatively, I can create the diagram now using simple shapes (rectangles, ellipses) \nwhich you can later replace with icons manually in Excalidraw.\n\nUser Setup Instructions (Detailed)\n\nStep 1: Create Library Directory\n\nmkdir -p skills/excalidraw-diagram-generator/libraries/aws-architecture-icons\n\n\nStep 2: Download Library\n\nVisit: https://libraries.excalidraw.com/\nSearch for your desired icon set (e.g., \"AWS Architecture Icons\")\nClick download to get the .excalidrawlib file\nExample categories (availability varies; confirm on the site):\nCloud service icons\nUI/Material icons\nFlowchart symbols\n\nStep 3: Place Library File\n\nRename the downloaded file to match the directory name (e.g., aws-architecture-icons.excalidrawlib)\nMove it to the directory created in Step 1\n\nStep 4: Run Splitter Script\n\npython skills/excalidraw-diagram-generator/scripts/split-excalidraw-library.py skills/excalidraw-diagram-generator/libraries/aws-architecture-icons/\n\n\nStep 5: Verify Setup After running the script, verify the following structure exists:\n\nskills/excalidraw-diagram-generator/libraries/aws-architecture-icons/\n  aws-architecture-icons.excalidrawlib  (original)\n  reference.md                          (generated - icon lookup table)\n  icons/                                (generated - individual icon files)\n    API-Gateway.json\n    CloudFront.json\n    EC2.json\n    Lambda.json\n    RDS.json\n    S3.json\n    ...\n\nAI Assistant Workflow\n\nWhen icon libraries are available in libraries/:\n\nRECOMMENDED APPROACH: Use Python Scripts (Efficient & Reliable)\n\nThe repository includes Python scripts that handle icon integration automatically:\n\nCreate base diagram structure:\n\nCreate .excalidraw file with basic layout (title, boxes, regions)\nThis establishes the canvas and overall structure\n\nAdd icons using Python script:\n\npython skills/excalidraw-diagram-generator/scripts/add-icon-to-diagram.py \\\n  <diagram-path> <icon-name> <x> <y> [--label \"Text\"] [--library-path PATH]\n\nEdit via .excalidraw.edit is enabled by default to avoid overwrite issues; pass --no-use-edit-suffix to disable.\n\nExamples:\n\n# Add EC2 icon at position (400, 300) with label\npython scripts/add-icon-to-diagram.py diagram.excalidraw EC2 400 300 --label \"Web Server\"\n\n# Add VPC icon at position (200, 150)\npython scripts/add-icon-to-diagram.py diagram.excalidraw VPC 200 150\n\n# Add icon from different library\npython scripts/add-icon-to-diagram.py diagram.excalidraw Compute-Engine 500 200 \\\n  --library-path libraries/gcp-icons --label \"API Server\"\n\n\nAdd connecting arrows:\n\npython skills/excalidraw-diagram-generator/scripts/add-arrow.py \\\n  <diagram-path> <from-x> <from-y> <to-x> <to-y> [--label \"Text\"] [--style solid|dashed|dotted] [--color HEX]\n\nEdit via .excalidraw.edit is enabled by default to avoid overwrite issues; pass --no-use-edit-suffix to disable.\n\nExamples:\n\n# Simple arrow from (300, 250) to (500, 300)\npython scripts/add-arrow.py diagram.excalidraw 300 250 500 300\n\n# Arrow with label\npython scripts/add-arrow.py diagram.excalidraw 300 250 500 300 --label \"HTTPS\"\n\n# Dashed arrow with custom color\npython scripts/add-arrow.py diagram.excalidraw 400 350 600 400 --style dashed --color \"#7950f2\"\n\n\nWorkflow summary:\n\n# Step 1: Create base diagram with title and structure\n# (Create .excalidraw file with initial elements)\n\n# Step 2: Add icons with labels\npython scripts/add-icon-to-diagram.py my-diagram.excalidraw \"Internet-gateway\" 200 150 --label \"Internet Gateway\"\npython scripts/add-icon-to-diagram.py my-diagram.excalidraw VPC 250 250\npython scripts/add-icon-to-diagram.py my-diagram.excalidraw ELB 350 300 --label \"Load Balancer\"\npython scripts/add-icon-to-diagram.py my-diagram.excalidraw EC2 450 350 --label \"EC2 Instance\"\npython scripts/add-icon-to-diagram.py my-diagram.excalidraw RDS 550 400 --label \"Database\"\n\n# Step 3: Add connecting arrows\npython scripts/add-arrow.py my-diagram.excalidraw 250 200 300 250  # Internet → VPC\npython scripts/add-arrow.py my-diagram.excalidraw 300 300 400 300  # VPC → ELB\npython scripts/add-arrow.py my-diagram.excalidraw 400 330 500 350  # ELB → EC2\npython scripts/add-arrow.py my-diagram.excalidraw 500 380 600 400  # EC2 → RDS\n\n\nBenefits of Python Script Approach:\n\n✅ No token consumption: Icon JSON data (200-1000 lines each) never enters AI context\n✅ Accurate transformations: Coordinate calculations handled deterministically\n✅ ID management: Automatic UUID generation prevents conflicts\n✅ Reliable: No risk of coordinate miscalculation or ID collision\n✅ Fast: Direct file manipulation, no parsing overhead\n✅ Reusable: Works with any Excalidraw library you provide\n\nALTERNATIVE: Manual Icon Integration (Not Recommended)\n\nOnly use this if Python scripts are unavailable:\n\nCheck for libraries:\n\nList directory: skills/excalidraw-diagram-generator/libraries/\nLook for subdirectories containing reference.md files\n\n\nRead reference.md:\n\nOpen: libraries/<library-name>/reference.md\nThis is lightweight (typically <300 lines) and lists all available icons\n\n\nFind relevant icons:\n\nSearch the reference.md table for icon names matching diagram needs\nExample: For AWS diagram with EC2, S3, Lambda → Find \"EC2\", \"S3\", \"Lambda\" in table\n\n\nLoad specific icon data (WARNING: Large files):\n\nRead ONLY the needed icon files:\n- libraries/aws-architecture-icons/icons/EC2.json (200-300 lines)\n- libraries/aws-architecture-icons/icons/S3.json (200-300 lines)\n- libraries/aws-architecture-icons/icons/Lambda.json (200-300 lines)\nNote: Each icon file is 200-1000 lines - this consumes significant tokens\n\n\nExtract and transform elements:\n\nEach icon JSON contains an \"elements\" array\nCalculate bounding box (min_x, min_y, max_x, max_y)\nApply offset to all x/y coordinates\nGenerate new unique IDs for all elements\nUpdate groupIds references\nCopy transformed elements into your diagram\n\n\nPosition icons and add connections:\n\nAdjust x/y coordinates to position icons correctly in the diagram\nUpdate IDs to ensure uniqueness across diagram\nAdd connecting arrows and labels as needed\n\n\nManual Integration Challenges:\n\n⚠️ High token consumption (200-1000 lines per icon × number of icons)\n⚠️ Complex coordinate transformation calculations\n⚠️ Risk of ID collision if not handled carefully\n⚠️ Time-consuming for diagrams with many icons\nExample: Creating AWS Diagram with Icons\n\nRequest: \"Create an AWS architecture diagram with Internet Gateway, VPC, ELB, EC2, and RDS\"\n\nRecommended Workflow (using Python scripts): Request: \"Create an AWS architecture diagram with Internet Gateway, VPC, ELB, EC2, and RDS\"\n\nRecommended Workflow (using Python scripts):\n\n# Step 1: Create base diagram file with title\n# Create my-aws-diagram.excalidraw with basic structure (title, etc.)\n\n# Step 2: Check icon availability\n# Read: libraries/aws-architecture-icons/reference.md\n# Confirm icons exist: Internet-gateway, VPC, ELB, EC2, RDS\n\n# Step 3: Add icons with Python script\npython scripts/add-icon-to-diagram.py my-aws-diagram.excalidraw \"Internet-gateway\" 150 100 --label \"Internet Gateway\"\npython scripts/add-icon-to-diagram.py my-aws-diagram.excalidraw VPC 200 200\npython scripts/add-icon-to-diagram.py my-aws-diagram.excalidraw ELB 350 250 --label \"Load Balancer\"\npython scripts/add-icon-to-diagram.py my-aws-diagram.excalidraw EC2 500 300 --label \"Web Server\"\npython scripts/add-icon-to-diagram.py my-aws-diagram.excalidraw RDS 650 350 --label \"Database\"\n\n# Step 4: Add connecting arrows\npython scripts/add-arrow.py my-aws-diagram.excalidraw 200 150 250 200  # Internet → VPC\npython scripts/add-arrow.py my-aws-diagram.excalidraw 265 230 350 250  # VPC → ELB\npython scripts/add-arrow.py my-aws-diagram.excalidraw 415 280 500 300  # ELB → EC2\npython scripts/add-arrow.py my-aws-diagram.excalidraw 565 330 650 350 --label \"SQL\" --style dashed\n\n# Result: Complete diagram with professional AWS icons, labels, and connections\n\n\nBenefits:\n\nNo manual coordinate calculation\nNo token consumption for icon data\nDeterministic, reliable results\nEasy to iterate and adjust positions\n\nAlternative Workflow (manual, if scripts unavailable):\n\nCheck: libraries/aws-architecture-icons/reference.md exists → Yes\nRead reference.md → Find entries for Internet-gateway, VPC, ELB, EC2, RDS\nLoad:\nicons/Internet-gateway.json (298 lines)\nicons/VPC.json (550 lines)\nicons/ELB.json (363 lines)\nicons/EC2.json (231 lines)\nicons/RDS.json (similar size) Total: ~2000+ lines of JSON to process\nExtract elements from each JSON\nCalculate bounding boxes and offsets for each icon\nTransform all coordinates (x, y) for positioning\nGenerate unique IDs for all elements\nAdd arrows showing data flow\nAdd text labels\nGenerate final .excalidraw file\n\nChallenges with manual approach:\n\nHigh token consumption (~2000-5000 lines)\nComplex coordinate math\nRisk of ID conflicts\nSupported Icon Libraries (Examples — verify availability)\nThis workflow works with any valid .excalidrawlib file you provide.\nExamples of library categories you may find on https://libraries.excalidraw.com/:\nCloud service icons\nKubernetes / infrastructure icons\nUI / Material icons\nFlowchart / diagram symbols\nNetwork diagram icons\nAvailability and naming can change; verify exact library names on the site before use.\nFallback: No Icons Available\n\nIf no icon libraries are set up:\n\nCreate diagrams using basic shapes (rectangles, ellipses, arrows)\nUse color coding and text labels to distinguish components\nInform user they can add icons later or set up libraries for future diagrams\nThe diagram will still be functional and clear, just less visually polished\nReferences\n\nSee bundled references for:\n\nreferences/excalidraw-schema.md - Complete Excalidraw JSON schema\nreferences/element-types.md - Detailed element type specifications\ntemplates/flowchart-template.json - Basic flowchart starter\ntemplates/relationship-template.json - Relationship diagram starter\ntemplates/mindmap-template.json - Mind map starter\nscripts/split-excalidraw-library.py - Tool to split .excalidrawlib files\nscripts/README.md - Documentation for library tools\nscripts/.gitignore - Prevents local Python artifacts from being committed\nLimitations\nComplex curves are simplified to straight/basic curved lines\nHand-drawn roughness is set to default (1)\nNo embedded images support in auto-generation\nMaximum recommended elements: 20 per diagram\nNo automatic collision detection (use spacing guidelines)\nFuture Enhancements\n\nPotential improvements:\n\nAuto-layout optimization algorithms\nImport from Mermaid/PlantUML syntax\nTemplate library expansion\nInteractive editing after generation"
  },
  "trust": {
    "sourceLabel": "tencent",
    "provenanceUrl": "https://clawhub.ai/elihuvillaraus/excalidraw-diagram-generator",
    "publisherUrl": "https://clawhub.ai/elihuvillaraus/excalidraw-diagram-generator",
    "owner": "elihuvillaraus",
    "version": "1.0.0",
    "license": null,
    "verificationStatus": "Indexed source record"
  },
  "links": {
    "detailUrl": "https://openagent3.xyz/skills/excalidraw-diagram-generator",
    "downloadUrl": "https://openagent3.xyz/downloads/excalidraw-diagram-generator",
    "agentUrl": "https://openagent3.xyz/skills/excalidraw-diagram-generator/agent",
    "manifestUrl": "https://openagent3.xyz/skills/excalidraw-diagram-generator/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/excalidraw-diagram-generator/agent.md"
  }
}