v0.4.0 🌈

🚀 Features

• Web Module @kamiazya (#68)

Web Module

The Graphviz component of @ts-graphviz/react/web can be rendered directly in the browser.

Since this component uses the function of @hpcc-js/wasm internally, it is necessary to host @hpcc-js/wasm/dist/graphviz.wasm and specify its directory with wasmFolder.

For development, I recommend using the one hosted by unpkg.

import React, { FC } from 'react';
import ReactDOM from 'react-dom';
import { Digraph, Node, Edge } from '@ts-graphviz/react';
import { Graphviz } from '@ts-graphviz/react/web';
import { wasmFolder } from '@hpcc-js/wasm';

wasmFolder('https://unpkg.com/@hpcc-js/wasm/dist/');

const App: FC = () => (
  <Graphviz>
    <Digraph>
      <Node id="n1" />
      <Node id="n2" />
      <Node id="n3" />
      <Edge targets={['n1', 'n2', 'n3']} />
      <Edge targets={['n1', 'n3']} />
    </Digraph>
  </Graphviz>
);

ReactDOM.render(<App />, document.getElementById('root'));

v0.3.0 🌈

🚀 Features

• Add cluster common attributes @kamiazya (#65)

Changes

• update README @kamiazya (#67)
• Fix JSX html label to upper case @kamiazya (#66)

v0.2.1 🌈

Changes

🚀 Features

• Add tests and error handlings @kamiazya (#63)

v0.2.0 🌈

🚀 Features

• Html like labels @kamiazya (#62)

Changes

• Bump jest and ts-jest @dependabot-preview (#57)

Script

import React, { FC } from 'react';
import { Digraph, Node, Subgraph, renderToDot, Edge, DOT } from '@ts-graphviz/react';

const Example: FC = () => (
  <Digraph dpi={150}>
    <Node
      id="nodeA"
      shape="none"
      label={
        <DOT.TABLE BORDER="0" CELLBORDER="1" CELLSPACING="0">
          <DOT.TR>
            <DOT.TD>left</DOT.TD>
            <DOT.TD PORT="m">middle</DOT.TD>
            <DOT.TD PORT="r">right</DOT.TD>
          </DOT.TR>
        </DOT.TABLE>
      }
    />

    <Subgraph id="cluster" label="Cluster" labeljust="l">
      <Node id="nodeB" label="This is label for nodeB." />
    </Subgraph>
    <Edge targets={['nodeB', 'nodeA:m']} comment="Edge from node A to B" label={<DOT.B>A to B</DOT.B>} />
  </Digraph>
);

const dot = renderToDot(<Example />);

console.log(dot);

Output dot

digraph {
  dpi = 150;
  "nodeA" [
    shape = "none",
    label = <<table BORDER="0" CELLBORDER="1" CELLSPACING="0"><tr><td>left</td><td PORT="m">middle</td><td PORT="r">right</td></tr></table>>,
  ];
  "nodeB";
  subgraph "cluster" {
    labeljust = "l";
    label = "Cluster";
    "nodeB" [
      label = "This is label for nodeB.",
    ];
  }
  // Edge from node A to B
  "nodeB" -> "nodeA":"m" [
    label = <<b>A to B</b>>,
  ];
}

v0.1.0 🌈

Add README.

Usage

Example

Script

import React, { FC } from 'react';
import { Digraph, Node, Subgraph, renderToDot, Edge } from '@ts-graphviz/react';

const Example: FC = () => (
  <Digraph dpi={150}>
    <Node id="nodeA" />

    <Subgraph id="cluster" label="Cluster" labeljust="l">
      <Node id="nodeB" label="This is label for nodeB." />
    </Subgraph>
    <Edge targets={['nodeA', 'nodeB']} comment="Edge from node A to B" label={<b>A to B</b>} />
  </Digraph>
);

const dot = renderToDot(<Example />);

console.log(dot);

Output dot

digraph {
  dpi = 150;
  "nodeA";
  "nodeB";
  subgraph "cluster" {
    labeljust = "l";
    label = "Cluster";
    "nodeB" [
      label = "This is label for nodeB.",
    ];
  }
  // Edge from node A to B
  "nodeA" -> "nodeB" [
    label = <<b>A to B</b>>,
  ];
}

v0.0.1 🌈

Changes

• Bump jest-graphviz from 0.1.1 to 0.2.0 @dependabot-preview (#25)
• Bump ts-graphviz from 0.9.0 to 0.9.1 @dependabot-preview (#42)
• [Security] Bump acorn from 5.7.3 to 5.7.4 @dependabot-preview (#41)
• Bump ts-graphviz from 0.7.0 to 0.9.0 @dependabot-preview (#31)
• Bump typescript from 3.7.4 to 3.8.2 @dependabot-preview (#35)
• Bump ts-graphviz from 0.4.1 to 0.7.0 @dependabot-preview (#23)
• Bump @types/react from 16.9.12 to 16.9.17 @dependabot-preview (#16)
• Bump typescript from 3.7.2 to 3.7.4 @dependabot-preview (#17)
• Bump tslint-plugin-prettier from 2.0.1 to 2.1.0 @dependabot-preview (#18)
• Bump jest-graphviz from 0.0.2 to 0.1.1 @dependabot-preview (#14)
• Bump ts-graphviz from 0.1.0 to 0.4.1 @dependabot-preview (#20)
• Bump ts-graphviz from 0.0.5 to 0.1.0 @dependabot-preview (#8)
• Bump @types/react from 16.9.11 to 16.9.12 @dependabot-preview (#4)
• Bump ts-jest from 24.1.0 to 24.2.0 @dependabot-preview (#5)
• Bump react from 16.11.0 to 16.12.0 @dependabot-preview (#2)