Why I Draw
People ask me why I draw diagrams by hand and then complain about not being able to diff and merge SVGs in version control. Well, I drew this diagram for the SQL tutorial I’ve been working on using draw.io:
Here it is in graphviz:
digraph select { "select" -> "chooses"; "chooses" -> "rows"; "chooses" -> "columns"; "columns" -> "specified by"; "specified by" -> "names"; "specified by" -> "calculations"; "specified by" -> "* (for all)"; "columns" -> "from"; "rows" -> "from"; "from" -> "table"; "table" -> "identified by"; "identified by" -> "name"; "rows" -> "can be paged with"; "rows" -> "can be filtered by"; "can be paged with" -> "limit"; "can be paged with" -> "offset"; "can be filtered by" -> "condition"; "condition" -> "evaluated for each"; "evaluated for each" -> "rows"; "condition" -> "must be"; "must be" -> "Boolean"; "select" [shape=box]; "rows" [shape=box]; "columns" [shape=box]; "names" [shape=box]; "calculations" [shape=box]; "* (for all)" [shape=box]; "table" [shape=box]; "name" [shape=box]; "limit" [shape=box]; "offset" [shape=box]; "condition" [shape=box]; "Boolean" [shape=box]; }
and in Mermaid:
--- title: select --- flowchart LR A[select] B(chooses) C[rows] D[columns] E(specified by) F[names] G[calculations] H[for all] I(from) J[table] K(identified by) L[name] M(can be paged with) N(can be filtered by) O[limit] P[offset] Q[condition] R(evaluated for each) S(must be) T[Boolean] A --> B B --> C B --> D D --> E E --> F E --> G E --> H D --> I C --> I I --> J J --> K K --> L C --> M C --> N M --> O M --> P N --> Q Q --> R R --> C Q --> S S --> T
Never mind the layout of the graphviz and Mermaid diagrams or how much manual tweaking would be required to get them to be more compact; I simply don’t believe that diffing and merging the text used to generate them would be any easier than diffing and merging SVG. Whoever adds a real diagram editor to their computational notebook and provides a semantic (visual) way to diff changes to diagrams is going to clean houseā¦