<blockquote>
<p>easily create visualizations of trees and graphs.</p>
</blockquote>
<ul>
<li><p><a href="https://en.wikipedia.org/wiki/Microsoft_Visio" rel="nofollow noreferrer">Visio</a><br />
The easiest way is to use a tool like Visio. It is <a href="https://en.wikipedia.org/wiki/WYSIWYG" rel="nofollow noreferrer">WYSIWYG</a>.</p>
<p>Also see <a href="https://www.maketecheasier.com/5-best-free-alternatives-to-microsoft-visio/" rel="nofollow noreferrer">13 Free Alternatives to Microsoft Visio</a></p>
</li>
</ul>
<hr />
<ul>
<li><p><a href="https://graphviz.org/" rel="nofollow noreferrer">GraphViz</a><br />
Very popular. Works with different grammars for defining the graphs with <a href="https://graphviz.org/doc/info/lang.html" rel="nofollow noreferrer">DOT</a> being the most commonly used. Somewhat easy after you get past your fist few.</p>
</li>
<li><p><a href="https://plantuml.com/" rel="nofollow noreferrer">PlantUML</a><br />
PlantUML is used to draw UML diagrams, using a simple and human readable text description. GraphViz must be installed to use. Also has an <a href="http://www.plantuml.com/plantuml/uml/SyfFKj2rKt3CoKnELR1Io4ZDoSa70000" rel="nofollow noreferrer">online server</a>.</p>
</li>
<li><p><a href="https://js.cytoscape.org/" rel="nofollow noreferrer">Cytoscape.js</a><br />
Graph theory (network) library for visualisation and analysis. Works with JavaScript, HTML and JSON to create interactive HTML pages. Not easy to learn and use but once mastered can make dynamic graphs and even animate them, e.g. walking a tree.</p>
</li>
<li><p><a href="https://d3js.org/" rel="nofollow noreferrer">D3</a><br />
D3.js is a JavaScript library for manipulating documents based on data.</p>
</li>
<li><p><a href="https://gojs.net/latest/index.html?v220" rel="nofollow noreferrer">GoJS</a><br />
A Web Framework for Rapidly Building Interactive Diagrams.</p>
</li>
<li><p><a href="https://www.ni.com/en-us/shop/labview/select-edition/labview-community-edition.html" rel="nofollow noreferrer">LabVIEW</a> Community Edition<br />
LabVIEW offers a graphical programming approach to help you visualize every aspect of your application, including hardware configuration, measurement data, and debugging.</p>
</li>
<li><p><a href="https://docutils.sourceforge.io/rst.html" rel="nofollow noreferrer">Restructured Text</a><br />
Markup Syntax and Parser Component of Docutils. The web sites can even include interactive content. <a href="https://opendsa-server.cs.vt.edu/OpenDSA/Books/PL/html/index.html" rel="nofollow noreferrer">Example</a></p>
</li>
<li><p><a href="https://en.wikipedia.org/wiki/LaTeX" rel="nofollow noreferrer">LaTeX</a><br />
LaTeX is a software system for document preparation.
Diagrams in research papers are typically made using LaTeX. LaTeX is not easy. LaTeX is a Turning complete programming language with packages, hierarchies, add-ins, etc. For writing technical math notation this is a popular option.</p>
</li>
<li><p><a href="https://www.mathjax.org/" rel="nofollow noreferrer">MathJax</a><br />
Beautiful and accessible math in all browsers</p>
</li>
<li><p><a href="https://www.markdownguide.org/" rel="nofollow noreferrer">MarkDown</a><br />
Markdown makes writing on the web fast and easy.</p>
</li>
<li><p>Web pages<br />
<a href="https://www.w3schools.com/html/default.asp" rel="nofollow noreferrer">HTML</a> - The language for building web pages.<br />
<a href="https://www.w3schools.com/css/default.asp" rel="nofollow noreferrer">CSS</a> - The language we use to style an HTML document.<br />
<a href="https://www.w3schools.com/sass/" rel="nofollow noreferrer">Sass</a> - Reduces repetition of CSS and therefore saves time.<br />
<a href="https://www.w3schools.com/js/default.asp" rel="nofollow noreferrer">JavaScript</a> - The programming language of the Web.</p>
</li>
<li><p><a href="https://www.doxygen.nl/index.html" rel="nofollow noreferrer">Doxygen</a><br />
Doxygen is the de facto standard tool for generating documentation from annotated C++ sources, but it also supports other popular programming languages such as C, Objective-C, C#, PHP, Java, Python, IDL (Corba, Microsoft, and UNO/OpenOffice flavors), Fortran, VHDL and to some extent D.</p>
</li>
</ul>

