nikeee / edotor.net

Your favourite Graphviz editor

edotor.net

This site uses:

• dot-language-support for its language capabilities
• monaco-editor as main editor component
• Viz.js to render the graph

Want to add a language support feature? Head over to the repository of dot-language-support.

Think the website is cool? There is also a language server! You can use the same language capabilities in your favourite editor! Have a look at dot-language-server.

edotor.net's Issues

Properly highlight `--`

-> is highlighted, but not --.

Copy Share Link adds ?engine=dot every time you access a shared link

When sharing a link, ?engine=dot is appended to the URL.
When accessing the shared link, and sharing it again, the URL now has ?engine=dot?engine=dot.
Third time: ?engine=dot?engine=dot?engine=dot.

Consider different GraphViz implementation

There is a graphviz rewrite (rust): https://github.com/nadavrot/layout

If it produces the same results and it is possible to use it as a WASM module in a web worker, it could replace viz.js in some cases.

Auto bracket closing

See: https://github.com/Microsoft/monaco-json/blob/master/src/jsonMode.ts#L42

Don't break HTML-Like labels

The editor forces indenting with 4 spaces (even when pressing Tab). This is problematic when working with HTML-Like Labels because they ignore newlines and tabs, but not spaces.

Ctrl+Z after 'Rename symbol'

The 'Rename symbol' action (F2) cannot be undone with Ctrl+Z.
This is quite annoying as renaming going wrong cannot be undone.

Mobile Support

We could detect if the user is on a mobile browser. Monaco doesn't work in these browsers. We could just provide a simple textarea in that case.

The layout should change to a vertical view.

The navbar could also be more narrow in general.

Migrate to CRA

Click on node image to find related lines in editor

As an enhancement proposal, I thought it'd be an amazing plus while editing moderately complicated graphs would be to highlight related lines when clicking on elements in the visualization.
E.g. click on node and highlight line where node is defined AND related edges.

Possible approach (internally):

• Get node name upon click
• Search for that node name in the editor

I'm not super-familiar with javascript or front-end development, so not sure about the complexity of this under the hood. But I'm willing to do some minor work to start learning more about it. So happy to know about your thoughts and considerations on this! :)

Feature request: Preserve zoom when updating

Use case: I have a busy graph and I zoom to better see a part of it. I then modify the text in the left pane.

Observed behavior: the graph updates and zoom is reset to fit the whole graph in the right pane.

Desired behavior: the graph updates and I see roughly the same part of the graph.

I understand that changing the graph source can drastically affect its layout. It’s okay if zoom and panning position are preserved naïvely.

Some BGCOLOR's don't work in Edotor

Stumbled upon this while reviewing a pull request from another repo:

It appears not all BGCOLOR values work in Edotor, the following always show as black as shown in this example

• DARKRED
• FUCHSIA
• REBECCAPURPLE
• DARKMAGENTA
• LIME
• LIGHTGREEN
• OLIVE
• DARKCYAN
• TEAL
• AQUA
• DARKBLUE
• SILVER
• DARKGRAY

Another web editor shows these colours without a problem.

Add Engine to Share Link

We only use the document hash for sharing the DOT script. We coudl also share the used engine.

Change default Graph to one that demos the features

To demonstrate the supported features, the first graph on this page should encourage the use of the language service features.

Increase max zoom factor... a lot

When zooming a large graph using mouse scroll,
it seems there is a limit, a maximum zoom factor, which is still too tiny in my case to read the nodes' labels.
This is frustrating because I need to export the PNG file and get in trouble with another issue.
Graph and trouble are described here:
#24 (comment)

Because the render is svg, we should be able to zoom veeeery deep right ?
I am not a web developper so maybe I missed a point here.

Any way to improve this ?

PNG download on large graphs are broken

From #24:

Here is a large width digraph that causes issues (maybe not what this thread means though):
Actually the digraph is not large enough so that we can think it could cause issue...
The render is actually fine online on edotor but when downloading PNG file, a part of graph is completely cropped.
About 66% of the image width (at right) seems missing.
There is no warning in console in chrome (when graph was even larger).

