diagrams-js

website·Indexed 32 days ago

https://diagrams-js.hatemhosny.dev

A JavaScript/TypeScript port of the Python diagrams library for programmatic diagram generation. It features a comprehensive set of provider nodes for Azure, Alibaba Cloud, GCP, IBM, OCI, DigitalOcean, and Firebase, as well as support for the C4 model, JSON serialization, and a plugin system including a Docker Compose plugin.

Tokens: 47.2K
Snippets: 340
Records: 354
Agent score: 59%

What's inside diagrams-js

Create a Grouped Workers architecture diagram on AWS

This example demonstrates a basic AWS architecture with a Load Balancer distributing traffic to multiple EC2 worker instances, which then connect to an RDS database. It shows how to use the direction option in the Diagram constructor to set the layout flow (e.g., 'TB' for Top-to-Bottom).

import { Diagram } from "diagrams-js";
import { EC2 } from "diagrams-js/aws/compute";
import { RDS } from "diagrams-js/aws/database";
import { ELB } from "diagrams-js/aws/network";

const diagram = Diagram("Grouped Workers", {
  direction: "TB",
});

const lb = diagram.add(ELB("lb"));
const workers = [
  diagram.add(EC2("worker1")),
  diagram.add(EC2("worker2")),
  diagram.add(EC2("worker3")),
  diagram.add(EC2("worker4")),
  diagram.add(EC2("worker5")),
];
const events = diagram.add(RDS("events"));

lb.to(workers);
workers.forEach((w) => w.to(events));

const svg = await diagram.render();

Migrate from Python diagrams to diagrams-js

When converting from the Python diagrams library to diagrams-js, note the following fundamental changes in syntax and behavior:

Feature	Python `diagrams`	`diagrams-js` (TypeScript)
Structure	`with Diagram():` (Context Manager)	`const diagram = Diagram()`
Operators	`>>`, `<<`, `-`	`.to()`, `.from()`, `.with()`
Registration	Auto-registers nodes	Requires `diagram.add()`
Rendering	Auto-renders on exit	Requires `await diagram.render()`

Create an OCI architecture diagram

Use the Diagram class and OCI node imports from diagrams-js/oci to build Oracle Cloud Infrastructure diagrams. All node types from the Python diagrams library are available with the same class names.

import { Diagram } from "diagrams-js";
import { AutoscaleWhite, Autoscale, BMWhite } from "diagrams-js/oci/compute";
import { BackboneWhite, Backbone, CDNWhite } from "diagrams-js/oci/connectivity";

const diagram = Diagram("OCI Architecture", { direction: "TB" });

const node1 = diagram.add(AutoscaleWhite("Node 1"));
const node2 = diagram.add(BackboneWhite("Node 2"));

node1.to(node2);

const svg = await diagram.render();

Configure the diagrams-js GitHub Action
The diagrams-js/action allows you to render, export, or diff architecture diagrams within a GitHub Actions CI/CD pipeline.
```
- uses: diagrams-js/action@v1
  with:
    command: render
    args: architecture.ts
    output: architecture.svg
```
https://diagrams-js.hatemhosny.dev/llms-full.txt?llms-doc=github-actionwebsitellms

Generate visual diffs for diagrams

The diff command creates visual comparisons of diagrams, which is useful for git workflows to track architecture changes over time.

# Diff a file against HEAD
diagrams diff show HEAD diagram.ts

# Diff between branches in HTML format
diagrams diff show main...feature diagram.json -f html

# List all changed diagram files between branches
diagrams diff list main...feature

# Batch diff all changed files into a directory
diagrams diff batch main...feature -o ./diffs

Create architecture diagrams using the IBM provider

Use the diagrams-js library to create visual representations of IBM architectures. You can import specific IBM service nodes from sub-modules like diagrams-js/ibm/analytics or diagrams-js/ibm/applications, add them to a Diagram instance, and define relationships between them using the .to() method.

import { Diagram } from "diagrams-js";
import { Analytics, DataIntegration, DataRepositories } from "diagrams-js/ibm/analytics";
import { ActionableInsight, Annotate, ApiDeveloperPortal } from "diagrams-js/ibm/applications";

