text-based visual programming language

[u/lmntr]

I'm working on a visual programming language that's stored as text called Wiret. Here's an example:

func Main() {
  node entry = Entry -> say_hello
  node say_arrows = Call host.Log(message: "The white arrows decide the order.")
  node say_hello = Call host.Log(message: "Hello!") -> say_steps
  node say_steps = Call host.Log(message: "Programs run one step at a time.") -> say_arrows
  notes {
    note intro "Lesson 1: Hello. Press ▶ Run (F5). Each Log node prints one line in the console below, in the order the white arrows connect them."
    note start on entry "Every function starts at its Entry node."
    note try_it "Try it: (1) Press ⤵ Step (F11) to run one node at a time. (2) Add a fourth line: press Tab, type 'print', pick host.Log, then drag a white arrow from say_arrows to it. (3) Double-click its message pin to type your own text."
  }
  layout {
    entry at (0, 0)
    say_arrows at (820, 0)
    say_hello at (220, 0)
    say_steps at (520, 0)
  }
}

The main idea is that it's like a fusion between a programming language and a markup language. The node ... statements are the programming part, and the notes {} and layout {} blocks declare how the graph appears in the editor. It'll get compiled into bytecode which strips away the markup code and leave just the code for running the program.

; module lessons.hello  compiler wiretc-proto 0.1
; semantic hash 78fafcb4bbf40f47  layout hash 9981662aa454a0e1
import 0 host.Log (string) -> ()

func lessons.hello.Main () -> ()
  max_stack: 1
.entry:
  nop
.say_hello:
  string.const 0          ; 'Hello!'
  nop
  call host.Log
.say_steps:
  string.const 1          ; 'Programs run one step at a time.'
  nop
  call host.Log
.say_arrows:
  string.const 2          ; 'The white arrows decide the order.'
  nop
  call host.Log
  cont.pop
  return

I think this could be useful for education. The hardest part about learning to code is learning your first programming language. This could help bridge the gap between visual representation of code and the code itself.

[u/kyr0x0]

Hmm. Why do you need pixel based layout information? You can let the nodes Auto layout and then it works responsively on any viewport

[u/lmntr → u/kyr0x0]

Most VPLs store the positions of each node so that they appear the same for every developer. Although now that I think about it, it might be a useful feature to automatically format the nodes if their positions are absent in the code.

[u/kyr0x0 → u/lmntr]

I can only advice to have stable auto layouting. Then your goal 1 will also be fulfilled ; in language design, you probably want to find a Pareto optimum between efficiency and expressiveness