Visualize to_son (sea of nodes) using mermaid.js already added

docs/index.html

@@ -20,6 +20,7 @@ <h1>Syntax Tree</h1>
             <option value="prettyPrint">AST</option>
             <option value="disasm">ISEQ</option>
             <option value="mermaid">GRAPH</option>
+            <option value="seaOfNodes">SEA OF NODES</option>
           </select>
         </div>
       </nav>

src/createRuby.js

@@ -25,12 +25,6 @@ export default async function createRuby() {
 
       return vm.eval(rubySource).toString();
     },
-    mermaid(source) {
-      const jsonSource = JSON.stringify(JSON.stringify(source));
-      const rubySource = `SyntaxTree.parse(JSON.parse(${jsonSource})).to_mermaid`;
-
-      return vm.eval(rubySource).toString();
-    },
     // A function that calls through to the SyntaxTree.format function to get
     // the pretty-printed version of the source.
     format(source) {
@@ -39,12 +33,29 @@ export default async function createRuby() {
 
       return vm.eval(rubySource).toString();
     },
+    mermaid(source) {
+      const jsonSource = JSON.stringify(JSON.stringify(source));
+      const rubySource = `SyntaxTree.parse(JSON.parse(${jsonSource})).to_mermaid`;
+
+      return vm.eval(rubySource).toString();
+    },
     // A function that calls through to PP to get the pretty-printed version of
     // the syntax tree.
     prettyPrint(source) {
       const jsonSource = JSON.stringify(JSON.stringify(source));
       const rubySource = `PP.pp(SyntaxTree.parse(JSON.parse(${jsonSource})), +"", 80)`;
 
+      return vm.eval(rubySource).toString();
+    },
+    // A function to print the current sea of nodes
+    seaOfNodes(source) {
+      const jsonSource = JSON.stringify(JSON.stringify(source));
+      const rubySource = `
+        iseq = RubyVM::InstructionSequence.compile(JSON.parse(${jsonSource}))
+        iseq = SyntaxTree::YARV::InstructionSequence.from(iseq.to_a)
+        iseq.to_son.to_mermaid
+      `;
+
       return vm.eval(rubySource).toString();
     }
   };

src/index.js

@@ -50,7 +50,7 @@ Promise.all([
     try {
       let source = displayFunction(editor.getValue());
 
-      if (event.detail.kind === "mermaid") {
+      if (event.detail.kind === "mermaid" || event.detail.kind === "seaOfNodes") {
         output.setAttribute("style", "display: none;");
         graph.setAttribute("style", "text-align: left;")
         graph.innerHTML = "Loading..."