Using Mermaid Diagrams¶

This guide explains how to use Mermaid diagrams in the Floxide documentation.

Overview¶

Mermaid is a JavaScript-based diagramming tool that lets you create diagrams using text and code. It's particularly useful for visualizing:

Flow charts
Sequence diagrams
Class diagrams
State diagrams

Example Node Implementation¶

Here's an example of a transform node implementation in Rust:

use async_trait::async_trait;
use floxide_core::error::FloxideError;

#[derive(Debug)]
pub struct TransformNode<T> {
    id: String,
    transform_fn: Box<dyn Fn(T) -> T + Send + Sync>,
}

#[async_trait]
impl<T: Send + Sync + 'static> Node<T, T> for TransformNode<T> {
    async fn execute(&self, input: T) -> Result<T, FloxideError> {
        // Apply the transformation function
        let output = (self.transform_fn)(input);
        Ok(output)
    }

    fn id(&self) -> String {
        self.id.clone()
    }
}

Basic Mermaid Usage¶

Here's a simple flow diagram showing the transform node's execution:

graph LR Input[Input] --> Transform[Transform Node] Transform --> Output[Output]

Node Types¶

Here's a diagram showing different node types in Floxide:

graph TD Node[Node] --> Transform[Transform Node] Node --> Timer[Timer Node] Node --> Reactive[Reactive Node] Node --> LongRunning[Long Running Node]

Node Lifecycle¶

A state diagram showing node lifecycle:

stateDiagram-v2 [*] --> Init Init --> Ready Ready --> Running Running --> Complete Running --> Failed Complete --> [*] Failed --> [*]

Best Practices¶

Keep Diagrams Simple
Focus on one concept per diagram
Use clear labels
Maintain consistent styling
Common Issues
Ensure proper indentation
Use correct arrow types (-->, -->, etc.)
Test diagrams in the live editor