mermaid

Mermaid diagram export for Markdown-compatible graph visualization.

This module exports graphs to Mermaid syntax, allowing you to embed graphs directly in Markdown documents, GitHub READMEs, Notion pages, and other platforms that support Mermaid rendering.

Quick Start

import yog/render/mermaid

let diagram = mermaid.to_string(my_graph)
// Paste into Markdown:
// ```mermaid
// graph TD
//   1 --> 2
// ```

Customization

Use MermaidOptions to:

Add custom node labels
Display edge weights
Highlight specific nodes or paths
Style important elements

References

Types

CssLength

</>

CSS length unit for styling

pub type CssLength {
  Px(Int)
  Em(Float)
  Rem(Float)
  Percent(Float)
  CustomCss(String)
}

Constructors

```
Px(Int)
```
Pixels (most common)
```
Em(Float)
```
Ems (relative to font size)
```
Rem(Float)
```
Rems (relative to root font size)
```
Percent(Float)
```
Percentage
```
CustomCss(String)
```
Custom CSS value (for advanced users)

Direction

</>

Direction for graph layout

pub type Direction {
  TD
  LR
  BT
  RL
}

Constructors

```
TD
```
Top-Down (vertical, top to bottom) - Mermaid “TD” or “TB”
```
LR
```
Left-Right (horizontal)
```
BT
```
Bottom-Top (vertical, bottom to top)
```
RL
```
Right-Left (horizontal, right to left)

MermaidOptions

</>

Options for customizing Mermaid diagram rendering.

pub type MermaidOptions {
  MermaidOptions(
    node_label: fn(Int, String) -> String,
    edge_label: fn(String) -> String,
    highlighted_nodes: option.Option(List(Int)),
    highlighted_edges: option.Option(List(#(Int, Int))),
    direction: Direction,
    node_shape: NodeShape,
    highlight_fill: String,
    highlight_stroke: String,
    highlight_stroke_width: CssLength,
    link_thickness: CssLength,
    highlight_link_stroke: String,
    highlight_link_stroke_width: CssLength,
  )
}

Constructors

```
MermaidOptions(
  node_label: fn(Int, String) -> String,
  edge_label: fn(String) -> String,
  highlighted_nodes: option.Option(List(Int)),
  highlighted_edges: option.Option(List(#(Int, Int))),
  direction: Direction,
  node_shape: NodeShape,
  highlight_fill: String,
  highlight_stroke: String,
  highlight_stroke_width: CssLength,
  link_thickness: CssLength,
  highlight_link_stroke: String,
  highlight_link_stroke_width: CssLength,
)
```
Arguments

node_label

Function to convert node ID and data to a display label

edge_label

Function to convert edge weight to a display label

highlighted_nodes

Optional list of node IDs to highlight (e.g., a path)

highlighted_edges

Optional list of edges to highlight as (from, to) pairs

direction

Graph direction (default: TD)

node_shape

Node shape (default: RoundedRect)

highlight_fill

Highlight fill color (CSS color, default: #ffeb3b)

highlight_stroke

Highlight stroke color (CSS color, default: #f57c00)

highlight_stroke_width

Highlight stroke width (default: Px(3))

link_thickness

Default link thickness (default: Px(2))

highlight_link_stroke

Highlighted link stroke color (default: #f57c00)

highlight_link_stroke_width

Highlighted link stroke width (default: Px(3))

NodeShape

</>

Node shape options for Mermaid diagrams.

pub type NodeShape {
  RoundedRect
  Stadium
  Subroutine
  Cylinder
  Circle
  Asymmetric
  Rhombus
  Hexagon
  Parallelogram
  ParallelogramAlt
  Trapezoid
  TrapezoidAlt
}

Constructors

```
RoundedRect
```
Rectangle with rounded corners: [label]
```
Stadium
```
Stadium shape (pill): ([label])
```
Subroutine
```
Subroutine shape (rectangle with side lines): label
```
Cylinder
```
Cylindrical shape (database): [(label)]
```
Circle
```
Circle: ((label))
```
Asymmetric
```
Asymmetric shape (flag): >label]
```
Rhombus
```
Rhombus (decision): {label}
```
Hexagon
```
Hexagon: {{label}}
```
Parallelogram
```
Parallelogram: [/label/]
```
ParallelogramAlt
```
Parallelogram alt: [\label]
```
Trapezoid
```
Trapezoid: [/label]
```
TrapezoidAlt
```
Trapezoid alt: [\label/]

Values

default_options

</>

pub fn default_options() -> MermaidOptions

Creates default Mermaid options with simple labeling.

Uses node ID as label and edge weight as-is. Default configuration:

Direction: Top-to-bottom (TD)
Node shape: Rounded rectangle
Highlight: Yellow fill with orange stroke

path_to_options

</>

pub fn path_to_options(
  path: path.Path(e),
  base_options: MermaidOptions,
) -> MermaidOptions

Converts a shortest path result to highlighted Mermaid options.

to_mermaid

</>

pub fn to_mermaid(
  graph: model.Graph(String, String),
  options: MermaidOptions,
) -> String

Converts a graph to Mermaid diagram syntax.

The graph’s node data and edge data must be convertible to strings. Use the options to customize labels and highlight specific paths.

Time Complexity: O(V + E)

Example

let graph =
  model.new(Directed)
  |> model.add_node(1, "Start")
  |> model.add_node(2, "Process")
  |> model.add_node(3, "End")
  |> model.add_edge(from: 1, to: 2, with: "5")
  |> model.add_edge(from: 2, to: 3, with: "3")

// Basic rendering
let diagram = render.to_mermaid(graph, default_options())

// Highlight a path
let options = MermaidOptions(
  ..default_options(),
  highlighted_nodes: Some([1, 2, 3]),
  highlighted_edges: Some([#(1, 2), #(2, 3)]),
)
let highlighted = render.to_mermaid(graph, options)

The output can be embedded in markdown:

```mermaid
graph TD
  1["Start"]
  2["Process"]
  3["End"]
  1 -->|5| 2
  2 -->|3| 3
```

Quick Start

Customization

References

Constructors

Constructors

Constructors

Arguments

Constructors

Example