Files
claude-engineering-plugin/plugins/compound-engineering/skills/excalidraw-png-export/scripts/export.html
John Lamb a7b15298e0
Some checks failed
CI / pr-title (push) Has been cancelled
CI / test (push) Has been cancelled
Release PR / release-pr (push) Has been cancelled
Release PR / publish-cli (push) Has been cancelled
Merge step (b): carry in local-only files at original paths
Brings 47 local-only files from backup-local-main into the merge-upstream
branch at their pre-rename paths. Subsequent steps will rename these to
the ce-* convention and port shared-file merges.

Includes:
- Custom skills: john-voice, jira-ticket-writer, hugo-blog-publisher,
  weekly-shipped, proof-push, ship-it, story-lens, sync-confluence,
  excalidraw-png-export, python-package-writer, fastapi-style,
  upstream-merge
- Custom agents: design-conformance-reviewer, tiangolo-fastapi-reviewer,
  zip-agent-validator, python-package-readme-writer, lint
- Custom commands: essay-edit, essay-outline, pr-comments-to-todos,
  resolve_todo_parallel, workflows/{plan,review,work}
- Local mods to ce-review/SKILL.md + review-output-template.md (will be
  ported to ce-code-review in a later step)

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-04-24 12:40:27 -05:00

62 lines
1.8 KiB
HTML

<!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>