# How to Vibe Code Your Own Gleek.io (and Stop Paying for It)

> Create diagrams without touching your mouse

- Site: https://gleek.io
- Category: Developer Tools
- Verdict: **Solid side project** (68/100 vibecodeable)
- Estimated effort: 2-3 weeks of focused building

## Verdict

Build a personal subset for yourself, but keep paying if you rely on the Confluence and Azure DevOps plugins.

The text-to-syntax parser and auto-layout engine are challenging engineering hurdles. While you can leverage LLMs to bypass building a custom lexer from scratch and rely on canvas libraries like React Flow or ELK.js for layout routing, handling edge collision and custom grammars robustly takes serious iteration. Since paid plans are inexpensive, building this is strictly a fun weekend-to-weeks project for syntax-parsing enthusiasts.

### What you can't replicate

- Official marketplace integrations for Atlassian Confluence and Azure DevOps
- The exact shorthand mental model and community familiarity of Gleek syntax

## What it does

Text-to-diagram tool that turns shorthand descriptions into flowcharts, ERDs, UML class diagrams, sequence diagrams, state machines, and Gantt charts.

### Core features

- Custom grammar parser and lexer for text-to-syntax conversion
- Abstract Syntax Tree (AST) generation for multiple diagram paradigms
- Automatic layout engine for nodes and orthogonal/bezier edge routing
- Interactive diagram canvas with pan, zoom, and selection
- AI chat prompt assistant for natural language diagram generation
- Multiple export formats (SVG, PNG, PDF)

## The business

### Pricing

- Free: €0/mo
- Premium Monthly: €6.95/mo
- Premium per Activity: €10.99/mo

Founded 2019.
Team size: Small boutique team.

## The hard parts

- Writing a deterministic parser that handles multi-paradigm shorthand syntax without syntax ambiguity
- Implementing robust auto-layout algorithms that prevent edge crossings and node overlaps cleanly
- Connecting canvas render nodes to abstract graph representations in real-time

## How to vibe code Gleek.io

### Prerequisites

- Node.js (Free): Runtime environment for building and executing the web application stack.
- GitHub (Free): Source code repository and deployment connection.
- Anthropic API Key (Pay-as-you-go): Required for the AI chat assistant feature that generates diagram syntax from text prompts.

### Recommended AI tools

- Claude Code: Best-in-class terminal coding agent for scaffolding the parser, AST compiler, and canvas UI end-to-end.
- Cursor: Ideal IDE fork for iterative frontend canvas tuning and UI component styling.

### Stack

- Frontend: Next.js with Tailwind CSS and React Flow / ELK.js for graph rendering
- Backend: Next.js API routes handling syntax compilation and AI requests
- Database: Turso (SQLite at the edge) for user diagrams and local IndexedDB fallback
- Auth: better-auth for self-hosted secure credential management
- Payments: None (personal use clone)
- Other: Anthropic API for AI-assisted diagram generation, Zod for schema validation of syntax tokens

### Hosting

- Cloudflare (Full-stack frontend and API hosting on edge infrastructure): $0/mo

### Build guide

1. **Project Scaffolding and Core Layout** — Initialize a Next.js project with Tailwind CSS and install React Flow for the interactive canvas workspace.

```
Create a new Next.js 16 project configured with TypeScript, Tailwind CSS, and standard App Router layout. Install @xyflow/react (React Flow) and lucide-react. Create a split-pane layout with a code editor textarea on the left and an interactive React Flow canvas on the right. Ensure full viewport height with a dark theme tailored for developers. Verify the build compiles without errors.
```

2. **Grammar Parser & Lexer Implementation** — Build a robust text-to-syntax parser that extracts nodes, relationships, and shapes from shorthand text blocks into an abstract syntax tree.

```
Implement a text parsing module in TypeScript that interprets shorthand diagram descriptions (supporting flowchart nodes like 'A -> B: label' and entity relationship links). Write tokenizer and parser functions using regular expressions or a lightweight parser combinator. Output a structured AST containing nodes and edges ready for graph rendering. Add unit tests for various syntax variations including flowcharts and ERDs.
```

3. **AST to Graph Conversion & Auto-Layout Engine** — Map the parsed AST objects onto React Flow nodes and edges, integrating ELK.js or Dagre for automated orthogonal node positioning.

```
Create an AST-to-ReactFlow transformer utility that takes the parsed nodes and edges and computes automatic layout coordinates using elkjs or dagre. Ensure shapes, boxes, and connecting lines render correctly with minimal node overlapping. Handle layout recalculation efficiently whenever the text editor content changes with a debounced update loop.
```

4. **AI Chat Diagram Generator Integration** — Connect an AI backend endpoint using the Anthropic API to convert natural language prompts into valid diagram syntax.

```
Build a Next.js API route that accepts natural language prompts, communicates with the Anthropic API using Claude Sonnet with strict system prompts enforcing correct Gleek shorthand syntax, and returns generated code. Add a collapsible AI chat drawer UI on the frontend that inserts generated syntax directly into the text editor upon user confirmation.
```

5. **Export Engine & Local Persistence** — Implement client-side export capabilities for high-resolution PNG, SVG, and PDF alongside local IndexedDB file storage.

```
Implement client-side export utilities using html-to-image or React Flow native export methods to allow downloading diagrams as SVG, PNG, and PDF files. Add a local file management drawer backed by browser IndexedDB so users can create, save, switch between, and delete multiple diagram files locally without requiring a remote database.
```

### Cost vs paying

**Starting costs (one-time):**

- AI coding credits: $20
- Total: ~$20 one-time

**Ongoing costs (monthly):**

- Cloudflare Edge Hosting: $0
- Anthropic API usage: ~$2-5
- Total: ~$3-5/mo

- Paying for the SaaS instead: €6.95/mo
- Build time: 25-35 hours
- AI tool credits: $20 one-time (Claude Pro)
- Break-even: Never (built for learning and personal use)

## Sources

- [Gleek.io Homepage](https://gleek.io)
- [Gleek Pricing Documentation](https://gleek.io/pricing)