Mermaid for google docs
This addon lets you create and edit text based graphs directly in the google docs ui
Add this google docs addon to enjoy the power of the mermaid library in google docs.
link to the addon in the Google Workspace Marketplace
This addon lets you create and edit text based graphs directly in the google docs ui
Add this google docs addon to enjoy the power of the mermaid library in google docs.
Working at virtualQ, it happened a few times that I'd start a project with unclear requirements, then presented it to the rest of the team just to see everything needing to be changed or canceled.
To avoid such disappointing outcome, I tried to make more design docs. A design doc is roughly said a document that will detail all the possible solutions to a problem, and serve as a support for debate, ideas and discussions. After a design doc is accepted by the team, you can go ahead with the development with less risk of requirements being inadequate.
Most features would include some back end and front end elements, and some user flows. Trying to make the documents more readable, I added as many sequence diagrams as possible. Sequence diagrams are excellent at communicating a process. Their layout forces you to be succinct as there's not much space for walls of texts and unnecessary details.
I first edited the diagrams in the excellent websequencediagrams.com and pasted a screenshot in the google documents, but that was a bit of a pain to maintain. This tool keeps a copy of the source code, so i'd just need to edit it and update the resulting picture in the google document, but no one else had access to said source code. I thought i could just save the source code in the image description field in google docs, to make it easier to update the diagram for anyone in the team.
This is when I realized i could use this "trick" to create a google docs add-on. In a classic case of "putting off writing documentation by focusing on the tools used in documenting", I followed the (super confusing) tutorials on the google documentation website for G Suite add-ons.
![Screenshot of the mermaid add-on in the g-suite marketplace](https://lecaro.me/media/posts/8/Screenshot-from-2020-06-05-08-52-21.png)
The project has evolved a bit with time but stays relatively simple in terms of code. It has gathered quite a lot of users (10K) despite me not putting any efforts in marketing it. I guess we have a product-market fit here, but no business plan at all. This is really just a few lines of JavaScript to make the power of the mermaid JS library available in google docs. I don't think it makes sense to charge for it, and it costs nothing to keep it running.
I've made it open source, with the code hosted on github, feel free to have a look there : https://github.com/renanlecaro/mermaid-gdocs
The mermaid add-on listed in the g-suite marketplace