Pure Elixir SVG visualization generator for graphs.
This module renders a graph and its associated 2D layout coordinates (computed
by Yog.Layout functions) into a raw XML/SVG string. The output can be written
to a file, rendered directly in Phoenix/LiveView templates, or displayed in Livebook
(by wrapping it in Kino.HTML.new/1).
Styling Options
Customize elements by passing options:
- Node radius and color.
- Node stroke color and stroke width.
- Edge color and stroke width.
- Show/hide text labels inside nodes.
Summary
Functions
Generates a raw XML/SVG string representing the graph layout.
Functions
@spec to_svg( Yog.Graph.t() | Yog.Multi.Graph.t(), %{required(Yog.Graph.node_id()) => {float(), float()}}, keyword() ) :: String.t()
Generates a raw XML/SVG string representing the graph layout.
Options
:width- The canvas pixel width (default:600).:height- The canvas pixel height (default:400).:padding- Bounding space padding around layout margins (default:40).:node_radius- Radius of node circles (default:12).:node_color- Fill color of nodes (default:"#3b82f6").:node_stroke- Stroke color of nodes (default:"#1e3a8a").:node_stroke_width- Node stroke width (default:2).:edge_color- Stroke color of edges (default:"#9ca3af").:edge_width- Stroke width of edges (default:2).:show_labels- Boolean indicating whether to show node ID text labels (default:true).:text_color- Text color for node labels (default:"white").:text_size- Font size for node labels (default:10).
Examples
iex> graph = Yog.from_unweighted_edges(:undirected, [{1, 2}])
iex> pos = Yog.Layout.circular(graph)
iex> svg = Yog.Render.SVG.to_svg(graph, pos)
iex> String.starts_with?(svg, "<svg")
true