Mermaid Live Editor for Diagram Creation

Hey @Michael Olver ! Great question, thanks for posting!

I think our Product team would be interested in hearing about this so if you have time, please share this in the Product Feedback area. Here are some suggestions for how to provide actionable feedback before posting as well! 

I posted the question to our Guru engineering team to see if we could get some ideas, but the first person that came to mind to help is @Donovan Watts ! Around this time last year, Donovan shared some go-to Cards of his that featured comprehensive diagrams.  Donovan, if you have the chance to jump in, what’s your workflow to add diagrams to Cards? 

Here are some resources for uploading resources/embedding files: 

• Uploading files and images to Cards
• When to include files in Guru Cards: Best practices
• When to embed Google Drive assets in Cards

Hi Callie, I’m a total noob but is it just a case of me “starting a discussion” and listing it as “feedback” within the product feedback area? Given that i’ve had such low hits I’m guessing this is quite a niche requests but the guys are quite set on having something and I like to keep them happy :)

@Michael Olver yes exactly! It’s still good to get it in there, you never know! :) 

One of my engineering team members shared a workaround he’s used:  

If you make an html page like this you can iframe that in a guru card. the drawbacks are:

1. The html page can't be hosted in Guru (e.g. uploaded to a card like you'd attach a pdf)
2. The page might not be that easy to edit/update. it depends on how you host it.

Keep me updated if you end up experimenting with this!

Hi @Michael Olver and @Callie Rojewski I thought I might follow up on this in case either of you had come across another solve for mermaid diagramming. We have some support and engineer folks who would like to be able to utilize this in Guru as we migrate over from a Gitlab KMS instance. Any new updates? Also copying @Donovan Watts and @Tomasz Poznański.

Since we can now convert questions to ideas I’ve done that for this post. 

We don’t have any plans for adding diagramming functionality to Guru’s editor at this time but we’ll keep this post open. In terms of other options, the only thing that comes to mind is embedding files from tools like Lucidchart. Perhaps there will be some other ideas from other Community members!

Hi @Lynn Miller - we are also looking forward to this feature, since a significant part of our documentation includes diagrams and decision flows, and Mermaid/PlantUML would be very useful here. From the implementation perspective, it is almost an out-of-the-box solution that does not require extensive development work, so I hope the Guru team will review this again. 

In the meantime, we created a temporary solution - our Mermaid diagrams are stored in Gitlab, and we use a manual API sync to import them as SVG files. This, however, solves the problem only partially, as you still cannot create diagrams natively in Guru. The diagrams are only available in synced (read-only) collections. 

Mermaid is a brilliant tool to express any kind of diagram with a small amount of code. I prefer this way over any other especially any hand-writing tool like Lucidchart. Moreover, I can just copy & paste my diagram code from a git repository as a text. My diagrams could be merged or analyzed just as snippets of code. If I need to reuse a code of some diagram I can do it by copying and pasting its code into another, more complex, diagram. And the layout will be made automatically without any hand-moving stuff. We are programmers, not painters. Mermaid is a just great step in the evolution of the paradigm “diagram-as-a-code”.

Our team is in the process of adopting Guru, and we plan on making extensive use of Guru’s Manual Sync feature. A primary use case is importing markdown files from GitHub repos, and these files often contain Mermaid diagrams (GitHub supports Mermaid for markdown display).

Mermaid increasingly feels like a natural part of markdown documentation. The fact that Guru is able to import markdown files from sources like GitHub repos but not the mermaid diagrams that often accompany them is definitely an adoption pain point. Even if Mermaid doesn’t get support within the Guru card editor any time soon, it would be great if Guru could ingest Mermaid and covert it to SVG (a feature of the core Mermaid library) for inclusion in cards.