Mermaid Diagrams Starter Kit

A Next.js starter for AI-powered diagram generation. Includes a prompt-to-Mermaid pipeline via the Vercel AI Gateway, a diagram library with slug-based routing, a full settings panel, and dark mode. Fork it, swap the models, extend the data layer.

Try It Out
Architecture
How a prompt becomes a rendered diagram

Your Prompt

Natural language input

API Route

/api/generate-diagram

Vercel AI Gateway

Zero-config routing

AI Model

anthropic/claude-opus-4.6

Mermaid.js

Client-side render

SDK

Vercel AI SDK v6

Gateway

Vercel AI Gateway

Default Model

anthropic/claude-opus-4.6

Temperature

0.3 (deterministic)

Available Models
Configurable in Settings. Routed via Vercel AI Gateway -- no separate API keys needed.

Claude Opus 4.6

premium

Most capable model. Best for complex diagram generation with nuanced understanding.

Gemini 3 Flash

lite

Fast and efficient. Great for quick diagram generation.

Supported Diagram Types
The system prompt instructs the AI to pick the best type based on your description
Flowchart
Sequence Diagram
ER Diagram
Class Diagram
State Diagram
Gantt Chart
Mind Map
Pie Chart
Git Graph

What You Get

AI Diagram Generator

A prompt-to-diagram generator powered by the Vercel AI Gateway. Enter a natural language description, pick a model, and get valid Mermaid syntax back. Includes request logging and syntax preview.

Open Generator
Diagram Library

A pre-built collection of example diagrams stored as data files. Each diagram has a slug-based detail page with full Mermaid rendering. Add new examples by dropping a file into /data.

Browse Diagrams
AI Settings Panel

Full configuration UI for the AI pipeline: model selector with tier badges, temperature slider with guidance ranges, editable system prompt, and a visual architecture flow showing how requests are routed.

Open Settings
Mermaid Renderer

A reusable MermaidDiagram client component that initializes Mermaid.js, handles errors, and re-renders when the chart prop changes. Strips code fences automatically.

See It Render
Animated Border

A subtle spark animation component that wraps any card. Uses Tailwind keyframes defined in tailwind.config.ts with pointer-events-none so child elements remain interactive.

See on Diagrammer
Dark Mode

System-aware theme toggle using next-themes and Radix UI. Persists preference and updates all shadcn/ui design tokens. Toggle is accessible from the header on every page.

Try Theme Toggle
Tech Stack
Actual dependencies from package.json
Next.js 15
React 19
TypeScript
Tailwind CSS
shadcn/ui
Radix UI
Vercel AI SDK
Mermaid.js
Lucide Icons
next-themes
Zod

Explore

Diagrammer

Generate a diagram from a prompt using AI

Example Diagrams

Browse pre-built ERD, workflow, and network diagrams

Settings

Configure AI model, temperature, and system prompt

Project Structure
Key files and what they do
app/page.tsxHomepage / docs overview (this page)
app/diagrammer/page.tsxAI-powered diagram generator
app/api/generate-diagram/route.tsAPI route using Vercel AI SDK generateText
app/list/page.tsxDiagram library grid
app/list/[slug]/page.tsxIndividual diagram detail page
app/settings/page.tsxAI configuration and app preferences
lib/ai-config.tsShared AI config: models, prompt, temperature, diagram types
data/*.tsExample diagram data files
components/MermaidDiagram.tsxClient-side Mermaid renderer component
components/AnimatedBorder.tsxSpark animation wrapper component
components/Header.tsxApp header with navigation and theme toggle