How it Works

Three steps to clarity

Go from idea to polished diagram in under a minute.

Describe

Type what you want to visualize in plain language. "Show me a microservices architecture with auth, API gateway, and three services."

Generate

AI creates your diagram with smart layout, proper connections, and clean styling. Ready in seconds.

Customize

Drag, resize, restyle. Add cards, change colors, tweak connections. Make it yours.

4 Element Types

From simple cards to rich prototypes

Every diagram is built from four flexible element types. Mix and match them freely.

User Service

backend

API Gateway

routing

Database

postgres

Auth Module

jwt

Sessions

redis

Message Queue

rabbitmq

Notifications

emailpush

Cards

Structured Cards

Titled blocks with descriptions, colors, and connections. Perfect for architectures and flows.

┌──────────────┐ │ ◉ MyApp │ │ │ │ ┌──────────┐ │ │ │ Email │ │ │ └──────────┘ │ │ ┌──────────┐ │ │ │ Password │ │ │ └──────────┘ │ │ [ Log In ] │ │ forgot pwd? │ └──────────────┘

┌──────────────┐ │ ☰ Home 🔔 │ ├──────────────┤ │ ┌──────────┐ │ │ │ ▓▓▓▓▓▓▓▓ │ │ │ │ Title... │ │ │ └──────────┘ │ │ ┌──────────┐ │ │ │ ▓▓▓▓▓▓▓▓ │ │ │ │ Title... │ │ │ └──────────┘ │ │ 🏠 🔍 👤 │ └──────────────┘

┌──────┐ │ 🏠 │ │ 🔍 │ │ ♡ │ │ 👤 │ └──────┘

┌────────────────┐ │ ← Settings │ ├────────────────┤ │ Profile ▸ │ │ Theme ▸ │ │ Language ▸ │ │ Logout ▸ │ └────────────────┘

ASCII

ASCII Diagrams

Prototype app screens in plain text. Perfect for wireframing and quick UI sketches without any design tools.

auth

Dashboard

main

Settings Panel

config

Error Modal

⚠

modal

HTML

HTML Prototypes

Embed live HTML/CSS inside cards. Build interactive UI mockups right on the canvas.

Portfolio Site

mysite.com

live

API Docs

docs.api.io

embed

Live Map

maps.app

interactive

iFrame

Embedded Websites

Embed live websites directly into your diagram. Show real pages, docs, or apps right on the canvas.

It's just JSON

No proprietary formats. No vendor lock-in. Your diagrams are plain text that any tool can read, AI can generate, and you can version control.

Copy to ChatGPT or Claude — get a diagram back

Store in Git alongside your code

Automate with any programming language

Download Template

{ "elements": [ { "id": "auth", "type": "card", "title": "User Login", "color": "blue", "tags": ["auth"] }, { "id": "check", "type": "condition", "title": "Valid?" }, { "id": "dashboard", "type": "card", "title": "Dashboard", "color": "green" } ], "connections": [ { "from": "auth", "to": "check" }, { "from": "check", "to": "dashboard", "label": "yes" } ] }

Built Different

Why diagrams.love

MCP Integration

Connect your AI assistant via MCP protocol. Claude, Cursor, or any MCP client can create diagrams programmatically.

JSON Export & Import

Every diagram is a clean JSON file. Export, import, version-control with git. Zero vendor lock-in.

Version History

Every change is saved. Roll back to any version, compare diffs, restore deleted cards. Your work is never lost.

Share & Collaborate

Share diagrams with a link. Anyone can view without signing up. Embed in docs, wikis, or presentations.

Works Everywhere

Pure web app -- no installs, no plugins. Works on desktop, tablet, even phone. Open a link and start diagramming.

Your Data Stays Yours

We take privacy seriously. Your diagrams and data are protected and never shared with third parties. You're always in control.

FAQ

Is it really free?

Yes! The Free plan includes unlimited diagrams with full editing, sharing, and JSON export & import. No credit card needed. You also get $3 one-time AI credits to try AI features.

Can I use it without paying anything?

Yes. The editor itself is fully functional for free — create cards, connect them, drag and rearrange visually. Export and import your diagrams as JSON anytime. AI-powered features use credits included with your plan.

Can I export and import diagrams?

Every diagram is a JSON file. Export, import, version-control with git, or feed to any AI. No vendor lock-in, ever.

What is the MCP Server?

MCP (Model Context Protocol) lets AI assistants like Claude create and edit diagrams directly. Install our npm package and your AI can build diagrams for you.

Can I cancel anytime?

Yes. Cancel anytime, keep Pro features until the end of your billing period. Your diagrams are never deleted.