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.

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:

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.

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.

Clear chat history in code mode to reduce token usage while preserving your diagram. This helps manage AI context efficiently and saves costs during long sessions.