Generate diagrams in draw.io

Click on the Generate tool (sparkle button) in the draw.io toolbar, in the template library. Write a query describing your diagram and generate a diagram based on your description.

The Generate tool uses multiple AI generators to support a wide range of diagrams, including interface mock-ups, infrastructure diagrams, Mermaid diagrams and more.

Tips:

• The Generate tool is available in all the draw.io editor themes that have a toolbar - Classic, Atlas, Simple and Sketch - in the Atlassian draw.io apps and our online editor.
• Use the search field in the shapes panel to describe and generate a diagram directly.
• Generated diagrams in the template library are not as flexible - you can edit queries via the Generate tool.

Generate a diagram

Make sure you write the type of diagram you want at the start of the query - this is what decides which AI generator is chosen, as each generator is good at only a small subset of diagrams.

1. Open the Generate dialog - click on the sparkle button.
   
2. Describe the diagram you want to generate, then press Enter or click on Send.
   
3. Your query will be sent to the AI tools to analyse and generate a preview of a diagram - this may take a little time. If the result doesn't match your query, click Refresh to regenerate a different version - keep in mind that AI tools may not return sensible results.
   
4. Click + to add the diagram to the drawing canvas.
   
5. Online draw.io editor only: To open the diagram in a new browser tab and new diagram instead of inserting it on the current diagram page click on Open in New Window.
   

Once the diagram has appeared on the drawing canvas, you can edit the diagram shapes, connectors, text and styles as any other draw.io diagram.

Generate via the search field

Describe your diagram directly in the search field above the Scratchpad and select Generate from the search actions.

The colours in generated diagrams may not be optimised for draw.io's adaptive colours feature that automatically adjusts for dark and light modes. You may need to tweak shape and diagram styles after inserting the generated diagram on the drawing canvas. In the example below, the generated diagram was much easier to see in dark mode.

Some diagrams, like the Gantt chart above, will be generated in Mermaid code instead of being converted to native draw.io shapes. Hover over the diagram on the drawing canvas to see this Mermaid code, and double click on it to edit it.

Tip: If you want to the generator to use Mermaid, make sure you write that in your query, either before or directly after the diagram type.

Preview the generated diagram

While you can hover over the diagram in the Generate dialog for a small preview, to see a larger preview, click on the Preview magnifying class.
 

Edit your query

1. Click on Edit (pen icon) to paste that query text in the description box.
2. Refine the query and click Send to generate an updated diagram.
   

The edited queries do not overwrite the earlier generated diagrams - you can add any or all of these to the diagram canvas.

Tip: To copy just the text of your query, click the copy icon next to the pen.

Delete a query

• Click Remove (rubbish bin) to delete a query from the Generate dialog.
• To clear the dialog complete, remove all queries.
  

Generate a template diagram

1. Create a new diagram - go to our online diagram editor - or click on + in the toolbar and select Template to insert a generated diagram.
2. Click on the Generate box in the template library.
   
3. Enter a basic description of your diagram in the text field, and press Enter or click OK.
   
4. Click Insert or Create to add it to the drawing canvas.
   

Make sure you write what type of diagram you want to generate at the start of the prompt. In this example, the prompt was:
sequence diagram - a customer purchases a product from a web store

Related

• Disable diagram generation: Use a specific LLM, or disable it completely.
• Learn about when it makes sense to generate diagrams and how to write better queries for more accurate diagram generation.
• To embed diagrams when chatting with any AI model that supports MCP Apps, you can use the draw.io MCP server or add project instructions to your Claude Project.
• Train an LLM with our AI style reference.
• See more examples of smart templates and generated diagrams.
  

For Atlassian administrators

Enable smart templates in draw.io for Confluence Cloud.