feat(excalidraw): improve diagram quality with canvas measurement, validation, and conventions

Replace the charCount * fontSize * 0.55 text sizing heuristic with canvas-based measurement (graceful fallback when native deps unavailable). Add validate.mjs for automated spatial checks (text overflow, arrow-text collisions, element overlap). Update element format reference with sizing rules, label guidelines, and arrow routing conventions. Add verification step to SKILL.md workflow. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-26 17:19:14 -06:00
parent 36ae861046
commit f524c1b9d8
8 changed files with 824 additions and 0 deletions
--- a/plugins/compound-engineering/skills/excalidraw-png-export/scripts/export.html
+++ b/plugins/compound-engineering/skills/excalidraw-png-export/scripts/export.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+    body { margin: 0; background: white; }
+    #root { width: 900px; height: 400px; }
+  </style>
+  <script>
+    window.EXCALIDRAW_ASSET_PATH = "https://esm.sh/@excalidraw/excalidraw/dist/prod/";
+  </script>
+</head>
+<body>
+  <div id="root"></div>
+  <script type="importmap">
+    {
+      "imports": {
+        "react": "https://esm.sh/react@18",
+        "react-dom": "https://esm.sh/react-dom@18",
+        "react-dom/client": "https://esm.sh/react-dom@18/client",
+        "react/jsx-runtime": "https://esm.sh/react@18/jsx-runtime",
+        "@excalidraw/excalidraw": "https://esm.sh/@excalidraw/excalidraw@0.18.0?external=react,react-dom"
+      }
+    }
+  </script>
+  <script type="module">
+    import { exportToBlob } from "@excalidraw/excalidraw";
+
+    async function run() {
+      const resp = await fetch("./diagram.excalidraw");
+      const data = await resp.json();
+
+      const validTypes = ["rectangle","ellipse","diamond","text","arrow","line","freedraw","image","frame"];
+      const elements = data.elements.filter(el => validTypes.includes(el.type));
+
+      const blob = await exportToBlob({
+        elements,
+        appState: {
+          exportBackground: true,
+          viewBackgroundColor: data.appState?.viewBackgroundColor || "#ffffff",
+          exportWithDarkMode: data.appState?.exportWithDarkMode || false,
+        },
+        files: data.files || {},
+        getDimensions: (w, h) => ({ width: w * 2, height: h * 2, scale: 2 }),
+      });
+
+      const reader = new FileReader();
+      reader.onload = () => {
+        window.__PNG_DATA__ = reader.result;
+        document.title = "READY";
+      };
+      reader.readAsDataURL(blob);
+    }
+
+    run().catch(e => {
+      console.error("EXPORT ERROR:", e);
+      document.title = "ERROR:" + e.message;
+    });
+  </script>
+</body>
+</html>