graphviz-react

!Continuous Integration

1. Overview
2. Install
3. Usage
1. Props
2. NextJS
3. Examples
4. Dependencies

Overview

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.

A demo of this component can be found here.

Install

From the root directory of your React project run the following command.

``
npm install graphviz-react
`

N.B. There is currently an issue with react-scripts and the viz.js package used by d3-graphviz that causes heap overflows when running react-scripts start and react-scripts build. To get around this set --max_old_space_size=4096 when running. This can be done by either running the following:
`
NODE_OPTIONS=--max_old_space_size=4096 npm run start
`
or by adding the flag to the relevant commands in the scripts section of your package.json as such:
`json
"scripts": {
"start": "react-scripts --max_old_space_size=4096 start",
"predeploy": "react-scripts --max_old_space_size=4096 build",
}
`

Usage

Add an import to the top of the component you wish to use Graphviz with.

`javascript
import { Graphviz } from 'graphviz-react';
`

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.

$3

The following props are available to the component:
`typescript
dot: string
options?: GraphvizOptions
className?: string
`

- 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:

`javascript
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 by the provided options unless explicitly done so.

- className attaches an HTML class attribute to the top level of the component to allow for easier styling.

$3


By default NextJS pre-renders every page. This causes issues with graphviz-react as it relies on attaching rendered graphs to DOM components, which are only available client-side, not server-side.

The workaround for this is to use dynamic imports to import the package without server-side rendering on pages where the component is required:

`typescript
import dynamic from 'next/dynamic';

const Graphviz = dynamic(() => import('graphviz-react'), { ssr: false });

const GraphvizPage = () => {
const dot = 'graph{a--b}';

return ;
}

export default GraphvizPage;
`

$3

The below shows a simple React component using the Graphviz component to render a simple DOT string (GraphViz Pocket Reference).

`jsx
graph {
grandparent -- "parent A";
child;
"parent B" -- child;
grandparent -- "parent B";
}} />
`

`jsx
digraph {
a -> b;
c;
d -> c;
a -> d;
}} />
``

Dependencies

1. React
2. d3-graphviz