The Mermaid code from your AI, pasted straight into a diagram
Paste the whole reply. The code is picked out and rendered; restyle it, edit labels, fix errors, then export PNG, SVG, PDF, Word or PowerPoint.
- Free
- No sign-up
- No watermark
- Rendered and exported locally
No code yet?Describe it and let AI drawStart from a template
Sure, here is the Mermaid code for your research roadmap:
```mermaidflowchart TB subgraph S1[Preparation] direction LR A[Background and problem statement] --> B[Literature review] --> C[Research objectives and scope] end subgraph S2[Theory and method] direction LR D[Theoretical framework] --> E[Methods and tools] --> F[Research design] end subgraph S3[Implementation and validation] direction LR G[Data collection and processing] --> H[Modelling / experiments] --> I[Results and discussion] end subgraph S4[Conclusion] direction LR J[Conclusions] --> K[Contributions and limitations] --> L[Future work] end S1 --> S2 --> S3 --> S4```Detected: flowchart
- themes, 8 free
- 17
- themes, 8 free
- export formats
- 6
- export formats
- ready-made templates
- 53
- ready-made templates
- rendered in your browser
- 100%
- rendered in your browser
From code to diagram in three steps
Ask ChatGPT or Claude for a flowchart and you usually get a block of Mermaid code. Paste the whole reply below: Diagramate picks out the code and renders it; switch themes, edit labels, fix errors, then export PNG, SVG, PDF, Word or PowerPoint without signing up. Free, no watermark, 5 free exports every 24 hours.
- Step 1
Ask the AI for code
Tell your AI assistant “draw a … diagram in Mermaid”. Naming the syntax keywords for the diagram type makes the reply far more likely to render on the first try.
- Step 2
Copy the whole reply, paste it here
Hit “Copy” under the reply and paste everything. No need to cut out the code block: the explanation around it is ignored. The diagram appears within half a second.
- Step 3
Pick a theme, download
17 themes, 8 of them free, hand-drawn included, applied instantly. Click “Download PNG”, or open the menu for SVG, PDF, Word and PowerPoint, or copy the image to the clipboard.
No code? That works too: paste some text or a description into the box above and click “Draw it with AI”. Once the AI writes the code, the diagram is drawn in your browser as usual; then download it as in step 3. How to write the description
Once it's drawn, changes are easy
Change the diagram without touching code; export, share and save from the same page.
Edit right on the diagram
Double-click a node to rename it; click to add nodes or change shape and color; drag to move it; draw annotations on top.
Every format in one click
PNG (transparent or solid, 2x / 3x), SVG, PDF, Word and PowerPoint, or copy to the clipboard. Word and PowerPoint files carry the source code so you can come back and edit.
PNGSVGPDFWordPPTdraw.ioAI that fixes, and draws
Fix a broken diagram in one click, tell the AI what to change in a sentence, or turn text or a description into a diagram when you have no code. Content is only sent when you click.
Processed on your device
Rendering and export happen in your browser; unless you sign in and save, your diagram never leaves your device.
Round-trips with draw.io
Export a .drawio file and keep editing in draw.io; open a .drawio file to get the Mermaid code back.
Share and sync
Send a diagram as a single link that never touches our server; sign in to save it to the cloud and pick it up on another device.
17 themes, 8 of them free: hand-drawn, classic and modern
Hand-drawn, classic and modern. Click one to open it in the editor; what you see is what you export. Themes marked Pro can be tried freely; exporting them needs Pro.
- Hand-drawnPaperHand-drawn lines and handwriting
- Hand-drawnProCrayonHand-drawn with light blue hatching on warm white
- Hand-drawnProKraftHand-drawn in brown ink on kraft paper
- Hand-drawnProChalkboardHand-drawn chalk lines on a green board
- Hand-drawnProBlueprintHand-drawn white lines on blue
- ClassicLightWhite background
- ClassicDarkDark background
- ClassicInk TealWarm off-white + teal grey
- ClassicCinnabarWarm cream + cinnabar red
- ClassicIndigoCool white + indigo
- ClassicInk BlackDeep ink + pale gold
- ModernGradientRounded nodes with gradient borders
- ModernProGradient DarkGradient borders on a dark background
- ModernProOutlineBlack-and-white outlines with soft shadows
- ModernProOutline DarkOutlines on a dark background
- ModernProColorfulOutlines with a color per branch
- ModernProColorful DarkColorful
Diagram templates
Swimlanes, org charts, sequence diagrams, research roadmaps, Gantt charts and more: ready-made Mermaid templates in every category. Change the text and export PNG, Word or PowerPoint for free.
Swimlane diagrams7 templatesApproval and business processes by role
Org charts3 templatesCompany, department and project team structures
Sequence diagrams3 templatesLogin, payment and service call interactions- Research roadmaps13 templatesMethodology roadmaps for proposals and theses
Gantt charts4 templatesProject, thesis and event schedules
Flowcharts4 templatesSign-up, ordering, complaint and incident steps
Mind maps6 templatesBook notes, project plans, study plans, SWOT
State diagrams2 templatesOrder and ticket lifecycles
ER diagrams3 templatesDatabase designs for enrolment, shops and libraries
Class diagrams2 templatesClasses and relations for object-oriented design
Architecture diagrams4 templatesLayered web, microservice and data platform views
Timelines2 templatesCompany history and project milestones
Supported diagram types
Plus ER diagrams, timelines, user journeys, quadrant charts, Git graphs and the other types Mermaid supports.
Getting started
New here? Four short guides take you from getting the code to exporting a file, about 15 minutes in all. Or jump straight to your scenario: flowcharts, mind maps, sequence diagrams, Gantt charts, research roadmaps, drawing from text without code, sharing and cloud save, draw.io.
- 1About 5 minFive-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.Part 1
- 2About 4 minGetting 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.Part 2
- 3About 5 minEdit, 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.Part 3
- 4About 3 minExport 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.Part 4
What you get for free
- Rendering and editing are free with no limits; every export format (PNG, SVG, PDF, Word, PowerPoint) needs no sign-up and carries no watermark, with 5 free exports every 24 hours and no limit for members
- Rendering and export both happen on your device; unless you sign in, your diagram never leaves the browser
- Auto-saved on this device, survives a refresh, restored next time you open the editor
- Sign in to save diagrams to the cloud and open them on another device. A diagram is only uploaded when you choose to save it; the free tier holds 3 diagrams
- 8 free themes, style settings such as stroke and font, and the draw.io round-trip are free too, with no sign-in
AI fix, AI tidy, AI edit and “Draw it with AI” are optional: only when you click them is the current code (or, when drawing, the description) sent to the AI engine once, and it is not stored. The free allowance: 20 AI fixes a month per device, plus 2 tidy, edit or draw requests a day in total (per account when signed in, reset at 00:00 UTC+8). No image or video generation model is involved: the AI reads text and returns text, and the picture is always drawn from code by Mermaid in your browser
Pro membership extras
All 17 themes and sketch tweaks, custom accent colors, batch and bundled export, 4x PNG, 300 AI fix, tidy, edit or draw requests a month, 1,000 cloud diagrams with 30 days of version history, never-expiring share pages.
Frequently asked questions
Where does the Mermaid code come from?
Ask your AI assistant to “draw a … diagram in Mermaid”, then paste its whole reply into Diagramate. The code inside is detected automatically, and the prompt templates under “Three steps” above are ready to copy. No code works too: paste some text or a description into the box on the home page, or click “Describe a diagram” in the editor, and let AI draw it.
Which AI replies can I paste?
Tested with whole replies copied from ChatGPT and Claude using their “Copy” button: a code block tagged mermaid, an untagged code block, and bare code without fences are all detected, and the explanation around the code is ignored.
Which diagram types are supported?
Everything Mermaid renders, including flowcharts, sequence diagrams, class diagrams, state diagrams, ER diagrams, Gantt charts, pie charts, mind maps and timelines.
What if the code has an error?
The error is explained in plain language with a line number. Click “Go to line N” to jump straight to it; the preview keeps the last good render until it's fixed. Or click “AI fix” in the error bar: you see the diff and the result is checked locally before you apply it. 20 free requests a month.
Is my diagram uploaded to a server?
Unless you sign in, no. Rendering and export happen in your browser. Two actions send content to the server: clicking “AI fix”, “AI tidy”, “AI edit” or “Draw it with AI” sends the current code (or, when drawing, the description you wrote) to the AI engine once and it isn't stored; choosing “Save to the cloud” after signing in stores that diagram's code, theme and name, and you can delete it at any time.
Can I edit the diagram after exporting to Word or PowerPoint?
The file embeds a high-resolution image, so it can't be edited inside Office. The original Mermaid code is appended at the end of the file: copy it back into Diagramate, change it, and export again.
Does it work on a phone?
Yes. Paste, render and download work in a mobile browser. If downloads are blocked inside an in-app browser, open the page in your regular browser first.
How do I send a diagram to someone else to edit?
Click “Share link” above the preview: the code and theme are compressed into the part of the address after #, nothing goes through a server, and whoever opens it sees the same diagram and can keep editing. After signing in you can also create a share page: a short link that follows the latest cloud version, with an optional password and expiry, and you can revoke it (up to 30 days on a free account, renewable; members can make it permanent). Or send an exported file: Word and PowerPoint files carry the original code at the end.
What is cloud save? Do I have to sign in?
No. Without signing in you can render, export and keep the auto-saved copy on this device. Signing in lets you save diagrams to the cloud and open them on another device; the free tier holds 3 diagrams. Sign-in only appears behind the editor's “Cloud” button and never interrupts pasting or exporting.
Can I drag nodes around or annotate the diagram by hand?
Yes: in flowcharts, state, class and ER diagrams, press and drag a node to a new place (long-press first on a phone) and its links are re-routed. You can annotate too: click “Annotate” in the preview's top-left corner to draw with a pen or add rectangles, ellipses, diamonds, arrows, lines and text; what you draw next to a node follows it. Positions and annotations are kept in a comment on the last line of the code, so share links, cloud versions and exported files keep them; pasted anywhere else the code still renders, just with the automatic layout and no annotations. To go back, click “Reset positions” under Layout and erase annotations with the Eraser; Layout also changes the whole diagram's direction and spacing.
Does it work with draw.io?
Yes. Choose “.drawio” in the download menu, open the file in draw.io (diagrams.net) and double-click the diagram to keep editing the Mermaid source. The other way round, use “Open file” with a .drawio or .drawio.svg file, or paste the file's contents, and the Mermaid code inside is extracted.
Is the diagram generated by AI?
The picture isn't. Diagramate uses no image or video generation model of any kind: the diagram is drawn from code by the open-source Mermaid renderer inside your browser, so the same code always produces the same picture. The optional AI features (fix, tidy, edit, draw from text) read text and return Mermaid code as text; when drawing from text, the AI writes the code and your browser still draws the picture.