Hey yall!!!
Excited to have this finally out in the Google Workspace Marketplace and thought I would share a bit about the journey and just share the tool!
TLDR:
It’s a Google Doc add-on that lets you work with Mermaid diagrams directly inside Google Docs. It allows interaction with mermaid diagrams (create, edit, convert) and it has import & export capabilities for / from markdown that’s easy for getting markdown in and out to your AI tools to understand. Give it a try and let me know what you think, either here, or in github or directly in the marketplace! All feedback is good feedback so don’t hesitate!!
Website: https://mermaid.numanaral.dev
A little more on the journey!
These days a lot of PRDs, TDDs, Design Docs etc. start in AI tools like Cursor, Claude Code, Codex, or any tool that can access a big chunk of data (code, docs, notes etc.) and save you hours and hours worth of manual work. But considering we are all busy ai’ing 19 projects at the same time, wouldn’t it be nice to have a way to explain your idea to stakeholders easily, or, on the other hand, have a quick look on the doc you gotta review? Well, diagrams are there to help! But drawing them or creating them wasn’t as easy as it is now thanks to mermaid.js where you can easily “code” your diagram and LLMs essentially can see the diagrams as text and have a better understanding of the doc fast and better without guesswork on screenshots and whatnot.
Now this is all good, but you may be using Google Docs a lot for your artifacts at your company, or you just store things in there for the ecosystem. Now how do we get this entire PRD into google docs? Welll, paste as markdown (if you didn’t know, google docs has copy & paste as markdown that you can enable), then go to another tool, generate the diagrams and then paste them manually. But then what if you want to make drastic changes on the doc? Copy as markdown will convert the images into base64 blobs which is not exactly fun when you want to feed the doc back into an AI tool… And that’s not very context friendly and have you ever seen how ridiculously large these blobs in plain-text can get? I mean there is just so much back and forth and manual work, and it’s the age of automation. Sometimes you may not easily have API access to fully automate this, or your legal team may be preventing you from things, thus no Google MCP for you, so you have to go through some sort of manual process…
Now that’s a lot of blabber, let’s get an example in for you to understand a current flow:
Write your PRD with mermaid syntax somewhere, render it in another tool, export/copy the image, paste it into the doc, then repeat the whole process every time the diagram / content changed or needs to be updated. Google Docs has “Paste as Markdown”, which helps a bit, but “Copy as Markdown” with images can turn those images into huge base64 blobs. Not exactly fun when you want to feed the doc back into an AI tool without wasting a ridiculous amount of tokens.
So I built an add-on that lets you work with Mermaid diagrams directly inside Google Docs.
It can:
-
Insert / Edit Mermaid diagrams from a live editor
-
Convert Mermaid code blocks in a doc into diagrams, and vice versa
-
Import Markdown with Mermaid blocks and export the doc back to Markdown with Mermaid source preserved, so instead of base64 blobs, you get the original mermaid source code back
This is all done on client-side, there is absolutely no data collection or analytics (beside whatever google may collect that’s outside my control), so this should be easy for internal company approval, within our company, it is going very smoothly so far! If you need to use this within your company SSO, you are in luck!
Noww, let’s talk about the fun part of getting this released! It was a learning experience for sure, and made me appreciate tool creators in the Google ecosystem a lot… You want to re-use copy / parse as markdown? Well, not available. You want to create code blocks? Well, not available to free users, and doesn’t have API support… Native checkboxes? I mean there is a hacky way to do via bulk insert and advanced doc api, but now you have a broader scope, and approvers think that you are trying to take over the world - jokes aside, I respect the decision, nobody wants to take responsibility.. -.
Before it got all this deep, honestly I just wanted to build a simple convert back and forth tool, but before I knew, I wanted to include the entire world in it as well, and have a better design and as always, trying to perfect all parts of it… During this process, I actually sent an initial request, got rejected because I had to include TMs, then another rejection, because I didn’t have my own domain (I was using github pages). Fun fact, after years and years of procrastination, I finally bought my own domain (numanaral.dev) because Google needed a domain I owned for the public branding/site requirements. Well, now the domain was in, my approval got rejected because I had to get branding in, then youtube video with, and then my oath scope was rejected because it was too broad due to me trying to hack native checkboxes… And yeah after a heck lot of back and forth and various iterations, I finally got it approved without having to give up on a lot of core functionality, it is finally out there!! It felt like ages, and during this process I made a lot of improvements and yeah thus came all the features in there..
I could have taken the easy way out and build this internally at our company, but I felt this pain among many others, and just like how much love my random Vercel Deployment Source Downloader got, I was like hey, if some of us have this problem, there are likely many others too! So I decided to go down the way longer route, open source and share the love!!
If you read thus far, congrats for going through all that blabber! It’s one thing out of my chest and yeah hope this tool can be useful for you!!
Super open to feedback and suggestions, and feel free to open any issues on the github repo!
P.S. funny enough, you will likely get to install this before our folks at the company lol - last layer of approval has 14-day SLA!!!