Snapdown

Draw snapshot diagrams with plain text

Source

MIT EECS and the Usable Programming Group

Embedding

  1. Include the snapdown.js library
  2. Write in application/snapdown script tags
  3. Call Snapdown.renderAll()
<html>
<head>
<script src="snapdown.js"></script>
</head>
<body>
<script type="application/snapdown">
hello -x> (World)
hello -> (Snapdown)
</script>
<script>Snapdown.renderAll();</script>
</body>
</html>

Projects

Daniel Whatley, Max Goldman, and Robert C. Miller. Snapdown: A Text-Based Snapshot Diagram Language for Programming Education. VL/HCC 2021