Click "Get Started" in the navigation bar or the "Start Diagramming" button. Log in to access all features and save your work to your account.

After login, you'll see a clean canvas ready for input.

Type your diagram requirements in natural language or copy-paste content from existing documents. Describe relationships, components, and layout. The AI generates professional diagrams instantly with intelligent auto-layout. No technical expertise required.

Your text description transforms into a professional diagram in seconds with proper spacing, connections, and styling. The result is ready for further refinement or direct use.

Upload an image and add a descriptive prompt. This feature digitizes hand-drawn sketches, imports from other tools, or recreates diagrams from photos and scanned documents.

The AI generates a professional diagram based on your uploaded image and prompt. The system transforms the visual content into an editable diagram with intelligent layout and styling.

Yes. Before you describe your diagram in the chat input, use the diagram-type icon (overlapping shapes) next to the input field to open the type selector. Choose Auto for AI to pick the best type, or pick a specific type such as Flowchart, System architecture, Sequence diagram, ERD, or UML class. Your selection is applied to the next diagram you generate from your prompt.

Navigate to the code icon in the bottom left corner of the interface. This opens the repository connection wizard that allows you to analyze your codebase and generate architectural diagrams automatically.

Choose "Public Repository" to access any public GitHub repository without authentication. This option allows you to analyze open-source codebases and generate diagrams instantly.

Enter your GitHub repository URL in the format: https://github.com/owner/repository (e.g., https://github.com/jonatandb/todo-app-react-typescript). The tool will validate the URL, connect to GitHub, and retrieve the repository structure for analysis.

Choose "Private Repository" to connect your GitHub account and access private repositories. This requires authentication and repository permissions.

Click "Connect GitHub" to authorize AI Diagram Maker to access your private repositories. You'll be redirected to GitHub to grant the necessary permissions. Your tokens are never stored, and you control which repositories to grant access to.

Choose whether to grant access to all repositories or only select specific repositories. Select "All repositories" for full access, or choose "Only select repositories" to limit access to specific repos. This is a one-time setup process.

After clicking "Install", select which repository you want to generate a diagram from. You can browse through your connected repositories and choose the one you need. You can also connect another GitHub account if needed.

After the repository files are listed, choose which files to include or exclude from the analysis. AI credit tokens are calculated based on token usage, which increases with the number and size of source code files selected. To reduce token consumption and costs, only include the minimum required files needed to create your diagram. Exclude unnecessary files such as images, configuration files, test code, build artifacts, and generated code that are not needed for diagram creation. Click on individual files or folders to toggle their selection, and expand directories to selectively include specific files.

Choose from multiple diagram types to visualize your code: Flowchart (process flows and decision trees), Sequence Diagram (component interactions), ERD (database schema and relationships), UML Class Diagram (class structures and relationships), or System Architecture (high-level system components and interactions). Select the type that best represents your visualization needs.

Instruction templates provide predefined prompts optimized for different architectural views: Simple System Architecture (main components and interactions), Layered System Architecture (architectural layers and boundaries), Dependency Architecture (component dependencies), or File Directory Architecture (folder and file structure). These templates help the AI understand exactly what kind of diagram you want to generate.

If the pre-built instruction templates don't fit your needs, select "Custom Instructions" to write your own specific requirements for diagram generation. Describe exactly what you want to visualize, which components to focus on, what relationships to highlight, or any specific architectural patterns to emphasize. This gives you complete flexibility in how your codebase is visualized.

The AI generates a professional architecture diagram based on your repository analysis and instructions. The diagram visualizes your codebase structure with proper component hierarchy, clear relationships, and intelligent layout. You can further refine the diagram using prompts or code editing, just like any other diagram.

Type your editing instructions in plain English. Describe the changes you need—add elements, change connections, or adjust layout.

Switch to code view to edit the D2 diagram code directly for maximum control and precision. This mode provides access to raw D2 syntax for fine-tuned adjustments.

Edit D2 code directly for precise modifications. Use D2 syntax to create complex layouts, custom styling, and intricate relationships. For example, if you want to change the label or style of a participant, place your cursor on the relevant code block (such as the "User" block in the example). The corresponding part of the diagram and code will be highlighted, making it easy to see and edit exactly what you want.

