@yozora/react-code-renderer-graphviz

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,
  }

Related

• graphviz-react