Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Conferences
Free Learning
Arrow right icon
Arrow up icon
GO TO TOP
The Official Guide to Mermaid.js

You're reading from   The Official Guide to Mermaid.js Create complex diagrams and beautiful flowcharts easily using text and code

Arrow left icon
Product type Paperback
Published in Sep 2021
Publisher Packt
ISBN-13 9781801078023
Length 492 pages
Edition 1st Edition
Languages
Arrow right icon
Authors (2):
Arrow left icon
Knut Sveidqvist Knut Sveidqvist
Author Profile Icon Knut Sveidqvist
Knut Sveidqvist
Ashish Jain Ashish Jain
Author Profile Icon Ashish Jain
Ashish Jain
Arrow right icon
View More author details
Toc

Table of Contents (19) Chapters Close

Preface 1. Section 1: Getting Started with Mermaid
2. Chapter 1: The Art of Documentation with Mermaid FREE CHAPTER 3. Chapter 2: How to Use Mermaid 4. Chapter 3: Mermaid Versions and Using the Live Editor 5. Chapter 4: Modifying Configurations with or without Directives 6. Chapter 5: Changing Themes and Making Mermaid Look Good 7. Section 2: The Most Popular Diagrams
8. Chapter 6: Using Flowcharts 9. Chapter 7: Creating Sequence Diagrams 10. Chapter 8: Rendering Class Diagrams 11. Chapter 9: Illustrating Data with Pie Charts and Understanding Requirement Diagrams 12. Section 3: Powerful Diagrams for the Advanced User
13. Chapter 10: Demonstrating Connections Using Entity Relationship Diagrams 14. Chapter 11: Representing System Behavior with State Diagrams 15. Chapter 12: Visualizing Your Project Schedule with Gantt Chart 16. Chapter 13: Presenting User Behavior with User Journey Diagrams 17. Other Books You May Enjoy Appendix :Configuration Options

What this book covers

Chapter 1, The Art of Documentation with Mermaid, contains an introduction to Mermaid, ideas about effective documentation, why Mermaid came into being, and why you should use Mermaid for documentation.

Chapter 2, How to Use Mermaid, is where you can read about how to get started with Mermaid. You will see different ways in which Mermaid can be used and applied. Usages can vary from adding Mermaid to your website to using tools and editor plugins that already have Mermaid integrated and adopted. The chapter also covers working with documentation using Markdown and how to set up your own custom Mermaid-powered documentation system.

Chapter 3, Mermaid Versions and Using the Live Editor, explains Mermaid versioning strategies, which versions should be used, and what to expect from future versions. You will look at the Mermaid Live Editor, its different features, and how to render your first diagram using the live editor.

Chapter 4, Modifying Configurations with or without Directives, describes directives, which are a way of modifying the configurations for a diagram using code. It explains the possibilities of directives and what can be achieved by applying directives to diagrams. The chapter continues by detailing the different configuration options that Mermaid supports. Finally, the chapter describes the different ways in which configurations can be applied when integrating Mermaid with a website.

Chapter 5, Changing Themes and Making Mermaid Look Good, describes how to change the theme for Mermaid diagrams, both using directives and via the initialize call. The chapter describes the pre-made themes available as well as how to create a custom theme using the dynamic theming engine in Mermaid. The chapter describes the general theming functionality and the common theme variables that can be overridden.

Chapter 6, Using Flowcharts, focuses on creating flowcharts using Mermaid. It covers the layout and orientation of the flowchart, how to define different types of nodes, and creating edges between nodes. It highlights how you can draw sub-graphs within a graph. It teaches you how to add interactivity to your diagram by binding clicks to callback functions or to URLs. It includes many practical examples covering different aspects of flowcharts, such as different configurations and theming variable overrides. It also contains practical exercises to increase your understanding.

Chapter 7, Creating Sequence Diagrams, describes sequence diagrams, which show events between objects or participants in a specific order, or sequence. It explains how to define participants and aliases as well as how to define messages. It also explains how to mark a message as active. The chapter also describes how to add notes in sequence diagrams and various control flows. The control flows can be loops, if statements using the alt mechanism, and parallel flows. The chapter will teach you how to turn sequence numbering on and off and how to highlight a specific part of the diagram using the background highlighting mechanism.

Chapter 8, Rendering Class Diagrams, focuses on the most widely used diagram in the object-oriented programming paradigm, that is, the class diagram. It focuses on how to render different elements of a class diagram, such as classes, its member variables, and functions. It shows how Mermaid supports adding different relations among classes, and attaching, different cardinalities. It also covers how to add different annotations, such as declaring a class as an interface or abstract to highlight its importance in the diagram. You also learn how to add interactivity with support for click events and callbacks.

Chapter 9, Illustrating Data with Pie Charts and Understanding Requirement Diagrams, covers the pie chart, which is one of the simplest diagrams to draw using Mermaid. It focuses on the general syntax of a pie chart and title, as well as looking at the given dataset. It also teaches you about adjusting theme variables to change the color scheme and other configuration settings. The chapter also covers requirement diagrams, which are specified using UML 2.0. The chapter describes how to create requirement entries, define attributes, and create relationships between different entries.

Chapter 10, Demonstrating Connections Using Entity Relationship Diagrams, looks at entity relationship (ER) diagrams. An ER diagram shows how entities are connected in a specific domain and how relations are established between them. This chapter describes the general syntax of ER diagrams in Mermaid. It also shows how identification is handled as well as how to define attributes on entities.

Chapter 11, Representing System Behavior with State Diagrams, describes state diagrams, which are often used in computer science to illustrate the behavior of systems. It covers the syntax and usages of core elements of state diagrams, such as states starting, ending, and transitioning from one state to another, and it teaches you how to define the entire flow of transitions. It explains the complexities of composite states, the usage of forks, and concurrency concepts.

Chapter 12, Visualizing Your Project Schedule with Gantt Chart, covers Gantt charts. Gantt charts illustrate project plans by representing tasks as horizontal bars where the x axis represents the timeline. This chapter describes how to create Gantt charts using Mermaid and how to set the input and output date formats. It also describes the handling of the today marker and how to set up interaction in diagrams by binding clicks to callback functions or to URLs.

Chapter 13, Presenting User Behavior with User Journey Diagrams, focuses on user journey diagrams, which are extremely useful for business analysts, UX designers, and product owners. The diagram shows the user's experience as a series of steps, where the user's satisfaction score is highlighted for each step. The diagram can represent a user's journey while visiting a website or during some other tasks. You will learn the syntax of how to define a user journey, breaking it down into different individual sections and a series of steps to complete those sections by the different actors involved.

lock icon The rest of the chapter is locked
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at $19.99/month. Cancel anytime
Banner background image