Explore Products

Best Sellers

New Releases

Books

Videos

Audiobooks

Free Learning

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

Product type Paperback

Published in Sep 2021

Publisher Packt

ISBN-13 9781801078023

Length 492 pages

Edition 1st Edition

Languages

JavaScript

Tools

Documentum

Concepts

Front End Web Development

Authors (2):

Knut Sveidqvist

Ashish Jain

View More author details

Table of Contents (19) Chapters

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

Defining a User Journey Diagram

In this section, you will learn about how the steps in a UX journey are represented in a user journey diagram. You will learn the syntax of defining a step using Mermaid code, and you will learn how to add a satisfaction score to a step.

User journey diagrams are extremely useful for business analysts, UX designers, and product owners, to illustrate the user's experience and their satisfaction level over a series of steps/tasks during the fulfillment of a user's story or goals. One big advantage of using Mermaid to create user journey diagrams, for you as an author, is that you do not have to worry about the positioning of individual steps or the score indicator while rendering a diagram—Mermaid takes care of it. You just need to define the steps in a pre-defined syntax, and Mermaid will render a nice-looking diagram for you based on your input.

Now, let's first understand what a user journey diagram looks like, and in the...

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

Start free trial

Renews at $19.99/month. Cancel anytime

Authors (2)

Knut Sveidqvist

Knut Sveidqvist

Knut Sveidqvist has been in the software industry for over 20 years in roles spanning all the way from architecture to development through product ownership and managing development teams. A common theme in all these roles is the need for good documentation. This inspired Knut to create Mermaid and start the Mermaid open source project. The main goal with the project was and still is to make it more fun and efficient to write technical documentation. Ever since Knut created Mermaid, he has continued to work with the project and has a wealth of knowledge about Mermaid that he now wants to share with the developer community.

See other products by Knut Sveidqvist

Jain

Jain

Ankit Jain holds a bachelor's degree in computer science and engineering. He has 6 years, experience in designing and architecting solutions for the big data domain and has been involved with several complex engagements. His technical strengths include Hadoop, Storm, S4, HBase, Hive, Sqoop, Flume, Elasticsearch, machine learning, Kafka, Spring, Java, and J2EE. He also shares his thoughts on his personal blog. You can follow him on Twitter at @mynameisanky. He spends most of his time reading books and playing with different technologies. When not at work, he spends time with his family and friends watching movies and playing games.

See other products by Jain

Personalised recommendations for you

Based on your interests and search pattern

Modern Full-Stack React Projects

Modern Full-Stack React Projects

Full-Stack React Projects is a complete guide to learning full-stack web development, understanding the creation and integration of backend systems, and advancing your career as a frontend developer.

Jun 2024 16h 52m

Modern Full-Stack React Projects

Modern Full-Stack React Projects

Full-Stack React Projects is a complete guide to learning full-stack web development, understanding the creation and integration of backend systems, and advancing your career as a frontend developer.

Jun 2024 16h 52m

Modern Full-Stack React Projects

Modern Full-Stack React Projects

Full-Stack React Projects is a complete guide to learning full-stack web development, understanding the creation and integration of backend systems, and advancing your career as a frontend developer.

Jun 2024 16h 52m

Modern Full-Stack React Projects

Modern Full-Stack React Projects

Full-Stack React Projects is a complete guide to learning full-stack web development, understanding the creation and integration of backend systems, and advancing your career as a frontend developer.

Jun 2024 16h 52m

Modern Full-Stack React Projects

Modern Full-Stack React Projects

Full-Stack React Projects is a complete guide to learning full-stack web development, understanding the creation and integration of backend systems, and advancing your career as a frontend developer.

Jun 2024 16h 52m

Modern Full-Stack React Projects

Modern Full-Stack React Projects

Full-Stack React Projects is a complete guide to learning full-stack web development, understanding the creation and integration of backend systems, and advancing your career as a frontend developer.

Jun 2024 16h 52m

Modern Full-Stack React Projects

Modern Full-Stack React Projects

Full-Stack React Projects is a complete guide to learning full-stack web development, understanding the creation and integration of backend systems, and advancing your career as a frontend developer.

Jun 2024 16h 52m

Modern Full-Stack React Projects

Modern Full-Stack React Projects

Full-Stack React Projects is a complete guide to learning full-stack web development, understanding the creation and integration of backend systems, and advancing your career as a frontend developer.

Jun 2024 16h 52m

Mastering Node.js Web Development

Mastering Node.js Web Development

Explore Node.js with practical examples that will teach you how to utilize open-source packages for real-world solutions. Gain the skills to develop and deploy server-side applications that enhance your client-side projects.

Jun 2024 25h 56m

Mastering Node.js Web Development

Mastering Node.js Web Development

Explore Node.js with practical examples that will teach you how to utilize open-source packages for real-world solutions. Gain the skills to develop and deploy server-side applications that enhance your client-side projects.

Jun 2024 25h 56m

Mastering Node.js Web Development

Mastering Node.js Web Development

Explore Node.js with practical examples that will teach you how to utilize open-source packages for real-world solutions. Gain the skills to develop and deploy server-side applications that enhance your client-side projects.

Jun 2024 25h 56m

Mastering Node.js Web Development

Mastering Node.js Web Development

Explore Node.js with practical examples that will teach you how to utilize open-source packages for real-world solutions. Gain the skills to develop and deploy server-side applications that enhance your client-side projects.

Jun 2024 25h 56m