const diagram = Diagram("IBM Architecture", { direction: "TB" });

const node1 = diagram.add(Analytics("Node 1"));
const node2 = diagram.add(ActionableInsight("Node 2"));

node1.to(node2);

const svg = await diagram.render();

Create a diagram using OpenStack nodes

Use the Diagram class from diagrams-js and import specific OpenStack components from their respective sub-modules (e.g., openstack/apiproxies or openstack/applicationlifecycle) to build an OpenStack architecture diagram.

import { Diagram } from "diagrams-js";
import { EC2API } from "diagrams-js/openstack/apiproxies";
import { Freezer, Masakari, Murano } from "diagrams-js/openstack/applicationlifecycle";

const diagram = Diagram("OpenStack Architecture", { direction: "TB" });

const node1 = diagram.add(EC2API("Node 1"));
const node2 = diagram.add(Freezer("Node 2"));

node1.to(node2);

const svg = await diagram.render();

Create a Kubernetes architecture diagram

Use the Diagram class and specific Kubernetes node imports from diagrams-js/k8s to build a visual representation of a K8s cluster. All node types from the Python diagrams library are available with the same class names.

import { Diagram } from "diagrams-js";
import { ChaosMesh, LitmusChaos } from "diagrams-js/k8s/chaos";
import { HPA, Limits, Quota } from "diagrams-js/k8s/clusterconfig";

const diagram = Diagram("Kubernetes Architecture", { direction: "TB" });

const node1 = diagram.add(ChaosMesh("Node 1"));
const node2 = diagram.add(HPA("Node 2"));

node1.to(node2);

const svg = await diagram.render();

Create a diagram using Generic provider nodes

Use the Diagram class from diagrams-js and import specific node types from the diagrams-js/generic subpaths to build an architecture diagram. Nodes are added to the diagram using the .add() method and connected using the .to() method.

import { Diagram } from "diagrams-js";
import { Blank } from "diagrams-js/generic/blank";
import { Rack } from "diagrams-js/generic/compute";

const diagram = Diagram("Generic Architecture", { direction: "TB" });

const node1 = diagram.add(Blank("Node 1"));
const node2 = diagram.add(Rack("Node 2"));

node1.to(node2);

const svg = await diagram.render();

Create a diagram using Programming nodes

Use the programming provider to create flowcharts or framework architecture diagrams. All node types available in the Python diagrams library for Programming are available in diagrams-js with the same class names.

import { Diagram } from "diagrams-js";
import { Action, Collate, Database } from "diagrams-js/programming/flowchart";
import { Angular, Backbone, Camel } from "diagrams-js/programming/framework";

const diagram = Diagram("Programming Architecture", { direction: "TB" });

const node1 = diagram.add(Action("Node 1"));
const node2 = diagram.add(Angular("Node 2"));

node1.to(node2);

const svg = await diagram.render();

Create an AWS architecture diagram using diagrams-js

Use the diagrams-js library to programmatically define cloud architecture. You can import specific service nodes from sub-modules (e.g., diagrams-js/aws/analytics), add them to a Diagram instance, define relationships using the .to() method, and render the final result as an SVG.

import { Diagram } from "diagrams-js";
import { AmazonOpensearchService, Analytics, Athena } from "diagrams-js/aws/analytics";
import { ArVr, Sumerian } from "diagrams-js/aws/ar";

const diagram = Diagram("AWS Architecture", { direction: "TB" });

const node1 = diagram.add(AmazonOpensearchService("Node 1"));
const node2 = diagram.add(ArVr("Node 2"));

node1.to(node2);

const svg = await diagram.render();

Use IBM Social nodes in diagrams-js
The diagrams-js/ibm/social module provides nodes for representing social and communication components in IBM architecture diagrams, including Messaging and Networking.
```
import { Messaging, Networking } from "diagrams-js/ibm/social";
```
https://diagrams-js.hatemhosny.dev/llms-full.txt?llms-doc=ibmwebsitellms