Elm graph editor

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

Current features

• 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.
• Help button that shows/hides info about how users can create/edit graphs
• Export graph in different formats
  • TGF
  • 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