Getting Started with AI Diagram

What Is AI Diagram?

AI Diagram is a web-based platform that lets you create professional diagrams by describing them in plain text. Instead of manually dragging shapes and drawing arrows, you write a description like "A user authenticates through an API gateway that connects to an auth service and a database," and AI Diagram generates the visual layout for you.

The platform includes five tools: a Diagram Editor for flowcharts and architecture diagrams, a Circuit Simulator for digital logic, an AI Agent Editor for workflow automation, a CV Builder for resumes, and Notemap for mind mapping. This guide focuses on getting started with the core Diagram Editor.

Creating Your Account

Visit the homepage and click "Get Started" or "Sign Up." You can create an account using your email address or sign in with Google or GitHub. The free tier gives you access to the diagram editor with a limited number of AI generations per month.

Once signed in, you will land on your dashboard where you can see all your saved diagrams, create new ones, and access the different tools.

Your First AI-Generated Diagram

Step 1: Open the Diagram Editor

From your dashboard, click "New Diagram" or navigate to the Diagram Editor. You will see a blank canvas with a toolbar on the side and an AI prompt input area.

Step 2: Write Your Description

In the AI prompt area, describe the diagram you want. Be specific about the components and their relationships. Here are some example prompts to get you started:

"Create a flowchart for user registration: user fills out form, system validates input, if valid create account and send welcome email, if invalid show error message"
"Architecture diagram with a React frontend, Node.js API server, PostgreSQL database, and Redis cache. The frontend talks to the API, which connects to both the database and cache."
"Mind map about project management with branches for planning, execution, monitoring, and closure. Each branch should have 3-4 subtopics."

Step 3: Generate and Review

Click the generate button and wait a few seconds. The AI will parse your description, identify components and relationships, and produce a clean diagram with automatic layout. Review the result — it should capture the structure you described with properly connected elements.

Step 4: Edit and Refine

The generated diagram is fully editable. You can drag nodes to reposition them, double-click labels to rename them, add new shapes from the toolbar, or delete elements you do not need. You can also re-run the AI with a modified prompt to regenerate specific parts.

Step 5: Save and Export

Your diagram is automatically saved to your account. You can also export it as PNG, SVG, or JSON for use in presentations, documentation, or other tools. The export options are available in the toolbar menu.

Tips for Better AI Prompts

Be explicit about connections — Instead of "frontend and backend," say "frontend sends REST requests to the backend API."
Name your components — "PostgreSQL database" produces better results than just "database."
Specify the diagram type — Start with "Create a flowchart" or "Architecture diagram showing" to guide the AI toward the right format.
Use grouping language — "The auth service and user service are both in the backend cluster" tells the AI to group these visually.
Iterate — If the first result is not perfect, refine your prompt and regenerate. Each iteration gets you closer to what you need.

Exploring Other Tools

Once you are comfortable with the Diagram Editor, explore the other tools in the platform:

Circuit Simulator — Build and test digital logic circuits with interactive gates and real-time simulation.
AI Agent Editor — Design workflow automations with a visual node-based editor.
CV Builder — Create professional resumes with a visual editor and export to PDF.
Notemap — Generate AI-powered mind maps for brainstorming and organizing ideas.

Each tool has its own dedicated guide — check the Guides page for step-by-step tutorials on each one.