3 ms·

Ask HN: What are some great examples of bi-directional diagram/code projects?

5 points by thesurlydev 3y ago

I've always been interested in this space and there seem to be few examples. Specifically, I'm looking for an example that shows how to use something like codemirror and a drag and drop interface. A change in one would be reflected in the other.

sargstuff 3y ago
constructive bidirectional programming[a]: treesitter[0] used with emacs[1] neovim[2] python[2.2] programming language boomerang, "A bidirectional programming language for ad-hoc, textual data"[b]; more traditional use in neural networks[c] xsugar for dual syntax xml language[d] piet-q exotic language interpretation (vs. program/application)[e] and/or q-code usage/application[f][g] can have fun with coding in c in way that 2nd program can be extrapolated from gcc ast syntax tree[3] scratch[4] bit simpler, but gis-piet[5] bit bigger. Hitchhicker's guide to the galaxy keeps it pretty small/simple with '42'; which means really have to fully expand/uncompress/unwind everything to get anything done. --- [a] https://www.youtube.com/watch?v=jy-dpzi8neQ https://www.youtube.com/watch?v=jy-dpzi8neQ [0] https://tree-sitter.github.io/tree-sitter/ https://tree-sitter.github.io/tree-sitter/ [1] https://www.masteringemacs.org/article/how-to-get-started-tree-sitter https://www.masteringemacs.org/article/how-to-get-started-tr... [2] https://github.com/nvim-treesitter/nvim-treesitter https://github.com/nvim-treesitter/nvim-treesitter [2.2] : https://github.com/tree-sitter/py-tree-sitter https://github.com/tree-sitter/py-tree-sitter / https://github.com/tree-sitter/tree-sitter-python https://github.com/tree-sitter/tree-sitter-python --- [b] https://www.seas.upenn.edu/~harmony/ https://www.seas.upenn.edu/~harmony/ [c] : https://github.com/bigaidream-projects/bidirectional https://github.com/bigaidream-projects/bidirectional [d] : https://www.brics.dk/xsugar/ https://www.brics.dk/xsugar/ [e] : https://esolangs.org/wiki/Piet-Q https://esolangs.org/wiki/Piet-Q [f] : https://stable-diffusion-art.com/qr-code/ https://stable-diffusion-art.com/qr-code/ [g] : https://artvizual.com/featured/interactive-qr-code-art-experience-serene-sunset-beach-artvizual-premium.html https://artvizual.com/featured/interactive-qr-code-art-exper... / https://www.hongkiat.com/blog/qr-code-artworks/ https://www.hongkiat.com/blog/qr-code-artworks/ --- [3] : http://icps.u-strasbg.fr/~pop/gcc-ast.html http://icps.u-strasbg.fr/~pop/gcc-ast.html / https://stackoverflow.com/questions/54162940/understanding-fdump-tree-output-gcc-with-graphviz https://stackoverflow.com/questions/54162940/understanding-f... [4] : https://scratch.mit.edu/ https://scratch.mit.edu/ [5] : https://dl.acm.org/doi/abs/10.1145/1317331.1317345 https://dl.acm.org/doi/abs/10.1145/1317331.1317345
- thesurlydev 3y ago
  Thanks for all the examples!
alhirzel 3y ago
I am interested in tools of this type as well. One I know of is OPM: https://en.wikipedia.org/wiki/Object_Process_Methodology https://en.wikipedia.org/wiki/Object_Process_Methodology
apexedison 3y ago
I've built a number of bidirectional editors, often with CodeMirror. You could check out my bidirectional circuit design tool: https://github.com/leomcelroy/svg-pcb https://github.com/leomcelroy/svg-pcb Paper on it here: https://dl.acm.org/doi/abs/10.1145/3559400.3562004 https://dl.acm.org/doi/abs/10.1145/3559400.3562004 Feel free to reach out if you have questions.
- thesurlydev 3y ago
  This is one of the best examples I've seen yet and you appear to have minimal dependencies. Kudos and thanks for sharing.
  - sargstuff 3y ago
    old school solid state with modern 3d printed techniques : rotational / motion dependencies only! https://hackaday.com/2019/03/02/3d-printing-logic-gates/ https://hackaday.com/2019/03/02/3d-printing-logic-gates/ https://hackaday.com/2017/01/03/make-logic-gates-out-of-almost-anything/ https://hackaday.com/2017/01/03/make-logic-gates-out-of-almo... https://www.nature.com/articles/s41467-019-08678-0 https://www.nature.com/articles/s41467-019-08678-0 https://www.youtube.com/watch?v=unzNxzKcAGY https://www.youtube.com/watch?v=unzNxzKcAGY
jamessb 3y ago
See Ravi Chugh's Sketch-n-Sketch work: http://ravichugh.github.io/sketch-n-sketch/ http://ravichugh.github.io/sketch-n-sketch/ You might find it useful to look at the papers that cite the paper: https://scholar.google.com/scholar?cites=2233351225886461130&as_sdt=5,39&sciodt=7,39&hl=en https://scholar.google.com/scholar?cites=2233351225886461130...
thesurlydev 3y ago
I should have mentioned it in my OP but another great example I've seen is KittyCAD[1] [1] https://github.com/KittyCAD/modeling-app/blob/main/README.md https://github.com/KittyCAD/modeling-app/blob/main/README.md
sargstuff 3y ago
dbdesigner : https://dbdiagram.io/home https://dbdiagram.io/home puredata : Pure Data is an open source visual programming environment ( https://puredata.info/ https://puredata.info/ / https://sourceforge.net/projects/pure-data/ https://sourceforge.net/projects/pure-data/ ) projects build using puredata : https://puredata.info/exhibition https://puredata.info/exhibition ofelia : graphics via openframeworks : https://github.com/cuinjune/Ofelia https://github.com/cuinjune/Ofelia list of other examples : https://en.wikipedia.org/wiki/Visual_programming_language https://en.wikipedia.org/wiki/Visual_programming_language
sargstuff 3y ago
If start out in the middle with BNF grammar, can get drag/drop diagram/grammar highlighter for use in codemirror[0] or mess around with BNF linting [1][2][3][4]. [0] https://bnfc.digitalgrammars.com/ https://bnfc.digitalgrammars.com/ [1] : https://dl.acm.org/doi/10.1145/3278186.3278193 https://dl.acm.org/doi/10.1145/3278186.3278193 [2] : https://www.researchgate.net/figure/Overview-of-Grammarinators-approach-to-generate-test-cases_fig1_328510752 https://www.researchgate.net/figure/Overview-of-Grammarinato... [3] bullwinkle : https://github.com/sylvainhalle/Bullwinkle https://github.com/sylvainhalle/Bullwinkle [4] : https://news.ycombinator.com/item?id=30822544 https://news.ycombinator.com/item?id=30822544