https://github.com/ts-graphviz/mdx

📖 Embed the Graphviz image in MDX.(PoC)
https://github.com/ts-graphviz/mdx

graphviz graphviz-dot mdx npm-package react

Last synced: about 1 month ago
JSON representation

📖 Embed the Graphviz image in MDX.(PoC)

• Host: GitHub
• URL: https://github.com/ts-graphviz/mdx
• Owner: ts-graphviz
• License: mit
• Created: 2020-06-06T06:22:20.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T08:04:54.000Z (about 2 years ago)
• Last Synced: 2024-10-29T20:18:50.276Z (3 months ago)
• Topics: graphviz, graphviz-dot, mdx, npm-package, react
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/@ts-graphviz/mdx
• Size: 1.5 MB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 13
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
[![NodeCI](https://github.com/ts-graphviz/mdx/workflows/NodeCI/badge.svg)](https://github.com/ts-graphviz/mdx/actions?workflow=NodeCI)

[![npm version](https://badge.fury.io/js/%40ts-graphviz%2Fmdx.svg)](https://badge.fury.io/js/%40ts-graphviz%2Fmdx)

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](http://makeapullrequest.com)

[![tested with jest](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://github.com/facebook/jest)

[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)

# @ts-graphviz/mdx

Embed the Graphviz image in MDX.

## Installation

```bash

# 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](https://github.com/ts-graphviz/react) project for component specifications.

```typescript

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

const mdx = `

# Example

This is example MDX.

  

    

    

    

    

    

  

`;

console.log(GraphvizMDX.renderToHTML(mdx));

```

```html

Test

This is test MDX.



```


### Register Custom Component

```typescript

import React, { FC } from 'react';

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

import { Node } from '@ts-graphviz/react';

const MyNode: FC<{ id: string }> = ({ id }) => {

  return ;

};

GraphvizMDX.use({

  // register components that can be used within  component.

  graphviz: { MyNode },

});

const mdx = `

# Example

This is example MDX.

  

    

    

    

    

    

  

`;

GraphvizMDX.renderToHTML(mdx);

```

## See Also

Graphviz-dot Test and Integration

- [ts-graphviz](https://github.com/ts-graphviz/ts-graphviz)

  - [Graphviz](https://graphviz.gitlab.io/) library for TypeScript.

- [@ts-graphviz/react](https://github.com/ts-graphviz/react)

  - Graphviz-dot Renderer for React.

- [@ts-graphviz/node](https://github.com/ts-graphviz/node)

  - Graphviz adapter for Node.js.

- [jest-graphviz](https://github.com/ts-graphviz/jest-graphviz)

  - Jest matchers that supports graphviz integration.

- [setup-graphviz](https://github.com/ts-graphviz/setup-graphviz)

  - GitHub Action to set up Graphviz cross-platform(Linux, macOS, Windows).

## License

This software is released under the MIT License, see [LICENSE](./LICENSE).