@ts-graphviz/mdx
TypeScript icon, indicating that this package has built-in type declarations

0.0.6 • Public • Published

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.

Readme

Keywords

none

Package Sidebar

Install

npm i @ts-graphviz/mdx

Weekly Downloads

2

Version

0.0.6

License

MIT

Unpacked Size

19.6 kB

Total Files

21

Last publish

Collaborators

  • kamiazya