Function renderToDot

renderToDot<Container extends AnyGraphContainer = AnyGraphContainer>(
element: ReactElement,
options?: RenderToDotOptions<Container>,
): Promise<string>

Converts the given React element to DOT language asynchronously.

This function creates a Graphviz root, renders the element, and returns the DOT representation.

Type Parameters

Container extends AnyGraphContainer = AnyGraphContainer

Parameters

element: ReactElement
options: RenderToDotOptions<Container> = {}

Returns Promise<string>

Example: Single top-level graph

const dot = await renderToDot(
  <Digraph id="example">
    <Node id="a" />
    <Node id="b" />
    <Edge targets={['a', 'b']} />
  </Digraph>
);
console.log(dot);
// digraph "example" {
//   "a";
//   "b";
//   "a" -> "b";
// }

Example: With container

const container = new DigraphModel('main');
const dot = await renderToDot(
  <>
    <Node id="a" />
    <Subgraph id="cluster_sub">
      <Node id="b" />
    </Subgraph>
    <Edge targets={['a', 'b']} />
  </>,
  { container }
);
console.log(dot);
// digraph "main" {
//   "a";
//   subgraph "cluster_sub" {
//     "b";
//   }
//   "a" -> "b";
// }