Google Docs™ Add-onCode to diagram in seconds.
Write Mermaid syntax in Google Docs™, render it as a polished image. Everything stays in your browser.
Built for speed and privacy.
Auto-detect & Render
Scans your entire document for Mermaid code blocks and renders them all as high-quality images in one click. No manual work.
Live Editor
Side-by-side editor with instant preview and syntax highlighting.
Insert or Replace
Add diagram images after your code, or swap out the code block.
One-click for Everything
No setup, no config. Install the add-on, open your doc, and render — it just works. Updates to Mermaid syntax are supported automatically.
Zero Data Collection
No analytics. No cookies. No telemetry. No servers. Your documents never leave your browser — rendering is 100% client-side via mermaid.js. The only external request is loading the mermaid.js library from jsDelivr.
Templates
Jump-start with flowcharts, sequences, ER diagrams, and more.
See it in action.
Two ways to create diagrams.
Auto-render from your doc
Already have Mermaid code? Render everything in one click.
Have Mermaid syntax
Write your diagram code inside a code block in your Google Doc.
Run the renderer
Extensions → Mermaid Toolkit → Render All Mermaid Snippets. Every diagram gets rendered.
Insert into your document
Preview each diagram, then click Insert or Replace. Done.
Use the built-in editor
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 live preview update on the right.
Insert into your document
Pick a template to get started quickly, then click Insert at Cursor.
