Mermaid In Markdown, Diagrams As Code: Introduction, How-to, And Demo

Creating diagrams have never been easier! With Mermaid you just write some code and see your diagrams come to life!
Further resources:
My Mermaid code samples: github.com/Pet...
The documentation: mermaid.js.org...
Extension to Visual Studio Code for rendering Mermaid: marketplace.vi...
Socials:
Ask me stuff on Twitter: / pettertech
Catch me live on Twitch: / pettertech
Follow me on LinkedIn: / pettertech
Check out my awful code at Github: github.com/Pet...
I also have merch: merch.streamel...

[@PetterTech]

Do you see use for mermaid in your workflow? Or do you prefer something like Lucidchart, draw.io or Visio?

[@higiniofuentes2551]

Thank you for this very useful video!

[@goodmanshawnhuang]

Nice one, it's a great idea to create diagrams as code, thanks for sharing it. I'm looking for alternative one with Python code, any ideas? :)

[@PetterTech]

Sadly, I haven’t gotten around to learning Python so I can’t really help you there

[@jasonhall947]

Thank you!

[@PetterTech]

You're welcome!

[@peterjohannessen9928]

Cool, are all these chart types available in Azure Devops?

[@higiniofuentes2551]

Is possible to click in any of the elements and trigger something like another diagram or action?
Is possible to pass over an element and show a text, diagram or reference?
Thank you!

[@PetterTech]

As of now, I don't think that is possible. But they have started building some more accessibility features so that may change in the future.

[@sohifeli8585]

Молодец, старайся дальше

[@PetterTech]

Thanks mate!

[@vaggelisvaxevanis.codemode]

Is there an option to save the diagram as png or else ?

[@PetterTech]

There is no standard way of doing so no. That would kind of defeat the purpose of having the diagrams as code as well. The moment you save it as png it's no longer editable and no longer "alive".
Having your diagrams as code makes it easier to maintain and update them, that's the entire point :)
But if you are looking for simple tools to make diagrams I can recommend Lucidchart or draw.io, both are easy to work with 👍

[@DeysonCondori]

@@PetterTech pero si lo visualizas como HTML lo podes guardar en PDF

[@johnmorsley]

I really want to watch this but I cannot hear what you're saying over the distracting background music!

[@PetterTech]

Sorry to hear that, but thanks for the feedback! I'll keep it in mind going forward 👍