What it produces
Design once — every one of these falls out of the same project file.
Two studios, one engine
Both share the same SVG canvas, the same arrows and science stencils, the same interactivity layer, and the same export pipeline. Auto-generate a flashcard deck from any diagram's hotspots — draw once, get a deck free.
🧬 Diagram builder
Draw, label, then make parts live — hover, click-reveal, step sequences, quiz.
- Freehand, shapes, reaction ⇌ / resonance ↔ / curved electron-pushing arrows
- Rich text + LaTeX · science stencils (bio / chem / physics / math)
- Hotspots (hover → auto-tap on touch), click-reveal, animated step sequences, quiz mode
🃏 Flashcard studio
Front / back cards — import any file, resize, arrows, type anything, decks + study mode.
- Front / back + flip · sizes + high-DPI (2× / 3× / true 300 dpi print)
- Import any file — PNG/JPG/SVG/GIF/WebP/HEIC/PDF-page/clipboard/URL → embed → resize (aspect-lock), crop, rotate, opacity, borders, layers
- Arrows / callouts / highlighter / pen · cloze hide-reveal · templates · study mode + spaced repetition
Architecture — one record, many outputs
Everything reads and writes a single project.json record. That's why a diagram and a flashcard can share tools, why exports never drift from what's on the canvas, and why you can reopen and re-edit forever.
↺ Reopen + edit — the project.json loads straight back into the Engine anytime; nothing is ever flattened or lost.
Data model
| Object | Holds |
|---|---|
| Project | id · title · science · canvas · elements[] · hotspots[] · steps[] · sources[] |
| Element | id (UUID) · type · geometry · style · layer · groupId |
| Hotspot | targetUUID · trigger · content {text, img, formula} · reveal |
| Step | order · actions[] {type, target, params} |
| Card / Deck | side (front/back) · elements[] · hotspots[] · tags · study reviews[] |
Full feature set
A · Create (canvas)
- Freehand pen, shapes, smart connectors
- Chemistry arrows: reaction ⇌, resonance ↔, curved electron-pushing
- Rich text + LaTeX; image import + trace-over
- Science stencils; grid, snap, smart guides
B · Engine
- SVG model, UUID per element
- Layers (hide / lock / reorder), group, align, transform
- Unified undo/redo, autosave, shortcuts
- Infinite zoom / pan
C · Interactivity
- Hotspots — hover, auto-tap on touch
- Click-reveal; deterministic step sequences
- Animation timeline; quiz mode
- Data-binding for live values
D · Flashcard studio
- Front / back / flip; sizes + high-DPI
- Type anything + LaTeX; import any file, embed, resize, crop, rotate, mask, opacity, layers
- Arrows, callouts, highlighter, pen; hotspots + cloze
- Templates; deck management; study mode + spaced repetition
E · Export pipeline
- GIF (from steps); self-contained interactive HTML
- PNG / JPG / SVG at 2× / 3× / 300 dpi
- Copy-to-clipboard; PDF cut-sheet
- Anki .apkg / Quizlet / CSV; image ZIP; optional MP4/WebM
F · Study & libraries
- Auto-flashcards from hotspots
- Analytics / scores; spaced repetition
- Per-diagram sources field
- Full stencil library across sciences
Resilience — every subsystem degrades to a guaranteed floor
→ reads "if unavailable, fall to." The last (green) chip is the floor that always works, so no
browser, file type, or missing feature can ever produce a dead end.
Why it can't drift: one deterministic step state machine
A single model drives both live interactive playback and frame capture — play at a fixed frame-rate, snapshot each step. The interactive widget and the GIF literally can't diverge, and it's why the GIF cascade can fall all the way to "serialize the SVG at time t" with zero extra code.
Why fallbacks are planned, not panic: startup capability profile
On load it feature-detects Shadow DOM, IndexedDB, MediaRecorder codecs, WASM, File System Access, and reduced-motion, then picks the best path up front. Each fallback is a chosen route, not an error handler firing mid-export.
Build roadmap
| Phase | Ships |
|---|---|
| P1 · MVP | Canvas + shapes / text / arrows · image import & resize · hover hotspots · flashcard front/back · PNG / copy / GIF export · .json save |
| P2 | Step sequences + animations · interactive HTML export · stencil library · PDF cut-sheet |
| P3 | Quiz + cloze · deck management · Anki / Quizlet export · analytics · spaced repetition |
| P4 | Browser extension · AI-assist (image → auto-labels) · cloud share |
Quality bar (100/100)
60 fps
Smooth on drawing, playback, and export.
Offline, no login
Runs from a single file; nothing to sign into.
Desktop + touch
Every tool works with a mouse or a finger.
High-DPI, non-destructive
Keeps originals; only resizes on export.
Accessible
Alt-text becomes hotspot content; keyboard paths.
Portable
Self-contained .json reused across exams.
Tech stack
How it fits this study hub
- Export interactive widgets straight into these BIOL / NEUR / ASTR pages — a live cell, a labeled action potential, a hover-reveal Krebs cycle.
- Export GIFs for printable study guides and the cheat sheets.
- Export decks into the flashcard / mastery tools here, or into Anki / Quizlet.
- One .json reused across exams — build the diagram once, re-skin it per unit.
The builder is live ✓
Launch DiagramLab → The Phase-1 builder works right now: draw shapes, arrows and text; import or paste any image and resize it with corner handles; snap-align to other elements and the card center with live guides; then export or copy a high-res PNG (2× / 3× / 300 dpi), save & reopen your project as .json, and build multi-card front / back decks. Everything runs offline in one file. Hotspots, step animations, GIF and Anki export come next.