user journey diagram mermaid

DEV Community

Posted on Jan 23, 2023

Creating sequence diagrams using mermaidjs to map out your user journey

I want to talk about an effective product planning process I've been following recently.

Why to do user journey thinking?

In your product, single most important thing is to put your users first. Nothing matters other than how your users perceive your product. "Users" is a very general and broad definition and often used without much nuance of different user personas. Anybody who interacts with your product is your user, including you as "admin" or "owner". There are many other user personas you may need to consider when designing a feature. It's also important to think maturity of your users adoption of your product. A user who is new to your overall product may take your new feature in a different way than a power user. Similarly, your small biz client's users may need different things than your enterprise client.

User journeys can easily highlight differences between these users and how they interact with your product or each other. Your feature may require a tech lead to configure things first in your product, then tell their editors to do other things while editors may need to work with their development team to accomplish other goals. So a simple looking feature may require couple different team members to collaborate and communicate.

Sequence Diagrams

Sequence diagram is a type of diagram that does great job telling 2 things:

• How many participants in a journey
• The order of things between which participants happen.

And example to this would be, order a food at a restaurant.

Participants:

And maybe steps would be:

• Guest asks Host can I have a table for 2?
• Host shows and sits the Guests to a table.
• Waiter comes to the table and asks for order from Guests.
• Guests places their order.
• Waiter tells Kitchen about the order
• Kitchen prepares the order
• Kitchen tells Waiter that order is ready.
• Waiter brings food to the table to the Guests

A journey like this can be visualized in a sequence diagram like this:

As you see, if we were to design a food ordering feature, we may want to visualize traditional way of ordering food and also visualize our better food ordering experience with our new product feature.

How about user stories?

User stories are key when developing a product. Written user stories are best to summarize a capability, a feature or a user goal. A traditional story would look like:

As a < persona >, I want to < action >, so that I can get < benefit>

User stories written in this traditional sense brings clear, structured, short and written form to your product features. They are essential when the engineering team is planning their implementation in project management tools. Often a user story is planned as a story and engineering team can break it down to sub-tasks about the implementation steps. If user story is describing a bigger goal, it can be planned as an epic and sub stories and tasks can be planned under it.

Let's roll back to our user journey mapping with sequence diagrams. As you see here, this process does not replace but complements user stories. It makes sense to make the user journey mapping practice before finalizing user stories when planning a product.

Using Mermaid.js for quick Diagramming Tool

Mermaid is an open source software that draws different types of diagrams using simple structured text. One of the diagram types mermaid support is sequence diagrams.

Mermaid draws a sequence diagram using a text formatted like this:

Renders to a nice sequence diagram:

Mermaid Tooling

I've covered how to edit and manage mermaid diagrams in your favorite tools in a past article .

You can also alternatively create similar diagrams in free-form mode with excalidraw which I also like. I've talked about excalidraw in my previous posts . It will give you way more control to make your diagrams look exactly like you want but obviously it will take much more time to create one compared to mermaid.js diagrams.

This article was first published on my personal blog: https://mfyz.com/creating-sequence-diagrams-using-mermaidjs-to-map-out-your-user-journey/

Top comments (0)

Templates let you quickly answer FAQs or store snippets for re-use.

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink .

Hide child comments as well

For further actions, you may consider blocking this person and/or reporting abuse

The Comprehensive Guide to DevOps

Sakshi - Jun 10

Use OpenAI in your JavaScript project the easy way with Ragged

Monarch Wadia - Jun 10

I am a Blockchain Developer and Full stack Developer.

AngryDumbledore - Jun 10

Top 10 Automation Testing Skills You Need To Learn

Salesforce Hulk - Jun 10

We're a place where coders share, stay up-to-date and grow their careers.

Mermaid tutorial, Mermaid flow chart, Mermaid syntax, Mermaid instructions, Mermaid reference documents, Mermaid drawing steps

User journey diagram.

