Google Docs™ Add-onDiagrams in Google Docs™, powered by markdown.
Turn text into flowcharts, sequence diagrams, Gantt charts, and 20+ diagram types. Powered by Mermaid syntax. No external tools, no servers, no data leaves your browser.
Mermaid for Google Docs™ without the context switch.
Diagrams in Google Docs™ — before and after.
Without this toolkit
- ✕Create diagrams in an external tool, export as PNG, paste into Docs
- ✕Diagram source is lost — the image is a dead end
- ✕Spec changes? Re-draw, re-export, re-paste. Every. Time.
- ✕No way to import markdown with diagrams into Google Docs™
- ✕Copy as Markdown corrupts Mermaid syntax silently
With Mermaid Toolkit
- ✓Write and render Mermaid code directly in Docs
- ✓Every diagram stores its source — click to edit anytime
- ✓Edit in place, re-render instantly. No external tools needed.
- ✓Import markdown from AI tools — diagrams render automatically
- ✓Export back to markdown with diagram source intact
No dead ends.
Write
Draft docs with Mermaid diagrams in your IDE, AI tool, or any markdown source
Import
Paste markdown into Google Docs™ — diagrams render automatically
Collaborate
Team reviews with visual diagrams. Edit any diagram in place.
Export
Export back to markdown with Mermaid source intact
No format lock-in. Diagrams stay as code at every step — readable by humans, AI, and dev tools alike.
Specs live in markdown.
Your team reads them in Docs.
This is the missing link.
PRDs, design docs, and architecture specs increasingly live as markdown — in your IDE, your notes, or any editor. Mermaid diagrams inside those specs describe complex flows in plain text. But Google Docs™ can't render any of it.
-
Import markdown from AI tools
Paste markdown with Mermaid blocks. Diagrams render. Headings, lists, tables — all formatted.
-
Edit diagrams without leaving docs
Click any diagram to edit its Mermaid source with live preview. Re-render in place.
-
Export back to markdown
When the spec is ready, export the whole doc. Diagrams become fenced code blocks.
-
Nothing leaves your browser
100% client-side rendering. No servers, no analytics, no data collection.
Get started with Mermaid Toolkit in minutes.
Write diagrams from scratch with live preview and templates.
-
Open the editor
Extensions → Mermaid Toolkit → Insert Mermaid Diagram.
-
Write and preview
Write or paste Mermaid syntax on the left, see the rendered diagram update live on the right. Pick a template to get started quickly.
-
Insert into your document
Click Insert into Document to place the diagram at your cursor, or Replace Diagram to update an existing one.
Already have Mermaid code in your doc? Render everything without leaving docs.
-
Write Mermaid syntax
Place your diagram code inside a code block or fenced
```mermaidblock in your Google Doc™. -
Run the renderer
Extensions → Mermaid Toolkit → Convert All Code to Diagrams.
-
Preview and insert
Preview each diagram, then click Insert After or Replace to swap the code for a diagram.
Click any diagram to edit its source — no copy-paste needed.
-
Select a diagram
Click on any Mermaid diagram that was inserted by the add-on.
-
Open the editor
Extensions → Mermaid Toolkit → Edit Selected Mermaid Diagram.
-
Edit and replace
The editor opens with the diagram's source code pre-loaded. Tweak it and click Replace Diagram.
Extract the original Mermaid source from any diagram.
-
Select a diagram or scan all
Click a single diagram, or use Convert All Diagrams to Code to extract from every diagram in the document.
-
Run the extractor
Extensions → Mermaid Toolkit → Convert Selected Diagram to Code (or Convert All).
-
Get your code back
The original Mermaid code is inserted as a fenced code block right in your doc, ready to edit or share.
Bring markdown into Google Docs™ or export your document back to markdown.
-
Import from Markdown
Extensions → Mermaid Toolkit → Import from Markdown. Paste raw markdown with Mermaid blocks — the add-on renders diagrams and creates headings, lists, tables, and plain-text [ ] / [x] checklists that round-trip back to markdown.
-
Export as Markdown
Extensions → Mermaid Toolkit → Export as Markdown. Converts your entire Google Doc™ to markdown with Mermaid source extracted from diagram alt text.
-
Round-trip ready
Export to GitHub, Notion, or any markdown editor. Import back and re-render — no conversion needed.
Every diagram type you need.
Frequently Asked Questions
How do I create a diagram in Google Docs™?
Install Mermaid Toolkit for Google Docs™, then go to Extensions → Mermaid Toolkit → Insert Mermaid Diagram. Write your diagram in the built-in editor with live preview, then click Insert into Document.
What diagram types are supported?
Mermaid Toolkit for Google Docs™ supports flowcharts, sequence diagrams, class diagrams, Gantt charts, mindmaps, pie charts, and 20+ other types — all from Mermaid syntax.
Is Mermaid Toolkit for Google Docs™ free?
Yes. The add-on is free and open source. It renders diagrams 100% client-side in your browser — no servers, no data collection, no account required.
Can I import markdown with diagrams into Google Docs™?
Yes. Use the Import from Markdown feature to paste markdown containing Mermaid diagram blocks. The add-on parses headings, lists, tables, and renders all diagrams as images in your document.
Does my data leave the browser?
No. Mermaid Toolkit for Google Docs™ runs entirely client-side inside the Apps Script sandbox. Your document content is never sent to external servers.