dAIgrammatic Thumbnail
Frontend

dAIgrammatic

Inspiration

As architects, developers, and product managers, we often find ourselves wrestling with diagram tools -- juggling elements, tweaking layouts, and fighting syntax. We envisioned a world where you simply describe your system in plain English and get a polished, accurate diagram in seconds.

That’s how dAIgrammatic was born: to let ideas flow without the friction of manual diagramming.

What It Does

dAIgrammatic converts natural‑language descriptions into structured, styled diagrams.

You type a prompt like:
“Show me a user authentication flow with JWT and database validation.”
The AI pipeline:
- Enriches your prompt
- Extracts entities and relationships
- Recommends a suitable diagram type
- Computes a clear layout
- Applies consistent, attractive styling
Output formats include:
- Interactive canvas rendering
- Downloadable SVG, PNG and JSON!

How We Built It

Backend: FastAPI + Python 3.11 + asyncio

Pydantic models enforce type safety (nodes, edges, metadata).
Modular AI pipeline:
- Data Enricher
- Entity & Relationship Extractors
- Type Recommender
- Layout & Styling
Google Gemini (via google-generativeai SDK) wrapped in our ConversableAgent for streaming LLM calls.

Frontend: React + TypeScript + Vite

Interactive diagram canvas using React Flow.
Context-driven UI settings with localStorage fallback.
Lightning-fast bundling and hot reload via Vite.

Integration:

Dockerized services.
CORS-enabled FastAPI.
Axios for HTTP communication.
WebSockets for live previews.

Challenges We Ran Into

AI Hallucinations:
Gemini would invent nonexistent relationships. We had to do a lot of prompt engineering, just confirm the output matches the payload type.
Library Selection:
After trying different libraries (such as Mermaid), we landed on React Flow for its flexibility and custom styling.
End-to-End Integration:
First time wiring a full-stack AI system. Faced CORS, serialization, and streaming challenges connecting FastAPI to a React canvas.

Accomplishments We're Proud Of

Polished React-based frontend with drag/drop editing and theme support.
Beautiful, interactive frontend, with chat storage and much more.
Use of agentic systems to build a system within less than 24 hours.

What We Learned

Prompt engineering is as important as code when building generative AI tools
Choosing the right visualization library early saves days of refactoring
FastAPI scales beautifully with proper async patterns and error handling
Full-stack AI systems demand:
- Strong data contracts (via Pydantic)
- Clear flow of structured information between services