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/excalidraw@0.18.0/dist/dev/index.css" />
<script>
window.EXCALIDRAW_ASSET_PATH = "https://esm.sh/@excalidraw/excalidraw@0.18.0/dist/prod/";
</script>
<script type="importmap">
{
"imports": {
"react": "https://esm.sh/react@19.0.0",
"react/jsx-runtime": "https://esm.sh/react@19.0.0/jsx-runtime",
"react-dom": "https://esm.sh/react-dom@19.0.0",
"react-dom/client": "https://esm.sh/react-dom@19.0.0/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/react@19.0.0";
import { createRoot } from "https://esm.sh/react-dom@19.0.0/client";
import * as ExcalidrawLib from "https://esm.sh/@excalidraw/excalidraw@0.18.0/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" }
]