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.
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