code-to-graph
Transforms code (JS) into graphs (graphviz, mermaid flowchart, ...)
Interactive Demo
https://crubier.github.io/code-to-graph/
CLI Usage
Call the cli with a js file name, it prints out the Mermaid.js graph definition
yarn global add code-to-graphcode-to-graph example.js
To see the result visualy, paste it in
https://mermaidjs.github.io/mermaid-live-editor
Or you can use it on gitlab using the ```mermaid language in comments, descriptions or markdown files.
Explanation
Turns this:
{ const a = ; if x === 0 let a = null; throw "Nooes"; else const c = 8; return 4; };
Into this:
graph TD statementfroml1c6tol1c19("const a = f(x);") statementfroml1c19tol1c90{"x === 0"} statementfroml1c29tol1c40("let a = null;") statementfroml1c41tol1c65>"throw new Error('Nooes');"] style statementfroml1c41tol1c65 fill:#FF9999 statementfroml1c71tol1c81("const c = 8;") statementfroml1c81tol1c89>"return 4;"] style statementfroml1c81tol1c89 fill:#99FF99 statementfroml1c19tol1c90 -- true --> statementfroml1c29tol1c40 statementfroml1c19tol1c90 -- false --> statementfroml1c71tol1c81 statementfroml1c29tol1c40 --> statementfroml1c41tol1c65 statementfroml1c71tol1c81 --> statementfroml1c81tol1c89 statementfroml1c6tol1c19 --> statementfroml1c19tol1c90
Whichs renders into this: