Simple editor for creating graphs implemented purely in Elm. See it in action!
- The editor has 3 modes, which determine what user interactions are doing with the graph
- In Create/Edit mode you can
- Create new nodes by clicking on the canvas (double click to immediately start editing node text).
- Edit node text by double clicking node. Enter confirms the edit.
- Create new edges by click & holding mouse button on initial node and dropping on target node.
- Edit edge text by double clicking edges. Enter confirms the edit.
- In Layout mode you can
- move nodes on the canvas using drag and drop.
- reattach edges to different nodes by dragging node arrowheads
- get nodes arranged automatically using one of the supported GraphViz's layout engines
- bring nodes closer/further from each other in their current arrangement
- In Delete mode you can remove nodes and edges by clicking them.
- In Create/Edit mode you can
- Help button that shows/hides info about how users can create/edit graphs
- Export graph in different formats
- Ability to save / load multiple graphs in local storage
- Add mode dependent SVG cursors to make semantics of mouse actions clearer
You can start the app in development mode using elm-live command:
``bash elm-live --open --dir=dist -- src/Main.elm --output=dist/js/app.js