excalidraw

Excalidraw

Excalidraw produces clean hand-drawn-style diagrams. Emit a .excalidraw JSON file the user can open in the Excalidraw editor (or excalidraw CLI), and optionally export to SVG.

When to use

• "make an excalidraw / sketch / whiteboard of …"
• Concept maps, org charts, rough architecture sketches where a polished SVG is overkill.
• The user explicitly asks for hand-drawn style.

How to produce

1. Compose the scene as .excalidraw JSON: elements (rectangle, ellipse, diamond, arrow, line, text) with x/y/width/height, strokeColor, backgroundColor, fontSize, and bound labels.
2. Connect shapes with arrows that reference startBinding/endBinding to element IDs so they stay attached.
3. Save to <name>.excalidraw and state the path.
4. If a static export is wanted, convert to SVG/PNG (excalidraw CLI or the npm @excalidraw/utils package via bunx).

Minimal element template

{
  "type": "excalidraw",
  "version": 2,
  "source": "cybara",
  "elements": [
    {
      "type": "rectangle", "x": 100, "y": 100, "width": 160, "height": 60,
      "strokeColor": "#1e1e1e", "backgroundColor": "transparent",
      "id": "node1", "seed": 1, "roughness": 1, "strokeWidth": 2
    },
    {
      "type": "text", "x": 130, "y": 122, "width": 100, "height": 20,
      "text": "Service A", "fontSize": 16, "id": "t1", "seed": 2
    }
  ],
  "appState": { "viewBackgroundColor": "#ffffff" }
}

Keep element IDs unique; use seed values to keep rendering deterministic. Prefer grouping with a consistent palette.