# Visualizing module dependencies with Kite

**URL:** <https://discourse.elm-lang.org/t/visualizing-module-dependencies-with-kite/2788>\
**Category:** Show and Tell\
**Created:** [December 18, 2018, 5:55pm UTC](https://discourse.elm-lang.org/t/visualizing-module-dependencies-with-kite/2788 "2018-12-18T17:55:15Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Erkal\_Selman](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/erkal_selman/32/269_2.png) [@Erkal\_Selman](https://discourse.elm-lang.org/u/Erkal_Selman)\
**Post date:** [December 18, 2018, 5:55pm UTC](https://discourse.elm-lang.org/t/visualizing-module-dependencies-with-kite/2788/1 "2018-12-18T17:55:15Z")

</div>

[Kite](https://erkal.github.io/kite/) now helps you visualize the module dependency graph of your elm project.  
[Here is a video](https://youtu.be/b4sfzHJeHsI) that illustrates how to do it.

![module%20dependency%20graph%20of%20elm-core](https://cdck-file-uploads-canada1.s3.dualstack.ca-central-1.amazonaws.com/flex035/uploads/elm_lang/original/2X/e/e96c18f856d1700634eec82cdc0fe0503cd43465.png)

Here are some improvements made after [the last announcement](https://discourse.elm-lang.org/t/an-interactive-visualization-tool-for-graph-theory/2061/8?u=erkal_selman):

- undo/redo
- [elm-ui](https://package.elm-lang.org/packages/mdgriffith/elm-ui/latest/) for the layout. There is no css any more.
- multiple files with animated transitions between them. (This makes step-by-step visualizations of algorithms easy.)
- using local storage for saving the graphs
- an example for algorithm visualization (Dijsktra’s shortest path algorithm)
- labels for nodes and edges
- individual gravity centers for each node

You can see [the roadmap](https://github.com/erkal/kite/projects/1?fullscreen=true) for future plans.

---

<div class="post-metadata">

**Author:** ![dmy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/dmy/32/702_2.png) [@dmy](https://discourse.elm-lang.org/u/dmy)\
**Post date:** [December 18, 2018, 6:30pm UTC](https://discourse.elm-lang.org/t/visualizing-module-dependencies-with-kite/2788/2 "2018-12-18T18:30:32Z")

</div>

The UI looks fantastic and I love how smooth it is. The video is nice also.

Maybe there are some algorithms out there to optimize the nodes positions by minimizing edges overlaps? I believe that graphviz uses something like that?

(Edit: [https://stackoverflow.com/questions/2347748/planar-graph-layouts](https://stackoverflow.com/questions/2347748/planar-graph-layouts))

---

<div class="post-metadata">

**Author:** ![Erkal\_Selman](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/erkal_selman/32/269_2.png) [@Erkal\_Selman](https://discourse.elm-lang.org/u/Erkal_Selman)\
**Post date:** [December 18, 2018, 9:58pm UTC](https://discourse.elm-lang.org/t/visualizing-module-dependencies-with-kite/2788/3 "2018-12-18T21:58:42Z")

</div>

The best that I could find online is [dagre](https://github.com/dagrejs/dagre).  
My hope is that in the future, people are going to implement [graph drawing](https://en.wikipedia.org/wiki/Graph_drawing) algorithms as elm packages and Kite is going to use them.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/1X/50a05e53677a2c3b47776d7abd0f113eb50193a1.png) [@system](https://discourse.elm-lang.org/u/system)\
**Post date:** [December 28, 2018, 9:58pm UTC](https://discourse.elm-lang.org/t/visualizing-module-dependencies-with-kite/2788/4 "2018-12-28T21:58:47Z")

</div>

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.