User journeys describe at a high level of detail exactly what steps different users take to complete a specific task within a system, application or website. This technique shows the current (as-is) user workflow, and reveals areas of improvement for the to-be workflow. (Wikipedia)

Code Chart can render user journey diagrams:

Each user journey is split into sections, these describe the part of the task the user is trying to complete.

Tasks syntax is Task name: <score>: <comma separated list of actors>

Mapping User Journeys with Mermaid.js

Identifying & communicating key points in the user experience with simple markdown.

User Journey Maps are an interesting diagram in product development that I'm starting to see more and more. These diagrams, like the one pictured below, allow you to visualize the entire flow of a user trying to accomplish a task.

In this article, we'll explore how to easily create User Journey Maps using markdown and Mermaid.js.

What are User Journey Maps?

The key benefit of User Journey Maps is that they allow you to see the things that are contributing to a positive experience as well as a negative experience.

User Journey Maps do this by plotting each part of a user's experience as a story from the left to the right. The user's satisfaction level with each leg of their journey is usually depicted in the vertical axis along with a helpful emoji indicating how pleased the user is.

The end result of a user journey map is that you can quickly visualize the strong and weak areas of your products and services and make targeted improvements to improve the overall experience.

In this article, we'll explore how to create user journey map diagrams in markdown using Mermaid.js.

What is Mermaid.js?

Mermaid.js is an open-source diagramming library in JavaScript that takes specialized markdown and "automagically" converts it into a working diagram.

There are many different diagrams that are supported by Mermaid.js including entity relationship diagrams , sequence diagrams , class diagrams , and even git graphs .

Mermaid.js is supported in a variety of tools and services including GitHub markdown, Polyglot Notebooks , a Visual Studio extension, and a live online editor. Mermaid.js can also be manually included in any website you create.

Basic User Journey Maps in Mermaid.js

At its most basic level, a user journey map with Mermaid.js starts with a journey node, followed by a list of tasks, a colon, and the user's satisfaction level.

Mermaid.js works best if you provide a 0 for your lowest level of satisfaction and up to a 7 for your highest level of satisfaction.

Here is a user journey map describing the experience of attending a fictional tech conference:

In this hypothetical example, the low points of the experience were purchasing tickets and lunch, while the high points involved the movie, sessions, and schedule experience.

Adding Sections to a User Journey Map with Mermaid.js

Sometimes your user journey involves distinct phases that can be helpful to highlight. For example, if a user transitions from one team or area of your product to another, representing this on the map can be very helpful.

In Mermaid.js, we can add section nodes to the markdown to group individual tasks into these sections as shown below:

This can help highlight the highs and lows of various segments of a user's journey as well as entire sections that might be below par.

Adding Participants to a User Journey Map with Mermaid.js

Finally, Mermaid.js user journey maps allow us to indicate the participants in each task. This can help you identify factors for good and bad user experiences across all legs of the user journey.

Participants can optionally be named for each task by adding a : following each score and then a comma-separated list of participants. Mermaid.js will then automatically assign each participant a color and include them in the legend.

In this particular example, I don't see any strong indicators of good or poor performance based on the participants. However, participants can be helpful in identifying unusual trends as well as simply communicating who is involved in each leg of the journey to various stakeholders.

Closing Thoughts

I personally haven't used user journey maps much through my career, but I see a lot of potential for them.

User journey maps can help:

• Highlight strong and weak areas
• Map the user's experience from start to finish
• Identify key participants in the journey
• Find correlations between participants and strong and weak areas

I plan on using user journey maps significantly more in the future, and the ease of using Mermaid.js to create effective visualizations is one key reason why.

