Mermaid Innovation - Introducing New Looks for Mermaid Diagrams

Discover the fresh new and unique Neo and Hand-Drawn looks for Mermaid Diagrams, while still offering the classic look you love.

Mermaid Innovation - Introducing New Looks for Mermaid Diagrams #

At Mermaid Chart, we’re pushing the boundaries of Mermaid. Today, we’re thrilled to unveil new features for our Mermaid diagrams. As a result of this, you might notice that the diagrams on our site look a bit different.

These changes result from the new default look we’ve introduced. By adopting the Neo look, we’re ensuring that your diagrams are better looking.

Adding Hand-Drawn and Neo Styles #

To give your diagrams a fresh and unique style, we’ve introduced some looks you can select for your Mermaid diagrams:

Neo Look: Our new default, the Neo look, offers a sleek, modern style that aligns perfectly with professional and polished presentations. It’s a custom style that brings clarity and sophistication to your diagrams.
Hand-Drawn Look with RoughJS: For those who love a more organic, sketch-like aesthetic, our hand-drawn style using RoughJS is perfect. This feature allows your diagrams to have a casual, hand-crafted appearance, adding a touch of personality and creativity.
Classical Look: For those who prefer the familiarity of the old style, we’ve got you covered. The classic option, allows users to maintain the traditional appearance of their diagrams. This ensures that you can still stick to what you know and love while embracing new features.

Seamless Theme Integration #

Customization doesn’t stop at styles. You can now combine these new looks with various themes to create visually stunning diagrams. For instance, you can pair the hand-drawn look with the Forest theme or why not combine the neo look with the neutral theme? Or perhaps you want to revert to the classic look with the Mermaid standard theme. The possibilities are endless.

In order to modify your diagrams, you can use the metadata section of your diagram. This is easy. Just add the following code to the top of your diagram code:

---
config:
  look: handDrawn
  theme: forest
---

This code configures the diagram to use the handDrawn look with the forest theme. These are the looks we support:

neo - the new neo look
handDrawn - the hand-drawn look
classic - the standard Mermaid look

These are the themes:

mc - Mermaid Chart
neo - the neo theme
neo-dark - dark theme for the neo look
default - the standard Mermaid theme
forest - a green theme
base - a yellow theme suitable for tweaking when building a custom theme
dark - Mermaid dark theme
neutral - a theme suitable for printing in black and white

Here is a full example of a diagram with configuration to use the standard Mermaid appearance. For that we would use look - classic and theme - default:

---
config:
  look: classic
  theme: default
---
flowchart TB
  A[Start] --Some text--> B(Continue)
  B --> C{Evaluate}
  C -- One --> D[Option 1]
  C -- Two --> E[Option 2]
  C -- Three --> F[fa:fa-car Option 3]

We currently support configuration of the diagram look for flowcharts and state diagrams, and we are actively working on adding this functionality to all diagram types.

That’s it! We hope you like it!

Give us a try for free and see the magic of Mermaid Chart — a smarter way to create diagrams.