Loading editor...

Quick Answer

Our free GraphViz DOT editor lets you create directed graphs, flowcharts, and network diagrams using the DOT language. Multiple layout engines (dot, neato, fdp, circo) and real-time SVG preview.

How It Works

1

Choose a template or start with a blank graph

2

Write your graph using DOT syntax

3

Select a layout engine for your visualization style

4

View the real-time preview

5

Export as SVG or PNG

Key Facts

  • Write graphs using DOT language syntax
  • Multiple layout engines (dot, neato, fdp, circo, twopi)
  • Real-time SVG preview as you type
  • Export as SVG or PNG
  • Templates for common graph types
  • Runs entirely in your browser using Graphviz WASM

Frequently Asked Questions

What is DOT language?

DOT is a graph description language. It uses a simple text syntax to define nodes and edges. For example: "A -> B" creates a directed edge from A to B.

Which layout engine should I use?

Use "dot" for hierarchical layouts, "neato" for spring model layouts, "circo" for circular layouts, and "fdp" for large undirected graphs.

Can I customize node and edge styles?

Yes, DOT supports extensive styling options including colors, shapes, fonts, and line styles. Use attributes like [color=red, shape=box].

Is GraphViz installed on my computer?

No installation needed. We use Graphviz compiled to WebAssembly, running entirely in your browser.