The official guide to Mermaid.js create complex diagrams and beautiful flowcharts easily using text and code
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 do...
| Otros Autores: | , |
|---|---|
| Formato: | Libro electrónico |
| Idioma: | Inglés |
| Publicado: |
Birmingham ; Mumbai :
Packt Publishing
[2021]
|
| Materias: | |
| Ver en Biblioteca Universitat Ramon Llull: | https://discovery.url.edu/permalink/34CSUC_URL/1im36ta/alma991009644302006719 |
Tabla de Contenidos:
- 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.
