@yozora/react-code-renderer-graphviz
v3.0.0-alpha.9
Published
render graphviz (dot) code
Downloads
954
Maintainers
Readme
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
- type:
options
: The default options is{ fit: true, zoom: false, }