Five-minute start: paste an AI reply, get a diagram, download it

Two modes

• Mode one, code to diagram: you get Mermaid code (or a whole reply containing it) from ChatGPT or Claude, paste it into the editor, and it renders within half a second. Switch themes, download PNG, SVG, PDF, Word or PowerPoint. The layout is computed for you; changing a label or adding a step means changing the code.
• Mode two, free canvas: when you want to arrange things by hand, move the rendered diagram onto an Excalidraw whiteboard to drag, relabel and sketch, or start from a blank canvas. The conversion is one-way; the canvas never writes back to the code.

This guide follows mode one, which is the main path for most people. The canvas has its own guide: Free canvas. Both modes are free, need no account and add no watermark; rendering and export happen in your browser.

Step 1: open the editor and find your way around

Click “Editor” in the top bar, or paste straight into the box on the home page (it jumps to the editor for you). The editor opens with a sample flowchart loaded. Three areas:

• Code on the left. This is where you paste the whole AI reply. The status line underneath reads “Detected: flowchart” and turns into an error bar when the code has a problem.
• Preview on the right. Scroll to zoom, drag to pan, zoom buttons in the bottom-right corner, double-click empty space to reset. In flowcharts and mind maps, double-click a node to edit its text.
• A row of tools above the preview: six theme thumbnails, “Layout” (direction and spacing for flowcharts), “Share link”, “Download PNG” and the ▾ menu next to it.

The top bar also has “Canvas”, “Open file”, “Cloud”, “Help” and the light / dark switch. The first time you open the editor directly, a short feature tour points these out; to see it again, open “Help” → “Feature tour”.

Step 2: paste the whole reply

In your AI assistant, click “Copy” under the reply. Back in the editor, paste into the code area. You do not need to cut out the code block: paste everything, the Mermaid code inside is picked out and the explanation around it is ignored. The status line confirms with “flowchart code extracted from the reply”.

No reply at hand? Try this one first; click “Open in the editor”:

flowchart TD
    A[Request received] --> B{Requirements clear?}
    B -- Yes --> C[Plan and build]
    B -- No --> D[Clarify with the team]
    D --> B
    C --> E[Submit for QA]
    E --> F{QA passed?}
    F -- Yes --> G[Release]
    F -- No --> C

No code yet? “No code yet?” at the right end of the status line has a ready-made prompt for each diagram type. Copy it, send it to your assistant, and paste the reply back. The next guide, Getting code that renders, goes into detail.

Step 3: pick a theme

Click a thumbnail above the preview: Light (the default, for documents and slides), Dark, Ink Teal (papers and technical docs), Cinnabar (presentations), Indigo (business documents), Ink Black (dark pages). What you see in the preview is what you export, background included. Your choice is remembered.

Step 4: download

“Download PNG” gives you a 2x, transparent PNG that sits on any page without a white box. For other formats, open the ▾ menu:

• SVG: vector, sharp at any size, editable in Illustrator or Figma;
• Word (docx) / PowerPoint (pptx): a high-resolution image embedded, with the original Mermaid code appended so you can come back and edit;
• PDF: one page, sized to the diagram;
• Copy PNG to clipboard: paste straight into a chat or document, the quickest route;
• at the bottom of the menu: scale (×2 / ×3) and transparent / solid background.

Downloads need no account, carry no watermark and have no limit. Details in Export to Word, PowerPoint and PDF.

Will I lose my work?

The editor saves its content in this device's browser automatically; reload or close and reopen and it comes back (a bar at the top says “Restored your last edit”). To continue on another device, sign in and save the diagram to the cloud. Without signing in, nothing is uploaded.

On a phone

Open the same address in your phone's browser. The preview takes the top half; three buttons sit at the bottom: Edit (opens the paste area), Theme and Download. After you paste a reply and the code is detected, the drawer closes and the preview grows; if the code has an error, the drawer stays open. Inside apps that block downloads, open the page in the system browser, or use “Copy PNG to clipboard”.

Next

• Next: Getting code that renders on the first try
• Changing text, adding steps, fixing errors: Edit, lay out and fix
• Straight to your diagram: flowcharts, mind maps, sequence diagrams, Gantt charts, research roadmaps