JSPM

@datayoga-io/node-g6

1.0.5
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • 0
  • Score
    100M100P100Q30804F
  • License MIT

server side rendering of g6 based graph flowcharts

Package Exports

  • @datayoga-io/node-g6
  • @datayoga-io/node-g6/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@datayoga-io/node-g6) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

node-g6

This package allows to render flow charts and DAGs using server side rendering using the awesome Antvis G6 package

Installing

npm install @datayoga-io/node-g6

Example

Given this input json:

{
  "nodes": [
    {
      "id": "pipeline:a"
    },
    {
      "id": "datastore:hello"
    },
    {
      "id": "datastore:world"
    },
    {
      "id": "file:source_file"
    },
    {
      "id": "datastore:e"
    }
  ],
  "edges": [
    {
      "source": "pipeline:a",
      "target": "datastore:hello"
    },
    {
      "source": "pipeline:a",
      "target": "datastore:world"
    },
    {
      "source": "file:source_file",
      "target": "pipeline:a"
    },
    {
      "source": "pipeline:a",
      "target": "datastore:e"
    }
  ]
}

Generates the following image: DataYoga pipeline graph

Using from command line

npx @datayoga-io/node-g6

or if you installed the module globally:

node-g6

Options

node-g6 <data>

render data

Positionals:
  data  data file in json format                                        [string]

Options:
  --version  Show version number                                       [boolean]
  --options  options file in json format
  --out      output file                    [required] [default: "pipeline.png"]
  --help     Show help                                                 [boolean]

Using as a module

import * as graph from "@datayoga-io/node-g6";
import * as fs from "fs";
const data = {
  "nodes": [
    {
      "id": "pipeline:a"
    },
    {
      "id": "store:hello"
    },
    {
      "id": "store:world"
    },
    {
      "id": "store:d"
    },
    {
      "id": "store:e"
    }
  ],
  "edges": [
    {
      "source": "pipeline:a",
      "target": "store:hello"
    },
    {
      "source": "pipeline:a",
      "target": "store:world"
    },
    {
      "source": "pipeline:a",
      "target": "store:d"
    },
    {
      "source": "pipeline:a",
      "target": "store:e"
    }
  ]
}

// render to binary
const dagBinary = await graph.render(data, {});
// write to file
fs.writeFileSync("out.png",dagBinary,"binary");