graphviz-reactは、ReactでGraphvizオブジェクトをレンダリングするためのシンプルで使いやすいコンポーネントです。 graphviz-reactは、d3-graphvizライブラリをReact向けにラッパーし、レンダラリング機能を提供しています。 完全なラッパーというわけではなく、レンダリング機能の一部を提供しているようです。
以下は、今回作ったデモです。 graphviz-reactのDEMO
graphviz-reactをインストールする
npmで一発です。
npm install graphviz-react
graphviz-reactを使う前に
graphviz-reactを含むプロジェクトをstartしたり、buildする場合にビープオーバーフローが発生します。 これは元々の依存パッケージであるd3-graphviz・viz.jsの既知の問題であり、package.jsonのstart・buildスクリプトコマンドに下記のようなオプションを追加することで回避ができます。
create-react-appを使っている場合は下記にようにします。
"scripts": {
"start": "react-scripts --max_old_space_size=4096 start",
"predeploy": "react-scripts --max_old_space_size=4096 build",
}
ejectを実行している場合は下記のようにします。
"scripts": {
"start": "node scripts/start.js --max_old_space_size=4096 ",
"build": "node scripts/build.js --max_old_space_size=4096 ",
}
リファレンス
Graphviz
graphviz-reactのコンポーネント:Graphvizを使うことで、Graphvizにdot言語で記述した内容をレンダリングすることができます。
import { Graphviz } from 'graphviz-react';
Graphviz#options
optionsは、コンポーネントのレンダリングオプションのオプション配列です。 これは、d3-graphvizレンダラーで受け入れられるオプションと同様の値になっています。
Graphviz#options.engine
Graphvizレイアウトエンジン名を指定します。 サポートしているエンジンは以下の通りです。
- circo
- dot (default)
- fdp
- neato
- osage
- patchwork
- twopi
Graphviz#options.height
レンダリングされるSVGの高さを指定します。
Graphviz#options.width
レンダリングされるSVGの幅を指定します。
Graphviz#options.zoom
レンダリングされるSVGがズーム可能かを設定します。