Muitas dessas ferramentas fazer o trabalho diretamente com a árvore abstrata de sintaxe (ou melhor, a visualização direta de um-para-um dele). Isso inclui Blockly, que você já viu, e os outros idiomas e editores baseados em blocos como ele ( zero , lápis Código / gota , pressão! , GP , Graça Azulejo , e assim por diante).
Esses sistemas não mostram uma representação tradicional de gráfico de vértice e aresta, por razões explicadas em outros lugares (espaço e também dificuldade de interação), mas estão representando diretamente uma árvore. Um nó, ou bloco, é filho de outro se estiver diretamente, fisicamente dentro do pai.
Eu construí um desses sistemas ( Tiled Grace , papel , papel ). Posso garantir, está trabalhando muito diretamente com o AST: o que você vê na tela é uma representação exata da árvore de sintaxe, como elementos DOM aninhados (uma árvore!).
Este é o AST de algum código. A raiz é um nó de chamada de método "para ... do". Esse nó tem alguns filhos, começando com "_ .. _", que possui dois filhos, um nó "1" e um nó "10". O que aparece na tela é exatamente o que o back-end do compilador cospe no meio do processo - é fundamentalmente como o sistema funciona.
Se desejar, você pode pensar nele como um layout de árvore padrão, com as bordas apontando para fora da tela em sua direção (e ocluídas pelo bloco à sua frente), mas o aninhamento é uma maneira tão válida de mostrar uma árvore quanto um vértice diagrama.
Ele também "fará a viagem de ida e volta da origem para o nó-gráfico e, em seguida, voltará novamente à origem quando necessário". De fato, você pode ver isso acontecer quando você clica em "Visualização de código" na parte inferior. Se você modificar o texto, ele será analisado novamente e a árvore resultante renderizada para você editar novamente. Se você modificar os blocos, o mesmo acontecerá com a fonte.
O Pencil Code faz essencialmente a mesma coisa com, neste ponto, uma interface melhor . Os blocos que ele usa são uma visualização gráfica do CoffeeScript AST. O mesmo acontece com os outros sistemas baseados em blocos ou blocos, embora alguns deles não tornem o aspecto de aninhamento tão claro na representação visual, e muitos não tenham uma linguagem textual real por trás deles, então o " árvore de sintaxe "pode ser um pouco ilusória, mas o princípio está lá.
O que você está perdendo, então, é que esses sistemas realmente estão trabalhando diretamente com a árvore de sintaxe abstrata. O que você vê e manipula é uma renderização de uma árvore com economia de espaço, em muitos casos literalmente o AST que um compilador ou analisador produz.