Skip to content

ts-graphviz/mdx

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

17 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

NodeCI npm version License: MIT PRs Welcome tested with jest code style: prettier

@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

License

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