yog - v4.0.0

yog/io/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/io/mermaid

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

Output Formats

Supported Platforms

PlatformMermaid Support
GitHub✅ Native in Markdown
GitLab✅ Native in Markdown
Notion✅ Native block
Obsidian✅ With plugin
VS Code✅ With extension
MkDocs✅ With plugin

Customization

Use MermaidOptions to:

References

Types

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))),
  )
}

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))),
)

    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

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.

path_to_options

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

Converts a shortest path result to highlighted Mermaid options.

Useful for visualizing pathfinding algorithm results.

Example

let path = pathfinding.shortest_path(
  in: graph,
  from: 1,
  to: 5,
  with_zero: "0",
  with_add: string_add,
  with_compare: string_compare,
)

case path {
  Some(p) -> {
    let options = render.path_to_options(p, default_options())
    let diagram = render.to_mermaid(graph, options)
    io.println(diagram)
  }
  None -> io.println("No path found")
}

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
```
✨ Search Document