Matt Eland is a software engineering leader and data scientist who has served as a senior engineer, software engineering manager, professional programming instructor, and has helped build enterprise-level software at a variety of organizations before distinguishing himself as a Microsoft MVP in Artificial Intelligence by using technology to accomplish ridiculous things in the name of science and teaching others. Matt makes it his job to learn new things and share them with others through articles, videos, and talks at user groups and conferences covering a wide range of topics from software architecture to programming topics to artificial intelligence and data science. Matt is a current data analytics master's student, an AI Specialist at Leading EDJE, is the author of "Refactoring with C#" and is creating a LinkedIn course and book on Computer Vision on Azure. Matt occasionally sleeps as well.

Related Content

[…] Mapping User Journeys with Mermaid.js and Illustrating git Branching with Markdown & Mermaid.js (Matt Eland) […]

Leave a Reply Cancel reply

Sequence diagrams in markdown with mermaid.js, creating class diagrams with mermaid.js, mind maps in markdown with mermaid.js, creating gantt charts with markdown and mermaid.js, diagramming finite state machines with mermaid.js, text-based entity relationship diagrams with mermaid.js, how to make flowcharts with mermaid.js, creating timeline charts with mermaid.js, how to use .gitignore files, creating sysml requirement diagrams in mermaid.js, illustrating git branching with markdown & mermaid.js, making pie (charts) out of mermaid.js.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More

Discover more from The New Dev's Guide

Subscribe now to keep reading and get access to the full archive.

Type your email…

Continue reading

Engineering

• Open Source

Include diagrams in your Markdown files with Mermaid

A picture tells a thousand words. Now you can quickly create and edit diagrams in markdown using words with Mermaid support in your Markdown files.

A picture tells a thousand words, but up until now the only way to include pictures and diagrams in your Markdown files on GitHub has been to embed an image. We added support for embedding SVGs recently , but sometimes you want to keep your diagrams up to date with your docs and create something as easily as doing ASCII art, but a lot prettier.

Enter Mermaid 🧜‍♀️🧜‍♂️

Mermaid is a JavaScript based diagramming and charting tool that takes Markdown-inspired text definitions and creates diagrams dynamically in the browser. Maintained by Knut Sveidqvist , it supports a bunch of different common diagram types for software projects, including flowcharts, UML, Git graphs, user journey diagrams, and even the dreaded Gantt chart.

Working with Knut and also the wider community at CommonMark , we’ve rolled out a change that will allow you to create graphs inline using Mermaid syntax , for example:

The raw code block above will appear as this diagram in the rendered Markdown:

How it works

When we encounter code blocks marked as mermaid , we generate an iframe that takes the raw Mermaid syntax and passes it to Mermaid.js, turning that code into a diagram in your local browser.

We achieve this through a two-stage process—GitHub’s HTML pipeline and Viewscreen, our internal file rendering service.

First, we add a filter to the HTML pipeline that looks for raw pre tags with the mermaid language designation and substitutes it with a template that works progressively, such that clients requesting content with embedded Mermaid in a non-JavaScript environment (such as an API request) will see the original Markdown code.

Next, assuming the content is viewed in a JavaScript-enabled environment, we inject an iframe into the page, pointing the src attribute to the Viewscreen service. This has several advantages:

• It offloads the library to an external service, keeping the JavaScript payload we need to serve from Rails smaller.
• Rendering the charts asynchronously helps eliminate the overhead of potentially rendering several charts before sending the compiled ERB view to the client.
• User-supplied content is locked away in an iframe, where it has less potential to cause mischief on the GitHub page that the chart is loaded into.

The net result is fast, easily editable, and vector-based diagrams right in your documentation where you need them.

Mermaid has been getting increasingly popular with developers and has a rich community of contributors led by the maintainer Knut Sveidqvist . We are very grateful for Knut’s support in bringing this feature to everyone on GitHub. If you’d like to learn more about the Mermaid syntax, head over to the Mermaid website or check out Knut’s first official Mermaid book .

Related posts

How GitHub reduced testing time for iOS apps with new runner features

Learn how GitHub used macOS and Apple Silicon runners for GitHub Actions to build, test, and deploy our iOS app faster.

