MermaidOptions<N, E>Configuration options for Mermaid diagram generation from graphs.
Details
These options customize node labels, edge labels, diagram type, layout direction, node shapes, and graph naming in Mermaid format.
Example (Configuring Mermaid output)
import type { Graph } from "effect"
// Basic options with custom labels
const basicOptions: Graph.MermaidOptions<string, number> = {
nodeLabel: (data) => `Node: ${data}`,
edgeLabel: (data) => `Weight: ${data}`
}
// Advanced options with all features
const advancedOptions: Graph.MermaidOptions<string, string> = {
nodeLabel: (data) => data.toUpperCase(),
edgeLabel: (data) => data,
diagramType: "flowchart",
direction: "LR",
nodeShape: (data) => data.includes("start") ? "circle" : "rectangle"
}export interface interface MermaidOptions<N, E>Configuration options for Mermaid diagram generation from graphs.
Details
These options customize node labels, edge labels, diagram type, layout
direction, node shapes, and graph naming in Mermaid format.
Example (Configuring Mermaid output)
import type { Graph } from "effect"
// Basic options with custom labels
const basicOptions: Graph.MermaidOptions<string, number> = {
nodeLabel: (data) => `Node: ${data}`,
edgeLabel: (data) => `Weight: ${data}`
}
// Advanced options with all features
const advancedOptions: Graph.MermaidOptions<string, string> = {
nodeLabel: (data) => data.toUpperCase(),
edgeLabel: (data) => data,
diagramType: "flowchart",
direction: "LR",
nodeShape: (data) => data.includes("start") ? "circle" : "rectangle"
}
MermaidOptions<function (type parameter) N in MermaidOptions<N, E>N, function (type parameter) E in MermaidOptions<N, E>E> {
/**
* Function to generate custom labels for nodes.
* Defaults to String(data) if not provided.
*/
readonly MermaidOptions<N, E>.nodeLabel?: ((data: N) => string) | undefinedFunction to generate custom labels for nodes.
Defaults to String(data) if not provided.
nodeLabel?: (data: Ndata: function (type parameter) N in MermaidOptions<N, E>N) => string
/**
* Function to generate custom labels for edges.
* Defaults to String(data) if not provided.
*/
readonly MermaidOptions<N, E>.edgeLabel?: ((data: E) => string) | undefinedFunction to generate custom labels for edges.
Defaults to String(data) if not provided.
edgeLabel?: (data: Edata: function (type parameter) E in MermaidOptions<N, E>E) => string
/**
* Diagram type override. If not specified, automatically detects:
* - "flowchart" for directed graphs
* - "graph" for undirected graphs
*/
readonly MermaidOptions<N, E>.diagramType?: MermaidDiagramTypeDiagram type override. If not specified, automatically detects:
- "flowchart" for directed graphs
- "graph" for undirected graphs
diagramType?: type MermaidDiagramType =
| "graph"
| "flowchart"
Mermaid diagram types for different visualization formats.
Details
Specifies the Mermaid diagram syntax to use:
flowchart: For directed graphs with arrows (A --> B)graph: For undirected graphs with lines (A --- B)
When not specified, automatically selects based on graph type:
directed graphs use "flowchart", undirected graphs use "graph".
Example (Selecting Mermaid diagram types)
import type { Graph } from "effect"
// Force flowchart format (even for undirected graphs)
const flowchartOptions: Graph.MermaidOptions<string, string> = {
diagramType: "flowchart"
}
// Force graph format (shows undirected connections)
const graphOptions: Graph.MermaidOptions<string, string> = {
diagramType: "graph"
}
// Auto-detection (recommended, default behavior)
const autoOptions: Graph.MermaidOptions<string, string> = {}
MermaidDiagramType
/**
* Direction for diagram layout.
* Defaults to "TD" (Top Down) if not provided.
*/
readonly MermaidOptions<N, E>.direction?: MermaidDirectionDirection for diagram layout.
Defaults to "TD" (Top Down) if not provided.
direction?: type MermaidDirection =
| "TB"
| "TD"
| "BT"
| "RL"
| "LR"
Mermaid diagram direction types for controlling layout orientation.
Details
Determines the flow direction of nodes and edges in the diagram:
TB/TD: Top to Bottom (vertical layout, default)BT: Bottom to Top (reverse vertical)LR: Left to Right (horizontal layout)RL: Right to Left (reverse horizontal)
Example (Configuring Mermaid directions)
import type { Graph } from "effect"
// Horizontal workflow diagram
const horizontalOptions: Graph.MermaidOptions<string, string> = {
direction: "LR"
}
// Vertical hierarchy (default)
const verticalOptions: Graph.MermaidOptions<string, string> = {
direction: "TB"
}
// Bottom-up flow
const bottomUpOptions: Graph.MermaidOptions<string, string> = {
direction: "BT"
}
MermaidDirection
/**
* Function to determine node shape for each node.
* Defaults to "rectangle" for all nodes if not provided.
*/
readonly MermaidOptions<N, E>.nodeShape?: (data: N) => MermaidNodeShapeFunction to determine node shape for each node.
Defaults to "rectangle" for all nodes if not provided.
nodeShape?: (data: Ndata: function (type parameter) N in MermaidOptions<N, E>N) => type MermaidNodeShape =
| "rectangle"
| "rounded"
| "circle"
| "diamond"
| "hexagon"
| "stadium"
| "subroutine"
| "cylindrical"
Mermaid node shape types for diagram visualization.
Details
Each shape produces different visual representations in Mermaid diagrams:
rectangle: Standard rectangular nodes A["label"]rounded: Rounded rectangular nodes A("label")circle: Circular nodes A(("label"))diamond: Diamond-shaped nodes A{"label"}hexagon: Hexagonal nodes A{{"label"}}stadium: Stadium-shaped nodes A(["label"])subroutine: Subroutine-style nodes A[["label"]]cylindrical: Cylindrical database-style nodes A[("label")]
Example (Selecting Mermaid node shapes)
import type { Graph } from "effect"
// Shape selector function for different node types
const shapeSelector = (nodeData: string): Graph.MermaidNodeShape => {
if (nodeData.includes("start") || nodeData.includes("end")) return "circle"
if (nodeData.includes("decision")) return "diamond"
if (nodeData.includes("process")) return "rectangle"
if (nodeData.includes("data")) return "cylindrical"
return "rounded"
}
const options: Graph.MermaidOptions<string, string> = {
nodeShape: shapeSelector
}
MermaidNodeShape
}