Book Image

The Official Guide to Mermaid.js

By : Knut Sveidqvist, Ashish Jain
Book Image

The Official Guide to Mermaid.js

By: Knut Sveidqvist, Ashish Jain

Overview of this book

Mermaid is a JavaScript-based charting and diagramming tool that lets you represent diagrams using text and code, which simplifies the maintenance of complex diagrams. This is a great option for developers as they’re more familiar with code, rather than using special tools for generating diagrams. Besides, diagrams in code simplify maintenance and ensure that the code is supported by version control systems. In some cases, Mermaid makes refactoring support for name changes possible while also enabling team collaboration for review distribution and updates. Developers working with any system will be able to put their knowledge to work with this practical guide to using Mermaid for documentation. The book is also a great reference for looking up the syntax for specific diagrams when authoring diagrams. You’ll start by learning the importance of accurate and visual documentation. Next, the book introduces Mermaid and establishes how to use it to create effective documentation. By using different tools, editors, or a custom documentation platform, you’ll also understand how to use Mermaid syntax for various diagrams. Later chapters cover advanced configuration settings and theme options to manipulate your diagram as per your needs. By the end of this book, you’ll be well-versed with Mermaid diagrams and how they can be used in your workflows.
Table of Contents (19 chapters)
1
Section 1: Getting Started with Mermaid
7
Section 2: The Most Popular Diagrams
12
Section 3: Powerful Diagrams for the Advanced User

Configuring lines between nodes

In this section, we will learn how to create edges between nodes. We have already seen some examples of this, but now, it is time to go deeper and look at alternate ways of creating edges between nodes. You will learn about different types of edges and the symbols that can be set at the beginning and the end of an edge. We will also look at different ways to add labels to an edge.

There is a lot to learn about edges. Let's start by looking at how to chain edges. This is a compact syntax that lets you define many links of a node in the same statement, as well as a chain of edges between nodes in one row.

Chaining

The easiest way to connect two nodes is to add an edge between two node IDs by using ID EDGE ID. One example of an EDGE we have seen so far is an arrowhead, which has --> as a symbol and ID as a string. This allows most, but not all, text. A simple example of an ID EDGE ID statement is Id1 --> Id2. This is intuitive and readable...