Settings

Configure how Mermaid Diagrams generates and displays your diagrams.

AI Architecture

How diagram generation works under the hood

Your Prompt

Natural language description

Vercel AI Gateway

Routes to AI provider

AI Model

anthropic/claude-opus-4.6

Mermaid Renderer

Renders diagram in browser

SDK

Vercel AI SDK v6 (`generateText`)

Gateway

Vercel AI Gateway (zero-config routing)

API Route

/api/generate-diagram (POST)

Rendering

Mermaid.js v11 (client-side)

Model Selection

Choose the AI model for diagram generation. Models are accessed via the Vercel AI Gateway, so no separate API keys are needed.

Claude Opus 4.6

premium

Anthropic

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

anthropic/claude-opus-4.6

Gemini 3 Flash

lite

Google

Fast and efficient. Great for quick diagram generation.

google/gemini-3-flash

Temperature

Controls randomness in the output. Lower values produce more deterministic, consistent diagrams. Higher values introduce more creative variation.

Precise0.3Creative

0.0 - 0.3

Best for diagrams

0.4 - 0.6

Balanced

0.7 - 1.0

More creative

System Prompt

The system prompt instructs the AI model on how to generate diagrams. Edit this to customize the AI's behavior, enforce specific diagram styles, or add constraints.

You are an expert Mermaid diagram generator. Your ONLY job is to produce valid Mermaid syntax based on the user's description.

RULES:
1. Respond with ONLY valid Mermaid diagram syntax. No explanation, no markdown fences, no commentary.
2. Do NOT wrap your response in ```mermaid or ``` code blocks.
3. Choose the most appropriate diagram type based on the user's description:
   - flowchart TD/LR for processes, workflows, decision trees
   - sequenceDiagram for interactions between systems/people
   - erDiagram for database schemas and entity relationships
   - classDiagram for object-oriented structures
   - stateDiagram-v2 for state machines
   - gantt for timelines and project schedules
   - mindmap for brainstorming and hierarchical ideas
   - pie for proportional data
   - gitgraph for version control flows
4. Use descriptive labels for nodes and edges.
5. Keep diagrams clean and readable - avoid excessive nesting.
6. Use proper Mermaid syntax for the chosen diagram type.
7. If the request is ambiguous, default to a flowchart.

IMPORTANT: Output ONLY the raw Mermaid syntax. Nothing else.

1107 characters

Supported Diagram Types

The AI can generate any of these Mermaid diagram types based on your prompt. Just describe what you need.

Flowchart

Process flows, decision trees, workflows

Sequence Diagram

Interactions between systems or people

ER Diagram

Database schemas and entity relationships

Class Diagram

Object-oriented structures

State Diagram

State machines and transitions

Gantt Chart

Timelines and project schedules

Mind Map

Brainstorming and hierarchical ideas

Pie Chart

Proportional data visualization

Git Graph

Version control flows

App Preferences

General application settings

Theme

Light

Dark

System

Default Diagram Type

Enable auto-save

Auto-save interval (seconds)

Settings

Theme

Default Diagram Type

Export Format