Skip to content
Switch branches/tags

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

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

Upcoming Features

  • Ability to save / load multiple graphs in local storage


  • 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


Simple editor for creating graphs implemented purely in Elm.



No releases published


No packages published