# How to Vibe Code Your Own Mermaid Chart (and Stop Paying for It)

> Sea-riously good diagrams.

- Site: https://mermaidchart.com
- Category: SaaS / Developer Tools
- Verdict: **Solid side project** (65/100 vibecodeable)
- Estimated effort: 2-3 weeks part-time

## Verdict

Build a personal subset with code and AI rendering, but skip the complex visual canvas co-editing and enterprise suite plugins.

Replicating the core loop—typing Mermaid code or prompting an LLM to generate syntax and rendering it live via Mermaid.js—is straightforward. However, building the two-way sync canvas where moving a visual node rewrites the underlying Markdown AST without breaking parser state is a brutal engineering trap. For a personal-use clone, abandon the visual drag-and-drop canvas and focus on a split-pane text editor with live rendering and AI generation.

### What you can't replicate

- The massive open-source network effect of the core Mermaid.js ecosystem
- Production-grade two-way visual-to-code synchronization on an infinite canvas
- Enterprise plugins for Confluence, Jira, and Microsoft Office

## What it does

Cloud-based diagramming and visual collaboration platform built around Mermaid.js, offering text-to-diagram generation, AI prompt assistance, a visual canvas editor, and ecosystem plugins.

### Core features

- Markdown-style text-to-diagram rendering using Mermaid.js
- AI prompt diagram generation ('vibe diagramming') and repair
- Interactive visual canvas editor with two-way code sync
- Diagram templates and project organization
- Export capabilities (SVG, PNG, PDF)
- User authentication and personal workspace management

## The business

### Pricing

- Basic: Free — Up to 3 diagrams, limited AI capabilities, and basic team/project creation.
- Plus: $10/mo — Billed annually; unlimited diagrams, limitless size, and 300 AI credits per year.
- Premium: $20/mo — Billed annually; 2,000 AI credits per year, unlimited free viewer seats, advanced security.

### Funding

$21M raised.
- Seed
Investors: Firebrand Ventures, Open Core Ventures, Irregular Expressions

Founded 2020.
Team size: 10-50 employees.

## The hard parts

- Two-way synchronization between visual node-drag actions and complex textual AST syntax parsing
- Real-time multiplayer co-editing across a graphical canvas using CRDTs or operational transforms
- Deep enterprise ecosystem integrations (Confluence, Jira, Office add-ins, and local IDE extensions)

## How to vibe code Mermaid Chart

### Prerequisites

- Node.js (free): Required for running the Next.js full-stack framework and managing dependencies.
- GitHub (free): Source control and deployment pipeline integration.
- Anthropic API Key (pay-as-you-go): Powers the natural language to Mermaid syntax generation feature.

### Recommended AI tools

- Claude Code: Best-in-class terminal agent for scaffolding the Next.js architecture, setting up database schemas, and integrating the Mermaid rendering engine.
- Cursor: Ideal for fine-tuning the split-pane editor UI and debugging client-side rendering loops.

### Stack

- Frontend: Next.js with Tailwind CSS and Lucide icons
- Backend: Next.js API Routes / Server Actions
- Database: Turso (SQLite at the edge for storing diagrams and user state)
- Auth: better-auth
- Payments: None (personal use clone)
- Other: Mermaid.js core rendering library, Vercel AI SDK for streaming LLM text-to-diagram generation, PostHog for analytics and error tracking

### Hosting

- Cloudflare (Hosting the Next.js frontend and edge API routes): $0/mo

### Build guide

1. **Project Scaffolding and Database Setup** — Initialize the Next.js project with Tailwind CSS, configure Turso SQLite via Drizzle ORM, and set up better-auth for personal user authentication.

```
Scaffold a new Next.js project using TypeScript and Tailwind CSS. Install better-auth and configure a SQLite database connection using Turso and Drizzle ORM. Create database schemas for users, projects, and diagrams (storing title, mermaid_code text, and timestamps). Establish a clean dashboard layout with sidebar navigation for managing diagram folders.
```

2. **Split-Pane Editor and Mermaid.js Integration** — Build the core diagramming interface featuring a Markdown-style code editor on one side and a live-updating Mermaid.js rendering canvas on the other.

```
Build a diagram editor page with a resizable split-pane layout. On the left, place a code editor (using CodeMirror or Monaco) configured for Markdown/Mermaid syntax. On the right, embed the Mermaid.js rendering engine to parse and display the diagram live as the user types. Handle syntax error boundaries gracefully so the app does not crash on incomplete user code while typing.
```

3. **AI 'Vibe Diagramming' Integration** — Implement AI-powered diagram generation using the Vercel AI SDK and Anthropic API to convert plain text prompts or meeting notes into valid Mermaid syntax.

```
Integrate the Vercel AI SDK into the editor interface. Create an AI prompt modal and backend action that takes user text (e.g., product requirements or system notes), sends it to Claude Sonnet with strict system prompts instructing it to output *only* valid Mermaid.js syntax inside a code block, and streams the result directly into the code editor.
```

4. **Diagram Management and Persistence** — Add functionality to save, load, rename, delete, and export diagrams as SVG or PNG directly from the browser UI.

```
Implement full CRUD operations for diagrams connected to the Turso database. Add auto-saving with debounce on editor change. Include export controls that leverage Mermaid's rendering API to export the current diagram view as a high-resolution SVG or PNG file download.
```

5. **Polish, Error Handling, and Deployment** — Refine the UI styling, add keyboard shortcuts, handle edge cases in diagram rendering, and deploy the application to Cloudflare.

```
Polish the UI with clean dark/light theme support using Tailwind CSS. Add robust error catch blocks around Mermaid rendering calls to display friendly inline syntax warnings. Configure deployment settings for Cloudflare Pages/Workers, verify environment variables for Turso and Anthropic, and ensure zero build errors.
```

### Cost vs paying

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

- Custom domain (optional): $12/yr
- Total: ~$12 one-time

**Ongoing costs (monthly):**

- Anthropic API usage for AI diagram generation: ~$3-5/mo
- Total: ~$3-5/mo

- Paying for the SaaS instead: $10 - $20/mo
- Build time: 25-35 hours
- AI tool credits: ~$20 (Claude Pro / API credits)
- Break-even: Never (built for personal learning and control)

## Sources

- [Mermaid Chart Official Website](https://mermaidchart.com)