ts-graphviz / mdx

📖 Embed the Graphviz image in MDX.(PoC)

@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);

See Also

Graphviz-dot Test and Integration

• ts-graphviz
  • Graphviz library for TypeScript.
• @ts-graphviz/react
  • Graphviz-dot Renderer for React.
• @ts-graphviz/node
  • Graphviz adapter for Node.js.
• jest-graphviz
  • Jest matchers that supports graphviz integration.
• setup-graphviz
  • GitHub Action to set up Graphviz cross-platform(Linux, macOS, Windows).

License

This software is released under the MIT License, see LICENSE.