If I reduce size of edge's label (for example by setting them all to "A"), everywhere goes fine.

large_width_digraph.txt

Originally posted by @IfZen in #24 (comment)

Add dark mode

Thank you for the great tool!

Would it be possible to add a dark mode and that the theme (light/dark) is automatically chosen depending on the user's configured preference?

double click the to select node text !

since we can zoom the graph by using middle wheel, so I think it is a good idea for select the node text by double click, and I need to copy the node text in so many cases ...

Ability to save a file

Enhance Tutorial

Via HN:

Looks cool, but either the default graph has incorrect comments, or it's buggy on firefox. There were no lightbulbs, and clicking on "a" did nothing.

It actually depends on the cursor location if the light bulb will appear. |a shows a lightbulb while a| not. This is due to the current pattern matching implementation.

Also, the initial light bulb (that should show the ability to refactor the graph, as the default cursor location is 0,0) does not seem to be visible. It should look like this:

Maybe relying on the default cursor location is not what we want here.

Cannot get development environment running

I am trying to get v1.7.1 running (or any version for that matter) but I struggle with the various dependency versions.

Firstly: what node version should I use for v1.7.1?

Secondly: whenever I run npm install after cloning the v1.7.1 tag I get a dependency conflict:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/monaco-editor
npm ERR!   monaco-editor@"~0.18.1" from the root project
npm ERR!   peer monaco-editor@"*" from [email protected]
npm ERR!   node_modules/react-monaco-editor
npm ERR!     react-monaco-editor@"^0.34.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer monaco-editor@"^0.15.1" from [email protected]
npm ERR! node_modules/monaco-editor-webpack-plugin
npm ERR!   dev monaco-editor-webpack-plugin@"~1.7.0" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/monaco-editor
npm ERR!   peer monaco-editor@"^0.15.1" from [email protected]
npm ERR!   node_modules/monaco-editor-webpack-plugin
npm ERR!     dev monaco-editor-webpack-plugin@"~1.7.0" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

I then circumvent that with --legacy-peer-deps, which installs succesfully.

However, when I try to build with npm run build:prod I get module not found errors:

ERROR in ./node_modules/monaco-languageclient/lib/services.js
Module not found: Error: Can't resolve 'vscode-languageserver-protocol/lib/main' in '/app/node_modules/monaco-languageclient/lib'
ERROR in ./node_modules/monaco-languageclient/lib/connection.js
Module not found: Error: Can't resolve 'vscode-languageserver-protocol/lib/main' in '/app/node_modules/monaco-languageclient/lib'
ERROR in ./node_modules/monaco-languageclient/lib/monaco-converter.js
Module not found: Error: Can't resolve 'vscode-languageserver-protocol/lib/utils/is' in '/app/node_modules/monaco-languageclient/lib'
ERROR in ./node_modules/monaco-languageclient/lib/connection.js
Module not found: Error: Can't resolve 'vscode-languageserver-protocol/lib/utils/is' in '/app/node_modules/monaco-languageclient/lib'

What steps do I need to take to get any version of this great app running?

Ability to open a file

Upgrade Monaco

v0.14.2 is out.
https://github.com/superRaytin/react-monaco-editor

Not able to remove code which crashes the app

It is possible to enter text which crashes the app (whole page gets blank). If that happens, the entered text might have been already saved. When the page is now being refreshed, edotor is shortly visible before crashing again.

Only way to restore the page is by clearing the local storage.

Offline version

Could you create an offline version of this? (similar to https://github.com/jgraph/drawio-desktop)
This would be really convenient in cases where you don't have internet for a while (flight etc.).

Feature request: store/load multiple graphs in local storage

This other grapvhiz web editor has the ability to store multiple graphs in the local storage of the browser. Would it be possible to implement something similar?

I prefer Edotor over the other web editor due to the convenient text editor and possibility to export to PNG. However, it would be nice if I could store more graphs in the local storage. Currently I visit the share link and bookmark that, but that's not very scalable.

I think it's related to #13.

collaborative graphs

Hi,
I recently started to use this project and i really enjoy it - nicely done! I was thinking what if it was possible to collaborate/edit the same "graph" by sharing a url to a coworker and also save graphs.

I'd be happy to try to take a stab at this (have very limited time so won't happen over night) but I imagine it would require some type of server that can:

