Simple desktops mermaids code#

The start graph TD indicates the orientation of the graph: top-down as opposed to LR(left-right), RL(right-left) or BT(bottom-top).

Simple desktops mermaids code#

Let’s look at some examples Mermaid can render for us, and what the code that generates it looks like: graph TD A -> B A -> C B -> D(Add them already) C -> E(Yay, what a great flowchart!) D -.->|you can even add text to them| A Personally, I find drawing with a mouse really difficult, so for me Mermaid is superior to using Paint or OneNote, and with some practice it is much faster to use than draw.io for example.

I have found that if you spend about half an hour on learning the syntax, you can completely replace any other graph drawing tool you use. This makes it possible to generate diagrams on the fly in a video call, much faster than hand-drawing them on a laptop. I‘ve already mentioned that Mermaid rearranges the boxes for you if you decide to add more stuff to your diagram. If you keep your diagram under Git version control (which you can easily, as it’s stored as text), a simple git diff will show you what changed in a human-readable way. This also means that you can easily see the changes to a diagram, unlike with any other image-based method. You will always have the code that generated the diagram, so you won’t end up with a beautiful, but outdated image file you can’t modify anymore. This makes the diagrams very easily maintainable. No painful dragging of boxes and arrows, you just type code based on a Markdown-inspired syntax. Unlike lots of other GUI-based graph drawing software, Mermaid is completely text-based. The same applies to new starters in your company - they will really appreciate having a diagram for every repository.Ī design diagram could save you from this -Comic by xkcd What makes Mermaid really cool Particularly for open source repos lots of people contribute to, it allows newcomers to familiarise themselves with the codebase quickly, instead of looking through what’s in each directory. Drawing the high level code base architecture, the information flow in a components or a lower level OOP class designs can help you spot design errors upfront, when it’s the cheapest to correct.Ī very underrated use for diagrams is putting one in your GitHub repository README file, displaying the code architecture. They are also helpful to draw for yourself if you just want to understand something that requires more information than what your working memory can deal with. If you include a diagram, they can find their way back to your explanation. If you give a lengthy, complicated explanation without a visual aid, most of your listeners will have zoned out after a minute, or already forgot the beginning. Pictures also grab the audience’s attention. This is also intuitive - you can draw conclusions form a bar or pie chart much faster than reading a list of numbers. We process a complicated structure faster if we see its visual representation, and it turns out we also remember it better - this is called the picture superiority effect. Human brains are much better at understanding images and patterns than text. It is certainly my favourite tool to create diagrams, I hope it becomes yours too! But why do we need diagrams? In this article, I will tell you about the different ways to use Mermaid, and show you some examples of what it’s capable of. Mermaid arranges the diagram sensibly for you, so you won’t have to worry about manually rearranging all your boxes if you forgot a middle step in a flowchart. You can create flowcharts to help you understand algorithms, Gantt charts for project management, pie charts, and many other common diagram types. You don’t have to draw anything, just write down what you want to see!

Mermaid is a tool that lets you create complicated diagrams in Markdown - it works with simple commands and an intuitive syntax. Trying to draw wonky boxes with your mouse in a drawing app, or dragging clunky arrows, all while your co-workers are watching your shared screen in a call is not fun, to say the least.īut there is a way to generate all your diagrams quickly and painlessly with code only, so you’ll never have to draw a box again! While it was easy to have a whiteboard session in the office, this is a lot more awkward online. However, with lots of us working remotely, it is more difficult to share spontaneous drawings when explanations fall short. How would you *not* want to use a tool called Mermaid 🧜‍♀️? Photo by Annette Batista Day