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

Поделиться
HTML-код
  • Опубликовано: 17 янв 2025

Комментарии • 119

  • @ArjanCodes
    @ArjanCodes  2 года назад +35

    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.

    • @programaths
      @programaths 2 года назад

      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!

    • @Dolshansky
      @Dolshansky Год назад

      As done Notion!

  • @julianeccleshall8397
    @julianeccleshall8397 Год назад

    Thanks!

  • @mathiassven
    @mathiassven 2 года назад +51

    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.

    • @vbaclasses3553
      @vbaclasses3553 2 года назад

      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.

    • @ArjanCodes
      @ArjanCodes  2 года назад +3

      Glad you enjoyed it, and great suggestion!

    • @martinleonhardt1541
      @martinleonhardt1541 2 года назад +1

      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.

    • @flakobatako
      @flakobatako 2 года назад +1

      @@ArjanCodes Also, what is the "pythonic" way of implement things like clean architecture (onion, hexagonal, etc etc)

  • @Torwals
    @Torwals 2 года назад +6

    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!

  • @kyleclark1315
    @kyleclark1315 2 года назад +2

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

    • @ArjanCodes
      @ArjanCodes  2 года назад

      Thanks so much Kyle, glad the content is helpful!

  • @aldrickdev
    @aldrickdev 2 года назад +42

    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.

    • @ChrisBNisbet
      @ChrisBNisbet 2 года назад

      Was going to ask the same thing.

    • @gunjanbansal4206
      @gunjanbansal4206 2 года назад

      Yes please that would be great to learn next

    • @twelvethis3979
      @twelvethis3979 2 года назад

      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?

    • @vbaclasses3553
      @vbaclasses3553 2 года назад

      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.

    • @ArjanCodes
      @ArjanCodes  2 года назад +1

      That’s a great suggestion, thanks!

  • @robertbrummayer4908
    @robertbrummayer4908 2 года назад +6

    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.

    • @edgarwesterhoven6729
      @edgarwesterhoven6729 2 года назад +2

      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.

  • @micortes89
    @micortes89 2 года назад

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

  • @fliplucky8813
    @fliplucky8813 2 года назад +5

    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

  • @jopa_ryds
    @jopa_ryds 2 года назад +1

    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!

    • @ArjanCodes
      @ArjanCodes  2 года назад

      Thanks JP, happy you’re enjoying the content!

  • @vintprox
    @vintprox 2 года назад +17

    I like VSCode extension for PlantUML. When compared to Mermaid, PlantUML routes lines consistently enough in bigger diagrams.

  • @הודגמרסני-ת5ל
    @הודגמרסני-ת5ל 2 года назад

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

  • @edgeeffect
    @edgeeffect 2 года назад +2

    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.

  • @slashd
    @slashd 2 года назад

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

  • @higiniofuentes2551
    @higiniofuentes2551 Год назад

    Thank you for this very useful video!

    • @ArjanCodes
      @ArjanCodes  Год назад +1

      Glad the video was helpful!

  • @truthseeker9988
    @truthseeker9988 23 дня назад

    👍👍👍👍Thanks for this cupcake!

  • @jagdeeshhooli930
    @jagdeeshhooli930 2 года назад +8

    We use PlantUML in our company and it works great!

  • @SadSack963
    @SadSack963 2 года назад +1

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

  • @vinzzzz16
    @vinzzzz16 2 года назад +2

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

  • @antecavlina8897
    @antecavlina8897 2 года назад +10

    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

    • @somefishhere
      @somefishhere 2 года назад

      Excalidraw keeps getting better and better

  • @nikhilgoyal007
    @nikhilgoyal007 22 дня назад

    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!

  • @Andremzsptm
    @Andremzsptm 2 года назад +2

    Definitely going to try this out. Thanks Arjan

  • @andreasellewsen9590
    @andreasellewsen9590 2 года назад +22

    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.

    • @ArjanCodes
      @ArjanCodes  2 года назад +3

      Good point, didn't think of that!

  • @VALERIYA1PROCKO
    @VALERIYA1PROCKO 2 года назад

    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.

  • @sabuein
    @sabuein 7 месяцев назад

    Thank you.

  • @abhashkumarsingh2673
    @abhashkumarsingh2673 Год назад

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

  • @jags78
    @jags78 2 года назад +1

    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 :)

  • @AnastasiyaPetrovych
    @AnastasiyaPetrovych Год назад +1

    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?

  • @higiniofuentes2551
    @higiniofuentes2551 Год назад

    I think there is an instruction: click used when clicking in one shape?
    Thank you!

  • @miguelomp
    @miguelomp 2 года назад

    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.

  • @xnick_uy
    @xnick_uy 2 года назад +3

    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 :-)

  • @plato4ek
    @plato4ek 2 года назад

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

  • @KarnerTh
    @KarnerTh 2 года назад +3

    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

  • @litan5006
    @litan5006 2 года назад

    Thanks for the great tutorial on the diagrams

  • @jupyter5k647
    @jupyter5k647 2 года назад +1

    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 💯

  • @iliqnew
    @iliqnew 2 года назад +1

    Another amazing video. THANKS

  • @ali57555
    @ali57555 2 года назад

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

  • @meinherzinHD
    @meinherzinHD Год назад

    hey, is there a way to export the diagram from vscode preview and save as PDF or PNG?

  • @jrkorman
    @jrkorman 2 года назад

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

  • @benherbst3620
    @benherbst3620 Год назад

    Subscribed

  • @higiniofuentes2551
    @higiniofuentes2551 Год назад

    If I have a website, how I can show the diagram created, is mermaid js?
    Thank you!

  • @marcoborgna
    @marcoborgna 2 года назад +1

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

  • @AchterHetBureau
    @AchterHetBureau 2 года назад +1

    Echt ziek goeie video's, man!

  • @khanra17
    @khanra17 Год назад

    Did you tried d2 ?

  • @jason_v12345
    @jason_v12345 7 месяцев назад

    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.

  • @julianeccleshall8397
    @julianeccleshall8397 Год назад

    just donated a very small amount of $$ to you, thanks for the video

  • @somefishhere
    @somefishhere 2 года назад

    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?

    • @ArjanCodes
      @ArjanCodes  2 года назад +4

      I recorded this video a couple of weeks ago, so the reference to Valentine’s Day is slightly outdated now, haha. 😊

    • @TheSilvaduxk
      @TheSilvaduxk 2 года назад

      Valentines Day! Heheh I ❤️ Diagrams

  • @superbroker.dxb007
    @superbroker.dxb007 2 года назад

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

    • @ArjanCodes
      @ArjanCodes  2 года назад

      Hi Memood, send me an email to support@arjancodes.com and I'll make sure you get the design guide.

  • @ecodemamut
    @ecodemamut Год назад

    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?

  • @collinvisser7108
    @collinvisser7108 2 года назад

    Very good video - thx

  • @going_dark
    @going_dark 2 года назад +2

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

  • @kesslerdupont6023
    @kesslerdupont6023 2 года назад

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

  • @MarioAVisca
    @MarioAVisca 2 года назад +7

    There are other alternatives, and maybe more mature, like plantUml

  • @purvimakwana-swallow2668
    @purvimakwana-swallow2668 2 года назад

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

  • @ZeZa1515
    @ZeZa1515 2 года назад

    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

  • @AshleyPOliver
    @AshleyPOliver 2 года назад +1

    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.

  • @Alche_mist
    @Alche_mist 2 года назад

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

  • @nicolameoli
    @nicolameoli 2 года назад +1

    If you need export PDF of markdown and mermaid, you should try the note taking app Joplin!

    • @ArjanCodes
      @ArjanCodes  2 года назад +1

      Thanks for the suggestion!

  • @sicus0
    @sicus0 2 года назад +3

    Reminds me a lot of GraphViz

  • @grmancool
    @grmancool 2 года назад +2

    does github support mermaid?

    • @jpconstantineau
      @jpconstantineau 2 года назад +3

      GitHub recently had a blog post on their blog about mermaid. I assume that if they posted about it, it would.

    • @ArjanCodes
      @ArjanCodes  2 года назад +7

      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.

  • @ahoe
    @ahoe 2 года назад +1

    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.

  • @RoyRope
    @RoyRope 2 года назад

    How do you feel this compares to plant uml?

  • @xr1140
    @xr1140 2 года назад

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

  • @acopernic
    @acopernic 2 года назад

    I am using Plantuml....

  • @enrique.sapien
    @enrique.sapien 2 года назад

    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!

  • @p_j_keenan
    @p_j_keenan 2 года назад +7

    GraphViz: "Hold my beer..." ;)

    • @Songfugel
      @Songfugel 2 года назад

      Sorry to ask, but GraphViz is?

  • @digitig
    @digitig 2 года назад

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

  • @mariohenriqueadaniya3042
    @mariohenriqueadaniya3042 2 года назад

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

  • @k.squared
    @k.squared 2 года назад

    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!

  • @Empusas1
    @Empusas1 2 года назад

    There is another plugin called mermaid export.

  • @sorrowseal
    @sorrowseal 2 года назад

    I use code2flow.

  • @JeroenMW2
    @JeroenMW2 2 года назад +1

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

  • @DanielBrookshier
    @DanielBrookshier 2 года назад

    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.

    • @ArjanCodes
      @ArjanCodes  2 года назад

      Thanks for the suggestion Daniel, I’ll look into it!

  • @yle5788
    @yle5788 2 года назад

    markdown preview enhanced

  • @samucancld
    @samucancld 2 года назад

    keep with OOP man functional programming is awful

  • @dmcg7900
    @dmcg7900 2 года назад

    classDiagrams are just tables with extra steps

  • @kudlas
    @kudlas 2 года назад

    its unfinished plantuml copy

  • @droptableusers1239
    @droptableusers1239 2 года назад +1

    uml more like lol

  • @TheSilvaduxk
    @TheSilvaduxk 2 года назад

    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

  • @SkynerGaming
    @SkynerGaming 2 года назад

    Nice I might start using this at work ... I have a hate hate relationship with draw.io!

  • @dboss67
    @dboss67 2 года назад

    About the last format:
    kroki.io/