The official guide to Mermaid.js : create complex diagrams and beautiful flowcharts easily using text and code / Knut Sveidqvist, Ashish Jain.

Format:

Book

Author/Creator:

Sveidqvist, Knut, author.

Jain, Ashish, author.

Language:

English

Subjects (All):

Flow charts.

JavaScript (Computer program language).

Physical Description:

1 online resource (493 pages)

Place of Publication:

Birmingham ; Mumbai : Packt Publishing, [2021]

System Details:

Mode of access: World Wide Web.

Biography/History:

Sveidqvist Knut: 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. Jain Ashish: Ashish Jain has more than 8 years of experience as a technical lead and developer with a bachelor's degree in information technology. He started as a Java backend developer then moved to full-stack development. Within these roles, he worked on project documentation and other documented deliverables, where the need to have a simpler way to draw and integrate diagrams in documents was felt. His search ended with Mermaid, which impressed him enough to see him associate himself with the Mermaid project. He is an open source contributor and a part of the Mermaid core team.

Summary:

Get up to speed with using Mermaid diagrams to facilitate a seamless development workflow with the help of real-world examples and expert tips from the creators of the toolKey FeaturesLearn how to use and customize the different diagram types in MermaidDiscover examples of how to add Mermaid to a documentation systemUse Mermaid with various tools available such as editors, wiki, and moreBook DescriptionMermaid 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.What you will learnUnderstand good and bad documentation, and the art of effective documentationBecome well-versed with maintaining complex diagrams with easeDiscover how to draw different types of Mermaid diagrams such as flowcharts, class diagrams, Gantt charts, and moreImplement Mermaid diagrams in your workflowsUnderstand how to set up themes for a Mermaid diagram or an entire siteGet to grips with setting up a custom documentation systemWho this book is forThis book is for content generators such as technical writers, developers, architects, business analysts, and managers who want to learn effective documentation or how to effectively represent diagrams using simple text code snippets and extract them. Familiarity with documentation using Markdown will be helpful, but not necessary.

Contents:

Cover

Copyright

Contributors

Table of Contents

Preface

Section 1: Getting Started with Mermaid

Chapter 1: The Art of Documentation with Mermaid

Understanding the importance of documentation

Clear definition of requirements and scope

Assisting in testing and maintenance

Better collaboration and teamwork

Increases the team's competencies

Preserve good procedures in the organizational memory

Documentation is important when working with agile development processes

Understanding Good, Bad, and Efficient documentation

What is bad documentation?

What is good documentation?

What is Efficient Documentation?

Guidelines for setting up Good Documentation

Archiving Documentation

Introducing Mermaid with Markdown

Blending Mermaid with Markdown

Blending text-based documentation with your code

Advantages of using Mermaid with Markdown

Summary

Chapter 2: How to Use Mermaid

Technical requirements

Adding Mermaid to a simple web page

Various Mermaid integrations (Editors, Wikis, CMS, and others etc.)

GitLab

Azure DevOps

WordPress

VuePress

MediaWiki

Remark

Pandoc

Mermaid Live Editor

Documentation with Markdown

What is Markdown?

Why use Markdown for documentation?

Quick Crash Course in Markdown

Setting up a simple custom documentation system using Docsify with Mermaid

Setting up your custom documentation system that supports Mermaid using Gatsby

Chapter 3: Mermaid Versions and the Using Live Editor

Understanding Mermaid versions and the Release cycle

Semantic Versioning in Mermaid

The release cycle of Mermaid

Exploring the Mermaid Live Editor

How to access the Mermaid Live Editor

Functionality of Mermaid Live Editor

Rendering your first diagram using the Live Editor

Summary.

Chapter 4: Modifying Configurations with or without Directives

What are Directives?

Using different types of Directives

The init directive

The wrap directive

Different configuration options

Top-level configuration options

Flowcharts

Sequence Diagrams

Gantt charts

User Journey diagrams

ER diagrams

Pie charts

State diagrams

Setting configuration options using initialize

Setting up the site configuration

Chapter 5: Changing Themes and Making Mermaid Look Good

Selecting a theme

Changing the theme for a whole site

Changing the theme for only one diagram

Different pre-built theme options for Mermaid

Customizing a theme using theme variables

Color theory

Selecting colors

Finalizing the new theme

Variables for modifying a theme

Section 2: The Most Popular Diagrams

