Excalidraw — Whiteboard
An Excalidraw canvas embedded inside a maud-ui shell. The maud-ui toolbar wraps Excalidraw's imperative API — the excalidrawAPI ref drives export, reset, and shape-insertion. Canvas theme follows the gallery's data-theme attribute.
sketches/architecture.excalidraw
Loading Excalidraw from esm.sh…
Last export
// Click PNG or SVG to see export metadata here.
Usage — mount Excalidraw inside a maud-ui page
// In your <head>:
// <link rel="stylesheet" href="https://esm.sh/@excalidraw/excalidraw@0.17.6/index.css">
// <script type="importmap">
// { "imports": {
// "react": "https://esm.sh/react@18.3.1",
// "react-dom/client": "https://esm.sh/react-dom@18.3.1/client",
// "@excalidraw/excalidraw":"https://esm.sh/@excalidraw/excalidraw@0.17.6?deps=react@18.3.1"
// }}
// </script>
//
// Your maud template renders an empty mount point:
html! {
div class="mui-integration mui-integration--excalidraw" {
div class="mui-integration__header" { /* toolbar */ }
div class="mui-integration__editor" id="excal-root" {}
}
}
// Then a <script type="module"> mounts Excalidraw:
// import { Excalidraw, exportToSvg } from '@excalidraw/excalidraw';
// const root = createRoot(document.getElementById('excal-root'));
// root.render(React.createElement(Excalidraw, {
// theme: document.documentElement.dataset.theme || 'dark',
// excalidrawAPI: (api) => window.__excal = api,
// }));