Skip to main content

Diagrams with Mermaid

This page demonstrates the Mermaid diagram feature powered by @docusaurus/theme-mermaid.

What is Mermaid?​

Mermaid is a JavaScript-based diagramming and charting tool that renders Markdown-inspired text definitions to create diagrams dynamically. It's perfect for creating flowcharts, sequence diagrams, class diagrams, and more!

Flowchart Example​

Here's a simple decision flowchart for water quality monitoring:

Sequence Diagram​

Data flow in the AquaGen API:

Class Diagram​

FluxGen domain model:

State Diagram​

Water pump lifecycle:

Entity Relationship Diagram​

Database schema:

Gantt Chart​

Project timeline for FluxGen deployment:

Pie Chart​

Sensor distribution by type:

Git Graph​

Example branching strategy:

How to Use Mermaid​

To create a Mermaid diagram, use a code block with the mermaid language identifier:

```mermaid
graph TD
    A[Start] --> B[Process]
    B --> C[End]
```

Diagram Types Available​

  • Flowchart: Decision flows and processes
  • Sequence: Interaction between systems
  • Class: Object-oriented design
  • State: Lifecycle and transitions
  • ER Diagram: Database relationships
  • Gantt: Project timelines
  • Pie Chart: Proportions and distributions
  • Git Graph: Version control flow

Use Cases for FluxGen Docs​

  • Architectural diagrams
  • Data flow visualization
  • API sequence flows
  • Database schema documentation
  • Deployment processes
  • State machine workflows
  • Project timelines

All diagrams are editable in the source and render automatically!