Chapter 6: Using Flowcharts

Getting started with flowcharts

Shapes and types of shapes

The rectangle shape

The diamond shape

The rounded rectangle shape

The stadium shape

The circle shape

The hexagon shape

The parallelogram shape

The alternate parallelogram

The asymmetric shape

The trapezoid shape

The alt trapezoid shape

The subroutine shape

The database shape

Configuring lines between nodes

Chaining

Types of edges

Thickness

Setting the length of an edge

Text on edges

Subgraphs

Setting a rendering direction in subgraphs

Special words and characters within labels

Interaction and styling

Interaction

Styling nodes and edges in your flowchart

Theming

mainBkg

nodeBorder

clusterBkg

clusterBorder

titleColor

lineColor

edgeLabelBackground

Chapter 7: Creating Sequence Diagrams

Core elements in Sequence Diagram.

Messages

Participants

Message types

Alt asynchronous messages

Semantics and common representation

Activations

Adding notes

Understanding Control Flows

Showing loops

Alternative flows

Displaying parallel flows

Exploring Additional features

Displaying Sequence Numbers

Using background highlighting

Adjusting the theme of sequence diagrams

actorBkg

actorBorder

actorTextColor

actorLineColor

signalColor

signalTextColor

labelBoxBkgColor

labelTextColor

labelBoxBorderColor

loopTextColor

activationBorderColor

activationBkgColor

sequenceNumberColor

Chapter 8: Rendering Class Diagrams

Defining a class, members, and relationships

How is a Class represented?

Adding Members of a class

Support for additional information for members

Attaching relationships between classes

Labels and Cardinalities for Relationships

Adding Labels

Adding Cardinality

Using Annotations and comments

Adding Annotations

Adding Comments in Class Diagram code

Adding Interaction to Class Diagrams

Why add Interactivity to a class diagram?

Styling and Theming

Styling a specific class of a class diagram

Modifying class diagram-specific theme variables

Chapter 9: Illustrating Data with Pie Charts and Understanding Requirement Diagrams

Rendering Pie Charts

Customizing pie charts

Understanding Requirement Diagrams

Defining Requirements

Defining Elements

Adding relationships in requirement diagrams

Customize theme variables for Requirement Diagrams

requirementTextColor

requirementBackground

requirementBorderColor and requirementBorderSize

relationLabelColor and relationLabelBackground

relationColor

Section 3: Powerful Diagrams for the Advanced User

Chapter 10: Demonstrating Connections Using Entity Relationship Diagrams

Defining an Entity and its attributes

How is an Entity represented?

Adding the attributes of an Entity

Attaching Relationships between Entities

Customizing Theming Variables

Chapter 11: Representing System Behavior with State Diagrams

Understanding states and transitions

Transitions between states

Choices

Composite states

Illustrating concurrency

Concurrency

Forks and joins

Adding notes and changing the direction of rendering

Direction of rendering

transitionColor

transitionLabelColor

labelBackgroundColor

stateLabelColor and stateBkg

compositeTitleBackground

compositeBackground

altBackground

stateBorder

specialStateColor and innerEndBackground

Chapter 12: Visualizing Your Project Schedule with Gantt Chart

Creating a Gantt Chart with Mermaid

Understanding different elements of a Gantt Chart

Syntax for a Gantt Chart in Mermaid

Exploring Optional Parameters

Defining what an end date means in the Gantt chart

Advanced Configuration options and Comments

Configuration options for a Gantt Chart

Adding Comments in Gantt Chart code

Adding interactivity to a Gantt Chart

Why add interactivity to a Gantt Chart?

Attaching tasks to URLs

Attaching tasks to trigger JavaScript callback functions

Adding a Custom CSS style sheet

Modifying Gantt chart-specific theme variables

Chapter 13: Presenting User Behavior with User Journey Diagrams

Defining a User Journey Diagram

How is a User Journey represented?

Basic syntax for a User journey diagram.

Exploring Satisfaction Scores

Adding Actors to a User Journey diagram

Grouping the steps into sections

textColor

fillType (used for section/step group color)

actor

faceColor

Appendix Configuration Options

flowchart

sequence

gantt

journey

er

pie

state

Why subscribe?

Other Books You May Enjoy

Index.

Notes:

Includes bibliographical references and index.

Description based on print version record.

ISBN:

9781801076258

1801076251

OCLC:

1268128141