Mermaid JS: Finally There's A Great UML & Diagram Drawing Tool

Hi! Thanks for sharing about Mermaid. Do u know is it possible to integrate with API to create module which accepts yaml or json file with data and returns the diagram? Thought about generating description for mermaid in chatgpt but later?

Nice video. I found it while I was struggling with Mermaid syntax. Let me post my problem here.
I have to represent a generic object. How do I represent
std::map<int,string>pMap;
in mermaid??

Did you tried d2 ?

Subscribed

I've been using PlantUML for the same purpose. In Gitlab you can use ```plantuml ``` code-box in your markdown (both documents and comments).

VSCode extension Polyglot Notebooks now has mermaid support build in and its now supereasy to create uml. Woohoo!

Yes I liked and subscribed! In researching the Cognitive Science of Diagrams for several years (including peer-reviewed presentations in Australia, Germany and Stanford AAAI 2010) this tutorial was very enlightening. I will view your other videos, with an eventual goal of forming a 'virtual' collaboration! @ajcodes

I can't get the erDiagram to render - did anyone else have this issue?

Awesome walkthrough! -- the exact tutorial what I was looking for.

For those who commented that would change from drawio to something like this or plantUML, what are your reasons? Just curiosity. I have tried plantUML but in the end I didn't like that I have to render the diagram to upload it to readmes or send it to someone else.

Drawio in the beginning was not working as I wanted but since I read someone in stackoverflow where you can change the extension of drawio files to write directly to svg files. It changed everything. I would like the programming approach to make diagrams but prefer more the portability/versatility of drawio.

Wow, this looks awesome. I've just started to learn coding and I really struggle with trying to get the visual flowcharts running the way I like. Will def. give this a go, thanks!

I signed up a few times but didn’t get any pdf!

thank you for the great video, helped me a lot!

Loved the oauth example for sequence diagram. Thanks for sharing.

keep with OOP man functional programming is awful

classDiagrams are just tables with extra steps

I don't believe Mermaid is mature enough to compete with PlantUML. It seems like it just contains a subset of the puml features.

Exporting as a PDF works fine for me from Code. I use Jebbs `Markdown Extended` and Matt Bierner's `Markdown Preview Mermaid Support`. Just right-click and Export to File. Not sure why it isn't working for you.

Thank you for introducing Mermaid. I found the option to turn this feature on in PyCharm, and it works like a dream :)

I recommend StarUML and WhiteStarUML. Great open source projects (StarUML also in commercial version). Long time user.

But I will definitely check this one out too!

Is it only for VS Code? I can't get it working in Visual Studio 2022 (and the documentation is *appalling*, with most of the links going to the wrong places, and the promised material not present even when you do go to the right place).

Nice - I used the Mermaid Live to follow along with you. Quite useful.

I use PlantUML.

we use MermaidJS to visualize our in house made worklfow manager: great tool!

I once got bullied on Stackoverflow for posting a code in comic sans font.

Yikes, but I am a MagicDraw guy since 95. FYI for functional, use Activity diagrams. You might start looking at SysML 2 which is web-based and has a similar interface.

I like to use Mark Text for writing and viewing markdown. It comes with Mermaid built in.

its unfinished plantuml copy

What a great tool! By the way, there is control over where the blocks are displayed - you just have to move the text to the right position. If you have 3 transitions than the order of the lines will be the same as the line numbering of the text. Once you change text lines the block position change on the graph.

Are there any tools that do the opposite, analize my code and output a flow chart?

In sequence diagrams you can use aliases like you did in the flowchart by doing "participant C as Client". Now you can use C instead of Client, but Client will show as the participant's name

Thanks for the great tutorial on the diagrams

How do you feel this compares to plant uml?

I am using Plantuml....

It's really great, if by "great" you mean "terrible" ;)
Seriously though, this is quite interesting. But it's still a drawing tool, even if you draw by typing. This is not a UML modeling tool and if we take any proper CASE tool supporting UML it will be more convenient and the result will actually be a UML model, not just a diagram that happens to follow the graphical notation prescribed in UML. But hey, whatever floats your boat!

Very good video - thx

Greetings from Austria to the Netherlands, Arjan :). Great video as usual. I also pretty much never used UML drawing tools because of the same reasons you mentioned. Recently, I tried PlantUML and was surprised how well it worked. Thanks for pointing out another alternative. I did not know about Mermaid.

You're not the only person who's recommended Mermaid... I've got to give it a go. I've struggled with Graphviz/Dot in the past but that was just a little bit too complicated. I hope, next time I need a diagram, Mermaid will save the day.

Echt ziek goeie video's, man!

If someone wants to create a Mermaid entity relationship diagram from an existing database - I created a small tool for that (it is called mermerd and is available on github)
Mermaid is in my opinion perfect for prototyping ideas if your get used to the syntax

Cool thing, this Mermaid. It reminds me of the approach of LaTeX using TikZ and possibly mhchem.

There is another plugin called mermaid export.

I don't like the generic apps like u mention as well, and I have been using PlantUML... kinda like Mermaid...

Thank you very much for this video. This is so great !

I use code2flow.

Another amazing video. THANKS

Mermaid to PDF in Vs Code is possible, I do it with the "Markdown PDF" extension. I cant say, why it does not work for your system. Maybe because I a m using "Markdown Preview Enhanced" as markdown renderer in Vs Code.