graphviz-react

graphviz-react

graphviz-react provides a simple to use component for rendering Graphviz objects in React. It effectively acts as a React-flavoured wrapper over the d3-graphviz library, providing a uniform way to use the renderer. graphviz-react is written in Typescript and provides typing declarations.

Usage

To render a Graphviz component as part of an existing React component simply include the Graphviz tag as part of that component's render function along with the dot prop.

The below shows a simple React component using the Graphviz component to render a simple DOT string.

class MyComponent extends Component {
    render() {
        return(
            <Graphviz dot={"digraph{node1}"} />
        );
    }
}

Props

The Graphviz component has two props: dot and options.

dot is required for all instances of the component. It expects a string containing a valid graph definition using the Graphviz DOT language. Details of the DOT language can be found here. Note that neither the component nor the underlying renderer check the validity of the DOT string.

options is an optional array of rendering options for the component. It is aligned with the options accepted by the d3-graphviz renderer (see the API for details). The follow values are set by default:

fit: true
height: 500
width: 500
zoom: false

Any provided options are treated as additive to the default options. That is, the values above will not be overwritten unless by the provided options unless explicitly done so.

Dependencies

1. React
2. d3-graphviz

Changelog

1.0.0 - 1.0.0

Added

• Initial release

Changed

• Minor fixes