excalidraw-artist

•

205 months ago

Create beautiful, elegant Excalidraw diagrams based on user intent. Use when user asks to draw, visualize, diagram, sketch, illustrate concepts, create flowcharts, architecture diagrams, mind maps, process flows, or any visual representation. Triggers on keywords like "draw", "diagram", "visualize", "sketch", "flowchart", "architecture", "mind map", "illustrate".

Quick Install

npxskills add sanyuan0704/agent-skills--skill excalidraw-artist

Instructions

Excalidraw Artist

Create elegant, high-quality Excalidraw diagrams and automatically preview in browser.

⚠️ CRITICAL: NO Crossing Lines

Lines and arrows must NEVER cross each other. This is the #1 rule for professional diagrams.

Before generating any diagram:

Plan node positions to avoid any line intersections
Use consistent flow direction (left-to-right OR top-to-bottom)
Rearrange nodes if needed to eliminate crossings
Use vertical/horizontal alignment to keep connections clean

Workflow

Analyze user intent - Understand what they want to visualize
Choose diagram type - Flowchart, architecture, mind map, comparison, etc.
Design element layout - Plan positions, sizes, colors for visual harmony
Generate HTML - Create diagram using the template
Auto-open browser - Preview immediately

Element Reference

See references/elements.md for:

Element types and properties
Color palette recommendations
Layout guidelines

See references/diagram-patterns.md for:

Common diagram patterns
Recommended dimensions
Spacing guidelines

Implementation

Generate the HTML file

Write an HTML file with this structure, replacing the elementsData array with designed elements:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Excalidraw Preview</title>
  <link rel="stylesheet" href="https://esm.sh/@excalidraw/[email protected]/dist/dev/index.css" />
  <script>
    window.EXCALIDRAW_ASSET_PATH = "https://esm.sh/@excalidraw/[email protected]/dist/prod/";
  </script>
  <script type="importmap">
    {
      "imports": {
        "react": "https://esm.sh/[email protected]",
        "react/jsx-runtime": "https://esm.sh/[email protected]/jsx-runtime",
        "react-dom": "https://esm.sh/[email protected]",
        "react-dom/client": "https://esm.sh/[email protected]/client"
      }
    }
  </script>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    html, body, #app { height: 100%; width: 100%; }
  </style>
</head>
<body>
  <div id="app"></div>
  <script type="module">
    import React from "https://esm.sh/[email protected]";
    import { createRoot } from "https://esm.sh/[email protected]/client";
    import * as ExcalidrawLib from "https://esm.sh/@excalidraw/[email protected]/dist/dev/index.js?external=react,react-dom";

    const { Excalidraw, convertToExcalidrawElements } = ExcalidrawLib;

    const elementsData = [
      // INSERT DESIGNED ELEMENTS HERE
    ];

    const elements = convertToExcalidrawElements(elementsData);

    function App() {
      return React.createElement(
        "div",
        { style: { height: "100%", width: "100%" } },
        React.createElement(Excalidraw, {
          initialData: {
            elements: elements,
            appState: { viewBackgroundColor: "#ffffff" },
            scrollToContent: true,
          },
          langCode: "en",
        })
      );
    }

    const root = createRoot(document.getElementById("app"));
    root.render(React.createElement(App));
  </script>
</body>
</html>

Open in browser

After writing the HTML file, run:

open <path-to-file>.html

Design Principles

Visual balance - Distribute elements evenly, maintain consistent spacing
Color harmony - Use complementary colors, limit palette to 3-4 colors
Clear hierarchy - Size and color indicate importance
Readable text - Appropriate font sizes, good contrast
Logical flow - Arrows and lines guide the eye naturally

Quick Examples

Simple Flowchart

[
  { type: "rectangle", x: 100, y: 100, width: 160, height: 60, backgroundColor: "#a5d8ff", strokeColor: "#1971c2" },
  { type: "text", x: 180, y: 130, text: "Start", fontSize: 20 },
  { type: "arrow", x: 260, y: 130, width: 60, height: 0, strokeColor: "#495057" },
  { type: "rectangle", x: 320, y: 100, width: 160, height: 60, backgroundColor: "#b2f2bb", strokeColor: "#2f9e44" },
  { type: "text", x: 400, y: 130, text: "Process", fontSize: 20 },
  { type: "arrow", x: 480, y: 130, width: 60, height: 0, strokeColor: "#495057" },
  { type: "rectangle", x: 540, y: 100, width: 160, height: 60, backgroundColor: "#ffec99", strokeColor: "#f08c00" },
  { type: "text", x: 620, y: 130, text: "End", fontSize: 20 }
]

Architecture Diagram

[
  { type: "rectangle", x: 100, y: 50, width: 200, height: 80, backgroundColor: "#d0bfff", strokeColor: "#7048e8" },
  { type: "text", x: 200, y: 90, text: "Frontend", fontSize: 24, textAlign: "center" },
  { type: "arrow", x: 200, y: 130, width: 0, height: 40, strokeColor: "#495057" },
  { type: "rectangle", x: 100, y: 170, width: 200, height: 80, backgroundColor: "#a5d8ff", strokeColor: "#1971c2" },
  { type: "text", x: 200, y: 210, text: "Backend", fontSize: 24, textAlign: "center" },
  { type: "arrow", x: 200, y: 250, width: 0, height: 40, strokeColor: "#495057" },
  { type: "rectangle", x: 100, y: 290, width: 200, height: 80, backgroundColor: "#b2f2bb", strokeColor: "#2f9e44" },
  { type: "text", x: 200, y: 330, text: "Database", fontSize: 24, textAlign: "center" }
]

Loading…

Related Skills

skill-creator

Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.

367,360