README.md

metadata

title: Excalidraw Generator
emoji: 🖍️
colorFrom: indigo
colorTo: yellow
sdk: gradio
sdk_version: 6.16.0
app_file: app.py
pinned: false
license: apache-2.0
short_description: get a real editable .excalidraw file.
tags:
  - track:wood
  - sponsor:openai
  - sponsor:modal
  - achievement:offgrid
  - achievement:welltuned

🖍️ Excalidraw Diagram Generator

Upgrade your presentations and be promoted.

Okay — we can't literally promise the promotion. But we can promise this: the slide that actually gets you noticed is never the one with seven bullet points. It's the one with a clean diagram that makes a hard idea look obvious in three seconds.

The problem is that making that diagram is a chore. You open a drawing tool, you drag rectangles, you fight with arrows that won't stay attached, you nudge boxes by one pixel for twenty minutes, and the meeting starts in ten. So you give up and paste another bullet list.

This tool removes the chore. You type what you want in plain English:

"Left-to-right architecture for a food delivery app: customer app, API gateway, order service, payment service, Redis cache, Postgres, delivery worker."

…and you get back a real, fully editable .excalidraw file — laid out, wired up, and ready to drop into your deck. Don't like where a box sits? Drag it. The arrows follow.

---

When this is the right tool

• The night-before-the-demo deck — turn your architecture into a diagram while you still have time to sleep.
• Explaining a system to a new teammate — a flowchart they can edit beats a screenshot they can only squint at.
• Design docs & RFCs — sequence diagrams and ER diagrams without leaving your train of thought to go fight a canvas.
• Whiteboarding sessions — generate a first draft in seconds, then refine it live in Excalidraw like you drew it yourself.

It draws 8 kinds of diagram: system architecture, flowchart, ER diagram, sequence diagram, data pipeline, timeline, mind map, and mobile wireframe.

---

NOTE: First request may take ~40–70s: the GPU sleeps when nobody's using it (so it costs nothing when idle) and takes a moment to wake up. After that it's quick.

Why it's different from "just ask ChatGPT"

A general LLM, asked for an Excalidraw file, has to hand-write hundreds of lines of strict JSON — element IDs, x/y coordinates, arrow bindings, version nonces — and one slip produces a file that won't open. That's a lot of ways to fail at something a computer should never get wrong.

So we split the job in two:

your prompt
   │
   ▼
  fine-tuned model      →   writes a tiny, semantic diagram plan (a compact DSL)
   │                          "these boxes, these connections, this kind of node"
   ▼
  validator             →   checks the plan; retries once if it's off
   │
   ▼
  deterministic engine  →   computes every coordinate, arrow, and color — perfectly
   │
   ▼
  .excalidraw file      →   live preview + one-click download

The model only decides meaning (what connects to what). Code handles everything a computer can get exactly right (layout, geometry, file format). That's why a small, specialized model can be more reliable here than a giant general one — it never has to be correct about format, only about ideas. A ~12-line plan becomes a ~340-line valid Excalidraw file, every time.

Layout itself is done by Graphviz for the graph-shaped diagrams and purpose-built layouts for the rest, so boxes don't overlap and arrows route cleanly.

---

🚀 How to use it

1. Describe your diagram in the box — be specific about the pieces and how they relate.
2. Hit Generate.
3. Preview it live in the embedded canvas.
4. Download .excalidraw and open it at excalidraw.com or the desktop app — it's yours to edit, restyle, and present.

---

🔗 Links

• Live Space: https://huggingface.co/spaces/build-small-hackathon/excali-draw
• Source code: https://github.com/ItshMoh/Excali
• Demo Video: https://drive.google.com/drive/folders/1HzYcNPMHJa-1C_aB8V1GE4H-JtIdHG7X?usp=sharing

---

Under the hood

Piece	What it does
Base model	Qwen2.5-Coder-7B-Instruct, fine-tuned with QLoRA on a curated diagram-DSL dataset
DSL	A compact, semantic JSON the model emits instead of raw Excalidraw — small, easy to validate, hard to break
Validator	Structural + semantic checks (unique IDs, edges resolve, valid shapes per diagram type); one retry on failure
Converter	Deterministic DSL → Excalidraw: Graphviz layout for graphs, hand-built layouts for the rest; bidirectionally-bound arrows so they stay attached when you drag
Serving	Generation runs on a scale-to-zero Modal GPU; validation, conversion, and preview run on the free Space CPU

The reliability bet is deliberate: the win isn't "prettier than GPT on every drawing," it's valid, editable files on the first try, cheaply, and fast.

---

_{Built as a focused fine-tuning project. Diagrams are generated — give the output a glance before you put it in front of the board. 😉}