Totally forgot to mention this in the video, but GitHub also supports Mermaid. See for example the README file here: github.com/ArjanCodes/2022-bridge.
PlantUML is a great UML and drawing tool. It leverage GraphViz, which means that you get the FULL UML suit + GraphViz diagrams! Also works in Asciidoc!!! Top notch for documentation!
Hey, great mermaid walkthrough! About what you said on UMLs, You should make a video talking about functional programming, maybe talk about where you would have previously used classes and now instead prefer to use functions to model to flow of an application as you mentioned in this video.
Check out part 2 of the battleships coderoast ruclips.net/video/n0ngeLBJBNU/видео.html the first hint of the new Functional approach surfaces at around 11:25.
Agreed, Mathias! :) I was just about to suggest something similar. I would be really interested in his motivation behind it and what the benefits/drawbacks are comparing these two approaches.
Can you make a video about you moving towards functional approach when solving software problem, and maybe show an example of solving the same problem, but with a class based approach and then a functional approach. Also would be interesting to see how design principles change as you start moving towards a more functional approach. By the way great video.
Check out part 2 of the battleships coderoast ruclips.net/video/n0ngeLBJBNU/видео.html the first hint of the new Functional approach surfaces at around 11:25.
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.
Oh this is funny. I just found out about mermaid through obsidian. Your video has PERFECT timing. Thank you for the in-dept explanation in combination with programming concepts
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!
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.
Mermaid is now integrated in notion too. One type of diagram that was not mentionned and that is quit intereging is the stateDiagram-v2 bring value when thinking of possible status transitions. Thanks for the great videos, I'm looking forward to the next one...
i somehow prefer asciidoc + plantuml + graphviz and even though it is different in use but very cool for sketch drawing notes, boxes, lines and arrows with simple connectors is excalidraw, where you can also export as png or even svg...just install plugin in vscode and create a file with excalidraw as extension, then reopen and have fun... :D
thanks so much! super helpful. I was just wondering what is the best way to diagram sql individual field relationships (one to one / many to many etc). ER diagram is kind of showing the relationship at the table level and not the field level, hence the question. thanks!
You can actually avoid the arrows overlapping, but you'll have to accept that the order of your lines don't appear in the order that is logical for you. Take this one graph A --> B B --> C A --> C A --> D B --> D and try swapping lines around and you'll see that some versions overlap, while others don't.
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.
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::mappMap; in mermaid??
Thank you very much for the video. I started using Mermaid in my documentation some weeks ago (thx to Arjan) and there is no going back for me. In VSCode I use the extentions: - Markdown All In One - Markdown Preview Mermaid Support - Draw.io VS Code Integration With the combo of Markdown, Mermaid and sometimes Draw.io I suddenly WANT to write documentation for my coding projects :)
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?
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.
How did you know that I was just today drawing some flowcharts to better understand some old, complex scripts?! I like the mark down approach too. I'll give it a try :-)
If you move "B -->|Yes| E" in front of "B -->|No| C(Enter email)" the resulting diagram will be less intertwined, and I guess it'll be exactly what you are talking about at 8:59. Full example: ```mermaid flowchart S[Start] --> A(Enter email) A --> B{Existing user?} B -->|Yes| E B -->|No| C(Enter email) conditions D -->|No| A D -->|Yes| E(Send email with the magic link) E --> End ```
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
Looks like I'm gonna be ditching draw.io now haha. Thanks for the upload, you really helped me pick a solid tool for covering the UML aspect for my projects 💯
I don't like how it connects the arrows to the sides of the decision nodes instead of to the vertices, which is the standard way. This results in lines that go at odd angles and curves, instead of straight and neat horizontal and vertical lines.
Valentines is soon and the video is up now! Does that mean Arjun polishes these videos in post production or are the videos available sooner somewhere else?
The only UML diagram I often use is sequence, I would like to know if someone uses class diagrams and what for?, and, does anybody know a tool to turn model classes to plant or mermaid code?
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
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.
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.
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).
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!
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.
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
Totally forgot to mention this in the video, but GitHub also supports Mermaid. See for example the README file here: github.com/ArjanCodes/2022-bridge.
PlantUML is a great UML and drawing tool. It leverage GraphViz, which means that you get the FULL UML suit + GraphViz diagrams! Also works in Asciidoc!!!
Top notch for documentation!
As done Notion!
Thanks!
Thank you so much!
Hey, great mermaid walkthrough! About what you said on UMLs, You should make a video talking about functional programming, maybe talk about where you would have previously used classes and now instead prefer to use functions to model to flow of an application as you mentioned in this video.
Check out part 2 of the battleships coderoast ruclips.net/video/n0ngeLBJBNU/видео.html the first hint of the new Functional approach surfaces at around 11:25.
Glad you enjoyed it, and great suggestion!
Agreed, Mathias! :) I was just about to suggest something similar.
I would be really interested in his motivation behind it and what the benefits/drawbacks are comparing these two approaches.
@@ArjanCodes Also, what is the "pythonic" way of implement things like clean architecture (onion, hexagonal, etc etc)
Tested this out today in pycharm and the export to pdf works flawlessly with mermaid there. Thanks for the tip about this tool. Saves a lot of time!
Awesome walkthrough! -- the exact tutorial what I was looking for.
Thanks so much Kyle, glad the content is helpful!
Can you make a video about you moving towards functional approach when solving software problem, and maybe show an example of solving the same problem, but with a class based approach and then a functional approach. Also would be interesting to see how design principles change as you start moving towards a more functional approach.
By the way great video.
Was going to ask the same thing.
Yes please that would be great to learn next
Yeah, I'm interested in that, too. Are you also moving away from Python in the process as Python is not a functional programming language by design?
Check out part 2 of the battleships coderoast ruclips.net/video/n0ngeLBJBNU/видео.html the first hint of the new Functional approach surfaces at around 11:25.
That’s a great suggestion, thanks!
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.
I really enjoy the plantuml plugin for VSCode it can export to PNG or SVG. If you install it properly you can even do that straight from CLI.
Loved the oauth example for sequence diagram. Thanks for sharing.
Oh this is funny.
I just found out about mermaid through obsidian.
Your video has PERFECT timing. Thank you for the in-dept explanation in combination with programming concepts
You’re welcome!
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!
Thanks JP, happy you’re enjoying the content!
I like VSCode extension for PlantUML. When compared to Mermaid, PlantUML routes lines consistently enough in bigger diagrams.
thank you for the great video, helped me a lot!
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.
VSCode extension Polyglot Notebooks now has mermaid support build in and its now supereasy to create uml. Woohoo!
Thank you for this very useful video!
Glad the video was helpful!
👍👍👍👍Thanks for this cupcake!
We use PlantUML in our company and it works great!
Thank you for introducing Mermaid. I found the option to turn this feature on in PyCharm, and it works like a dream :)
Mermaid is now integrated in notion too. One type of diagram that was not mentionned and that is quit intereging is the stateDiagram-v2 bring value when thinking of possible status transitions. Thanks for the great videos, I'm looking forward to the next one...
i somehow prefer asciidoc + plantuml + graphviz and even though it is different in use but very cool for sketch drawing notes, boxes, lines and arrows with simple connectors is excalidraw, where you can also export as png or even svg...just install plugin in vscode and create a file with excalidraw as extension, then reopen and have fun... :D
Excalidraw keeps getting better and better
thanks so much! super helpful. I was just wondering what is the best way to diagram sql individual field relationships (one to one / many to many etc). ER diagram is kind of showing the relationship at the table level and not the field level, hence the question. thanks!
Definitely going to try this out. Thanks Arjan
You’re welcome!
You can actually avoid the arrows overlapping, but you'll have to accept that the order of your lines don't appear in the order that is logical for you. Take this one
graph
A --> B
B --> C
A --> C
A --> D
B --> D
and try swapping lines around and you'll see that some versions overlap, while others don't.
Good point, didn't think of that!
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.
Thank you.
You're welcome!
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::mappMap;
in mermaid??
Thank you very much for the video.
I started using Mermaid in my documentation some weeks ago (thx to Arjan) and there is no going back for me.
In VSCode I use the extentions:
- Markdown All In One
- Markdown Preview Mermaid Support
- Draw.io VS Code Integration
With the combo of Markdown, Mermaid and sometimes Draw.io I suddenly WANT to write documentation for my coding projects :)
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?
I think there is an instruction: click used when clicking in one shape?
Thank you!
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.
How did you know that I was just today drawing some flowcharts to better understand some old, complex scripts?! I like the mark down approach too. I'll give it a try :-)
If you move "B -->|Yes| E" in front of "B -->|No| C(Enter email)" the resulting diagram will be less intertwined, and I guess it'll be exactly what you are talking about at 8:59. Full example:
```mermaid
flowchart
S[Start] --> A(Enter email)
A --> B{Existing user?}
B -->|Yes| E
B -->|No| C(Enter email)
conditions
D -->|No| A
D -->|Yes| E(Send email with the magic link)
E --> End
```
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
Thanks for the great tutorial on the diagrams
Looks like I'm gonna be ditching draw.io now haha.
Thanks for the upload, you really helped me pick a solid tool for covering the UML aspect for my projects 💯
Another amazing video. THANKS
You’re welcome!
Thank you very much for this video. This is so great !
hey, is there a way to export the diagram from vscode preview and save as PDF or PNG?
Nice - I used the Mermaid Live to follow along with you. Quite useful.
Subscribed
If I have a website, how I can show the diagram created, is mermaid js?
Thank you!
we use MermaidJS to visualize our in house made worklfow manager: great tool!
Echt ziek goeie video's, man!
Did you tried d2 ?
I don't like how it connects the arrows to the sides of the decision nodes instead of to the vertices, which is the standard way. This results in lines that go at odd angles and curves, instead of straight and neat horizontal and vertical lines.
just donated a very small amount of $$ to you, thanks for the video
Valentines is soon and the video is up now! Does that mean Arjun polishes these videos in post production or are the videos available sooner somewhere else?
I recorded this video a couple of weeks ago, so the reference to Valentine’s Day is slightly outdated now, haha. 😊
Valentines Day! Heheh I ❤️ Diagrams
I signed up a few times but didn’t get any pdf!
Hi Memood, send me an email to support@arjancodes.com and I'll make sure you get the design guide.
The only UML diagram I often use is sequence, I would like to know if someone uses class diagrams and what for?, and, does anybody know a tool to turn model classes to plant or mermaid code?
Very good video - thx
I once got bullied on Stackoverflow for posting a code in comic sans font.
I like to use Mark Text for writing and viewing markdown. It comes with Mermaid built in.
There are other alternatives, and maybe more mature, like plantUml
I can't get the erDiagram to render - did anyone else have this issue?
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
Nice tip, thank you!
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.
Cool thing, this Mermaid. It reminds me of the approach of LaTeX using TikZ and possibly mhchem.
If you need export PDF of markdown and mermaid, you should try the note taking app Joplin!
Thanks for the suggestion!
Reminds me a lot of GraphViz
does github support mermaid?
GitHub recently had a blog post on their blog about mermaid. I assume that if they posted about it, it would.
Yes it does, forgot to mention that in the video. See for example the readme of a recent code example of mine: github.com/ArjanCodes/2022-bridge.
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.
How do you feel this compares to plant uml?
Are there any tools that do the opposite, analize my code and output a flow chart?
I am using Plantuml....
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!
GraphViz: "Hold my beer..." ;)
Sorry to ask, but GraphViz is?
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).
I don't like the generic apps like u mention as well, and I have been using PlantUML... kinda like Mermaid...
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!
There is another plugin called mermaid export.
I use code2flow.
I don't believe Mermaid is mature enough to compete with PlantUML. It seems like it just contains a subset of the puml features.
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.
Thanks for the suggestion Daniel, I’ll look into it!
markdown preview enhanced
keep with OOP man functional programming is awful
classDiagrams are just tables with extra steps
its unfinished plantuml copy
uml more like lol
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
Awesome, thank you!
Nice I might start using this at work ... I have a hate hate relationship with draw.io!
About the last format:
kroki.io/