Switch to Edit mode to select and modify diagram elements. Selecting a shape or text highlights the corresponding element for in-place edits. The canvas highlights the selected component so you can easily update labels, styles, or positions.

Switch to View mode on the canvas to interact with the rendered diagram. In View mode you can drag and reposition created diagrams and pan the canvas to inspect layout and spacing.

You can enhance your diagrams by learning D2 syntax or embed them directly in your documentation:

Use the Color theme option in the top toolbar to change diagram colors and switch between light and dark theme. Choose from presets such as Pastel Layers, Tokyo Night, Monokai Pro, and more.

Use the Layout Direction option in the top toolbar to set the diagram flow: • Top → Bottom • Left → Right • Right → Left • Bottom → Top

Use the Layout Engine option in the top toolbar: • Adaptive: handles complex, irregular diagrams with smarter edge placement • Hierarchical: strict top-down tree structure, best for simple directed graphs and flowcharts

Use the Look option in the top toolbar: • Classic: standard crisp diagram rendering • Sketch: hand-drawn sketch style for a more casual look

Use the font size (Aa) option in the top toolbar: • Node font size: S, M, L, XL presets or custom value • Connection font size: S, M, L, XL presets or custom value

Click a node to select it; the bottom draggable bar appears with a label field and dedicated label editors: • Normal label: plain text • Markdown label: formatted content • Multi-line label: long scrollable text • Code content: dedicated editor for code snippets

Select a node and use the shape picker in the bottom draggable bar to change its form. Choose from rectangles, ovals, diamonds, cylinders, hexagons, parallelograms, trapezoids, and other shapes. The palette opens above the bar so you can pick the shape that best fits your diagram.

Select a node and use the fill and stroke controls in the bottom draggable bar: • Fill color: theme swatches, preset palettes (e.g. Soft Fills, Bold Fills, Neutrals), or custom hex value • Stroke color: same options as fill color • Stroke width: Thin, Normal, Medium, Thick, or Extra Thick, or custom value

Select a node and use the shadow option in the bottom draggable bar to add a shadow effect. Toggle "Shadow node shapes" to give the selected node a subtle drop shadow for a more polished look.

Select a node to use container options in the bottom draggable bar; select a container to delete it: • Move to Container: place the node inside an existing container or choose "Create new" to create one • Remove from Container: take the node out of its current container • Delete container: click the container to select it, then use the Delete container icon in the bottom bar

Use the bottom draggable bar when a node or connection is selected: • Add new node: select a node to show the plus icon below it; click the plus to add a new node • Create connection: drag from the plus icon to another node to create a new connection • Delete node: select the node and use the delete (trash) icon in the bottom bar

Select a connection to open the bottom draggable bar. Use the "Animate connections" option (waveform icon) to enable animation on that connection. Animated connections show a flowing effect along the line.

Click a connection to select it; the bottom draggable bar shows connection editing options: • Arrow type: Forward, Backward, Bidirectional, or Undirected • Line style: Solid, Dashed, or Long dash • Line color: theme swatches, preset palettes (e.g. Soft Fills, Bold Fills, Neutrals), or custom hex value • Width: Thin, Normal, Medium, Thick, or Extra Thick, or custom value • Delete Connection: use the trash icon to remove the connection

Click a markdown element (e.g. a title or markdown-labeled node) to select it. The bottom draggable bar shows: • Dedicated label editor: edit the markdown text • Background color: theme swatches and custom hex (same as fill color) • Border color: theme swatches and custom hex (same as stroke color)

Click the full-screen button in the top-right corner to expand your diagram for better visibility.

In full-screen mode, you can examine every detail, connection, and element with enhanced clarity. The expanded view is ideal for presentations, detailed analysis, and reviewing complex diagrams.

Use zoom buttons to adjust diagram size for optimal viewing. Focus on specific sections or view the complete overview. Controls maintain diagram quality at any zoom level.

Download diagrams as SVG (scalable for printing) or PNG (pixel-perfect for digital use). Choose the format that suits your needs.

Choose from multiple aspect ratios: Original Size, 1:1 (Square), 4:3 (Standard), 16:9 (Widescreen), A4 Landscape, A4 Portrait. Each ratio optimizes your diagram for different use cases.