CC BY-SA 4.0
2021-12-09T03:44:22.527Z
Thanks for the suggestions, much appreciated!
arrwags
CC BY-SA 4.0
2021-12-17T22:30:37.277Z
Definitely Dot. Ultra simple input format, which I often generate from another program, rather than by hand.
Victor Eijkhout
CC BY-SA 4.0
2021-12-30T09:06:25.647Z
Of interest: [Handbook of Graph Drawing and Visualization](https://cs.brown.edu/people/rtamassi/gdhandbook/) - Algorithms for laying out an drawing edge-vertex graphs.
Guy Coder
CC BY-SA 4.0
2022-02-15T11:48:32.700Z
If you like this answer you should bookmark it. That way when I update this you will know. :)
Guy Coder
CC BY-SA 4.0
2021-12-06T07:28:18.150Z
2022-02-15T11:50:43.367Z
2022-02-15T11:50:43.367Z
Guy Coder
<p>I am planning to begin teaching Computer Science topics in video/slide form. I would like to be able to easily create visualizations of trees and graphs (and other data structures would be great as well). I have seen some other educators have great visualizations that allow them to beautifully visualize these concepts and even step through and highlight nodes or edges to make the content more engaging. However, I have tried googling and I can't seem to find software that does this well. I am open to either free or paid options, does anyone know any good software or tooling for this?</p>

<programming><graph-theory>
Graph / Tree Visualization Software
# Graph / Tree Visualization Software

(Asked by: username_0 on 2021-12-05)

I am planning to begin teaching Computer Science topics in video/slide form. I would like to be able to easily create visualizations of trees and graphs (and other data structures would be great as well). I have seen some other educators have great visualizations that allow them to beautifully visualize these concepts and even step through and highlight nodes or edges to make the content more engaging. However, I have tried googling and I can't seem to find software that does this well. I am open to either free or paid options, does anyone know any good software or tooling for this?

**Tags:** programming, graph-theory


---

## 1 answers

### Answer by username_1 on 2021-12-06. Score: 8 | Accepted answer

> easily create visualizations of trees and graphs.

* [Visio](https://en.wikipedia.org/wiki/Microsoft_Visio)  
  The easiest way is to use a tool like Visio. It is [WYSIWYG](https://en.wikipedia.org/wiki/WYSIWYG).

  Also see [13 Free Alternatives to Microsoft Visio](https://www.maketecheasier.com/5-best-free-alternatives-to-microsoft-visio/)

---

* [GraphViz](https://graphviz.org/)  
  Very popular. Works with different grammars for defining the graphs with [DOT](https://graphviz.org/doc/info/lang.html) being the most commonly used. Somewhat easy after you get past your fist few.
* [PlantUML](https://plantuml.com/)  
  PlantUML is used to draw UML diagrams, using a simple and human readable text description. GraphViz must be installed to use. Also has an [online server](http://www.plantuml.com/plantuml/uml/SyfFKj2rKt3CoKnELR1Io4ZDoSa70000).
* [Cytoscape.js](https://js.cytoscape.org/)  
  Graph theory (network) library for visualisation and analysis. Works with JavaScript, HTML and JSON to create interactive HTML pages. Not easy to learn and use but once mastered can make dynamic graphs and even animate them, e.g. walking a tree.
* [D3](https://d3js.org/)  
  D3.js is a JavaScript library for manipulating documents based on data.
* [GoJS](https://gojs.net/latest/index.html?v220)  
  A Web Framework for Rapidly Building Interactive Diagrams.
* [LabVIEW](https://www.ni.com/en-us/shop/labview/select-edition/labview-community-edition.html) Community Edition  
  LabVIEW offers a graphical programming approach to help you visualize every aspect of your application, including hardware configuration, measurement data, and debugging.
* [Restructured Text](https://docutils.sourceforge.io/rst.html)  
  Markup Syntax and Parser Component of Docutils. The web sites can even include interactive content. [Example](https://opendsa-server.cs.vt.edu/OpenDSA/Books/PL/html/index.html)
* [LaTeX](https://en.wikipedia.org/wiki/LaTeX)  
  LaTeX is a software system for document preparation.
  Diagrams in research papers are typically made using LaTeX. LaTeX is not easy. LaTeX is a Turning complete programming language with packages, hierarchies, add-ins, etc. For writing technical math notation this is a popular option.
* [MathJax](https://www.mathjax.org/)  
  Beautiful and accessible math in all browsers
* [MarkDown](https://www.markdownguide.org/)  
  Markdown makes writing on the web fast and easy.
* Web pages  
  [HTML](https://www.w3schools.com/html/default.asp) - The language for building web pages.  
  [CSS](https://www.w3schools.com/css/default.asp) - The language we use to style an HTML document.  
  [Sass](https://www.w3schools.com/sass/) - Reduces repetition of CSS and therefore saves time.  
  [JavaScript](https://www.w3schools.com/js/default.asp) - The programming language of the Web.
* [Doxygen](https://www.doxygen.nl/index.html)  
  Doxygen is the de facto standard tool for generating documentation from annotated C++ sources, but it also supports other popular programming languages such as C, Objective-C, C#, PHP, Java, Python, IDL (Corba, Microsoft, and UNO/OpenOffice flavors), Fortran, VHDL and to some extent D.

> **Comments:**
> **username_0**: Thanks for the suggestions, much appreciated!  
> **username_2**: Definitely Dot. Ultra simple input format, which I often generate from another program, rather than by hand.  
> **username_1**: Of interest: [Handbook of Graph Drawing and Visualization](https://cs.brown.edu/people/rtamassi/gdhandbook/) - Algorithms for laying out an drawing edge-vertex graphs.  
> **username_1**: If you like this answer you should bookmark it. That way when I update this you will know. :)  

---

