graphviz-visual-editor

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

MIT License

Stars
693

Bot releases are visible (Hide)

graphviz-visual-editor - Latest Release

Published by magjac about 2 months ago

See the CHANGELOG for details.

graphviz-visual-editor - v1.2.0

Published by magjac 5 months ago

See the CHANGELOG for details.

graphviz-visual-editor - v1.1.0

Published by magjac 8 months ago

See the CHANGELOG for details.

graphviz-visual-editor - v1.0.0

Published by magjac 9 months ago

See the CHANGELOG for details.

graphviz-visual-editor - v0.6.5

Published by magjac over 2 years ago

See the CHANGELOG for details.

graphviz-visual-editor - v0.6.4

Published by magjac over 2 years ago

See the CHANGELOG for details.

graphviz-visual-editor - v0.6.3

Published by magjac over 2 years ago

See the CHANGELOG for details.

graphviz-visual-editor - Bug fixes

Published by magjac almost 5 years ago

Fixed

  • Module not found: Can't resolve './DoYouWantToDeleteDialog' #93
  • Stuck at "Starting the development server" #95
  • Exported URL to graph shows the graph correctly, but the new URL is wrong #97
  • Characters are lost in the editor when typing fast #99
  • Selection by dragging the canvas does not work in Firefox #102
  • Ctrl- or Shift-click the canvas deselects already selected components #107
  • Unselected components are not cleared in text editor #108
graphviz-visual-editor - Multiple graphs in local storage + DOT source through URL + bug fixes

Published by magjac about 6 years ago

Added

  • Export as URL. Generates a link to the application with the DOT source code as an URL parameter.
  • Specification of the DOT source code through a URL parameter. #69
  • Disabling of the undo and redo buttons when there is nothing to undo or redo.
  • Allow multiple graphs to be stored in the browser's local storage. #70
    • Name and save a graph to local storage
    • Open a named graph from local storage
    • Allow sorting graphs on name, DOT source and last modification time in the open from browser dialog
    • Allow deleting graphs in the open from browser dialog
    • Show graph thumbnails and allow preview in the open from browser dialog
    • Create new empty graph
    • Rename current graph

Fixed

  • Ctrl-Y and Ctrl-Z descriptions are missing in the keyboard shortcuts help dialog. #90
  • If the DOT source is cleared when an error is indicated in the text editor, the old error message is still displayed. #88
  • When the DOT source is cleared in the text editor, the old graph is still visible. #87
  • The error button in the text editor might be covered by the highlighting of the current line. #85
  • Corrected size of GitHub icon in app bar.
  • When inserting a node with default shape by click in the node shape insert panel, the node gets an incorrect shape. #77
  • The selection indication in the graph is cleared when a node is inserted. #78
  • The graph pane is not focused after inserting a node shape from node shape insert panel. #58
graphviz-visual-editor - User config of tweening & transitions. Fixed lost undo history. Focus and progress indicators

Published by magjac about 6 years ago

  • Added display of progress indicator when rendering of graph takes longer than 800 ms. #38
  • Added indication of focused pane by increasing its elevation, thereby making it cast more shadow. #39
  • Fixed lost undo/redo history when node or edge format drawer is opened. #53
  • Added user configuration of transition duration. #52
  • Added user configuration of tweening precision. #44
  • Added user configuration of path & shape tweening enable/disable. #43
  • Added user configurable text editor tab size. #41
  • Added user configurable text editor font size. #42
  • Added undo and redo from the Graph pane throgh Ctrl-Z & Ctrl-Y. #36
  • Added undo and redo from buttons in the app bar. #37
  • Fixed scrollbar on setting dialog. #45
  • Added scrolling of text editor error indication into view through a button. #46
  • Added automatic scrolling of text editor error indication into view. #46
  • Added highlighting of nodes and edges in the text editor when selected in the graph. #35
graphviz-visual-editor - Fixed incorrect clearing of error indication

Published by magjac about 6 years ago

  • Fixed incorrect clearing of error indication. #33
graphviz-visual-editor - DOT aware node and edge insert and delete

Published by magjac about 6 years ago

  • Added DOT language aware node and edge insert and delete. No restrictions on how the DOT source code is organized. Leaves unaffected parts of the source code untouched regardless of separator characters, indentation, line breaking and other whitespace. #15 #27
  • Fixed deletion of nodes with quoted node id. #21
graphviz-visual-editor - Fixed error handling and loosing characters in editor

Published by magjac about 6 years ago

graphviz-visual-editor -

Published by magjac about 6 years ago

  • Added selection of all nodes and edges in the graph with Ctrl-A.
  • Added selection of all edges in the graph with Shift-Ctrl-A.
  • Added a GitHub button in the app bar linking to the repository.
  • Added open source and GitHub text and links in the about dialog.
  • Added a description of the application in the about dialog.
  • Added configurable editor hold-off time in the settings dialog.
  • Improved response time by not attempting to render the graph when the DOT source is incorrect.
  • Improved response time by not re-rendering the graph when the DOT source is unchanged.

New features

  • Cut/Copy-and-paste of nodes in subgraphs are now supported.

Fixed bugs

  • Keyboard input is targeted to the text editor even after certain mouse operations in the graph
  • Cut/Copy-and-paste of a node only indirectly declared with and edge specification in the DOT source throws error
  • Drag area select does not select anything if the mouse button is released outside the canvas
  • In Chrome, middle-mouse node insertion does not work
  • In Chrome, de-selecting selected nodes and edges by clicking the canvas does not work
  • In Chrome, drawing an edge throws an error, but works otherwise
  • In Chrome, inserting a node with shape note, tab, box3d or others throws an error, but works otherwise
  • In Chrome, drag-and-drop insert node doesn't work

Currently Known Limitations

Apart from the numerous cool features that are missing, here's a list of known limitations in the features that do exist:

Since previous release:

None.

In previous release:

  • The visual editing capabilities requires the DOT source to be organized with only one node or edge per line, since they currently operate by inserting or deleting complete lines.
graphviz-visual-editor - Fixed installation dependencies

Published by magjac about 6 years ago

Changes

  • Added a package-lock.json file to fix the dependencies at installation.
  • No functional changes to the application.

Currently Known Limitations

Apart from the numerous cool features that are missing, here's a list of known limitations in the features that do exist:

Since previous release:

None.

In previous release:

  • The only fully tested browser is Firefox. Testing with Chrome has started and the problems found are reported as issues.
  • The visual editing capabilities requires the DOT source to be organized with only one node or edge per line, since they currently operate by inserting or deleting complete lines.
  • Cut/Copy-and-paste of nodes in subgraphs is not yet supported.

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.
    • 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.
  • Options:
    • Automatically fit the graph to the available drawing area.
    • Select Graphviz layout engine.
  • On-line help:
    • Keyboard shortcuts
    • Mouse interactions

Currently Known Limitations

Apart from the numerous cool features that are missing; here's a list of known limitations in the features that do exist:

  • The only fully tested browser is Firefox. Testing with Chrome has started and the problems found are reported as issues.
  • The visual editing capabilities requires the DOT source to be organized with only one node or edge per line, since they currently operate by inserting or deleting complete lines.
  • Cut/Copy-and-paste of nodes in subgraphs is not yet supported.
Badges
Extracted from project README
CircleCI codecov
Related Projects