@ts-graphviz/mdx NPM

@ts-graphviz/mdx

Embed the Graphviz image in MDX.

Installation

# yarn
yarn add @ts-graphviz/mdx
# or npm
npm install @ts-graphviz/mdx

Usage

Render MDX to HTML

Render MDX to HTML and embed the diagram in Graphviz as an image.

Diagram, Graph, Node, Edge, ClusterPortal components are provided by default.

Refer to @ts-graphviz/react project for component specifications.

import GraphvizMDX from '@ts-graphviz/mdx';

const mdx = `
# Example

This is example MDX.

<Graphviz>
  <Digraph>
    <Node id="node1" />
    <Node id="node2" />
    <Node id="node3" />
    <Edge targets={['node1', 'node2']} />
    <Edge targets={['node1', 'node3']} />
  </Digraph>
</Graphviz>
`;
console.log(GraphvizMDX.renderToHTML(mdx));

<h1>Test</h1>
<p>This is test MDX.</p>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJgAAAB0CA...">

Register Custom Component

import React, { FC } from 'react';
import GraphvizMDX from '@ts-graphviz/mdx';
import { Node } from '@ts-graphviz/react';

const MyNode: FC<{ id: string }> = ({ id }) => {
  return <Node id={id} fontcolor="red" />;
};
GraphvizMDX.use({
  // register components that can be used within <Graphviz /> component.
  graphviz: { MyNode },
});

const mdx = `
# Example

This is example MDX.

<Graphviz>
  <Digraph>
    <MyNode id="node1" />
    <MyNode id="node2" />
    <MyNode id="node3" />
    <Edge targets={['node1', 'node2']} />
    <Edge targets={['node1', 'node3']} />
  </Digraph>
</Graphviz>
`;
GraphvizMDX.renderToHTML(mdx);