angular - Hur man visar den visuella representationen av parsningsträdet som genereras av Antlr i vscode

vi använder parser, lexer etc som genereras av vårt backendteam för typescript, vi använder dem i våra angular-applikationer för att generera en pars. vi kan generera parsträdet och skriva ut det trädet till konsolen men vi har problem med att skriva ut dess visuella representation av parsträdet. nedan är exempel på kod som används för att generera parsträdet

let code: string = `
        begin rule "My rule"
        doc := input.document_id
        ref := input.refrence
        countryuppper := upper(doc.country)
        country := doc.country
        end rule
    `;
this.inputStream = new ANTLRInputStream(code);
this.lexer = new Lexer(this.inputStream);
this.tokenStream = new CommonTokenStream(this.lexer);
this.parser = new Parser(this.tokenStream);
this.tree = this.parser.program();
console.log(this.tree)

Med visuell representation menar jag som i bilden nedan

Kan någon vänligen berätta för oss hur vi kan skriva ut den visuella representationen av parsningsträdet i VSCode.