Luckily justsketchme has come to the rescue!
Mermaid: Create diagrams quickly and effortlessly
If you’ve ever tried to explain anything complicated — be it an algorithm, a code base structure or a project plan — you probably know how useful good diagrams are.
However, with lots of us working remotely, it is more difficult to share spontaneous drawings when explanations fall short. While it was easy to have a whiteboard session in the office, this is a lot more awkward online. 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.
But 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!
Mermaid is a tool that lets you create complicated diagrams in Markdown — it works with simple commands and an intuitive syntax. You don’t have to draw anything, just write down what you want to see!
You can create flowcharts to help you understand algorithms, Gantt charts for project management, pie charts, and many other common diagram types.
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.
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. It is certainly my favourite tool to create diagrams, I hope it becomes yours too!
But why do we need diagrams?
Human brains are much better at understanding images and patterns than text. 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. This is also intuitive — you can draw conclusions form a bar or pie chart much faster than reading a list of numbers.
Pictures also grab the audience’s attention. 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. If you include a diagram, they can find their way back to your explanation.
Step 1
Open up JustSketchMe, load their mermaid model, and start moving her around. JustSketchMe has full 3-D turnaround capabilities, can zoom in and out, and can pose the arms and mermaid tail in any preferred way. You can play around with the angles as long as you like until you find something that matches the idea in your head. After I found the perfect pose, I took an easy in-app screenshot.
Step 2
Create an artboard in the illustration app of your choice (I chose Photoshop), then drag and drop the screenshot. On a new layer, trace over the screenshot until you have a sketch you are happy with. Don’t worry about making mistakes and trying different things – it’s all part of the process; I redrew the face 5 times.
For this artwork, I kept the rough linework, instead of redoing it neatly, but you might prefer a clean drawing style.
Step 3
Before colouring, first, define your colour palette. I made a small palette for myself on a new layer and kept it on the screen as I went on to keep me on the right track.
After deciding on your main colours, go ahead and draw the main shapes, each on a new layer. As you are doing it you should lower the opacity of the linework so you can make sure the outside of the shapes is clean.
When you are done, make sure to lock each layer, so you can shade it without going outside the shape.