Export your diagram as a .drawio.xml file (Draw.io format) to preserve editable diagram data and enable importing back into draw.io / diagrams.net for further editing.

Click "Open Diagram" in the top-left menu to access your diagram library and continue work on previous projects.

Use the search bar to find diagrams by keywords, project names, or types. Quickly locate any diagram in your collection.

Click "Dashboard" in the top navigation to view all diagrams, recent activity, and workspace organization.

View recently created diagrams in the dashboard for quick access. Pick up where you left off without searching through your entire collection.

Use the dashboard search to find specific diagrams. Enter keywords, diagram names, or filter by date to locate diagrams in your dashboard view.

Go to the dashboard to access workspace management features. This area provides tools for organizing diagrams into logical groups and maintaining a structured workflow.

Click "Create Workspace" on the left side. Enter a name and optional description to organize diagrams by project or category. Workspaces help maintain clean separation between different types of work.

Filter diagrams by workspace to manage multiple collections separately. Work on different projects without mixing diagrams.

When creating a diagram, choose a workspace to keep your work organized. Each diagram is automatically filed in the appropriate location for easier retrieval.

Click the diagram title in the top-left corner to edit. Use descriptive names for better organization and searchability.

Use version control buttons to navigate through previous versions of your diagram. This premium feature allows you to review the evolution of your work (paid users only).

Click revert to restore a previous version. This clears chat history and restores your diagram to an earlier state (premium feature for paid users).

Click your profile icon in the top-right corner to access account settings, billing information, and preferences.

Select "Account" from the menu to view email, current plan, available credits, and billing history. Monitor your usage to ensure uninterrupted service.

Minimize token consumption and costs with these strategies: • Customize with the top toolbar and bottom bar – Change colors, layout, look, and font sizes without consuming tokens • Edit D2 Code Directly – Make precise code changes for elements not available in the edit panel • Pre-process Documents – Extract key information using Claude or ChatGPT first, then use focused prompts instead of uploading large documents • Clear Chat History – Remove conversation history while preserving your diagram to reduce context size

Icon mode automatically suggests and adds an appropriate icon inside nodes based on the node label. To enable it, click the image icon in the chat input and enter a prompt. Example prompt you can use: A user's request hits a Google Cloud Load Balancer. Traffic is routed to a Google Compute Engine (GCE) VM instance inside a VPC network. The app connects to a Cloud SQL (PostgreSQL) database for storage and uses Google Cloud Storage for file uploads. When icon mode adds icons, the system may also update the node's appearance by changing some simple shapes to shape: image so the icon is displayed as the node image. Provide a generated diagram screenshot here after you run the prompt.

When an icon is added the system may automatically switch the node to shape: image for safe, generic shapes such as rectangle, square, oval, person, and for nodes with no explicit shape. The system intelligently decides which nodes can be safely updated to standalone icon mode. The goal is to make icons look cleaner when they do not need a container.

Select a node that does not have an icon. The bottom draggable bar displays an "Add icon" option. Click it to open the Select Icon popover, where you can search for an icon or pick one from the grid. Use "All Categories" to view and browse all available icon categories.

In the Select Icon popover: • Click "All Categories" to see the full list (e.g. Essentials, AWS, Azure, GCP) • Click a category to browse its icons • Choose the icon you want for the selected node

Click a node that already has an icon. The bottom draggable bar shows: • Change icon: opens the Select Icon popover to pick a different icon • Remove icon: clears the icon from the node

Click the settings (gear) icon on the left navbar, or open the user profile dropdown in the top right and select Settings.

On the Settings page, go and find API Keys. Click the Create API key button (green button with a plus icon) to start creating a new API key.

In the Create API key modal, give your key a name so you can recognize it later (e.g. "MCP Server", "CLI"). Enter the name in the Name field and click the Create button.

After creation, the new API key is shown in a modal. Copy your key now — it will not be shown again. Store the key securely; anyone with this key can access your account. Do not share it or commit it to version control. Click Done when finished.

The API Keys list shows all keys you have created. Each key displays its name, creation date, and is in Active state by default. You can Deactivate a key using the Deactivate API key icon, and Activate it again with the Activate API key icon. To remove a key you no longer need, click the delete (trash) icon. For deactivate, activate, and delete actions, a confirmation dialog will appear.