Mermaid Toolkit for Google Docs™ lets you create, edit, and render Mermaid diagrams as high-quality images directly inside your documents.

Official website: https://mermaid.numanaral.dev

## Features:

* Live side-by-side editor with real-time preview, line numbers, and built-in templates
* Auto-detect Mermaid code blocks in your document and render them all as diagrams
* Edit any diagram in place — select it and reopen the editor with its source pre-loaded
* Browse and edit all diagrams in your document from a single dashboard
* Convert diagrams back to code — extract the original Mermaid source from any diagram
* Import markdown with Mermaid blocks into your doc, or export your entire document as markdown
* Fix Google Docs™' native "Copy as Markdown" — repairs vertical tabs, stray backticks, and formatting artifacts
* Fits inserted diagram images to your document page so they stay within margins
* Supports flowcharts, sequence diagrams, Gantt charts, class diagrams, state diagrams, ER diagrams, pie charts, radar charts, architecture diagrams, and more
* 100% client-side rendering using mermaid.js — your document content never leaves your browser

## How to use:

### Use the built-in editor
1. Go to Extensions > Mermaid Toolkit > Insert Mermaid Diagram
2. Write or paste Mermaid syntax on the left, see the live preview on the right
3. Pick a template to get started quickly, then click Insert into Document

### Auto-render from your doc
1. Write Mermaid syntax inside a code block in your Google Docs™, or use fenced ```mermaid blocks
2. Go to Extensions > Mermaid Toolkit > Convert All Code to Diagrams
3. Preview each diagram, then click Insert or Replace

### Edit existing diagrams
1. Select a Mermaid diagram in your document
2. Go to Extensions > Mermaid Toolkit > Edit Selected Mermaid Diagram
3. The editor opens with the diagram's source — tweak and save in place