All Projects → magjac → Graphviz Visual Editor

magjac / Graphviz Visual Editor

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

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Graphviz Visual Editor

am-editor
A rich text collaborative editor framework that can use React and Vue custom plug-ins. 一个富文本实时协同编辑器框架,可以使用React和Vue自定义插件。
Stars: ✭ 542 (+107.66%)
Mutual labels:  wysiwyg, text-editor, wysiwyg-editor
svelte-slate
slate svelte view layer
Stars: ✭ 43 (-83.52%)
Mutual labels:  wysiwyg, text-editor, wysiwyg-editor
typester
✒️ A WYSIWYG that gives you predictable and clean HTML
Stars: ✭ 29 (-88.89%)
Mutual labels:  wysiwyg, text-editor, wysiwyg-editor
bangle.dev
Collection of higher level rich text editing tools. It powers the local only note taking app https://bangle.io
Stars: ✭ 541 (+107.28%)
Mutual labels:  wysiwyg, text-editor, wysiwyg-editor
Wysiwyg.js
wysiwyg contenteditable editor (minified+compression: 6kb)
Stars: ✭ 520 (+99.23%)
Mutual labels:  text-editor, wysiwyg, wysiwyg-editor
Angular Froala Wysiwyg
Angular 4, 5, 6, 7, 8 and 9 plugin for Froala WYSIWYG HTML Rich Text Editor.
Stars: ✭ 696 (+166.67%)
Mutual labels:  text-editor, wysiwyg, wysiwyg-editor
Pell
📝 the simplest and smallest WYSIWYG text editor for web, with no dependencies
Stars: ✭ 11,653 (+4364.75%)
Mutual labels:  text-editor, wysiwyg, wysiwyg-editor
noflo-graphviz
NoFlo visualization tools for GraphViz
Stars: ✭ 14 (-94.64%)
Mutual labels:  graphviz, graph-visualization
wysihtml5-rails
A wysiwyg text editor for use in the Rails asset pipeline
Stars: ✭ 28 (-89.27%)
Mutual labels:  wysiwyg, wysiwyg-editor
vscode-markdown-editor
A vscode extension to make your vscode become a full-featured WYSIWYG markdown editor
Stars: ✭ 249 (-4.6%)
Mutual labels:  graphviz, wysiwyg
jodit-vue
Vue wrapper for Jodit Editor
Stars: ✭ 60 (-77.01%)
Mutual labels:  wysiwyg, wysiwyg-editor
ember-pell
Ember addon for simplest and smallest (1kB) WYSIWYG text editor for web, with no dependencies
Stars: ✭ 56 (-78.54%)
Mutual labels:  wysiwyg, text-editor
cazary
jQuery plugin of WYSIWYG editor that aims for fast, lightweight, stylish, customizable, cross-browser, and multi-language.
Stars: ✭ 12 (-95.4%)
Mutual labels:  wysiwyg, wysiwyg-editor
react-web-editor
The react-web-editor is a WYSIWYG editor library. you can resize and drag your component. It also has simple rich text editor
Stars: ✭ 191 (-26.82%)
Mutual labels:  wysiwyg, wysiwyg-editor
nova-froala-field
A Laravel Nova Froala WYSIWYG Editor Field.
Stars: ✭ 110 (-57.85%)
Mutual labels:  wysiwyg, wysiwyg-editor
ngx-wall
Helps build content editor for note-taking application
Stars: ✭ 78 (-70.11%)
Mutual labels:  wysiwyg, wysiwyg-editor
wysiwyg-editor-dotnet-sdk
.NET SDK to ease the integration of Froala WYSIWYG Editor on server side.
Stars: ✭ 23 (-91.19%)
Mutual labels:  wysiwyg, wysiwyg-editor
fluence
WYSIWYG wiki powered by Crystal, markdown, and Git
Stars: ✭ 44 (-83.14%)
Mutual labels:  wysiwyg, wysiwyg-editor
textbus
Textbus 是一个组件化的、数据驱动的富文本框架,支持在线协同编辑,同时也可以作为一个开箱即用的富文本编辑器,拥有非常好的扩展性和可定制性,是构建复杂富文本的不二之选!
Stars: ✭ 642 (+145.98%)
Mutual labels:  wysiwyg, wysiwyg-editor
wysiwyg-editor-python-sdk
Python SDK to ease the integration of Froala WYSIWYG Editor on server side.
Stars: ✭ 20 (-92.34%)
Mutual labels:  wysiwyg, wysiwyg-editor

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.

CircleCI codecov

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.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].