Excalidraw diagrams

Produce an editable .excalidraw scene and a verified PNG or SVG preview. Choose the diagram type and audience first; distinguish backend architecture from business workflow. Use source-backed components and labeled connections for existing systems. Inspect supplied reference pixels, then match their visual structure without importing unrelated services or symbols.

Author the scene first

Prefer an existing authorized Excalidraw editor, project dependency or supported integration. Consult the installed version's element creation documentation and restore utilities. Hand-authored JSON must be a valid native scene with type: excalidraw, supported version, elements, appState and files. Preserve existing IDs, images, links and layout when editing; do not replace an unrelated scene.

Use consistent spacing, legible text, deliberate actor/service boundaries, arrow direction and labeled data or API calls. Place persistent storage distinctly, with failure paths in a secondary lane. Use a limited palette and a legend for semantic colors. Avoid fitting long endpoint strings into small boxes. Original generic examples belong in reusable guidance; private project facts belong only in that project's requested artifact.

Export the same scene

Use the official installed editor export or exportToSvg, exportToCanvas or exportToBlob from @excalidraw/excalidraw. Restore/validate native elements as required by the installed version and pass the scene's images/files and intended background/export options. Wait for needed fonts and assets; browser availability alone does not establish a working renderer.

An official SVG export rasterized by an existing browser is an acceptable PNG route; record both stages. File-based isolated headless rendering can avoid a server. Do not relax browser security, expose a local service or connect private scenes to a hosted editor merely to obtain an export. New package/runtime installation, MCP setup and external upload require the appropriate task-specific authorization; adding this skill grants none of them.

If official export is unavailable, preserve the scene and report the smallest missing prerequisite. A disclosed preview generated by another drawing tool may help, but label it as a fallback and state that native Excalidraw rendering is unverified. Never describe an Excalidraw-looking bitmap as an official export. Do not hold a useful requested preview while doing unrelated work.

Validate and deliver

Check JSON parsing, unique element IDs, valid types, finite coordinates and dimensions, image references and intended text. Then inspect the actual export at normal reading size and zoomed: missing fonts/assets, clipping, overlaps, crossing labels, arrow endpoints, readability and source/status accuracy. Structural validation alone does not prove layout quality. Correct the scene and export again, keeping preview and source synchronized.

Preserve source plus preview in the authorized artifact directory. Report filenames, dimensions, renderer/package version, actual export route, source snapshot and any limitations. Example: "Draw the order-processing backend with API calls, PostgreSQL jobs and worker acknowledgements; deliver editable source plus a PNG." No specific provider or database is implied unless evidence supports it.

License and dependency boundary

This skill is original truestack MIT-licensed workflow text; no engine, upstream skill, font or artwork is vendored. Excalidraw is MIT licensed; copied substantial upstream material must retain its copyright and license notice. The official MCP project is an optional separately configured route, not an installed dependency. Consult its own current license and setup before use. Unrecognized community packages are not implicit substitutes. Existing editor tooling or a compatible JavaScript/browser export environment is needed for rendering; inert scene authoring requires neither credentials nor a hosted service. Official links checked 2026-09-30; verify version-specific contracts at use time.