Securing Git: Addressing 5 new vulnerabilities

Git is releasing several new versions to address five CVEs. Upgrading to the latest Git version is essential to protect against these vulnerabilities.

GitHub Availability Report: April 2024

In April, we experienced four incidents that resulted in degraded performance across GitHub services.

Explore more from GitHub

Github universe 2024, github copilot, work at github, subscribe to our newsletter.

Code with confidence. Discover tips, technical guides, and best practices in our biweekly newsletter just for devs.

Navigation Menu

Search code, repositories, users, issues, pull requests..., provide feedback.

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly.

To see all available qualifiers, see our documentation .

• Notifications You must be signed in to change notification settings

About Mermaid #

Mermaid lets you create diagrams and visualizations using text and code.

It is a JavaScript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically.

If you are familiar with Markdown you should have no problem learning Mermaid's Syntax .

Mermaid is a JavaScript based diagramming and charting tool that uses Markdown-inspired text definitions and a renderer to create and modify complex diagrams. The main purpose of Mermaid is to help documentation catch up with development.

Doc-Rot is a Catch-22 that Mermaid helps to solve.

Diagramming and documentation costs precious developer time and gets outdated quickly. But not having diagrams or docs ruins productivity and hurts organizational learning. Mermaid addresses this problem by enabling users to create easily modifiable diagrams, it can also be made part of production scripts (and other pieces of code). Mermaid allows even non-programmers to easily create detailed and diagrams through the Mermaid Live Editor . Tutorials has video tutorials. Use Mermaid with your favorite applications, check out the list of Integrations and Usages of Mermaid .

For a more detailed introduction to Mermaid and some of its more basic uses, look to the Beginner's Guide and Usage .

🌐 CDN | 📖 Documentation | 🙌 Contribution | 🔌 Plug-Ins

🖖 Keep a steady pulse: mermaid needs more Collaborators, Read More .

🏆 Mermaid was nominated and won the JS Open Source Awards (2019) in the category "The most exciting use of technology"!!!

Thanks to all involved, people committing pull requests, people answering questions and special thanks to Tyler Long who is helping me maintain the project 🙏

In our release process we rely heavily on visual regression tests using applitools . Applitools is a great service which has been easy to use and integrate with our tests.

Diagram Types #

Flowchart #, sequence diagram #, gantt diagram #, class diagram #, git graph #, entity relationship diagram - ❗ experimental #, user journey diagram #, installation #.

In depth guides and examples can be found at Getting Started and Usage .

It would also be helpful to learn more about mermaid's Syntax .

To select a version:

Replace <version> with the desired version number.

Latest Version: https://unpkg.com/browse/[email protected]/

Deploying Mermaid #

To Deploy Mermaid:

• You will need to install node v16, which would have npm
• Download yarn using npm
• Enter the following command: yarn add mermaid
• You can then add mermaid as a dev dependency using this command: yarn add --dev mermaid

Mermaid API : #

To deploy mermaid without a bundler, one can insert a script tag with an absolute address and a mermaid.initialize call into the HTML like so:

Doing so will command the mermaid parser to look for the <div> or <pre> tags with class="mermaid" . From these tags mermaid will try to read the diagram/chart definitions and render them into SVG charts.

Examples can be found at Other examples

Sibling projects #

• Mermaid Live Editor
• Mermaid CLI
• Mermaid Webpack Demo
• Mermaid Parcel Demo

Request for Assistance #

Things are piling up and I have a hard time keeping up. It would be great if we could form a core team of developers to cooperate with the future development of mermaid.

As part of this team you would get write access to the repository and would represent the project when answering questions and issues.

Together we could continue the work with things like:

• Adding more types of diagrams like mindmaps, ert diagrams, etc.
• Improving existing diagrams

Don't hesitate to contact me if you want to get involved!

For contributors #

We use eslint . We recommend you to install editor plugins to get real time lint result.

