From paste to export, step by step
Guides
The four-part path reads in about 15 minutes, from getting code to exporting a file; the scenario guides stand alone; if you arrived with a specific question, the one-question-one-answer set at the bottom is the place to start. Every code block opens in the editor.
The path: from zero to export
Read in order, a few minutes each
- 1About 5 minPart 1Five-minute start: paste an AI reply, get a diagram, download itRead this first. What Diagramate does, what each part of the editor does, the shortest route from pasting to a PNG or Word file, and how it works on a phone.
- 2About 4 minPart 2Getting Mermaid code that renders on the first tryHow to phrase the prompt so the reply renders straight away, naming the diagram type's keyword, asking for a single code block, what the “Copy” button in ChatGPT and Claude gives you, and how to paste it.
- 3About 5 minPart 3Edit, lay out and fixOnce the diagram is on screen: double-click a node to rename it, click a node to add a step or a branch, change its shape or color or delete it, click a link to edit its text, set direction and spacing with “Layout”, read the error bar and use AI fix, change it from one sentence with AI edit, tidy it with AI tidy.
- 4About 3 minPart 4Export to Word, PowerPoint and PDF, or copy to the clipboardWhich of the five formats to use, how to choose scale and transparency, what the Word and PowerPoint files contain and how to edit later, and packing several diagrams into one zip.
By scenario
Stand-alone: pick the diagram you need
- Flowcharts from an AI reply, exported to WordThe whole run from prompt to Word file, asking ChatGPT or Claude for flowchart code, pasting the reply, editing decisions and shapes, grouping by role into swimlanes, switching direction, exporting. Two ready-to-open examples.About 5 min
- Mind maps from an AI reply: mindmap syntax, indentation and exportThe prompt that makes an assistant output Mermaid mindmap code, the one-root and indentation rules, node shapes, the single error you will meet, themes with branch colours, and export to PNG, Word or PowerPoint.About 4 min
- Sequence diagrams from an AI reply: API calls and system interactionsThe prompt for sequenceDiagram code, participants and message arrows, loops and branches, notes and numbering, and the most common error, an incomplete message line.About 4 min
- Gantt charts from an AI reply: project schedules and thesis timelinesThe prompt for gantt code, date formats and sections, dependencies with after, milestones and status tags, axis labels, and turning off the today marker so exports stay stable.About 4 min
- Research roadmaps for a thesis or proposal, from template or AI, to black-and-white printHow to draw the research roadmap a proposal or dissertation asks for, phases as subgraphs, steps left to right, phases linked as groups; generating one from your own research plan; the Ink Teal theme and black-and-white printing; export to Word or SVG.About 5 min
- No code? Draw a diagram from textWhen all you have is a process write-up, meeting notes, or a copy that came out as plain text, here is how to have AI turn it into a flowchart or mind map - the three ways in, how to write the description, how the result is checked and adjusted, and the allowance and privacy.About 4 min
- Sharing and cloud save: send a diagram, continue on another deviceThree ways to hand a diagram to someone, a share link (content in the link, no server), a share page (short link, password, expiry, view count) and a file; signing in to save to the cloud, opening on another device, and what happens when both sides edited.About 4 min
- Round-trips with draw.io: export .drawio to keep editing, bring the code backExport a diagram as a draw.io file, double-click it in draw.io to keep editing the Mermaid, mix it with other shapes; and read the Mermaid code back out of .drawio or .drawio.svg files or pasted content.About 3 min
One question, one answer
Came here with a specific question? Start here
- How do I get a flowchart from ChatGPT into a Word document?ChatGPT hands you Mermaid code, not a file. Paste the whole reply here, then choose Download to Word. The .docx has the diagram embedded at 3x resolution and the original Mermaid code on a final page.About 3 min
- Do I have to strip the code block out of the AI reply?No. Paste the entire reply — explanation text, a fence without a language tag, or bare code with no fence at all. The Mermaid inside gets detected and rendered. Most online renderers make you do this by hand.About 2 min
- How do I put a Mermaid diagram into PowerPoint?Download → PowerPoint. The .pptx has the diagram filling a slide at high resolution, with the original Mermaid code on a final slide. Generated in your browser, nothing uploaded.About 2 min
- What does "Parse error" mean in Mermaid, and how do I fix it?Parse error means the syntax didn't go through, not that the diagram is wrong. Four causes cover most of it: the reserved word end, mixed arrow styles, full-width punctuation, and quotes inside node labels.About 3 min
- The Mermaid code my AI gave me won't render. Now what?Work out which of three things it is: a syntax error, a diagram language that isn't Mermaid, or a diagram past the engine's edge limit. The fix is different for each, and the error bar tells you which.About 3 min
- How do I export a high-resolution PNG from a Mermaid diagram?The default download is already 2x, which is sharper than most online renderers give you. The menu offers 3x, and SVG is vector — it stays sharp at any size, which is what you want for print.About 2 min
- How do I save a diagram on my phone?Mobile browsers download normally; use “Save to Photos / Share” to put the image in your photos. In-app browsers inside messaging apps block downloads, so press and hold the image to save it, or open the page in a real browser for files. On a phone, editing, themes and download live on the bottom bar.About 2 min
- How do I get a mind map out of an AI reply?Ask for Mermaid mindmap syntax by name, or the model will hand you a markdown bullet list, which doesn't render as a mind map. Paste the code, render, export PNG, SVG, Word or slides.About 3 min
- Why does the text in my diagram look wrong?Two different problems. Missing glyphs or cramped labels are a font and theme question. Characters that break the parse are usually full-width punctuation — that's a syntax error, not a display one.About 2 min
- How do I open a Mermaid diagram in draw.io?Download → .drawio. Opening that file in draw.io gives you a Mermaid shape you can double-click to keep editing the code. It works the other way too: drop a .drawio file here and the Mermaid inside comes back out.About 3 min