Graphviz & DOT Language code editor with live preview

About the project

An example implementation of d3-graphviz in React + Vite for a Graphviz & DOT Language code editor with live preview. Built using d3/d3-graphviz and CodeMirror.

Demo

Try it out here: gviz-vite.vercel.app

Features

• Live compilation/preview
• Basic syntax validation with error messages
• Example DOT files to get you started
• Dynamic layout engine switching

Getting started

Prerequisities

• Node.js 18.0.0 or better
• npm 8.0.0 or better

Installation

Clone the project:

git clone https://github.com/noahshotz/graphviz-vite.git

Navigate into the directory:

cd graphviz-vite

Install dependencies:

npm install

Run locally:

npm run dev