Manual test in browser: open dist/index.html

For those who have the permission to do so:

Update version number in package.json .

The above command generates files into the dist folder and publishes them to < npmjs.org >.

Related projects #

• Command Line Interface
• Live Editor
• HTTP Server

Contributors #

Mermaid is a growing community and is always accepting new contributors. There's a lot of different ways to help out and we're always looking for extra hands! Look at this issue if you want to know where to start helping out.

Detailed information about how to contribute can be found in the contribution guide

Security and safe diagrams #

For public sites, it can be precarious to retrieve text from users on the internet, storing that content for presentation in a browser at a later stage. The reason is that the user content can contain embedded malicious scripts that will run when the data is presented. For Mermaid this is a risk, specially as mermaid diagrams contain many characters that are used in html which makes the standard sanitation unusable as it also breaks the diagrams. We still make an effort to sanitize the incoming code and keep refining the process but it is hard to guarantee that there are no loop holes.

As an extra level of security for sites with external users we are happy to introduce a new security level in which the diagram is rendered in a sandboxed iframe preventing JavaScript in the code from being executed. This is a great step forward for better security.

Unfortunately you can not have a cake and eat it at the same time which in this case means that some of the interactive functionality gets blocked along with the possible malicious code.

Reporting vulnerabilities #

To report a vulnerability, please e-mail [email protected] with a description of the issue, the steps you took to create the issue, affected versions, and if known, mitigations for the issue.

Appreciation #

A quick note from Knut Sveidqvist:

Many thanks to the d3 and dagre-d3 projects for providing the graphical layout and drawing libraries! > Thanks also to the js-sequence-diagram project for usage of the grammar for the sequence diagrams. Thanks to Jessica Peter for inspiration and starting point for gantt rendering. > Thank you to Tyler Long who has been a collaborator since April 2017. Thank you to the ever-growing list of contributors that brought the project this far!

Mermaid was created by Knut Sveidqvist for easier documentation.

JavaScript required

We’re sorry, but Coda doesn’t work properly without JavaScript enabled.

User Journey

mermaid 0.0.1 文档

User journey diagram ¶.

User journeys describe at a high level of detail exactly what steps different users take to complete a specific task within a system, application or website. This technique shows the current (as-is) user workflow, and reveals areas of improvement for the to-be workflow. (Wikipedia)

Mermaid can render user journey diagrams:

Each user journey is split into sections, these describe the part of the task the user is trying to complete.

Tasks syntax is Task name: <score>: <comma separated list of actors>

Entity Relationship Diagrams

Flowcharts - Basic Syntax ​

Flowcharts are composed of nodes (geometric shapes) and edges (arrows or lines). The Mermaid code defines how nodes and edges are made and accommodates different arrow types, multi-directional arrows, and any linking to and from subgraphs.

If you are using the word "end" in a Flowchart node, capitalize the entire word or any of the letters (e.g., "End" or "END"), or apply this workaround . Typing "end" in all lowercase letters will break the Flowchart.

If you are using the letter "o" or "x" as the first letter in a connecting Flowchart node, add a space before the letter or capitalize the letter (e.g., "dev--- ops", "dev---Ops").

Typing "A---oB" will create a circle edge .

Typing "A---xB" will create a cross edge .

A node (default) ​

The id is what is displayed in the box.

Instead of flowchart one can also use graph .

A node with text ​

It is also possible to set text in the box that differs from the id. If this is done several times, it is the last text found for the node that will be used. Also if you define edges for the node later on, you can omit text definitions. The one previously defined will be used when rendering the box.

Unicode text ​

Use " to enclose the unicode text.

Markdown formatting ​

Use double quotes and backticks "` text `" to enclose the markdown text.

Direction ​

This statement declares the direction of the Flowchart.

This declares the flowchart is oriented from top to bottom ( TD or TB ).

This declares the flowchart is oriented from left to right ( LR ).

