Sysdiagram NPM

About

Sysdiagram draw the system architecture using JavaScript.

It is a Javascript based diagramming tool that renders text like Markdown definitions to create and modify diagrams dynamically.

Sysdiagram currently supports six major providers: AWS, Azure, GCP, Kubernetes, Alibaba Cloud and Oracle Cloud. It now also supports On-Premise nodes as well as Programming Languages, Frameworks and Programs.

Installation

CDN

https://unpkg.com/sysdiagram@<version>/dist/sysdiagram.min.js

To select a version:

Replace <version> with the desired version number.

Latest Version: https://unpkg.com/sysdiagram/dist/sysdiagram.min.js

Installing

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

<!-- canvg for converting image (Optional) -->
<script src="https://unpkg.com/canvg@3.0.7/lib/umd.js"></script> 

<!-- d3 & d3-graphviz (Mandatory) -->
<script src="https://unpkg.com/d3@6.7.0/dist/d3.min.js"></script>
<script src="https://unpkg.com/@hpcc-js/wasm@1.5.2/dist/index.min.js"></script>
<script src="https://unpkg.com/d3-graphviz@4.0.0/build/d3-graphviz.js"></script>

<!-- sysdiagram (latest) -->
<script src="https://unpkg.com/sysdiagram/dist/sysdiagram.min.js"></script>
  
<script>sysdiagram.initialize({startOnLoad:true});</script>

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

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

<div class="sysdiagram">
	var EC2 = diagrams.aws.compute.EC2

	Diagram("Simple Diagram", function() {
		EC2("web")
	})
</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/examples/ in the browser.

basic.html

Below is the most basic and simple example html.

<!DOCTYPE html>
<html>
<head>
	<!-- canvg for converting image (Optional) -->
	<script src="https://unpkg.com/canvg@3.0.7/lib/umd.js"></script> 

	<!-- d3 & d3-graphviz (Mandatory) -->
	<script src="https://unpkg.com/d3@6.7.0/dist/d3.min.js"></script>
	<script src="https://unpkg.com/@hpcc-js/wasm@1.5.2/dist/index.min.js"></script>
	<script src="https://unpkg.com/d3-graphviz@4.0.0/build/d3-graphviz.js"></script>

	<!-- sysdiagram (latest) -->
	<script src="https://unpkg.com/sysdiagram/dist/sysdiagram.min.js"></script>
	  
	<script>sysdiagram.initialize({startOnLoad:true});</script>
<head>
<body>
	<div class="sysdiagram">
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