graphviz-visual-editor

Try it at http://magjac.com/graphviz-visual-editor.

A web application for interactive visual editing of Graphviz graphs described in the DOT language.

Installation

git clone https://github.com/magjac/graphviz-visual-editor
cd graphviz-visual-editor
npm install
make
npm run start

NOTE: The make stage emits a few warnings. Ignore them.

To create an optimized build of the application:

npm run build

Learn more from the Create React App README and User Guide.

Implemented Features

• Rendering of a graph from a textual DOT representation.
• Panning and zooming the graph.
• Editing the DOT source in a context sensitive text editor.
• Visual editing of the graph through mouse interactions:
  • Insert node shapes by click or drag-and-drop.
  • Select default node style, color and fillcolor.
  • Draw edges between nodes.
  • Select nodes and edges by click or by area drag and mark them in the text editor.
  • Delete selected nodes and edges.
  • Cut/Copy-and-paste a selected node.
• Automatic update of the DOT source when the graph is visually edited.
• Automatic update of the graph when the DOT source is edited.
• Animated transition of the graph into a new state when changes are made.
• Preservation of the DOT source and the application state during page reloads by automatic save and retrieve to/from local storage in the browser.
• Export graph as URL and import graph from such an URL.
• Export graph as SVG.
• Options:
  • Automatically fit the graph to the available drawing area.
  • Select Graphviz layout engine.
• On-line help:
  • Keyboard shortcuts
  • Mouse interactions

Tested Browsers

• Firefox 71
• Chrome 79

Known Issues

Known issues are not listed here.

All known bugs and enhancement requests are reported as issues on GitHub and are listed under the Issues tab.

All open issues

Lists both bugs and enhancement requests.

Known open bugs

Open enhancement requests

Known limitations

A limitation is a feature deliberately released without full functionality. A limitation is classifed both as a bug and as an enhancement request to reflect that although it's an enhancement not yet implemented from the author's perspective, it might be perceived as a bug from the user's perspective.

Closed issues

Roadmap

There are numerous cool features missing. They are or will be listed as enhancement requests on GitHub.

There is also a project board showing the short-term activities.