v0.1.0 🌈

Add README.

Usage

Example

Script

import React, { FC } from 'react';
import { Digraph, Node, Subgraph, renderToDot, Edge } from '@ts-graphviz/react';

const Example: FC = () => (
  <Digraph dpi={150}>
    <Node id="nodeA" />

    <Subgraph id="cluster" label="Cluster" labeljust="l">
      <Node id="nodeB" label="This is label for nodeB." />
    </Subgraph>
    <Edge targets={['nodeA', 'nodeB']} comment="Edge from node A to B" label={<b>A to B</b>} />
  </Digraph>
);

const dot = renderToDot(<Example />);

console.log(dot);

Output dot

digraph {
  dpi = 150;
  "nodeA";
  "nodeB";
  subgraph "cluster" {
    labeljust = "l";
    label = "Cluster";
    "nodeB" [
      label = "This is label for nodeB.",
    ];
  }
  // Edge from node A to B
  "nodeA" -> "nodeB" [
    label = <<b>A to B</b>>,
  ];
}