Possible FlowChart orientations are:

• TB - Top to bottom
• TD - Top-down/ same as top to bottom
• BT - Bottom to top
• RL - Right to left
• LR - Left to right

Node shapes ​

A node with round edges ​, a stadium-shaped node ​, a node in a subroutine shape ​, a node in a cylindrical shape ​, a node in the form of a circle ​, a node in an asymmetric shape ​.

Currently only the shape above is possible and not its mirror. This might change with future releases.

A node (rhombus) ​

A hexagon node ​, parallelogram ​, parallelogram alt ​, trapezoid ​, trapezoid alt ​, double circle ​, links between nodes ​.

Nodes can be connected with links/edges. It is possible to have different types of links or attach a text string to a link.

A link with arrow head ​

An open link ​, text on links ​, a link with arrow head and text ​, dotted link ​, dotted link with text ​, thick link ​, thick link with text ​, an invisible link ​.

This can be a useful tool in some instances where you want to alter the default positioning of a node.

Chaining of links ​

It is possible declare many links in the same line as per below:

It is also possible to declare multiple nodes links in the same line as per below:

You can then describe dependencies in a very expressive way. Like the one-liner below:

If you describe the same diagram using the basic syntax, it will take four lines. A word of warning, one could go overboard with this making the flowchart harder to read in markdown form. The Swedish word lagom comes to mind. It means, not too much and not too little. This goes for expressive syntaxes as well.

New arrow types ​

There are new types of arrows supported:

• circle edge

Circle edge example ​

Cross edge example ​, multi directional arrows ​.

There is the possibility to use multidirectional arrows.

Minimum length of a link ​

Each node in the flowchart is ultimately assigned to a rank in the rendered graph, i.e. to a vertical or horizontal level (depending on the flowchart orientation), based on the nodes to which it is linked. By default, links can span any number of ranks, but you can ask for any link to be longer than the others by adding extra dashes in the link definition.

In the following example, two extra dashes are added in the link from node B to node E , so that it spans two more ranks than regular links:

Note Links may still be made longer than the requested number of ranks by the rendering engine to accommodate other requests.

When the link label is written in the middle of the link, the extra dashes must be added on the right side of the link. The following example is equivalent to the previous one:

For dotted or thick links, the characters to add are equals signs or dots, as summed up in the following table:

Special characters that break syntax ​

It is possible to put text within quotes in order to render more troublesome characters. As in the example below:

Entity codes to escape characters ​

It is possible to escape characters using the syntax exemplified here.

Numbers given are base 10, so # can be encoded as #35; . It is also supported to use HTML character names.

Subgraphs ​

An example below:

You can also set an explicit id for the subgraph.

flowcharts ​

With the graphtype flowchart it is also possible to set edges to and from subgraphs as in the flowchart below.

Direction in subgraphs ​

With the graphtype flowcharts you can use the direction statement to set the direction which the subgraph will render like in this example.

Limitation ​

If any of a subgraph's nodes are linked to the outside, subgraph direction will be ignored. Instead the subgraph will inherit the direction of the parent graph:

Markdown Strings ​

The "Markdown Strings" feature enhances flowcharts and mind maps by offering a more versatile string type, which supports text formatting options such as bold and italics, and automatically wraps text within labels.

Formatting:

• For bold text, use double asterisks ( ** ) before and after the text.
• For italics, use single asterisks ( * ) before and after the text.
• With traditional strings, you needed to add <br> tags for text to wrap in nodes. However, markdown strings automatically wrap text when it becomes too long and allows you to start a new line by simply using a newline character instead of a <br> tag.

This feature is applicable to node labels, edge labels, and subgraph labels.

Interaction ​

It is possible to bind a click event to a node, the click can lead to either a javascript callback or to a link which will be opened in a new browser tab.

This functionality is disabled when using securityLevel='strict' and enabled when using securityLevel='loose' .

