When an answer in the AI assistant includes a diagram, it appears as a card in the conversation. You can move and zoom it, open it at full screen and save it as an SVG file. This page explains how to read a diagram and what its messages mean; if you are new to the panel, see The AI assistant, and for the steps around a reply see The assistant's step cards.
Zoom runs from 0.05x to 10x. The card grows with the drawing and stops at 800 px tall; open the diagram at full screen for more room. To shrink the card while you read past it, click Collapse to preview; the small bar that keeps the diagram's kind has an Expand control that opens the drawing again.
Diagrams are drawn in the app's theme, so they stay readable in light and dark mode.
On a phone, a diagram starts locked, so a finger drag scrolls the conversation instead of moving the drawing. The card shows Unlock pan & zoom: click it to move and zoom the diagram, and Lock pan & zoom to lock it again. While a diagram is locked, Zoom in and Zoom out are greyed out; Fullscreen and collapsing stay available.
flowchart-diagram-<epoch>..A Download successful toast confirms the export with "Diagram exported as SVG". If the diagram has not finished drawing, the toast reads Download failed with "Diagram is not ready to download yet"; wait for the drawing, then click Download SVG again.
The assistant writes a diagram's code as part of its answer. Until the code is complete, the block shows Generating… (screen readers announce "Loading diagram"), and the drawing replaces it when the code finishes. If the answer ends before the code is complete, the block becomes a Chart generation interrupted card instead.
About thirty kinds are supported, including:
Flowchart, Sequence Diagram, Class Diagram, State Diagram, ER Diagram, Gantt Chart, Pie Chart, Mindmap, Timeline, Git Graph, User Journey, Quadrant Chart, Requirement Diagram, C4 Diagram, Sankey Diagram, XY Chart, Block Diagram, Kanban, Architecture Diagram, Radar Chart, Venn Diagram, Tree View, Treemap, Ishikawa Diagram, Packet Diagram, Wardley Map and Info.
The card is titled with the diagram's kind, and with the diagram's own title when it has one, for example Quadrant Chart - Product Portfolio Matrix.
Drag the drawing to move it, and use Zoom in and Zoom out on the card, or hold Ctrl and scroll (Ctrl+scroll to zoom). Zoom runs from 0.05x to 10x, and Fit width sizes the drawing back to the panel's width. To shrink the card while you read past it, click Collapse to preview; click Expand on the small bar to bring the diagram back. On a phone, unlock the diagram first.
The diagram starts locked on a phone, so a finger drag scrolls the conversation instead of moving the drawing. Click Unlock pan & zoom to move and zoom it, and Zoom in and Zoom out become available. Click Lock pan & zoom to lock it again; Fullscreen stays available while it is locked.
Click Fullscreen on the card. The diagram opens over your work, fitted to the screen. Use Zoom out and Zoom in, drag the drawing to move around, and click Fit to view to fit it again. Download SVG is in this view too.
Click Download SVG on the card or in the full screen view. The diagram is saved as an SVG file named after its kind, for example flowchart-diagram-<epoch>., and a Download successful toast confirms it with "Diagram exported as SVG".
The diagram had not finished drawing when the export ran. The toast reads Download failed with "Diagram is not ready to download yet". Wait for the drawing to appear, then click Download SVG again.
The assistant writes the diagram's code as part of its answer, and the block shows Generating… until the code is complete; the drawing replaces it when the code finishes. If the answer ends before the code is complete, you get a Chart generation interrupted card instead, with the code kept inside it.
The answer ended before the diagram's code was complete, so nothing was drawn. Open Show code and Copy code to keep the code, then ask the assistant for the diagram again.
The diagram's code could not be read as a diagram, so nothing was drawn. The card shows what was expected and marks the line where reading stopped (Problem found on line {n}). Open View source and use Copy source, then ask the assistant for a corrected version.
The diagram's code was readable, but the drawing failed. Use Show code and Copy code to see what was sent, then ask the assistant for the diagram again.
The page has been open since before an update and could not load the part that draws diagrams. Click Reload page; the diagram's content is fine and comes back with the page.
About thirty kinds, from flowcharts and sequence diagrams to Gantt charts, mindmaps and Sankey diagrams; the section above lists them all. The card is titled with the kind, and with the diagram's own title when it has one.