JavaScript Code to Flowchart

drobnikj/js-code-2-flowchart

No credit card required

Use this to convert JavaScript code to a flowchart. The actor uses https://www.npmjs.com/package/js2flowchart npm package to convert the code to a flowchart. The output is an SVG file.

Dockerfile

# First, specify the base Docker image. You can read more about
# the available images at https://sdk.apify.com/docs/guides/docker-images
# You can also use any other image from Docker Hub.
FROM apify/actor-node:16

# Second, copy just package.json and package-lock.json since those are the only
# files that affect "npm install" in the next step, to speed up the build.
COPY package*.json ./

# Install NPM packages, skip optional and development dependencies to
# keep the image small. Avoid logging too much and print the dependency
# tree for debugging
RUN npm --quiet set progress=false \
 && npm install --only=prod --no-optional \
 && echo "Installed NPM packages:" \
 && (npm list || true) \
 && echo "Node.js version:" \
 && node --version \
 && echo "NPM version:" \
 && npm --version

# Next, copy the remaining files and directories with the source code.
# Since we do this after NPM install, quick build will be really fast
# for most source file changes.
COPY . ./

# Optionally, specify how to launch the source code of your actor.
# By default, Apify's base Docker images define the CMD instruction
# that runs the Node.js source code using the command specified
# in the "scripts.start" section of the package.json file.
# In short, the instruction looks something like this:
#
# CMD npm start

INPUT_SCHEMA.json

{
    "title": "Google Maps Scraper",
    "description": "Provide either a list of search keywords or search/place URLs. It is better to set location in the Geolocation settings below rather than add into the search terms. You will get more results and they will be accurate.",
    "type": "object",
    "schemaVersion": 1,
    "properties": {
        "code":{
            "title": "JavaScript Code",
            "type": "string",
            "editor": "javascript",
            "description": "JS code",
            "prefill": "// The function accepts a single argument: the \"context\" object.\n// For a complete list of its properties and functions,\n// see https://apify.com/apify/web-scraper#page-function \nasync function pageFunction(context) {\n    // This statement works as a breakpoint when you're trying to debug your code. Works only with Run mode: DEVELOPMENT!\n    // debugger; \n\n    // jQuery is handy for finding DOM elements and extracting data from them.\n    // To use it, make sure to enable the \"Inject jQuery\" option.\n    const $ = context.jQuery;\n    const pageTitle = $('title').first().text();\n\n    // Print some information to actor log\n    context.log.info(`URL: ${context.request.url}, TITLE: ${pageTitle}`);\n\n    // Manually add a new page to the queue for scraping.\n    context.enqueueRequest({ url: 'http://www.example.com' });\n\n    // Return an object with the data extracted from the page.\n    // It will be stored to the resulting dataset.\n    return {\n        url: context.request.url,\n        pageTitle\n    };\n}"
        }
    }
}

main.js

const Apify = require('apify');
const js2flowchart = require('js2flowchart');

Apify.main(async () => {
    // Get input of your act
    const { code } = await Apify.getValue('INPUT');

    
    console.log('Generating SVG image...')
    const svg = js2flowchart.convertCodeToSvg(code);

    console.log('Saving svg image...');
    await Apify.setValue('OUTPUT', svg, { contentType: 'image/svg+xml' });
    console.log(`https://api.apify.com/v2/key-value-stores/${Apify.getEnv().defaultKeyValueStoreId}/records/OUTPUT`);
    console.log('Done');
});

package.json

{
    "name": "my-actor",
    "version": "0.0.1",
    "dependencies": {
        "apify": "^2.2.0",
        "js2flowchart": "1.3.3"
    },
    "scripts": {
        "start": "node main.js"
    },
    "author": "Me!"
}