• nodeId is the id of the node
• callback is the name of a javascript function defined on the page displaying the graph, the function will be called with the nodeId as parameter.

Examples of tooltip usage below:

The tooltip text is surrounded in double quotes. The styles of the tooltip are set by the class .mermaidTooltip .

Success The tooltip functionality and the ability to link to urls are available from version 0.5.2.

?> Due to limitations with how Docsify handles JavaScript callback functions, an alternate working demo for the above code can be viewed at this jsfiddle .

Links are opened in the same browser tab/window by default. It is possible to change this by adding a link target to the click definition ( _self , _blank , _parent and _top are supported):

Beginner's tip—a full example using interactive links in a html context:

Comments can be entered within a flow diagram, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with %% (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any flow syntax

Styling and classes ​

Styling links ​.

It is possible to style links. For instance, you might want to style a link that is going backwards in the flow. As links have no ids in the same way as nodes, some other way of deciding what style the links should be attached to is required. Instead of ids, the order number of when the link was defined in the graph is used, or use default to apply to all links. In the example below the style defined in the linkStyle statement will belong to the fourth link in the graph:

It is also possible to add style to multiple links in a single statement, by separating link numbers with commas:

Styling line curves ​

It is possible to style the type of curve used for lines between items, if the default method does not meet your needs. Available curve styles include basis , bumpX , bumpY , cardinal , catmullRom , linear , monotoneX , monotoneY , natural , step , stepAfter , and stepBefore .

In this example, a left-to-right graph uses the stepBefore curve style:

For a full list of available curves, including an explanation of custom curves, refer to the Shapes documentation in the d3-shape project.

Styling a node ​

It is possible to apply specific styles such as a thicker border or a different background color to a node.

More convenient than defining the style every time is to define a class of styles and attach this class to the nodes that should have a different look.

A class definition looks like the example below:

Also, it is possible to define style to multiple classes in one statement:

Attachment of a class to a node is done as per below:

It is also possible to attach a class to a list of nodes in one statement:

A shorter form of adding a class is to attach the classname to the node using the ::: operator as per below:

This form can be used when declaring multiple links between nodes:

CSS classes ​

It is also possible to predefine classes in CSS styles that can be applied from the graph definition as in the example below:

Example style

Example definition

Default class ​

If a class is named default it will be assigned to all classes without specific class definitions.

Basic support for fontawesome ​

It is possible to add icons from fontawesome.

The icons are accessed via the syntax fa:#icon class name#.

Mermaid supports Font Awesome if the CSS is included on the website. Mermaid does not have any restriction on the version of Font Awesome that can be used.

Please refer the Official Font Awesome Documentation on how to include it in your website.

Adding this snippet in the <head> would add support for Font Awesome v6.5.1

Graph declarations with spaces between vertices and link and without semicolon ​

In graph declarations, the statements also can now end without a semicolon. After release 0.2.16, ending a graph statement with semicolon is just optional. So the below graph declaration is also valid along with the old declarations of the graph.

A single space is allowed between vertices and the link. However there should not be any space between a vertex and its text and a link and its text. The old syntax of graph declaration will also work and hence this new feature is optional and is introduced to improve readability.

Below is the new declaration of the graph edges which is also valid along with the old declaration of the graph edges.

Configuration ​

The layout of the diagram is done with the renderer. The default renderer is dagre.

Starting with Mermaid version 9.4, you can use an alternate renderer named elk. The elk renderer is better for larger and/or more complex diagrams.

The elk renderer is an experimental feature. You can change the renderer to elk by adding this directive:

Note that the site needs to use mermaid version 9.4+ for this to work and have this featured enabled in the lazy-loading configuration.

It is possible to adjust the width of the rendered flowchart.

This is done by defining mermaid.flowchartConfig or by the CLI to use a JSON file with the configuration. How to use the CLI is described in the mermaidCLI page. mermaid.flowchartConfig can be set to a JSON string with config parameters or the corresponding object.