# Diagrams your agent can draw

Let your app or agent produce editable hand-drawn diagrams by writing Excalidraw scene JSON, and show them with the open-source editor component.

## Parts

- Data: [Excalidraw](https://agentgid.com/resources/excalidraw/agent.md): A free in-browser whiteboard for quick hand-drawn-style diagrams and sketches, with live collaboration and export to PNG, SVG or its JSON scene format; the editor is also an MIT React component.
- Editor component: [Excalidraw](https://agentgid.com/tools/excalidraw-excalidraw/agent.md)
- Or text-to-diagram: [Mermaid](https://agentgid.com/tools/mermaid/agent.md)

## Steps

1. Have the model output a list of shapes and arrows, then convert it to Excalidraw elements.
2. Render the scene with the Excalidraw React component so people can keep editing it.
3. Export PNG or SVG for sharing.

## Watch out

- Embed the editor through the npm package; the excalidraw.com terms forbid framing the site itself.

Human page: https://agentgid.com/resources/ideas/diagrams-your-agent-can-draw/