@yozora/react-code-renderer-graphviz NPM

This package is designed to render graphviz (dot) in react, inspired by graphviz-react.

Install

npm

npm install --save @yozora/react-code-renderer-graphviz

yarn

yarn add @yozora/react-code-renderer-graphviz

Usage

Basic:

import React from 'react'
import GraphvizRenderer from '@yozora/react-code-renderer-graphviz'

const code = `
  digraph finite_state_machine {
    rankdir=LR;
    size="8,5"
    node [shape = doublecircle]; 0 3 4 8;
    node [shape = circle];
    0 -> 2 [label = "SS(B)"];
    0 -> 1 [label = "SS(S)"];
    1 -> 3 [label = "S($end)"];
    2 -> 6 [label = "SS(b)"];
    2 -> 5 [label = "SS(a)"];
    2 -> 4 [label = "S(A)"];
    5 -> 7 [label = "S(b)"];
    5 -> 5 [label = "S(a)"];
    6 -> 6 [label = "S(b)"];
    6 -> 5 [label = "S(a)"];
    7 -> 8 [label = "S(b)"];
    7 -> 5 [label = "S(a)"];
    8 -> 6 [label = "S(b)"];
    8 -> 5 [label = "S(a)"];
  }
`
<GraphvizRender code={code} />

Custom error handler:

import React from 'react'
import GraphvizRenderer from '@yozora/react-code-renderer-graphviz'

function JsxPreview(props: { code: string, inline: boolean }) {
  const [error, setError] = React.useState<any>(null)
  return (
    <div>
      <GraphvizRenderer code={props.code} onError={setError} />
      <pre>{error}</pre>
    </div >
  )
}

Props

Name	Type	Required	Default	Description
`className`	`string`	`false`	-	Root css class
`code`	`string`	`true`	-	Source code
`engine`	`string`	`false`	`dot`	Source code
`onError`	`(error: string \| null) => void`	`true`	-	Error callback
`options`	`GraphvizOptions`	`false`	See below	Options passed to `ds-graphviz.options()`

className: The root element of this component will always bind with the CSS class 'yozora-code-renderer-graphviz'.
engine: Sets the Graphviz layout engine name to the specified engine string.
- type: 'circo' | 'dot' | 'fdp' | 'neato' | 'osage' | 'patchwork' | 'twopi'
- default: dot
options: The default options is
```
{
  fit: true,
  zoom: false,
}
```