Transforms JS code 🙈into mermaid flowchart 🐵
Branch: master
Clone or download
Vincent Lecrubier
Vincent Lecrubier Add typescript stuff
Latest commit 4a99948 Jan 15, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
__snapshots__
docs-source Add typescript stuff Jan 15, 2019
docs
.gitignore initial Jan 12, 2019
README.md Support new features Jan 15, 2019
cli.js Updates Jan 13, 2019
example.1.js Add typescript stuff Jan 15, 2019
example.js
index.js Support new features Jan 15, 2019
index.test.js Yay Jan 13, 2019
mermaid-diagram-example.svg Create mermaid-diagram-example.svg Jan 13, 2019
package-lock.json cli Jan 13, 2019
package.json Add typescript stuff Jan 15, 2019
parser.test.js Support yield and await Jan 13, 2019
transform.js Add typescript stuff Jan 15, 2019
yarn.lock Docs Jan 15, 2019

README.md

code-to-graph

Transforms code (JS) into graphs (graphviz, mermaid flowchart, ...)

Interactive Demo

https://crubier.github.io/code-to-graph/

A bigger example

CLI Usage

Call the cli with a js file name, it prints out the Mermaid.js graph definition

yarn global add code-to-graph
code-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:

x => {
  const a = f(x);
  if (x === 0) {
    let a = null;
    throw new Error("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:

Example mermaid diagram