Elm graph editor

Simple editor for creating graphs implemented purely in Elm. See it in action!

Current features

• [x] The editor has 3 modes, which determine what user interactions are doing with the graph
  • [x] In Create/Edit mode you can
    • [x] Create new nodes by clicking on the canvas (double click to immediately start editing node text).
    • [x] Edit node text by double clicking node. Enter confirms the edit.
    • [x] Create new edges by click & holding mouse button on initial node and dropping on target node.
    • [x] Edit edge text by double clicking edges. Enter confirms the edit.
  • [x] In Layout mode you can
    • [x] move nodes on the canvas using drag and drop.
    • [ ] reattach edges to different nodes by dragging node arrowheads
    • [x] get nodes arranged automatically using one of the supported GraphViz's layout engines
    • [x] bring nodes closer/further from each other in their current arrangement
  • [x] In Delete mode you can remove nodes and edges by clicking them.
• [x] Help button that shows/hides info about how users can create/edit graphs
• [x] Export graph in different formats
  • [x] TGF
  • [x] DOT

Upcoming Features

• [ ] Ability to save / load multiple graphs in local storage

TODOs

• [ ] Add mode dependent SVG cursors to make semantics of mouse actions clearer

Start development server server

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