GraphViz DOT Editor

Create network diagrams, flowcharts, and organizational charts with our free online GraphViz DOT editor. Features live preview, multiple layout engines, and easy export options.

Loading editor...

Preview

Drag to pan • Scroll to zoom

100%

Create professional network diagrams and flowcharts using GraphViz DOT syntax with real-time preview. Perfect for system architecture, organizational charts, and graph visualization.

Features

Real-time DOT Preview

Instantly visualize your GraphViz DOT diagrams as you type with live preview

Multiple Layout Engines

Support for dot, neato, fdp, sfdp, twopi, and circo layout engines

Export & Share

Export diagrams as SVG or PNG, and share your work with others

Frequently Asked Questions

What is GraphViz DOT language?

DOT is a plain text graph description language used by GraphViz. It's a simple way to describe directed and undirected graphs using text notation. DOT files can be used to create various types of network diagrams, flowcharts, organizational charts, and more. Learn more from the official DOT Language Specification.

What types of diagrams can I create with GraphViz?

You can create directed graphs (digraph), undirected graphs (graph), flowcharts, network diagrams, organizational charts, state machines, entity relationship diagrams, dependency graphs, and hierarchical structures using DOT syntax. Browse the GraphViz Gallery for examples and inspiration.

What are the different GraphViz layout engines?

GraphViz offers several layout engines: dot (hierarchical layouts), neato (spring model layouts), fdp (force-directed placement), sfdp (large graphs), twopi (radial layouts), and circo (circular layouts). Each engine is optimized for different types of graph structures. Read more about layout algorithms in the original AT&T research paper.

How do I export my GraphViz diagrams?

You can export your diagrams as SVG or PNG files using the export button in the toolbar. You can also share your diagrams with others using the share button, which generates a unique URL containing your DOT code. For advanced usage, consult the official GraphViz documentation.

Where can I learn more about GraphViz?

For comprehensive learning resources, visit the official GraphViz documentation, explore the complete attributes reference, and check out the node shapes gallery. The community-driven GraphViz Gallery provides excellent real-world examples.

How does AI assistance work with GraphViz?

Our GraphViz editor supports AI-powered diagram generation. You can describe your desired diagram structure, relationships, or use cases, and the AI will generate appropriate DOT syntax. The AI understands various diagram types including organizational charts, network topologies, flowcharts, and dependency graphs. Simply use the AI chat feature to request diagram generation or modifications.

GraphViz DOT Syntax Guide

Quick reference for DOT graphs, nodes, edges, attributes, and layouts.

Jump here

Basic Graph Structure

digraph G {
  A -> B;
}

Create a directed graph

Example: digraph MyGraph { Start -> End; }

graph G {
  A -- B;
}

Create an undirected graph

Example: graph Network { Node1 -- Node2; }

strict digraph G {
  A -> B;
  A -> B;
}

Strict graph (removes duplicate edges)

subgraph cluster_name {
  label="Group";
  A -> B;
}

Create a cluster (subgraph with box)

Node Attributes

A [label="My Node"];

Set node label

Example: Start [label="Begin Process"];

A [shape=box];

Node shapes: box, circle, ellipse, diamond, plaintext, record

Example: Decision [shape=diamond];

A [style=filled, fillcolor=lightblue];

Fill node with color

Example: Error [style=filled, fillcolor=red];

A [color=red, penwidth=2];

Set border color and width

Edge Attributes

A -> B [label="Yes"];

Label an edge

Example: Check -> Process [label="Valid"];

A -> B [color=red, penwidth=3];

Color and thicken edges

A -> B [style=dashed];

Edge styles: solid, dashed, dotted, bold

Example: Optional -> Feature [style=dashed];

A -> B [arrowhead=none];

Arrow styles: normal, box, diamond, dot, none

Layout and Ranking

rankdir=TB;

Layout direction: TB (top-bottom), LR (left-right), BT, RL

Example: rankdir=LR; // Horizontal layout

{rank=same; A B C;}

Force nodes to same rank (level)

node [shape=box]; A B C;

Apply attributes to multiple nodes

edge [color=blue]; A -> B -> C;

Apply attributes to multiple edges

Advanced Features

A [URL="https://example.com"];

Make nodes clickable (SVG output)

A [tooltip="Hover text"];

Add hover tooltips

A [image="path/to/image.png"];

Use images as node content

layout=neato;

Layout engines: dot (default), neato, fdp, sfdp, twopi, circo

Example: layout=circo; // Circular layout

Resources

DOT Language Specification

Official GraphViz documentation for DOT syntax and semantics

Attributes Reference

Complete reference for node, edge and graph attributes

Node Shapes Gallery

Visual guide to available node shapes

GraphViz Gallery

Examples and inspiration from the GraphViz community

GraphViz DOT Editor

Features

Real-time DOT Preview

Multiple Layout Engines

Export & Share

Frequently Asked Questions

GraphViz DOT Syntax Guide

Resources

Related GraphViz DOT Editor Articles

AI Diagram Generator - Create Diagrams from Text Prompts 2025

Free Diagram Tools Comparison - Mermaid vs Lucidchart vs Draw.io vs Visio 2025

How to Create Diagrams Online: Complete Beginner's Guide

Mermaid Diagram Tool Online - Free Flowchart & UML Editor

Gnuplot Online - Free Scientific Data Visualization & Plotting Tool

GraphViz Online - Free DOT Editor for Network Diagrams & Graphs