• store graphs associated with a user
  • this would require some concept of a user, that can sign in.. perhaps via github oauth?
• a websocket to reflect state changes of the graph

I'm an android dev so I'm not familiar with what type of stack to use for this, if you have any input that would be awesome.

Major rewrite

We should ditch react, since we're not using it for anything meaningful. Plain HTML+JS should suffice.

So no CRA (as in #19).

We should use a simple, fast bundler (not webpack) that has support for TypeScript.

Save to local storage with different names

"#" at the beginning crashes the app

Enter a "#". It will result in:

main.bundle.js:91 Error: Cannot get SVG.
    at Object.getSvg (2.chunk.js:8)
    at e.exports (2.chunk.js:8)
    at D (3.chunk.js:1)
    at M.componentDidUpdate (3.chunk.js:1)
    at Ha (main.bundle.js:91)
    at qa (main.bundle.js:91)
    at main.bundle.js:91
    at Object.t.unstable_runWithPriority (main.bundle.js:100)
    at Al (main.bundle.js:91)
    at Pl (main.bundle.js:91)

Probably, the underlying issue is that the code is valid, but does not produce any output.

Monaco 0.15.x breaks auto completion

Put Samples in Separate .gv Files

Currently, they are strings in a JS file. We should change that.

Use `localStorage` for autosave

Keep the code from the editor automatically inside localStorage to allow continue working where you left of when revisiting the page.

Do not hijack Ctrl+L

The editor component used by Edotor seems to hijack the Ctrl+L shortcut for its “select line” action. In browsers, Ctrl+L is used to focus the address bar, and half the users have it in their muscle memory. (The other half uses Alt+D.)

When the current tab is Edotor and I want to focus the address bar, I subconsciously press Ctrl+L and start typing a new URL, but Ctrl+L selects my current line and the text typed next overwrites the selected line.

I use Edotor in Firefox with the custom flag browser.urlbar.openintab set to true, so focusing the address bar, typing an address and pressing Enter is my primary way of opening new tabs.

It would be nice if Edotor configured the Monaco editor to disable this binding or move it to a different key.

Support Color Preview

Companion Issue: nikeee/dot-language-support#3

Needed: The LSP-Client-Wrapper

Explore LaTeX export

There are two options:
https://tex.stackexchange.com/questions/13675

Lists of nodes doesn't work.

This graph doesn't seem to work. Edotor wasn't even able to export a link to that graph. It seems to dislike the comma separated list if nodes.

Can't not render Multiple edges

digraph D {
  A -> {B, C, D} -> {F}
}

Code reference: https://renenyffenegger.ch/notes/tools/Graphviz/examples/index

Scrolling broken in Firefox

IE11 compatibility via Babel?

edotor is great and we successfully prototyped its integration into the TLA+ Toolbox. The integration works fine on Linux and macOS and frees our users from (manually) installing GraphViz/dot. However, it fails miserably on Windows: Eclipse - for who knows why - cannot be convinced to use a modern browser such as chrome-based Edge or Firefox. It insists on IE11, which lacks support for almost everything, i.e. ES2015. I tried to manually backport edotor to ES5. After a while I discovered Babel, but I really don't know what I'm doing. Is there a chance that support for IE11 could be added?

By the way, launching Edge or Firefox on Windows from Eclipse as a standalone process fails because the URL is too long with the (encoded) graph appended.

Reduce Bundle Size

Currently, ~4.78 MiB have to be downloaded (compressed 1.23 MiB). Bootstrap's JS and CSS should get imported selectively by feature instead of included as a whole.

Fix sharing large DOT scripts

Currently, they are not passed to any server. This way, we can host this on a static site.

If we'd upload the script to some server, we could potentially store a large graph. We wouldn't run into size limitations of URLs.

We should consider this solution.