The official guide to Mermaid.js : create complex diagrams and beautiful flowcharts easily using text and code / Knut Sveidqvist, Ashish Jain.
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.
| Person(en) | , |
|---|---|
| Ort, Verlag, Jahr |
Birmingham ; Mumbai
: Packt Publishing
, 2021
|
| Umfang | 1 online resource (493 pages) |
| ISBN | 1-80107-625-1 |
| Sprache | Englisch |
| Zusatzinfo | 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 -- Summary -- Chapter 3: Mermaid Versions and the Using Live Editor -- Technical requirements -- 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 -- Technical requirements -- 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 -- Summary -- 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 -- Summary -- Section 2: The Most Popular Diagrams -- Chapter 6: Using Flowcharts -- Technical requirements -- 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 -- Summary -- Chapter 7: Creating Sequence Diagrams -- Technical requirements -- 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 -- Summary -- Chapter 8: Rendering Class Diagrams -- Technical requirements -- 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 -- Summary -- Chapter 9: Illustrating Data with Pie Charts and Understanding Requirement Diagrams -- Technical requirements -- 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 -- Summary. Section 3: Powerful Diagrams for the Advanced User -- Chapter 10: Demonstrating Connections Using Entity Relationship Diagrams -- Technical requirements -- Defining an Entity and its attributes -- How is an Entity represented? -- Adding the attributes of an Entity -- Attaching Relationships between Entities -- Customizing Theming Variables -- Summary -- Chapter 11: Representing System Behavior with State Diagrams -- Technical requirements -- 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 -- Theming -- transitionColor -- transitionLabelColor -- labelBackgroundColor -- stateLabelColor and stateBkg -- compositeTitleBackground -- compositeBackground -- altBackground -- stateBorder -- specialStateColor and innerEndBackground -- Summary -- Chapter 12: Visualizing Your Project Schedule with Gantt Chart -- Technical requirements -- 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 -- Styling and Theming -- Adding a Custom CSS style sheet -- Modifying Gantt chart-specific theme variables -- Summary -- Chapter 13: Presenting User Behavior with User Journey Diagrams -- Technical requirements -- 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 -- Styling and Theming -- textColor -- fillType (used for section/step group color) -- actor -- faceColor -- Summary -- Appendix Configuration Options -- Top-level configuration options -- flowchart -- sequence -- gantt -- journey -- er -- pie -- state -- Why subscribe? -- Other Books You May Enjoy -- Index. |
| Online-Zugang | ProQuest Ebook Central PDA (EPDA) |
Bei Problemen beim Zugriff auf diese Online-Quelle beachten Sie unsere Hinweise zum Zugriff auf lizenzierte Angebote von außerhalb des Campus.