Sysgram.js NPM

About

Sysgram.js draw the system architecture using JavaScript.

It is a Javascript based diagramming tool that renders from javascript syntax to create and modify diagrams dynamically.

Supported Providers:

Installation

CDN

https://unpkg.com/sysgram.js@<version>/dist/sysgram.bundle.min.js
https://cdn.jsdelivr.net/gh/succeun/sysgram.js@<version>/dist/sysgram.bundle.min.js

To select a version:

Replace <version> with the desired version number.

Latest Version:

Installing

It can insert a script tag with an absolute address and a sysgram call into the HTML like so:

<!-- sysgram (latest) -->
<script src="https://unpkg.com/sysgram.js/dist/sysgram.bundle.min.js"></script>
<script>
function drawSample() {
    var EC2 = diagrams.aws.compute.EC2

	Diagram("Simple Diagram", function() {
		EC2("web")
	})
}
sysgram.initialize({startOnLoad:true});
</script>

<div class="sysgram" data-sysgram-function="drawSample"></div>

Doing so will command the sysgram parser to look for the <div> tags with class="sysgram".

From these tags sysgram will try to read the diagram definitons and render them into <svg>.

Or you can displayed a result with <div> tags from javascript function.

<script src="../dist/sysgram.bundle.js"></script>
<script>
    function drawSample() {
        var EC2 = diagrams.aws.compute.EC2

        Diagram("Simple Diagram", function() {
            EC2("web")
        })
    }
    window.addEventListener('DOMContentLoaded', function(event) {
        sysgram.initWithCode(drawSample, '.sample');
    });
</script>

<div class="sample"></div>

When developing locally, you must have a local web server due to hpcc-js/wasm. In this case, you can load the server as follows.

npm run dev

After executing this command, open http://localhost:4000/docs/examples/basic.html in the browser.

basic.html

Below is the most basic and simple example html.

<!DOCTYPE html>
<html>
<head>
	<!-- sysgram (latest) -->
	<script src="https://unpkg.com/sysgram.js/dist/sysgram.bundle.min.js"></script>
	<script>sysgram.initialize({startOnLoad:true});</script>
<head>
<body>
	<div class="sysgram">
var EC2 = diagrams.aws.compute.EC2

Diagram("Simple Diagram", function() {
	EC2("web")
})
	</div>
</body>
</html>

Example Diagram

Simple Diagram

var EC2 = diagrams.aws.compute.EC2
var RDS = diagrams.aws.database.RDS
var ELB = diagrams.aws.network.ELB

Diagram("Web Service", function() {
    ELB("lb")._$(EC2("web"))._$(RDS("userdb"))
})

Web Service

Complex Diagram

var { BigQuery, Dataflow, PubSub } = diagrams.gcp.analytics
var {AppEngine, Functions } = diagrams.gcp.compute
var BigTable = diagrams.gcp.database.BigTable
var IotCore = diagrams.gcp.iot.IotCore
var GCS = diagrams.gcp.storage.GCS

Diagram("Message Collecting", () => {
    ctx.pubsub = PubSub("pubsub")
    
    Cluster("Source of Data", () => {
        ArrayNode([IotCore("core1"),
                   IotCore("core2"),
                   IotCore("core3")])._$(ctx.pubsub)
    })

    Cluster("Targets", () => {
        Cluster("Data Flow", () => {
            ctx.flow = Dataflow("data flow")
        })
        
        Cluster("Data Lake", () => {
            ctx.flow._$([BigQuery("bq"),
                         GCS("storage")])
        })

        Cluster("Event Driven", () => {
            Cluster("Processing", () => {
                ctx.flow._$(AppEngine("engine"))._$(BigTable("bigtable"))
            })

            Cluster("Serverless", () => {
                ctx.flow._$(Functions("func"))._$(AppEngine("appengine"))
            })
        })
    })
    ctx.pubsub._$(ctx.flow)
})

Message Collecting