# diagrams-js

> Draw cloud system architecture diagrams as code in TypeScript

- [diagrams-js](/)

## playground

- [Playground](/playground): Interactive diagrams-js playground

## search

- [Search the documentation](/search)

## docs

- [AI Guide](/docs/ai-guide): Guide for AI LLMs and agents using diagrams-js
- [Credits](/docs/credits): Acknowledgments and credits
- [Examples](/docs/getting-started/examples): Real-world architecture examples
- [Installation](/docs/getting-started/installation): Installing diagrams-js in your project
- [Quick Start](/docs/getting-started/quickstart): Create your first diagram in minutes
- [API Reference](/docs/guides/api): Complete API documentation
- [CLI](/docs/guides/cli): Using diagrams from the command line with @diagrams-js/cli
- [Clusters](/docs/guides/clusters): Group nodes together with clusters
- [Custom Nodes](/docs/guides/custom-nodes): Use your own icons and images
- [Diagrams](/docs/guides/diagram): Understanding the Diagram class
- [Diagram Diff](/docs/guides/diagram-diff): Compare two versions of a diagram visually to see what changed. The diff feature highlights added, removed, and modified elements with color-coded overlays in a side-by-side view.
- [Edges](/docs/guides/edge): Connecting nodes with customized edges
- [GitHub Action](/docs/guides/github-action): Using diagrams-js in GitHub Actions for CI/CD
- [JSON Serialization](/docs/guides/json): Export and import diagrams as JSON for cloud architecture provisioning and tool integration
- [Migration from Python diagrams](/docs/guides/migration): Migrate from Python diagrams to TypeScript
- [Nodes](/docs/guides/node): Working with nodes and data flow
- [Providers](/docs/guides/providers): Available cloud providers
- [Rendering](/docs/guides/rendering): Render and export diagrams
- [Alibaba Cloud](/docs/nodes/alibabacloud): Node types for Alibaba Cloud provider
- [AWS](/docs/nodes/aws): Node types for Amazon Web Services provider
- [Azure](/docs/nodes/azure): Node types for Microsoft Azure provider
- [C4 Model](/docs/nodes/c4): Visualize software architecture using the C4 model
- [DigitalOcean](/docs/nodes/digitalocean): Node types for DigitalOcean provider
- [Elastic](/docs/nodes/elastic): Node types for Elastic Stack provider
- [Firebase](/docs/nodes/firebase): Node types for Firebase provider
- [GCP](/docs/nodes/gcp): Node types for Google Cloud Platform provider
- [Generic](/docs/nodes/generic): Node types for generic/on-premise resources
- [GIS](/docs/nodes/gis): Node types for GIS (Geographic Information Systems) provider
- [IBM](/docs/nodes/ibm): Node types for IBM Cloud provider
- [Kubernetes](/docs/nodes/k8s): Node types for Kubernetes provider
- [OCI](/docs/nodes/oci): Node types for Oracle Cloud Infrastructure provider
- [On-Premises](/docs/nodes/onprem): Node types for on-premises infrastructure
- [OpenStack](/docs/nodes/openstack): Node types for OpenStack provider
- [Outscale](/docs/nodes/outscale): Node types for Outscale provider
- [Programming](/docs/nodes/programming): Node types for programming languages and frameworks
- [SaaS](/docs/nodes/saas): Node types for Software as a Service providers
- [Docker Compose Plugin](/docs/plugins/docker-compose): Import and export Docker Compose files with diagrams-js
- [Kubernetes Plugin](/docs/plugins/kubernetes): Import and export Kubernetes YAML manifests with diagrams-js
- [Plugin System Overview](/docs/plugins/overview): Extend diagrams-js with custom import/export formats, metadata providers, and hooks


---

# Full Documentation Content

Example: -- Select an example --

Share


---

[Skip to main content](#__docusaurus_skipToContent_fallback)

[![diagrams-js](/img/logo.svg)![diagrams-js](/img/logo.svg)](/)

[**diagrams-js**](/)[Docs](/docs/getting-started/installation)[Examples](/docs/getting-started/examples)[Guides](/docs/guides/diagram)[Providers](/docs/guides/providers)[Playground](/playground)[Visual Editor](/visual-editor)

[npm](https://www.npmjs.com/package/diagrams-js)[GitHub](https://github.com/diagrams-js/diagrams-js)

Search

# Search the documentation

Type your search here

Powered by[](https://www.algolia.com/)

Docs

* [Getting Started](/docs/getting-started/quickstart)
* [Examples](/docs/getting-started/examples)
* [API Reference](/docs/guides/diagram)

For AI

* [AI Guide](/docs/ai-guide)
* [llms.txt](/llms.txt)
* [llms-full.txt](/llms-full.txt)

Community

* [GitHub](https://github.com/diagrams-js/diagrams-js)
* [𝕏 / Twitter](https://x.com/hatem_hosny_)

More

* [Playground](/playground)
* [Visual Editor](/visual-editor)
* [Sponsor 💚](https://github.com/sponsors/hatemhosny)

Copyright © 2026 [Hatem Hosny](https://github.com/hatemhosny). MIT License.


---

# AI Guide

This guide is specifically designed for AI Large Language Models (LLMs) and autonomous agents to effectively use the diagrams-js library for generating cloud architecture diagrams.

## llms.txt[​](#llmstxt "Direct link to llms.txt")

For optimal context when working with diagrams-js, use these specially formatted documentation files:

**📄 [llms.txt](/llms.txt)** - Concise overview of the library, installation, basic usage, and key concepts

**📄 [llms-full.txt](/llms-full.txt)** - Complete documentation including all guides, API reference, and examples

These files are specifically structured for AI consumption with:

* Clear API signatures and type definitions
* Code examples with expected outputs
* Provider reference lists
* Best practices and common patterns

See <https://llmstxt.org/> for more information about llms.txt standards.

## Skills[​](#skills "Direct link to Skills")

diagrams-js provides skills for enhanced AI-assisted development.

### Installation for AI Agents[​](#installation-for-ai-agents "Direct link to Installation for AI Agents")

Using [skills.sh](https://skills.sh/):

```
# Add skills into your project
npx skills add hatemhosny/diagrams-js
```

Or using [`@tanstack/intent`](http://tanstack.com/intent/):

```
# Install skills into your project
npx @tanstack/intent@latest install

# Or use directly without installation
npx @tanstack/intent@latest show diagrams-js/getting-started
```

### Available Skills[​](#available-skills "Direct link to Available Skills")

| Skill                               | Description                                 |
| ----------------------------------- | ------------------------------------------- |
| `diagrams-js/getting-started`       | Installation, first diagram, basic concepts |
| `diagrams-js/diagram-configuration` | Direction, theme, curve style, attributes   |
| `diagrams-js/rendering-export`      | SVG, PNG, JPG, DOT, data URLs               |
| `diagrams-js/provider-nodes`        | 17+ providers, 2000+ node types             |
| `diagrams-js/custom-nodes`          | External icons, URLs, data URLs             |
| `diagrams-js/node-connections`      | to(), from(), with(), Edge styling          |
| `diagrams-js/clusters-grouping`     | Clusters, nesting, organization             |
| `diagrams-js/browser-integration`   | CDN, DOM, data URLs, downloads              |
| `diagrams-js/nodejs-integration`    | File system, sharp, local icons             |
| `diagrams-js/python-migration`      | Python to TypeScript conversion             |

### Using Skills[​](#using-skills "Direct link to Using Skills")

AI agents can load relevant skills automatically based on context:

* Creating a new diagram → loads `getting-started`
* Adding AWS/GCP/Azure nodes → loads `provider-nodes`
* Connecting nodes with edges → loads `node-connections`
* Rendering to different formats → loads `rendering-export`
* Migrating from Python diagrams → loads `python-migration`

## Key Concepts for AI Agents[​](#key-concepts-for-ai-agents "Direct link to Key Concepts for AI Agents")

### 1. Diagram Structure[​](#1-diagram-structure "Direct link to 1. Diagram Structure")

```
import { Diagram } from "diagrams-js";

// Always create a diagram instance first
const diagram = Diagram("Architecture Name", {
  direction: "TB", // Top-Bottom (or "LR" for Left-Right)
});
```

### 2. Adding Nodes[​](#2-adding-nodes "Direct link to 2. Adding Nodes")

Nodes can be added using the `add()` method:

```
import { Diagram, Node } from "diagrams-js";

const diagram = Diagram("Example");

// Basic node (no icon)
const basicNode = diagram.add(Node("Label"));

// Provider nodes (auto-include icons)
import { EC2 } from "diagrams-js/aws/compute";
const server = diagram.add(EC2("Web Server"));
```

### 3. Creating Connections[​](#3-creating-connections "Direct link to 3. Creating Connections")

Use method chaining for connections:

```
import { Edge } from "diagrams-js";

// .to() - Forward direction (left to right)
nodeA.to(nodeB);

// Sequential connections
nodeA.to(nodeB).to(nodeC);

// Branching connections
nodeA.to([nodeB, nodeC]);

// Connect multiple nodes to one target
const nodes = [nodeB, nodeC, nodeD];
nodes.forEach((n) => n.to(nodeA));

// .from() - Reverse direction (right to left)
nodeB.from(nodeA);

// .with() - Undirected/bidirectional (no arrows)
nodeA.with(nodeB);

// With custom styling using Edge
nodeA.to(Edge({ color: "red", style: "dashed" }), nodeB);
```

### 4. Rendering Output[​](#4-rendering-output "Direct link to 4. Rendering Output")

```
// Generate SVG
const svg = await diagram.render();

// Use the SVG (save to file, display, etc.)
```

## Common Patterns[​](#common-patterns "Direct link to Common Patterns")

### Web Application Architecture[​](#web-application-architecture "Direct link to Web Application Architecture")

```
import { Diagram } from "diagrams-js";
import { ALB } from "diagrams-js/aws/network";
import { EC2, AutoScaling } from "diagrams-js/aws/compute";
import { RDS } from "diagrams-js/aws/database";
import { S3 } from "diagrams-js/aws/storage";

const diagram = Diagram("Web App Architecture");

const lb = diagram.add(ALB("Load Balancer"));
const web = diagram.add(EC2("Web Servers"));
const db = diagram.add(RDS("Database"));
const storage = diagram.add(S3("Assets"));

lb.to(web);
web.to([db, storage]);

const svg = await diagram.render();
```

### Microservices Pattern[​](#microservices-pattern "Direct link to Microservices Pattern")

```
import { Diagram } from "diagrams-js";
import { ECS } from "diagrams-js/aws/compute";

const diagram = Diagram("Microservices");

// Group related services using clusters
const apiCluster = diagram.cluster("API Gateway");
const auth = apiCluster.add(ECS("Auth Service"));
const rateLimiter = apiCluster.add(ECS("Rate Limiter"));

const servicesCluster = diagram.cluster("Services");
const userSvc = servicesCluster.add(ECS("User Service"));
const orderSvc = servicesCluster.add(ECS("Order Service"));
const paymentSvc = servicesCluster.add(ECS("Payment Service"));

// Connect clusters
auth.to([userSvc, orderSvc, paymentSvc]);

const svg = await diagram.render();
```

## Provider Organization[​](#provider-organization "Direct link to Provider Organization")

Cloud providers are organized hierarchically:

```
diagrams-js/
├── aws/
│   ├── compute/      # EC2, Lambda, etc.
│   ├── database/     # RDS, DynamoDB, etc.
│   ├── storage/      # S3, EBS, etc.
│   └── ...
├── azure/
│   ├── compute/
│   ├── database/
│   └── ...
└── gcp/
    ├── compute/
    ├── database/
    └── ...
```

## Common Mistakes to Avoid[​](#common-mistakes-to-avoid "Direct link to Common Mistakes to Avoid")

Here are critical mistakes that AI agents should avoid:

### Python Migration Issues[​](#python-migration-issues "Direct link to Python Migration Issues")

When converting from Python diagrams:

* ❌ **Context managers**: Python uses `with Diagram():`, TypeScript uses `const diagram = Diagram()`
* ❌ **Operators**: Python uses `>>` / `<<` / `-`, TypeScript uses `.to()` / `.from()` / `.with()`
* ❌ **Auto-registration**: Python auto-registers nodes, TypeScript requires `diagram.add()`
* ❌ **Auto-render**: Python auto-renders on exit, TypeScript requires `await diagram.render()`

### Node Registration[​](#node-registration "Direct link to Node Registration")

```
// ❌ Wrong: Node not registered
const web = EC2("Web Server");
web.to(db); // Error!

// ✅ Correct: Explicit registration
const web = diagram.add(EC2("Web Server"));
web.to(db); // Works!
```

### Async Rendering[​](#async-rendering "Direct link to Async Rendering")

```
// ❌ Wrong: Not awaiting
const svg = diagram.render();

// ✅ Correct: Always await
const svg = await diagram.render();
```

### Import Paths[​](#import-paths "Direct link to Import Paths")

```
// ❌ Wrong: Missing category
import { EC2 } from "diagrams-js/aws";

// ✅ Correct: Include category
import { EC2 } from "diagrams-js/aws/compute";
```

### Connection Direction[​](#connection-direction "Direct link to Connection Direction")

```
// For << arrow (db << api)
// ❌ Wrong
db.to(api);

// ✅ Correct
db.from(api);
```

### Browser vs Node.js[​](#browser-vs-nodejs "Direct link to Browser vs Node.js")

```
// ❌ Wrong in browser
import { writeFileSync } from "fs";
writeFileSync("out.svg", svg);

// ✅ Correct in browser
await diagram.save("diagram.svg");
```

## Best Practices for AI Generation[​](#best-practices-for-ai-generation "Direct link to Best Practices for AI Generation")

1. **Use descriptive node labels** that explain the component's role
2. **Group related nodes** using `Cluster` for better organization
3. **Set appropriate diagram direction** based on the layout needs
4. **Import only needed providers** to optimize bundle size
5. **Handle async operations** properly with `await diagram.render()`
6. **Always register nodes** with `diagram.add()` before connecting
7. **Load relevant skills** for enhanced guidance on specific tasks

## Environment Support[​](#environment-support "Direct link to Environment Support")

* **Browsers**: Direct usage with ES modules
* **Node.js/Deno/Bun**: Save SVG to files using
  <br />
  `await diagram.save("filename.svg", { format: "svg" }); // or "png"/"jpeg"`

## Resources[​](#resources "Direct link to Resources")

* 📚 [Full Documentation](/docs/getting-started/installation)
* 🔧 [API Reference](/docs/guides/diagram)
* 🎨 [Provider List](/docs/guides/providers)
* 🤖 [TanStack Intent Skills](https://github.com/diagrams-js/diagrams-js/blob/main/.agents/INTENT.md) - AI-assisted development
* 📄 [llms.txt](/llms.txt) - Quick reference
* 📄 [llms-full.txt](/llms-full.txt) - Complete docs


---

# Credits

diagrams-js is made possible thanks to these amazing projects and communities:

## Original Project[​](#original-project "Direct link to Original Project")

**[diagrams](https://github.com/mingrammer/diagrams)** by [mingrammer](https://github.com/mingrammer)

This project is a TypeScript port of the original Python diagrams library. We are grateful to mingrammer for creating such an elegant and powerful tool for drawing cloud architecture diagrams as code.

## Rendering Engine[​](#rendering-engine "Direct link to Rendering Engine")

**[Graphviz](https://graphviz.org/)**

The graph visualization software that powers the layout and rendering of all diagrams. Graphviz provides the sophisticated algorithms for positioning nodes and routing edges.

**[viz-js](https://github.com/mdaines/viz-js)** by [mdaines](https://github.com/mdaines)

A WebAssembly-based port of Graphviz for JavaScript. This enables diagrams-js to run entirely in the browser without requiring any server-side components.

## Icon Sets[​](#icon-sets "Direct link to Icon Sets")

All node icons are from the original [diagrams](https://github.com/mingrammer/diagrams) library, which includes icons from various cloud providers and technology vendors.

## Community[​](#community "Direct link to Community")

Thank you to all contributors and users who help improve diagrams-js through bug reports, feature requests, and pull requests.

## License[​](#license "Direct link to License")

diagrams-js is released under the MIT License, same as the original diagrams library.


---

# Examples

Here are comprehensive examples demonstrating the capabilities of diagrams-js.

info

These examples are reproduced from the original [Python's Diagrams library](https://diagrams.mingrammer.com/docs/getting-started/examples) documentations.

Live Demo

For interactive examples with live rendered diagrams, check out the [playground](/playground).

## Grouped Workers on AWS[​](#grouped-workers-on-aws "Direct link to Grouped Workers on AWS")

```
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();
```

![Grouped Workers on AWS](/examples/example1-grouped-workers.svg)

## Clustered Web Services[​](#clustered-web-services "Direct link to Clustered Web Services")

```
import { Diagram } from "diagrams-js";
import { ECS } from "diagrams-js/aws/compute";
import { RDS, Elasticache } from "diagrams-js/aws/database";
import { ELB, Route53 } from "diagrams-js/aws/network";

const diagram = Diagram("Clustered Web Services");

const dns = diagram.add(Route53("dns"));
const lb = diagram.add(ELB("lb"));

const svcCluster = diagram.cluster("Services");
const svcGroup = [
  svcCluster.add(ECS("web1")),
  svcCluster.add(ECS("web2")),
  svcCluster.add(ECS("web3")),
];
lb.to(svcGroup);

const dbCluster = diagram.cluster("DB Cluster");
const dbPrimary = dbCluster.add(RDS("userdb"));
const dbReplica = dbCluster.add(RDS("userdb ro"));
dbPrimary.with(dbReplica);
svcGroup.forEach((s) => s.to(dbPrimary));

const memcached = diagram.add(Elasticache("memcached"));
svcGroup.forEach((s) => s.to(memcached));

dns.to(lb);

const svg = await diagram.render();
```

![Clustered Web Services](/examples/example2-clustered-web-services.svg)

## Event Processing on AWS[​](#event-processing-on-aws "Direct link to Event Processing on AWS")

```
import { Diagram } from "diagrams-js";
import { ECS, EKS, Lambda } from "diagrams-js/aws/compute";
import { Redshift } from "diagrams-js/aws/database";
import { SQS } from "diagrams-js/aws/integration";
import { S3 } from "diagrams-js/aws/storage";

const diagram = Diagram("Event Processing");

const source = diagram.add(EKS("k8s source"));
const store = diagram.add(S3("events store"));
const dw = diagram.add(Redshift("analytics"));

const flowsCluster = diagram.cluster("Event Flows");

const workersCluster = flowsCluster.cluster("Event Workers");
const workerNodes = [
  workersCluster.add(ECS("worker1")),
  workersCluster.add(ECS("worker2")),
  workersCluster.add(ECS("worker3")),
];
source.to(workerNodes);

const queue = flowsCluster.add(SQS("event queue"));
workerNodes.forEach((w) => w.to(queue));

const procCluster = flowsCluster.cluster("Processing");
const handlers = [
  procCluster.add(Lambda("proc1")),
  procCluster.add(Lambda("proc2")),
  procCluster.add(Lambda("proc3")),
];
queue.to(handlers);
handlers.forEach((h) => {
  h.to(store);
  h.to(dw);
});

const svg = await diagram.render();
```

![Event Processing on AWS](/examples/example3-event-processing.svg)

## Message Collecting System on GCP[​](#message-collecting-system-on-gcp "Direct link to Message Collecting System on GCP")

```
import { Diagram } from "diagrams-js";
import { BigQuery, Dataflow, PubSub } from "diagrams-js/gcp/analytics";
import { AppEngine, Functions } from "diagrams-js/gcp/compute";
import { Bigtable } from "diagrams-js/gcp/database";
import { IotCore } from "diagrams-js/gcp/iot";
import { Storage } from "diagrams-js/gcp/storage";

const diagram = Diagram("Message Collecting");

const pubsub = diagram.add(PubSub("pubsub"));

const sourceCluster = diagram.cluster("Source of Data");
const sources = [
  sourceCluster.add(IotCore("core1")),
  sourceCluster.add(IotCore("core2")),
  sourceCluster.add(IotCore("core3")),
];
sources.forEach((s) => s.to(pubsub));

const targetsCluster = diagram.cluster("Targets");
const flowCluster = targetsCluster.cluster("Data Flow");
const dataflow = flowCluster.add(Dataflow("data flow"));
pubsub.to(dataflow);

const lakeCluster = targetsCluster.cluster("Data Lake");
const bq = lakeCluster.add(BigQuery("bq"));
const gcs = lakeCluster.add(Storage("storage"));
dataflow.to([bq, gcs]);

const eventCluster = targetsCluster.cluster("Event Driven");

const procCluster = eventCluster.cluster("Processing");
const engine = procCluster.add(AppEngine("engine"));
const bigtable = procCluster.add(Bigtable("bigtable"));
dataflow.to(engine).to(bigtable);

const serverlessCluster = eventCluster.cluster("Serverless");
const func = serverlessCluster.add(Functions("func"));
const appengine = serverlessCluster.add(AppEngine("appengine"));
dataflow.to(func).to(appengine);

const svg = await diagram.render();
```

![Message Collecting System on GCP](/examples/example4-message-collecting.svg)

## Exposed Pod with 3 Replicas on Kubernetes[​](#exposed-pod-with-3-replicas-on-kubernetes "Direct link to Exposed Pod with 3 Replicas on Kubernetes")

```
import { Diagram } from "diagrams-js";
import { HPA } from "diagrams-js/k8s/clusterconfig";
import { Deployment, Pod, ReplicaSet } from "diagrams-js/k8s/compute";
import { Ingress, Service } from "diagrams-js/k8s/network";

const diagram = Diagram("Exposed Pod with 3 Replicas");

const ingress = diagram.add(Ingress("domain.com"));
const svc = diagram.add(Service("svc"));
const pods = [diagram.add(Pod("pod1")), diagram.add(Pod("pod2")), diagram.add(Pod("pod3"))];
const rs = diagram.add(ReplicaSet("rs"));
const dp = diagram.add(Deployment("dp"));
const hpa = diagram.add(HPA("hpa"));

ingress.to(svc);
svc.to(pods);
pods.forEach((p) => p.from(rs));
rs.from(dp);
dp.from(hpa);

const svg = await diagram.render();
```

![Exposed Pod with 3 Replicas](/examples/example5-k8s-exposed-pod.svg)

## Stateful Architecture on Kubernetes[​](#stateful-architecture-on-kubernetes "Direct link to Stateful Architecture on Kubernetes")

```
import { Diagram } from "diagrams-js";
import { Pod, StatefulSet } from "diagrams-js/k8s/compute";
import { Service } from "diagrams-js/k8s/network";
import { PV, PVC } from "diagrams-js/k8s/storage";

const diagram = Diagram("Stateful Architecture");
const appsCluster = diagram.cluster("Apps");
const svc = appsCluster.add(Service("svc"));
const sts = appsCluster.add(StatefulSet("sts"));
const pods = [];
const pvcs = [];
for (let i = 0; i < 3; i++) {
  const pod = appsCluster.add(Pod("pod"));
  const pvc = appsCluster.add(PVC("pvc"));

  pod.with(sts).with(pvc);
  svc.to(pod).to(pvc);

  pods.push(pod);
  pvcs.push(pvc);
}

const pv = diagram.add(PV("pv"));
const sc = diagram.add(StorageClass("sc"));

pvcs.forEach((pvc) => {
  pvc.from(pv);
});
pv.from(sc);

const svg = await diagram.render();
```

![Stateful Architecture](/examples/example6-k8s-stateful.svg)

## Advanced Web Service with On-Premises[​](#advanced-web-service-with-on-premises "Direct link to Advanced Web Service with On-Premises")

```
import { Diagram } from "diagrams-js";
import { Spark } from "diagrams-js/onprem/analytics";
import { Server } from "diagrams-js/onprem/compute";
import { PostgreSQL } from "diagrams-js/onprem/database";
import { Redis } from "diagrams-js/onprem/inmemory";
import { Fluentd } from "diagrams-js/onprem/aggregator";
import { Grafana, Prometheus } from "diagrams-js/onprem/monitoring";
import { Nginx } from "diagrams-js/onprem/network";
import { Kafka } from "diagrams-js/onprem/queue";

const diagram = Diagram("Advanced Web Service with On-Premises");

const ingress = diagram.add(Nginx("ingress"));

const metrics = diagram.add(Prometheus("metric"));
const grafana = diagram.add(Grafana("monitoring"));
metrics.from(grafana);

const serviceCluster = diagram.cluster("Service Cluster");
const grpcsvc = [
  serviceCluster.add(Server("grpc1")),
  serviceCluster.add(Server("grpc2")),
  serviceCluster.add(Server("grpc3")),
];

const sessionsCluster = diagram.cluster("Sessions HA");
const sessionPrimary = sessionsCluster.add(Redis("session"));
const sessionReplica = sessionsCluster.add(Redis("replica"));
sessionPrimary.with(sessionReplica);
sessionReplica.from(metrics);
grpcsvc.forEach((svc) => svc.to(sessionPrimary));

const dbCluster = diagram.cluster("Database HA");
const dbPrimary = dbCluster.add(PostgreSQL("users"));
const dbReplica = dbCluster.add(PostgreSQL("replica"));
dbPrimary.with(dbReplica);
dbReplica.from(metrics);
grpcsvc.forEach((svc) => svc.to(dbPrimary));

const aggregator = diagram.add(Fluentd("logging"));
const kafka = diagram.add(Kafka("stream"));
const spark = diagram.add(Spark("analytics"));
aggregator.to(kafka).to(spark);

ingress.to(grpcsvc);
grpcsvc.forEach((svc) => svc.to(aggregator));

const svg = await diagram.render();
```

![Advanced Web Service with On-Premises](/examples/example7-onprem-advanced.svg)

## Advanced Web Service with On-Premises (with colors and labels)[​](#advanced-web-service-with-on-premises-with-colors-and-labels "Direct link to Advanced Web Service with On-Premises (with colors and labels)")

```
import { Diagram, Edge } from "diagrams-js";
import { Spark } from "diagrams-js/onprem/analytics";
import { Server } from "diagrams-js/onprem/compute";
import { PostgreSQL } from "diagrams-js/onprem/database";
import { Redis } from "diagrams-js/onprem/inmemory";
import { Fluentd } from "diagrams-js/onprem/aggregator";
import { Grafana, Prometheus } from "diagrams-js/onprem/monitoring";
import { Nginx } from "diagrams-js/onprem/network";
import { Kafka } from "diagrams-js/onprem/queue";

const diagram = Diagram("Advanced Web Service with On-Premises (colored)");

const ingress = diagram.add(Nginx("ingress"));

const metrics = diagram.add(Prometheus("metric"));
const grafana = diagram.add(Grafana("monitoring"));
grafana.to(Edge({ color: "firebrick", style: "dashed" }), metrics);

const serviceCluster = diagram.cluster("Service Cluster");
const grpcsvc = [
  serviceCluster.add(Server("grpc1")),
  serviceCluster.add(Server("grpc2")),
  serviceCluster.add(Server("grpc3")),
];

const sessionsCluster = diagram.cluster("Sessions HA");
const sessionPrimary = sessionsCluster.add(Redis("session"));
const sessionReplica = sessionsCluster.add(Redis("replica"));
sessionPrimary.with(Edge({ color: "brown", style: "dashed" }), sessionReplica);
sessionReplica.from(Edge({ label: "collect" }), metrics);
grpcsvc.forEach((svc) => svc.to(Edge({ color: "brown" }), sessionPrimary));

const dbCluster = diagram.cluster("Database HA");
const dbPrimary = dbCluster.add(PostgreSQL("users"));
const dbReplica = dbCluster.add(PostgreSQL("replica"));
dbPrimary.with(Edge({ color: "brown", style: "dotted" }), dbReplica);
dbReplica.from(Edge({ label: "collect" }), metrics);
grpcsvc.forEach((svc) => svc.to(Edge({ color: "black" }), dbPrimary));

const aggregator = diagram.add(Fluentd("logging"));
const kafka = diagram.add(Kafka("stream"));
const spark = diagram.add(Spark("analytics"));
aggregator.to(Edge({ label: "parse" }), kafka);
kafka.to(Edge({ color: "black", style: "bold" }), spark);

grpcsvc.forEach((svc) => {
  ingress.to(Edge({ color: "darkgreen", forward: true, reverse: true }), svc);
});
grpcsvc.forEach((svc) => svc.to(Edge({ color: "darkorange" }), aggregator));

const svg = await diagram.render();
```

![Advanced Web Service with On-Premises (with colors and labels)](/examples/example8-onprem-advanced-colors.svg)

## RabbitMQ Consumers with Custom Nodes[​](#rabbitmq-consumers-with-custom-nodes "Direct link to RabbitMQ Consumers with Custom Nodes")

```
import { Diagram, Custom, Iconify } from "diagrams-js";
import { Pod } from "diagrams-js/k8s/compute";

const diagram = Diagram("Broker Consumers");

const consumersCluster = diagram.cluster("Consumers");
const consumers = [
  consumersCluster.add(Pod("worker")),
  consumersCluster.add(Pod("worker")),
  consumersCluster.add(Pod("worker")),
];

const queue = diagram.add(
  // Use a custom icon from a URL
  Custom("Message queue", "https://jpadilla.github.io/rabbitmqapp/assets/img/icon.png", {
    width: "1.0",
  }),
);

// Use Iconify icons
const database = diagram.add(Iconify("Database", "logos:aws-aurora"));

queue.to(consumers);
consumers.forEach((consumer) => consumer.to(database));

const svg = await diagram.render();
```

![RabbitMQ Consumers with Custom Nodes](/examples/example9-custom-nodes.svg)

## Docker Compose Plugin Example[​](#docker-compose-plugin-example "Direct link to Docker Compose Plugin Example")

This example demonstrates using the Docker Compose plugin.

```
import { Diagram } from "diagrams-js";
import { dockerComposePlugin } from "@diagrams-js/plugin-docker-compose";

const diagram = Diagram("E-commerce Application");

// Register the plugin instance
await diagram.registerPlugins([dockerComposePlugin]);

// Import from Docker Compose YAML
const composeYaml = `
version: "3.8"
name: ecommerce-app
services:
  frontend:
    image: nginx:alpine
    ports:
      - "80:80"
    depends_on:
      - api

  api:
    image: node:18
    ports:
      - "3000:3000"
    depends_on:
      - db
      - cache

  db:
    image: postgres:15
    environment:
      POSTGRES_DB: ecommerce
    volumes:
      - pgdata:/var/lib/postgresql/data

  cache:
    image: redis:7-alpine

volumes:
  pgdata:
`;

await diagram.import(composeYaml, "docker-compose");

// Render the diagram
const svg = await diagram.render();
```

![Docker Compose Plugin Example](/examples/ecommerce-app.svg)

Learn More

For a comprehensive guide on creating plugins, check out the [Plugin System](/docs/plugins/overview) documentation.

## Next Steps[​](#next-steps "Direct link to Next Steps")

* Explore [all providers](/docs/guides/providers) and their available nodes
* Read the [complete API reference](/docs/guides/diagram)
* Try the [playground](/playground) for interactive examples


---

# Installation

## Node.js[​](#nodejs "Direct link to Node.js")

Install [`diagrams-js`](https://www.npmjs.com/package/diagrams-js) using your preferred package manager:

<!-- -->

* npm
* yarn
* pnpm
* bun

```
npm install diagrams-js
```

```
yarn add diagrams-js
```

```
pnpm add diagrams-js
```

```
bun add diagrams-js
```

Bun Version

Bun 1.3.0+ is required for diagrams-js to work properly due to WebAssembly support improvements.

### Optional Dependencies[​](#optional-dependencies "Direct link to Optional Dependencies")

[Rendering](/docs/guides/rendering) SVG does not require any additional packages. However, for PNG and JPG rendering in Node.js, the package `sharp` is required:

* npm
* yarn
* pnpm
* bun

```
npm install sharp
```

```
yarn add sharp
```

```
pnpm add sharp
```

```
bun add sharp
```

## Browser Usage[​](#browser-usage "Direct link to Browser Usage")

### Using a Bundler[​](#using-a-bundler "Direct link to Using a Bundler")

Install via npm and import:

```
import { Diagram } from "diagrams-js";
import { EC2 } from "diagrams-js/aws/compute";
```

### Using CDN[​](#using-cdn "Direct link to Using CDN")

```
<script type="module">
  import { Diagram } from "https://esm.sh/diagrams-js";
  import { EC2 } from "https://esm.sh/diagrams-js/aws/compute";
</script>
```

### Using CDN with Import Map[​](#using-cdn-with-import-map "Direct link to Using CDN with Import Map")

You can use import maps to enable bare module imports while loading from a CDN:

```
<script type="importmap">
  {
    "imports": {
      "diagrams-js": "https://esm.sh/diagrams-js",
      "diagrams-js/": "https://esm.sh/diagrams-js/"
    }
  }
</script>

<script type="module">
  import { Diagram } from "diagrams-js";
  import { EC2 } from "diagrams-js/aws/compute";
  import { RDS } from "diagrams-js/aws/database";

  const diagram = Diagram("My Diagram");
  const web = diagram.add(EC2("Web Server"));
  const db = diagram.add(RDS("Database"));

  web.to(db);

  const svg = await diagram.render();
  document.body.innerHTML = svg;
</script>
```

Import Maps

Import maps allow you to use bare module specifiers (like `diagrams-js/aws/compute`) instead of full URLs, making your code cleaner and more portable between bundler and CDN environments.

## Next Steps[​](#next-steps "Direct link to Next Steps")

* Follow the [Quick Start guide](/docs/getting-started/quickstart) to create your first diagram
* Explore the [Examples](/docs/getting-started/examples) for real-world use cases
* Check out the [Node Reference](/docs/guides/providers) for all available providers and services


---

# Quick Start

Get started with diagrams-js in just a few lines of code.

## Basic Diagram[​](#basic-diagram "Direct link to Basic Diagram")

Create a simple diagram with nodes and connections:

```
import { Diagram, Node } from "diagrams-js";

// Create a diagram
const diagram = Diagram("My First Diagram", {
  // Diagram options
  direction: "TB", // Top to Bottom
});

// Add nodes
const web = diagram.add(Node("Web Server"));
const app = diagram.add(Node("App Server"));
const db = diagram.add(Node("Database"));

// Connect them
web.to(app).to(db);

// Render to SVG
const svg = await diagram.render();

// Clean up
```

![Basic Diagram](/examples/quickstart-basic.svg)

## Using Cloud Providers[​](#using-cloud-providers "Direct link to Using Cloud Providers")

Import nodes from cloud providers to get automatic icons:

```
import { Diagram } from "diagrams-js";
import { EC2, Lambda } from "diagrams-js/aws/compute";
import { RDS } from "diagrams-js/aws/database";
import { S3 } from "diagrams-js/aws/storage";
import { ALB } from "diagrams-js/aws/network";

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

// Create nodes with icons
const lb = diagram.add(ALB("Load Balancer"));
const web = diagram.add(EC2("Web Server"));
const api = diagram.add(Lambda("API"));
const db = diagram.add(RDS("Database"));
const storage = diagram.add(S3("Storage"));

// Connect them
lb.to(web).to(api);
api.to([db, storage]);

// Render to SVG
const svg = await diagram.render();
```

![AWS Architecture Example](/examples/quickstart-cloud.svg)

## Browser Integration[​](#browser-integration "Direct link to Browser Integration")

Display the diagram directly in the browser:

```
<div id="diagram"></div>

<script type="module">
  import { Diagram } from "diagrams-js";
  import { EC2 } from "diagrams-js/aws/compute";

  const diagram = Diagram("Simple", { direction: "TB" });
  const server = diagram.add(EC2("Server"));

  const svg = await diagram.render();
  document.getElementById("diagram").innerHTML = svg;
</script>
```

## Node.js Usage[​](#nodejs-usage "Direct link to Node.js Usage")

Save diagrams to files in Node.js:

```
import { Diagram } from "diagrams-js";
import { EC2 } from "diagrams-js/aws/compute";
import { writeFileSync } from "fs";

const diagram = Diagram("My Diagram");
diagram.add(EC2("Server"));

const svg = await diagram.render();
writeFileSync("diagram.svg", svg);
```

## Key Concepts[​](#key-concepts "Direct link to Key Concepts")

1. **Diagram**: The container for your architecture diagram
2. **Nodes**: Components like servers, databases, and services
3. **Connections**: Relationships between nodes using `.to()`, `.from()`, and `.with()`
4. **Providers**: Cloud service categories (AWS, Azure, GCP, etc.)

## Next Steps[​](#next-steps "Direct link to Next Steps")

* Learn about [Diagrams](/docs/guides/diagram) in detail
* Explore [Nodes](/docs/guides/node) and connections
* See [all providers](/docs/guides/providers) and their services
* Check out [complete examples](/docs/getting-started/examples)


---

# API Reference

## Core Functions[​](#core-functions "Direct link to Core Functions")

### Diagram(name, options?)[​](#diagramname-options "Direct link to Diagram(name, options?)")

Creates a new diagram.

**Parameters:**

* `name` (string): The diagram name (used for labeling and default filename)
* `options` (DiagramOptions, optional): Configuration options

**Returns:** Diagram instance

```
const diagram = Diagram("My Diagram", {
  direction: "LR",
  theme: "neutral",
});
```

**DiagramOptions:**

| Property     | Type                                          | Default             | Description                        |
| ------------ | --------------------------------------------- | ------------------- | ---------------------------------- |
| `name`       | string                                        | Same as first param | Diagram display name               |
| `filename`   | string                                        | Lowercase name      | Output filename                    |
| `direction`  | "TB" \| "BT" \| "LR" \| "RL"                  | "LR"                | Layout direction                   |
| `curvestyle` | "ortho" \| "curved" \| "spline" \| "polyline" | "ortho"             | Edge curve style                   |
| `theme`      | ThemeName                                     | "neutral"           | Color theme                        |
| `autolabel`  | boolean                                       | false               | Auto-prefix labels with class name |
| `strict`     | boolean                                       | false               | Use strict graph mode              |
| `graphAttr`  | Record\<string, string>                       |                     | Custom graph attributes            |
| `nodeAttr`   | Record\<string, string>                       |                     | Custom node attributes             |
| `edgeAttr`   | Record\<string, string>                       |                     | Custom edge attributes             |

**Methods:**

#### diagram.add(node)[​](#diagramaddnode "Direct link to diagram.add(node)")

Add a node to the diagram.

```
const server = diagram.add(EC2("Web Server"));
```

#### diagram.cluster(label)[​](#diagramclusterlabel "Direct link to diagram.cluster(label)")

Create a cluster (subgraph) for grouping nodes.

```
const cluster = diagram.cluster("Services");
const node = cluster.add(EC2("web"));
```

#### diagram.render(options?)[​](#diagramrenderoptions "Direct link to diagram.render(options?)")

Render the diagram to a string or binary format.

```
// SVG (default)
const svg = await diagram.render();

// PNG
const png = await diagram.render({ format: "png" });

// DOT
const dot = await diagram.render({ format: "dot" });

// As data URL (for direct use in browsers)
const dataUrl = await diagram.render({ dataUrl: true });
// Returns: data:image/svg+xml;base64,PHN2Zy4uLg==

// PNG as data URL
const pngDataUrl = await diagram.render({ format: "png", dataUrl: true });
// Returns: data:image/png;base64,iVBORw0KGgo...
```

**RenderOptions:**

| Property      | Type                             | Default | Description             |
| ------------- | -------------------------------- | ------- | ----------------------- |
| `format`      | "svg" \| "png" \| "jpg" \| "dot" | "svg"   | Output format           |
| `width`       | number                           | Auto    | Output width (PNG/JPG)  |
| `height`      | number                           | Auto    | Output height (PNG/JPG) |
| `scale`       | number                           | 2       | Scale factor (PNG/JPG)  |
| `injectIcons` | boolean                          | true    | Auto-inject node icons  |
| `dataUrl`     | boolean                          | false   | Return as data URL      |

#### diagram.save(filepath?)[​](#diagramsavefilepath "Direct link to diagram.save(filepath?)")

Save the diagram to a file.

```
await diagram.save("diagram.svg");
await diagram.save("diagram.png");
```

### Node(label, options?)[​](#nodelabel-options "Direct link to Node(label, options?)")

Creates a generic node. Usually you use provider-specific node functions instead.

```
import { Node } from "diagrams-js";

const node = diagram.add(Node("My Node"));
```

**Node Methods:**

#### node.to(target)[​](#nodetotarget "Direct link to node.to(target)")

Create a forward connection (left to right).

```
web.to(api);
web.to([api1, api2]); // Multiple targets
```

#### node.from(source)[​](#nodefromsource "Direct link to node.from(source)")

Create a reverse connection (right to left).

```
db.from(api);
db.from([api1, api2]); // Multiple sources
```

#### node.with(target)[​](#nodewithtarget "Direct link to node.with(target)")

Create an undirected connection (no arrows).

```
primary.with(replica);
```

### Edge(options?)[​](#edgeoptions "Direct link to Edge(options?)")

Creates an edge with custom properties.

```
import { Edge } from "diagrams-js";

// Simple edge
web.to(Edge({ color: "red" }), db);

// With multiple properties
web.to(
  Edge({
    label: "data",
    color: "blue",
    style: "dashed",
  }),
  db,
);
```

**EdgeOptions:**

| Property        | Type    | Description                              |
| --------------- | ------- | ---------------------------------------- |
| `label`         | string  | Edge label text                          |
| `color`         | string  | Edge color                               |
| `style`         | string  | Line style (solid, dashed, dotted, bold) |
| `forward`       | boolean | Show forward arrow                       |
| `reverse`       | boolean | Show reverse arrow                       |
| `[key: string]` | any     | Any Graphviz edge attribute              |

### Custom(label, iconUrl, options?)[​](#customlabel-iconurl-options "Direct link to Custom(label, iconUrl, options?)")

Creates a node with a custom icon.

```
import { Custom } from "diagrams-js";

// From URL
const node = diagram.add(Custom("Service", "https://example.com/icon.png"));

// From data URL
const node2 = diagram.add(Custom("Local", "data:image/png;base64,..."));
```

**Parameters:**

* `label` (string): Node label
* `iconUrl` (string): Icon URL or data URL
* `options` (object, optional): Additional node options

## Provider Imports[​](#provider-imports "Direct link to Provider Imports")

### AWS[​](#aws "Direct link to AWS")

```
import { EC2, Lambda, ECS } from "diagrams-js/aws/compute";
import { RDS, DynamoDB } from "diagrams-js/aws/database";
import { S3 } from "diagrams-js/aws/storage";
import { ALB, Route53 } from "diagrams-js/aws/network";
```

### Azure[​](#azure "Direct link to Azure")

```
import { VM } from "diagrams-js/azure/compute";
import { SQLDatabase } from "diagrams-js/azure/databases";
```

### GCP[​](#gcp "Direct link to GCP")

```
import { GCE, GKE } from "diagrams-js/gcp/compute";
import { CloudSQL } from "diagrams-js/gcp/database";
import { CloudStorage } from "diagrams-js/gcp/storage";
```

### Kubernetes[​](#kubernetes "Direct link to Kubernetes")

```
import { Pod, Deployment } from "diagrams-js/k8s/compute";
import { Service, Ingress } from "diagrams-js/k8s/network";
```

See [Providers](/docs/guides/providers) for complete list.

## Utility Functions[​](#utility-functions "Direct link to Utility Functions")

### setIconBaseDir(dir)[​](#seticonbasedirdir "Direct link to setIconBaseDir(dir)")

Set the base directory for loading icons in Node.js.

```
import { setIconBaseDir } from "diagrams-js";

setIconBaseDir("./icons");
```

### getIconBaseDir()[​](#geticonbasedir "Direct link to getIconBaseDir()")

Get the current icon base directory.

```
import { getIconBaseDir } from "diagrams-js";

const dir = getIconBaseDir();
```

## Type Exports[​](#type-exports "Direct link to Type Exports")

```
import type { DiagramOptions, EdgeOptions, NodeOptions, ThemeName, ThemeConfig } from "diagrams-js";
```

## Complete Example[​](#complete-example "Direct link to Complete Example")

```
import { Diagram, Edge, Custom, type DiagramOptions } from "diagrams-js";
import { EC2 } from "diagrams-js/aws/compute";
import { RDS } from "diagrams-js/aws/database";

const options: DiagramOptions = {
  direction: "TB",
  theme: "pastel",
  graphAttr: {
    fontsize: "20",
  },
};

const diagram = Diagram("Architecture", options);

const web = diagram.add(EC2("Web"));
const db = diagram.add(RDS("DB"));
const cache = diagram.add(Custom("Cache", "https://example.com/redis.png"));

web.to(Edge({ color: "blue" }), db);
web.to(Edge({ style: "dashed" }), cache);

// Render as SVG string
const svg = await diagram.render();

// Or render as data URL for direct use
const dataUrl = await diagram.render({ dataUrl: true });

// Display in browser
const img = document.createElement("img");
img.src = dataUrl;
document.body.appendChild(img);

await diagram.save("architecture.svg");
```


---

# CLI

Use diagrams-js from the command line with `@diagrams-js/cli`. Render diagrams, import/export with plugins, generate diffs, scaffold new files, and watch for changes.

## Installation[​](#installation "Direct link to Installation")

Install globally with `npm`:

```
npm install -g @diagrams-js/cli

# then run `diagrams`
diagrams render diagram.ts
```

Alternatively, install locally in your project:

```
npm install @diagrams-js/cli

# then run `npx diagrams`
npx diagrams render diagram.ts
```

Or use directly with `npx`:

```
npx @diagrams-js/cli render diagram.ts
```

## Commands[​](#commands "Direct link to Commands")

### `render`[​](#render "Direct link to render")

Render a diagram file to SVG, PNG, JPG, DOT, or JSON. Also supports importing from external formats (Docker Compose, Kubernetes, etc.) via plugins when given `.yaml` or `.yml` files. Can also read from stdin or inline data.

Given these examples:

diagram.ts

The diagram must be the default export:

```
import { Diagram } from "diagrams-js";
import { EC2 } from "diagrams-js/aws/compute";
import { RDS } from "diagrams-js/aws/database";
import { S3 } from "diagrams-js/aws/storage";

const diagram = Diagram("My Architecture");

const web = diagram.add(EC2("Web Server"));
const db = diagram.add(RDS("Database"));
const storage = diagram.add(S3("Storage"));

web.to(db);
web.to(storage);

// the diagram must be the default export
export default diagram;
```

diagram.json

```
{
  "nodes": [
    {
      "id": "moq10984_mtpsupb74",
      "label": "Web Server",
      "provider": "aws",
      "type": "compute",
      "resource": "EC2"
    },
    {
      "id": "moq10984_f5m7biyus",
      "label": "Database",
      "provider": "aws",
      "type": "database",
      "resource": "RDS"
    },
    {
      "id": "moq10984_2ushtc3hs",
      "label": "Storage",
      "provider": "aws",
      "type": "storage",
      "resource": "SimpleStorageServiceS3"
    }
  ],
  "name": "My Architecture",
  "edges": [
    {
      "from": "moq10984_mtpsupb74",
      "to": "moq10984_f5m7biyus"
    },
    {
      "from": "moq10984_mtpsupb74",
      "to": "moq10984_2ushtc3hs"
    }
  ]
}
```

```
# Render diagram source to SVG (default: <input-file-name>.svg)
diagrams render diagram.ts # creates diagram.svg

# Also supports JSON
diagrams render diagram.json

# Render to PNG
diagrams render diagram.ts -o diagram.png

# Render with theme and direction
diagrams render diagram.ts -f svg -t dark -d LR -o out.svg

# Render to JSON
diagrams render diagram.ts -f json

# Import Docker Compose and render to SVG
diagrams render docker-compose.yml

# Import Kubernetes manifest and render to PNG
diagrams render k8s-deployment.yaml -o architecture.png

# Output to stdout instead of file
diagrams render diagram.ts --stdout

# Write to file AND output to stdout
diagrams render diagram.ts -o out.svg --stdout

# Render from stdin (pipe JSON or SVG)
cat diagram.json | diagrams render - -o out.svg
```

**Supported input sources:**

* File: `.ts`, `.js`, `.mjs`, `.json`, `.svg`, `.yaml`, `.yml`
* Stdin: pass `-` as the file argument

**Supported output formats:** `svg`, `png`, `jpg`, `dot`, `json`

**Options:**

| Option                  | Description                                                     |
| ----------------------- | --------------------------------------------------------------- |
| `-o, --output <path>`   | Output file path (default: same name as input file with `.svg`) |
| `--stdout`              | Output to stdout (in addition to `--output` if both are set)    |
| `-f, --format <format>` | Output format: `svg`, `png`, `jpg`, `dot`, `json`               |
| `-p, --plugin <name>`   | Plugin to use for importing (auto-detected)                     |
| `-t, --theme <theme>`   | Color theme                                                     |
| `-d, --direction <dir>` | Layout direction: `TB`, `BT`, `LR`, `RL`                        |
| `--curve-style <style>` | Edge style: `ortho`, `curved`, `spline`, `polyline`             |
| `--width <px>`          | Output width for PNG/JPG                                        |
| `--height <px>`         | Output height for PNG/JPG                                       |
| `--scale <n>`           | Scale factor for PNG/JPG                                        |
| `--data-url`            | Output as data URL                                              |
| `--no-embed-data`       | Disable embedding diagram data in SVG                           |

Plugins are auto-detected from file content for `.yaml`/`.yml` files:

* **docker-compose** — files with `services:`
* **kubernetes** — files with `apiVersion:` and `kind:`

### `export`[​](#export "Direct link to export")

Export a diagram to an external format. Supports file and stdin input.

```
# Export to Docker Compose (default: same-name.yml)
diagrams export diagram.json -f docker-compose

# Export to Kubernetes with explicit output
diagrams export diagram.ts -f kubernetes -o manifest.yaml

# Export from stdin
cat diagram.json | diagrams export - -f docker-compose

# Export to stdout
diagrams export diagram.json -f docker-compose --stdout

# Export to file AND stdout
diagrams export diagram.json -f docker-compose -o compose.yml --stdout
```

**Options:**

| Option                  | Description                                                  |
| ----------------------- | ------------------------------------------------------------ |
| `-f, --format <format>` | Export format (required)                                     |
| `-o, --output <path>`   | Output file path (default: same name with format extension)  |
| `--stdout`              | Output to stdout (in addition to `--output` if both are set) |
| `-p, --plugin <name>`   | Plugin to use (defaults to format name)                      |

### `diff`[​](#diff "Direct link to diff")

Generate visual diffs of diagrams in git workflows.

```
# Diff a file against HEAD (default: diagram-diff.html)
diagrams diff show HEAD diagram.ts

# Diff with explicit output
diagrams diff show HEAD diagram.ts -o diff.html

# Diff to stdout
diagrams diff show HEAD diagram.ts --stdout

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

# List changed diagram files
diagrams diff list main...feature

# Batch diff all changed files
diagrams diff batch main...feature -o ./diffs
```

**Diff show options:**

| Option                        | Description                                        |
| ----------------------------- | -------------------------------------------------- |
| `-o, --output <path>`         | Output file path (default: `<filename>-diff.html`) |
| `--stdout`                    | Output to stdout (in addition to `--output`)       |
| `-f, --format <format>`       | Diff format: `html` or `svg` (default: html)       |
| `-t, --theme <theme>`         | Theme: `light` or `dark` (default: light)          |
| `-l, --layout <layout>`       | Layout: `side-by-side` or `stacked`                |
| `-u, --show-unchanged <mode>` | `show`, `dim`, or `hide`                           |
| `--ignore-position`           | Ignore position changes (default: true)            |
| `--ignore-metadata`           | Ignore metadata changes                            |
| `-D, --directory <path>`      | Working directory for git commands                 |

### `init`[​](#init "Direct link to init")

Scaffold a new diagram file.

```
# Create a basic diagram
diagrams init "My Architecture"

# Create with AWS template
diagrams init "AWS Stack" -t aws -o aws.ts

# Create with Kubernetes template
diagrams init "K8s Cluster" -t k8s -o k8s.ts
```

**Templates:** `basic`, `aws`, `k8s`

**Options:**

| Option                      | Description                            |
| --------------------------- | -------------------------------------- |
| `-o, --output <path>`       | Output file path (default: diagram.ts) |
| `-t, --template <template>` | Template name (default: basic)         |

### `watch`[​](#watch "Direct link to watch")

Watch a diagram file and re-render on changes.

```
# Watch and render to SVG (default: same-name.svg)
diagrams watch diagram.ts

# Watch with custom output
diagrams watch diagram.ts -o out.svg

# Watch with PNG output
diagrams watch diagram.ts -f png --scale 2 -o out.png
```

**Options:** Same as `render`

### `plugins`[​](#plugins "Direct link to plugins")

Discover and manage plugins.

```
# List installed plugins
diagrams plugins list

# Show plugin info
diagrams plugins info docker-compose
```

Plugins are auto-discovered from `node_modules`:

* `@diagrams-js/plugin-*` (scoped)
* `diagrams-js-plugin-*` (unscoped)

## Configuration[​](#configuration "Direct link to Configuration")

Create a `.diagramsrc.json` file in your project root:

```
{
  "format": "svg",
  "theme": "light",
  "direction": "TB",
  "curveStyle": "ortho",
  "scale": 2,
  "plugins": ["docker-compose", "kubernetes"],
  "diff": {
    "layout": "side-by-side",
    "showUnchanged": "show",
    "ignorePosition": true
  }
}
```

CLI options override config file values.

## See Also[​](#see-also "Direct link to See Also")

* [Diagram Diff](/docs/guides/diagram-diff) — Visual diff for diagrams
* [Plugins](/docs/plugins/overview) — Plugin system overview


---

# Clusters

Clusters allow you to group related nodes together visually.

## Creating a Cluster[​](#creating-a-cluster "Direct link to Creating a Cluster")

```
import { Diagram } from "diagrams-js";
import { ECS } from "diagrams-js/aws/compute";

const diagram = Diagram("Clustered Services");

const cluster = diagram.cluster("Services");
const web1 = cluster.add(ECS("web1"));
const web2 = cluster.add(ECS("web2"));
```

## Nested Clusters[​](#nested-clusters "Direct link to Nested Clusters")

```
const outer = diagram.cluster("Production");
const inner = outer.cluster("Services");
const service = inner.add(ECS("API"));
```

## Cluster with Connections[​](#cluster-with-connections "Direct link to Cluster with Connections")

```
const frontend = diagram.cluster("Frontend");
const backend = diagram.cluster("Backend");

const web = frontend.add(ECS("Web"));
const api = backend.add(ECS("API"));

web.to(api);
```

## Cluster Options[​](#cluster-options "Direct link to Cluster Options")

Clusters support CSS classes and data attributes for SVG DOM manipulation, as well as custom Graphviz attributes:

```
const cluster = diagram.cluster("VPC", {
  className: "production",
  dataAttrs: { region: "us-east-1", az: "a" },
});
```

These are injected into the rendered SVG:

```
<g class="cluster production" data-cluster-label="VPC" data-region="us-east-1" data-az="a"> ... </g>
```

Nested clusters also support options:

```
const outer = diagram.cluster("Production", { className: "prod-env" });
const inner = outer.cluster("Web Tier", { className: "web-tier" });
```

## Full Example[​](#full-example "Direct link to Full Example")

```
import { Diagram } from "diagrams-js";
import { ECS } from "diagrams-js/aws/compute";
import { RDS } from "diagrams-js/aws/database";
import { ALB } from "diagrams-js/aws/network";

const diagram = Diagram("Full Architecture");

const lb = diagram.add(ALB("Load Balancer"));

const webCluster = diagram.cluster("Web Tier", {
  className: "web-tier",
  dataAttrs: { tier: "web" },
});
const web1 = webCluster.add(ECS("web1"));
const web2 = webCluster.add(ECS("web2"));

const dbCluster = diagram.cluster("Database Tier", {
  className: "db-tier",
  dataAttrs: { tier: "db" },
});
const primary = dbCluster.add(RDS("Primary"));
const replica = dbCluster.add(RDS("Replica"));

lb.to([web1, web2]);
web1.to(primary);
web2.to(primary);
primary.with(replica);

const svg = await diagram.render();

// Query cluster elements in browser
const webTierEl = webCluster.getElement();
webTierEl?.addEventListener("click", () => {
  console.log("Web tier clicked!");
});
```


---

# Custom Nodes

Use the `Custom` function to create nodes with your own icons from URLs, local files, or data URLs.

## From Remote URL[​](#from-remote-url "Direct link to From Remote URL")

```
import { Diagram, Custom } from "diagrams-js";

const diagram = Diagram("Custom Icons");

const service = diagram.add(Custom("My Service", "https://example.com/icon.png"));
```

## Using Iconify[​](#using-iconify "Direct link to Using Iconify")

The `Iconify` function provides easy access to more than 200,000 icons from the [Iconify](https://iconify.design/) icon sets.

```
import { Diagram, Iconify } from "diagrams-js";

const diagram = Diagram("Iconify Example");

// Material Design icons
const home = diagram.add(Iconify("Home", "mdi:home"));
const settings = diagram.add(Iconify("Settings", "mdi:cog"));

// Technology logos
const aws = diagram.add(Iconify("AWS", "logos:aws"));
const docker = diagram.add(Iconify("Docker", "logos:docker"));

home.to(settings).to(aws).to(docker);
```

Browse available icons at [icon-sets.iconify.design](https://icon-sets.iconify.design/).

The `Iconify` function is a simple wrapper around `Custom`:

```
const Iconify = (label, iconName) => Custom(label, `https://api.iconify.design/${iconName}.svg`);
```

## From Data URL[​](#from-data-url "Direct link to From Data URL")

```
const iconData = "data:image/png;base64,iVBORw0KGgo...";
const node = diagram.add(Custom("Embedded", iconData));
```

## With Clusters[​](#with-clusters "Direct link to With Clusters")

```
const cluster = diagram.cluster("External Services");

const openstack = cluster.add(Custom("OpenStack", "https://example.com/openstack.png"));

const elastic = cluster.add(Custom("Elastic", "https://example.com/elastic.png"));

openstack.to(elastic);
```

## Supported Formats[​](#supported-formats "Direct link to Supported Formats")

* PNG
* JPEG/JPG
* GIF
* SVG
* WebP

## Notes[​](#notes "Direct link to Notes")

* In browsers: Icons are fetched from URLs
* In Node.js: Icons can be loaded from local files or URLs
* Icons are automatically converted to data URLs for embedding


---

# Diagrams

`Diagram` is the primary object representing a diagram.

## Basic Usage[​](#basic-usage "Direct link to Basic Usage")

`Diagram` represents a global diagram context. You create a diagram by calling the `Diagram` function. The first parameter will be used to generate the output filename.

```
import { Diagram } from "diagrams-js";
import { EC2 } from "diagrams-js/aws/compute";

const diagram = Diagram("Simple Diagram");
diagram.add(EC2("web"));

const svg = await diagram.render();
```

This generates an SVG diagram with a single `EC2` node.

## Options[​](#options "Direct link to Options")

### Direction[​](#direction "Direct link to Direction")

Control the layout direction of the diagram:

```
const diagram = Diagram("My Diagram", {
  direction: "LR", // Left to Right (default)
  // direction: "TB" // Top to Bottom
  // direction: "BT" // Bottom to Top
  // direction: "RL" // Right to Left
});
```

### Curve Style[​](#curve-style "Direct link to Curve Style")

Control how edges are drawn:

```
const diagram = Diagram("My Diagram", {
  curvestyle: "ortho", // Orthogonal lines (default)
  // curvestyle: "curved"  // Curved lines
  // curvestyle: "spline"  // Spline curves
  // curvestyle: "polyline" // Polyline
});
```

See [Graphviz splines documentation](https://graphviz.org/docs/attrs/splines/) for more details.

### Theme[​](#theme "Direct link to Theme")

Choose a color theme for clusters:

```
const diagram = Diagram("My Diagram", {
  theme: "pastel", // Default
  // theme: "neutral"
  // theme: "blues"
  // theme: "greens"
  // theme: "orange"
});
```

### Filename[​](#filename "Direct link to Filename")

Specify a custom filename for saving:

```
const diagram = Diagram("My Diagram", {
  filename: "my_custom_name", // Will save as my_custom_name.svg
});
```

### Custom Attributes[​](#custom-attributes "Direct link to Custom Attributes")

Pass custom Graphviz attributes:

```
const diagram = Diagram("My Diagram", {
  graphAttr: {
    fontsize: "15",
    bgcolor: "transparent",
  },
  nodeAttr: {
    style: "filled",
  },
  edgeAttr: {
    color: "red",
    style: "dashed",
  },
});
```

See [Graphviz attributes reference](https://graphviz.org/doc/info/attrs.html) for available options including custom attributes for [graphs](https://graphviz.org/docs/graph/), [nodes](https://graphviz.org/docs/nodes/), and [edges](https://graphviz.org/docs/edges/).

## Methods[​](#methods "Direct link to Methods")

### add(node)[​](#addnode "Direct link to add(node)")

Add a node to the diagram:

```
const server = diagram.add(EC2("Web Server"));
```

### cluster(label)[​](#clusterlabel "Direct link to cluster(label)")

Create a cluster (group) of nodes:

```
const cluster = diagram.cluster("Services");
const web = cluster.add(EC2("Web"));
```

### render(options?)[​](#renderoptions "Direct link to render(options?)")

Render the diagram to SVG or other formats:

```
// Render as SVG (default)
const svg = await diagram.render();

// Render as PNG
const png = await diagram.render({ format: "png" });

// Render as DOT
const dot = await diagram.render({ format: "dot" });
```

### save(filepath?)[​](#savefilepath "Direct link to save(filepath?)")

Save the diagram to a file. The behavior differs based on the environment:

**Node.js**: Writes the file to disk using the filesystem.

**Browsers**: Triggers a file download to the user's device.

```
// Auto-detects format from extension
await diagram.save("diagram.svg");
await diagram.save("diagram.png");

// Or use the default filename
await diagram.save();
```

You can also specify render options:

```
// Save as PNG with specific dimensions
await diagram.save("diagram.png", {
  format: "png",
  width: 1200,
  height: 800,
});
```

### toJSON()[​](#tojson "Direct link to toJSON()")

Serialize the diagram to a JSON object:

```
const diagram = Diagram("My Architecture");
diagram.add(EC2("Web Server"));
diagram.add(RDS("Database"));

// Export to JSON
const json = diagram.toJSON();
// Returns: { name: "My Architecture", nodes: [...], edges: [...] }
```

The JSON format includes:

* `name`, `filename`, `direction`, `curvestyle`, `theme` - diagram properties
* `nodes` - array of nodes with `id`, `label`, `provider`, `type`, `resource`
* `edges` - array of connections with `from`, `to`, `label`
* `clusters` - nested groups of nodes
* `graphAttr`, `nodeAttr`, `edgeAttr` - Graphviz attributes

### Diagram.fromJSON() (Static)[​](#diagramfromjson-static "Direct link to Diagram.fromJSON() (Static)")

Create a diagram from a JSON object or string:

```
import { Diagram } from "diagrams-js";

const json = {
  name: "My Architecture",
  nodes: [
    {
      id: "web",
      label: "Web Server",
      provider: "aws",
      type: "compute",
      resource: "EC2",
    },
    {
      id: "db",
      label: "Database",
      provider: "aws",
      type: "database",
      resource: "RDS",
    },
  ],
  edges: [{ from: "web", to: "db", label: "SQL" }],
};

// Import from JSON
const diagram = await Diagram.fromJSON(json);
const svg = await diagram.render();
```

## Complete Example[​](#complete-example "Direct link to Complete Example")

```
import { Diagram } from "diagrams-js";
import { EC2, Lambda } from "diagrams-js/aws/compute";
import { RDS } from "diagrams-js/aws/database";
import { S3 } from "diagrams-js/aws/storage";

const diagram = Diagram("Web Architecture", {
  direction: "TB",
  theme: "pastel",
  graphAttr: {
    fontsize: "20",
  },
});

const web = diagram.add(EC2("Web Server"));
const api = diagram.add(Lambda("API"));
const db = diagram.add(RDS("Database"));
const storage = diagram.add(S3("Storage"));

web.to(api).to(db);
api.to(storage);

const svg = await diagram.render();
await diagram.save("web-architecture.svg");
```

## Browser Integration[​](#browser-integration "Direct link to Browser Integration")

In browsers, you can display the diagram directly:

```
const svg = await diagram.render();
document.getElementById("diagram-container").innerHTML = svg;
```


---

# Diagram Diff

Compare two versions of a diagram visually to see what changed. The diff feature highlights **added**, **removed**, and **modified** elements with color-coded overlays in a side-by-side view.

![Diagram Diff](/assets/images/diff-45e4e1b905fd3ff1fcab70e1a53f2846.jpg)

## Overview[​](#overview "Direct link to Overview")

When you version control your diagram code, you can see text diffs. But for architecture diagrams, a visual diff is much more useful:

* **Code reviews**: See exactly what infrastructure changed in a PR
* **Documentation**: Show evolution of system architecture
* **Auditing**: Track what was added or removed between deployments

## Quick Start[​](#quick-start "Direct link to Quick Start")

```
import { Diagram, computeDiff, renderDiff } from "diagrams-js";
import { writeFileSync } from "fs";

// Load two versions of your diagram
const before = JSON.parse(await fs.readFile("arch-v1.json", "utf8"));
const after = JSON.parse(await fs.readFile("arch-v2.json", "utf8"));

// Compute the diff
const diff = computeDiff(before, after);
console.log(diff.summary);
// { added: 2, removed: 1, modified: 3, unchanged: 5 }

// Render visual diff as HTML
const html = await renderDiff(diff, before, after, { format: "html" });
await fs.writeFile("diff.html", html);
```

Or use the convenience static method:

```
const html = await Diagram.renderDiff(before, after, { format: "html" });
```

## Computing Diffs[​](#computing-diffs "Direct link to Computing Diffs")

The `computeDiff` function compares two diagrams and returns a detailed diff result:

```
import { computeDiff, type DiagramDiffResult } from "diagrams-js";

const diff: DiagramDiffResult = computeDiff(before, after);
```

### Diff Result Structure[​](#diff-result-structure "Direct link to Diff Result Structure")

```
{
  // Map of node diffs by node ID
  nodes: Map<string, NodeDiff>;

  // Map of edge diffs by composite key
  edges: Map<string, EdgeDiff>;

  // Cluster diffs (recursive)
  clusters: ClusterDiff[];

  // Summary counts
  summary: {
    added: number;
    removed: number;
    modified: number;
    unchanged: number;
  };

  // Diagram-level changes (name, theme, direction, etc.)
  meta: {
    name?: { before?: string; after?: string };
    theme?: { before?: string; after?: string };
    direction?: { before?: string; after?: string };
    // ...
  };
}
```

### Node Diff Types[​](#node-diff-types "Direct link to Node Diff Types")

Each node in the diff has a `kind` indicating what changed:

| Kind        | Description                   | Has Before | Has After |
| ----------- | ----------------------------- | ---------- | --------- |
| `added`     | New node in after version     | ❌         | ✅        |
| `removed`   | Node deleted in after version | ✅         | ❌        |
| `modified`  | Node properties changed       | ✅         | ✅        |
| `unchanged` | No changes                    | ✅         | ✅        |

```
const nodeDiff = diff.nodes.get("web-server");

if (nodeDiff?.kind === "modified") {
  console.log("Changes:", nodeDiff.changes);
  // ["label: \"Web\" → \"Web v2\"", "type: \"EC2\" → \"Lambda\""]
}
```

### Node Matching[​](#node-matching "Direct link to Node Matching")

Nodes are matched using a three-phase approach:

1. **Fingerprint Matching**: Nodes with identical `(label, provider, type, resource)` are matched directly
2. **Label Fingerprint + Edge Connectivity**: Unmatched nodes with same `(provider, type, resource)` are matched using edge connectivity to disambiguate multiple candidates
3. **Simple Label Fingerprint**: Remaining unmatched nodes are matched 1:1 by `(provider, type, resource)`

#### Label Change Detection[​](#label-change-detection "Direct link to Label Change Detection")

When nodes have the same `(provider, type, resource)` but different labels:

* **Same label** → `unchanged`
* **Different labels** → `modified` (label change)

This means if you rename a node (e.g., "worker1" → "worker1-prod") while keeping the same provider and type, it's detected as `modified` rather than `removed` + `added`.

**Note**: Nodes with completely different labels but same type are treated as separate nodes (removed + added), not modifications. The algorithm uses edge connectivity to determine if nodes should be paired.

## Rendering Diffs[​](#rendering-diffs "Direct link to Rendering Diffs")

The `renderDiff` function generates a visual representation:

```
const html = await renderDiff(diff, before, after, options);
```

### Output Formats[​](#output-formats "Direct link to Output Formats")

#### HTML (Recommended)[​](#html-recommended "Direct link to HTML (Recommended)")

Self-contained HTML page with:

* Side-by-side diagram panels
* Color-coded elements (green=added, red=removed, amber=modified)
* Summary header with change counts
* Legend
* Hover tooltips showing specific changes

```
const html = await renderDiff(diff, before, after, {
  format: "html",
  theme: "light", // or "dark"
  layout: "side-by-side", // or "stacked"
  showLegend: true,
  showSummary: true,
  hoverDetails: true,
});
```

#### SVG[​](#svg "Direct link to SVG")

Combined SVG with both diagrams:

```
const svg = await renderDiff(diff, before, after, {
  format: "svg",
  showLegend: true,
});
```

### Display Options[​](#display-options "Direct link to Display Options")

Control how unchanged elements appear:

```
// Show unchanged elements normally (default)
{
  showUnchanged: "show";
}

// Dim unchanged elements
{
  showUnchanged: "dim";
}

// Hide unchanged elements entirely
{
  showUnchanged: "hide";
}
```

## Diff Options[​](#diff-options "Direct link to Diff Options")

Customize the diff computation:

```
const diff = computeDiff(before, after, {
  // Ignore position/layout changes (default: true)
  ignore: { position: true },

  // Ignore all metadata changes
  ignore: { metadata: true },

  // Ignore specific metadata keys
  ignore: { metadata: ["cpu", "memory"] },

  // Ignore specific Graphviz attributes
  ignore: { attrs: ["color", "fillcolor"] },

  // Custom node matching function
  matchNodes: (a, b) => a.metadata?.resourceId === b.metadata?.resourceId,
});
```

## Complete Example[​](#complete-example "Direct link to Complete Example")

```
import { Diagram, computeDiff, renderDiff } from "diagrams-js";
import { EC2, Lambda } from "diagrams-js/aws/compute";
import { RDS } from "diagrams-js/aws/database";
import { S3 } from "diagrams-js/aws/storage";
import { writeFileSync } from "fs";

// Version 1: Traditional architecture
const v1 = Diagram("Architecture v1", { direction: "TB" });
const web1 = v1.add(EC2("Web Server"));
const db1 = v1.add(RDS("Database"));
web1.to(db1);

// Version 2: Serverless migration
const v2 = Diagram("Architecture v2", { direction: "TB" });
const web2 = v2.add(Lambda("API Handler")); // Changed from EC2
const db2 = v2.add(RDS("Database")); // Same
const storage = v2.add(S3("Assets")); // New
web2.to(db2);
web2.to(storage);

// Compute and render diff
const diff = computeDiff(v1.toJSON(), v2.toJSON());

console.log("Changes:", diff.summary);
// Changes: { added: 1, removed: 0, modified: 1, unchanged: 1 }

const html = await renderDiff(diff, v1.toJSON(), v2.toJSON(), {
  format: "html",
  theme: "light",
  showUnchanged: "show", // or "dim" to dim unchanged, "hide" to hide them
});

writeFileSync("architecture-diff.html", html);
```

The resulting HTML will show:

* **Green**: New S3 "Assets" node
* **Amber**: Changed EC2 → Lambda node
* **Dimmed**: Unchanged RDS node

## Git Integration with CLI[​](#git-integration-with-cli "Direct link to Git Integration with CLI")

Use the `diagrams` CLI for automatic diff generation in git workflows:

```
# Install globally
npm install -g @diagrams-js/cli

# Compare current file with HEAD
diagrams diff HEAD diagram.json -o diff.html

# Also compare SVG
diagrams diff HEAD diagram.svg -o diff.html

# Generate diff for PR
diagrams diff main...feature diagram.json -o diff.html

# Show in terminal (ASCII preview)
diagrams diff HEAD diagram.json --format terminal
```

### CLI Options[​](#cli-options "Direct link to CLI Options")

```
diagrams diff <ref> <file> [options]

Options:
  -o, --output <file>     Output file (default: <filename>-diff.html)
  -f, --format <format>   Output format: html, svg, json, terminal (default: html)
  -t, --theme <theme>     Theme: light, dark (default: light)
  -l, --layout <layout>   Layout: side-by-side, stacked (default: side-by-side)
  --show-unchanged        Show unchanged elements (default: true)
  --no-show-unchanged     Hide unchanged elements
  --ignore-position       Ignore position changes (default: true)
  --no-ignore-position    Include position changes
```

## Best Practices[​](#best-practices "Direct link to Best Practices")

1. **Export JSON for versioning**: Save `diagram.toJSON()` alongside your code for reproducible diffs:

   ```
   await diagram.save("architecture.json", { format: "json" });
   ```

2. **Ignore cosmetic changes**: Use `ignore` options to focus on meaningful changes:

   ```
   computeDiff(before, after, {
     ignore: { position: true, attrs: ["color"] },
   });
   ```

3. **Review metadata changes**: Infrastructure specs (CPU, memory) in metadata will be diffed by default. Review these in `nodeDiff.changes`.

## Troubleshooting[​](#troubleshooting "Direct link to Troubleshooting")

### Nodes showing as removed+added instead of modified[​](#nodes-showing-as-removedadded-instead-of-modified "Direct link to Nodes showing as removed+added instead of modified")

This is the expected behavior when:

* The node has a different `label` AND different edge connectivity
* The node has different `provider`, `type`, or `resource`

Nodes are only matched as `modified` when they share the same `(provider, type, resource)` and have matching edge connectivity patterns. If you rename a node and significantly change its connections, it will be treated as removed + added.

To force a match as modified, ensure the node keeps the same `provider`, `type`, `resource`, and similar edge connectivity.

### Edges not matching after node rename[​](#edges-not-matching-after-node-rename "Direct link to Edges not matching after node rename")

Edges are matched using resolved node IDs. If a node is detected as modified, edges connected to it should still match. If not, check that the fingerprint matching succeeded.

### Layout changes cluttering the diff[​](#layout-changes-cluttering-the-diff "Direct link to Layout changes cluttering the diff")

Set `ignore: { position: true }` (default) to ignore layout/position changes and focus on structural changes.

## API Reference[​](#api-reference "Direct link to API Reference")

### `computeDiff(before, after, opts?)`[​](#computediffbefore-after-opts "Direct link to computediffbefore-after-opts")

Computes the diff between two diagram versions.

**Parameters:**

* `before`: `DiagramJSON | Diagram` — Original diagram
* `after`: `DiagramJSON | Diagram` — Updated diagram
* `opts?`: `DiffOptions` — Diff computation options

**Returns:** `DiagramDiffResult`

### `renderDiff(diff, before, after, opts?)`[​](#renderdiffdiff-before-after-opts "Direct link to renderdiffdiff-before-after-opts")

Renders a visual diff.

**Parameters:**

* `diff`: `DiagramDiffResult` — Computed diff from `computeDiff()`
* `before`: `DiagramJSON | Diagram` — Original diagram
* `after`: `DiagramJSON | Diagram` — Updated diagram
* `opts?`: `RenderDiffOptions` — Rendering options

**Returns:** `Promise<string>` — HTML or SVG string

### `Diagram.diff(before, after, opts?)`[​](#diagramdiffbefore-after-opts "Direct link to diagramdiffbefore-after-opts")

Static convenience method equivalent to `computeDiff()`.

### `Diagram.renderDiff(before, after, opts?)`[​](#diagramrenderdiffbefore-after-opts "Direct link to diagramrenderdiffbefore-after-opts")

Static convenience method that computes and renders in one call.

## See Also[​](#see-also "Direct link to See Also")

* [JSON Serialization](/docs/guides/json) — Export diagrams to JSON for diffing
* [Rendering](/docs/guides/rendering) — General rendering options
* [Diagram](/docs/guides/diagram) — Creating and configuring diagrams


---

# Edges

`Edge` represents a connection between nodes with additional properties.

## Basic Usage[​](#basic-usage "Direct link to Basic Usage")

An edge object contains attributes like **label**, **color**, and **style**. These mirror the corresponding [Graphviz edge attributes](https://graphviz.org/docs/edges/).

```
import { Diagram, Edge } from "diagrams-js";
import { Nginx } from "diagrams-js/onprem/network";
import { Grafana, Prometheus } from "diagrams-js/onprem/monitoring";

const diagram = Diagram("Monitoring");

const metrics = diagram.add(Prometheus("metric"));
const grafana = diagram.add(Grafana("monitoring"));

// Create a colored, dashed edge
grafana.to(Edge({ color: "firebrick", style: "dashed" }), metrics);
```

## Edge Properties[​](#edge-properties "Direct link to Edge Properties")

### Label[​](#label "Direct link to Label")

Add text labels to edges:

```
aggregator.to(Edge({ label: "parse" }), kafka);
```

### Color[​](#color "Direct link to Color")

Set edge colors:

```
web.to(Edge({ color: "blue" }), api);
api.to(Edge({ color: "green" }), db);
```

### Style[​](#style "Direct link to Style")

Choose from various styles:

```
// Dashed line
primary.with(Edge({ style: "dashed" }), replica);

// Dotted line
primary.with(Edge({ style: "dotted" }), replica);

// Bold line
primary.with(Edge({ style: "bold" }), replica);

// Solid line (default)
primary.with(Edge({ style: "solid" }), replica);
```

See [Graphviz style attribute](https://graphviz.org/docs/attrs/style/) for more options.

### Direction[​](#direction "Direct link to Direction")

Control arrow direction:

```
// Forward arrow (default)
Edge({ forward: true });

// Reverse arrow
Edge({ reverse: true });

// Bidirectional
Edge({ forward: true, reverse: true });

// No arrows
Edge({}); // Neither forward nor reverse
```

## Combining Properties[​](#combining-properties "Direct link to Combining Properties")

Combine multiple properties:

```
import { Redis } from "diagrams-js/onprem/inmemory";

const diagram = Diagram("Database Cluster");

const primary = diagram.add(Redis("session"));
const replica = diagram.add(Redis("replica"));

// Colored, dashed connection
primary.with(Edge({ color: "brown", style: "dashed" }), replica);

// With label
replica.from(Edge({ label: "collect", color: "blue" }), metrics);
```

## Edge Chaining[​](#edge-chaining "Direct link to Edge Chaining")

Edges can be chained for complex connections:

```
aggregator.to(Edge({ label: "parse" }), kafka).to(Edge({ color: "black", style: "bold" }), spark);
```

## Multiple Targets with Edges[​](#multiple-targets-with-edges "Direct link to Multiple Targets with Edges")

Apply the same edge style to multiple connections:

```
const grpcsvc = [
  diagram.add(Server("grpc1")),
  diagram.add(Server("grpc2")),
  diagram.add(Server("grpc3")),
];

// All connections use brown color
grpcsvc.forEach((svc) => svc.to(Edge({ color: "brown" }), sessionPrimary));
```

## Advanced Example[​](#advanced-example "Direct link to Advanced Example")

```
import { Diagram, Edge } from "diagrams-js";
import { Spark } from "diagrams-js/onprem/analytics";
import { Server } from "diagrams-js/onprem/compute";
import { PostgreSQL } from "diagrams-js/onprem/database";
import { Redis } from "diagrams-js/onprem/inmemory";
import { Fluentd } from "diagrams-js/onprem/aggregator";
import { Grafana, Prometheus } from "diagrams-js/onprem/monitoring";
import { Nginx } from "diagrams-js/onprem/network";
import { Kafka } from "diagrams-js/onprem/queue";

const diagram = Diagram("Advanced Web Service with On-Premises (colored)");

const ingress = diagram.add(Nginx("ingress"));

const metrics = diagram.add(Prometheus("metric"));
const grafana = diagram.add(Grafana("monitoring"));

// Red dashed line from Grafana to Prometheus
grafana.to(Edge({ color: "firebrick", style: "dashed" }), metrics);

const serviceCluster = diagram.cluster("Service Cluster");
const grpcsvc = [
  serviceCluster.add(Server("grpc1")),
  serviceCluster.add(Server("grpc2")),
  serviceCluster.add(Server("grpc3")),
];

const sessionsCluster = diagram.cluster("Sessions HA");
const sessionPrimary = sessionsCluster.add(Redis("session"));
const sessionReplica = sessionsCluster.add(Redis("replica"));

// Brown dashed line for session replication
sessionPrimary.with(Edge({ color: "brown", style: "dashed" }), sessionReplica);

// Labelled edge from replica to metrics
sessionReplica.from(Edge({ label: "collect" }), metrics);

grpcsvc.forEach((svc) => svc.to(Edge({ color: "brown" }), sessionPrimary));

const dbCluster = diagram.cluster("Database HA");
const dbPrimary = dbCluster.add(PostgreSQL("users"));
const dbReplica = dbCluster.add(PostgreSQL("replica"));

// Brown dotted line for DB replication
dbPrimary.with(Edge({ color: "brown", style: "dotted" }), dbReplica);

// Labelled edge from replica to metrics
dbReplica.from(Edge({ label: "collect" }), metrics);
grpcsvc.forEach((svc) => svc.to(Edge({ color: "black" }), dbPrimary));

const aggregator = diagram.add(Fluentd("logging"));
const kafka = diagram.add(Kafka("stream"));
const spark = diagram.add(Spark("analytics"));

// Labelled and styled edges
aggregator.to(Edge({ label: "parse" }), kafka);
kafka.to(Edge({ color: "black", style: "bold" }), spark);

// Bidirectional edges with color
grpcsvc.forEach((svc) => {
  ingress.to(Edge({ color: "darkgreen", forward: true, reverse: true }), svc);
});
grpcsvc.forEach((svc) => svc.to(Edge({ color: "darkorange" }), aggregator));

const svg = await diagram.render();
```

## Custom CSS Classes and Data Attributes[​](#custom-css-classes-and-data-attributes "Direct link to Custom CSS Classes and Data Attributes")

Add CSS classes and data attributes to edges for DOM manipulation after rendering:

```
const edge = Edge({
  label: "HTTP",
  color: "red",
  className: "critical",
  dataAttrs: { latency: "50ms", protocol: "https" },
});

web.to(edge, db);
```

These are injected into the rendered SVG:

```
<g
  id="diagram_edge_0"
  class="edge critical"
  data-edge-from="web"
  data-edge-to="db"
  data-latency="50ms"
  data-protocol="https"
>
  ...
</g>
```

Query the edge element after rendering:

```
const svg = await diagram.render();
document.body.innerHTML = svg;

const el = edge.getElement();
el?.addEventListener("mouseenter", () => el.classList.add("hovered"));
```

## Custom Attributes[​](#custom-attributes "Direct link to Custom Attributes")

You can pass any Graphviz edge attribute:

```
Edge({
  label: "data",
  color: "red",
  style: "dashed",
  penwidth: "2", // Line thickness
  arrowhead: "vee", // Arrowhead style
  arrowsize: "1.5", // Arrow size
  minlen: "2", // Minimum edge length
});
```

See [Graphviz edge attributes](https://graphviz.org/docs/edges/) for the complete list.


---

# GitHub Action

Use diagrams-js in GitHub Actions to render, diff, and validate architecture diagrams in CI/CD pipelines.

## Usage[​](#usage "Direct link to Usage")

```
- uses: diagrams-js/action@v1
  with:
    command: render
    args: architecture.ts
    output: architecture.svg
```

## Inputs[​](#inputs "Direct link to Inputs")

| Input               | Description                                               | Required | Default           |
| ------------------- | --------------------------------------------------------- | -------- | ----------------- |
| `command`           | CLI command: `render`, `export`, `diff`                   | Yes      | `render`          |
| `args`              | Arguments for the command                                 | No       | `""`              |
| `format`            | Output format: `svg`, `png`, `jpg`, `dot`, `json`, `html` | No       | `svg`             |
| `output`            | Output file path                                          | No       | `""`              |
| `theme`             | Color theme                                               | No       | `""`              |
| `direction`         | Layout direction: `TB`, `BT`, `LR`, `RL`                  | No       | `""`              |
| `plugin`            | Plugin name for import/export                             | No       | `""`              |
| `comment-pr`        | Comment output on PR: `true` or `false`                   | No       | `false`           |
| `upload-artifact`   | Upload output as artifact: `true` or `false`              | No       | `true`            |
| `artifact-name`     | Artifact name                                             | No       | `diagrams-output` |
| `working-directory` | Working directory                                         | No       | `""`              |
| `node-version`      | Node.js version                                           | No       | `22`              |
| `cli-version`       | CLI version: `latest` or specific                         | No       | `latest`          |

## Outputs[​](#outputs "Direct link to Outputs")

| Output          | Description                   |
| --------------- | ----------------------------- |
| `output-path`   | Path to generated output file |
| `output-format` | Format of generated output    |

## Examples[​](#examples "Direct link to Examples")

### Render on push[​](#render-on-push "Direct link to Render on push")

Render diagrams when source files change:

```
name: Render Diagrams
on:
  push:
    branches: [main]
    paths:
      - "diagrams/**"
      - "**/*.diagram.ts"

jobs:
  render:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        diagram:
          - architecture.ts
          - infrastructure.ts
    steps:
      - uses: actions/checkout@v4

      - name: Render ${{ matrix.diagram }}
        uses: diagrams-js/action@v1
        with:
          command: render
          args: diagrams/${{ matrix.diagram }}
          output: output/${{ matrix.diagram }}.svg
          format: svg
          theme: light

      - name: Upload diagram
        uses: actions/upload-artifact@v4
        with:
          name: diagram-${{ matrix.diagram }}
          path: output/${{ matrix.diagram }}.svg
```

### Diff in PR[​](#diff-in-pr "Direct link to Diff in PR")

Generate visual diffs when diagram files change in a pull request:

```
name: Diagram Diff
on:
  pull_request:
    paths:
      - "**/*.ts"
      - "**/*.json"
      - "**/*.svg"

jobs:
  diff:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 0

      - uses: diagrams-js/action@v1
        with:
          command: diff
          args: show origin/${{ github.base_ref }} architecture.ts
          output: diff.html
          format: html
          comment-pr: true
```

### Validate diagrams[​](#validate-diagrams "Direct link to Validate diagrams")

Ensure all diagram files render successfully:

```
name: Validate Diagrams
on: [pull_request]

jobs:
  validate:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Find diagram files
        id: find
        run: |
          files=$(find . -name "*.ts" -o -name "*.json" | tr '\n' ' ')
          echo "files=$files" >> $GITHUB_OUTPUT

      - uses: diagrams-js/action@v1
        with:
          command: render
          args: ${{ steps.find.outputs.files }}
          format: svg
```

### Render from Docker Compose[​](#render-from-docker-compose "Direct link to Render from Docker Compose")

Render architecture diagrams from Docker Compose files (the `render` command auto-imports via plugins for `.yaml`/`.yml` files):

```
name: Docker Compose Architecture
on:
  push:
    paths:
      - "docker-compose.yml"
      - "docker-compose.yaml"

jobs:
  render:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - uses: diagrams-js/action@v1
        with:
          command: render
          args: docker-compose.yml
          output: architecture.svg
          plugin: docker-compose
          format: svg

      - uses: actions/upload-artifact@v4
        with:
          name: architecture
          path: architecture.svg
```

### Render from Kubernetes[​](#render-from-kubernetes "Direct link to Render from Kubernetes")

Render architecture diagrams from Kubernetes manifests (the `render` command auto-imports via plugins for `.yaml`/`.yml` files):

```
name: Kubernetes Architecture
on:
  push:
    paths:
      - "k8s/**"

jobs:
  render:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Find K8s manifests
        id: find
        run: |
          files=$(find k8s -name "*.yaml" -o -name "*.yml" | tr '\n' ' ')
          echo "files=$files" >> $GITHUB_OUTPUT

      - uses: diagrams-js/action@v1
        with:
          command: render
          args: ${{ steps.find.outputs.files }}
          output: k8s-architecture.svg
          plugin: kubernetes
          format: svg
```

## PR Comments[​](#pr-comments "Direct link to PR Comments")

Enable `comment-pr: true` to post diff output on pull requests:

```
- uses: diagrams-js/action@v1
  with:
    command: diff
    args: show HEAD diagram.ts
    output: diff.html
    format: html
    comment-pr: true
```

The action will comment with:

* **HTML diffs**: Link to download the artifact
* **SVG renders**: Inline SVG preview
* **Other formats**: File and format info

## Artifacts[​](#artifacts "Direct link to Artifacts")

Outputs are automatically uploaded as artifacts (disable with `upload-artifact: false`):

```
- uses: diagrams-js/action@v1
  with:
    command: render
    args: diagram.ts
    output: diagram.svg
    artifact-name: my-diagram
```

Download artifacts from the workflow run summary page.

## Version Pinning[​](#version-pinning "Direct link to Version Pinning")

Pin to a specific CLI version for reproducible builds:

```
- uses: diagrams-js/action@v1
  with:
    command: render
    args: diagram.ts
    cli-version: "0.1.0"
```

## Node.js Version[​](#nodejs-version "Direct link to Node.js Version")

Specify a Node.js version (default: 22):

```
- uses: diagrams-js/action@v1
  with:
    command: render
    args: diagram.ts
    node-version: "20"
```

## Working Directory[​](#working-directory "Direct link to Working Directory")

Run commands in a subdirectory:

```
- uses: diagrams-js/action@v1
  with:
    command: render
    args: diagram.ts
    working-directory: ./projects/my-app
```

## See Also[​](#see-also "Direct link to See Also")

* [CLI](/docs/guides/cli) — Command-line interface documentation
* [Diagram Diff](/docs/guides/diagram-diff) — Visual diff for diagrams


---

# JSON Serialization

diagrams-js supports serializing diagrams to JSON format and deserializing them back. This enables:

<!-- -->

* **Tool integration**: Exchange diagrams with other tools and systems
* **Dynamic diagrams**: Create diagrams from runtime data
* **Round-trip editing**: Save work in progress and restore later
* **Version control**: Track diagram changes with JSON diffs

## Export to JSON[​](#export-to-json "Direct link to Export to JSON")

Use `diagram.toJSON()` to export a diagram:

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

const diagram = Diagram("Web Architecture", {
  direction: "TB",
  theme: "pastel",
});

const web = diagram.add(EC2("Web Server"));
const db = diagram.add(RDS("Database"));
web.to(db);

// Export to JSON
const json = diagram.toJSON();
console.log(JSON.stringify(json, null, 2));
```

### JSON Structure[​](#json-structure "Direct link to JSON Structure")

The exported JSON follows this structure:

```
{
  "$schema": "https://diagrams-js.hatemhosny.dev/schema/diagram.json",
  "name": "Web Architecture",
  "direction": "TB",
  "theme": "pastel",
  "nodes": [
    {
      "id": "n1",
      "label": "Web Server",
      "provider": "aws",
      "type": "compute",
      "resource": "EC2"
    },
    {
      "id": "n2",
      "label": "Database",
      "provider": "aws",
      "type": "database",
      "resource": "RDS"
    }
  ],
  "edges": [
    {
      "from": "n1",
      "to": "n2",
      "label": "SQL"
    }
  ]
}
```

### Node Fields[​](#node-fields "Direct link to Node Fields")

Each node in the JSON has these fields:

* `id` (required): Unique identifier for the node
* `label`: Display label for the node
* `provider`: Cloud provider (e.g., "aws", "azure", "gcp")
* `type`: Service type (e.g., "compute", "database", "storage")
* `resource`: Resource within the service type (e.g., "EC2", "S3", "RDS")
* `iconUrl`: Custom icon URL (for Custom nodes)
* `attrs`: Additional Graphviz attributes

## Import from JSON[​](#import-from-json "Direct link to Import from JSON")

Use `Diagram.fromJSON()` to restore a diagram:

```
import { Diagram } from "diagrams-js";

const json = {
  name: "My Architecture",
  nodes: [
    {
      id: "web",
      label: "Web Server",
      provider: "aws",
      type: "compute",
      resource: "EC2",
    },
    {
      id: "db",
      label: "Database",
      provider: "aws",
      type: "database",
      resource: "RDS",
    },
  ],
  edges: [{ from: "web", to: "db", label: "SQL" }],
};

// Diagram.fromJSON() is an async static method
const diagram = await Diagram.fromJSON(json);
const svg = await diagram.render();
```

### Import from JSON String[​](#import-from-json-string "Direct link to Import from JSON String")

You can also pass a JSON string:

```
const jsonString = '{"name":"Test","nodes":[{"id":"n1","label":"Server"}]}';
const diagram = await Diagram.fromJSON(jsonString);
```

### Import with Options[​](#import-with-options "Direct link to Import with Options")

Explicitly pass provider modules as an option:

```
import { EC2, Lambda } from "diagrams-js/aws/compute";

const diagram = await Diagram.fromJSON(json, {
  providers: [{ EC2, Lambda }],
});
```

This is useful for:

* Allowing bundlers to include provider modules
* Overriding default providers
* Using custom node factories
* Testing with mock providers

## Complete Example: Infrastructure as Code[​](#complete-example-infrastructure-as-code "Direct link to Complete Example: Infrastructure as Code")

Generate diagrams from your infrastructure configuration:

```
import { Diagram } from "diagrams-js";

// Your infrastructure configuration
const infrastructure = {
  vpc: {
    subnets: [
      { name: "public", instances: ["web1", "web2"] },
      { name: "private", instances: ["db1"] },
    ],
  },
};

// Convert to diagram JSON
const diagramJSON = {
  name: "Infrastructure",
  direction: "TB",
  clusters: [
    {
      label: infrastructure.vpc.subnets[0].name,
      nodes: infrastructure.vpc.subnets[0].instances.map((name, i) => ({
        id: `web-${i}`,
        label: name,
        provider: "aws",
        type: "compute",
        resource: "EC2",
      })),
    },
  ],
};

const diagram = await Diagram.fromJSON(diagramJSON);
await diagram.save("infrastructure.svg");
```

## JSON Schema[​](#json-schema "Direct link to JSON Schema")

The JSON format follows a JSON Schema for validation:

```
import schema from "diagrams-js/diagram.schema.json";
```

Include the schema reference in your JSON files for IDE support:

```
{
  "$schema": "https://diagrams-js.hatemhosny.dev/schema/diagram.json",
  "name": "My Architecture",
  "nodes": [...]
}
```

## Supported Features[​](#supported-features "Direct link to Supported Features")

The JSON format supports all diagram features:

* **Nodes**: Provider nodes, custom nodes with icons
* **Edges**: Connections with labels, styles, and attributes
* **Clusters**: Nested groups of nodes
* **Diagram options**: Direction, theme, curve style, custom attributes

## Round-trip Conversion[​](#round-trip-conversion "Direct link to Round-trip Conversion")

You can export and re-import diagrams without losing information:

```
// Create original diagram
const original = Diagram("Test");
original.add(EC2("Server"));

// Export to JSON
const json = original.toJSON();

// Import back
const restored = await Diagram.fromJSON(json);

// Render - produces same output
const svg1 = await original.render();
const svg2 = await restored.render();
// svg1 === svg2
```

## SVG Serialization (Alternative)[​](#svg-serialization-alternative "Direct link to SVG Serialization (Alternative)")

In addition to JSON, diagrams can be serialized through SVG. Every SVG produced by `diagram.render()` automatically embeds the full diagram metadata, making SVG a self-contained serialization format:

```
const diagram = Diagram("Web Architecture");
diagram.add(EC2("Web Server"));
diagram.add(RDS("Database"));

// SVG contains embedded metadata by default
const svg = await diagram.render();

// Re-import directly from SVG
const restored = await Diagram.fromSVG(svg);

// Or use the plugin exporter (same output)
const svg2 = await diagram.export("svg");
```

SVG serialization is useful when:

* You want a single file that is both a visual diagram and a data source
* You need to distribute diagrams that can be edited later
* You are working with tools that primarily handle SVG files

To generate a clean SVG without embedded metadata:

```
const cleanSvg = await diagram.render({ embedData: false });
```

## Use Cases[​](#use-cases "Direct link to Use Cases")

### 1. Documentation Generation[​](#1-documentation-generation "Direct link to 1. Documentation Generation")

Store diagrams as JSON in your repository and generate SVGs during build:

```
// diagrams.json in repo
const diagrams = JSON.parse(readFileSync("diagrams.json", "utf8"));

for (const [name, json] of Object.entries(diagrams)) {
  const diagram = await Diagram.fromJSON(json);
  await diagram.save(`docs/diagrams/${name}.svg`);
}
```

### 2. Dynamic Diagrams[​](#2-dynamic-diagrams "Direct link to 2. Dynamic Diagrams")

Create diagrams from runtime data:

```
// Fetch infrastructure from cloud API
const resources = await fetchAWSResources();

const json = {
  name: "Current State",
  nodes: resources.map((r) => ({
    id: r.id,
    label: r.name,
    provider: "aws",
    type: r.type,
    resource: r.resource,
  })),
};

const diagram = await Diagram.fromJSON(json);
```

## Best Practices[​](#best-practices "Direct link to Best Practices")

1. **Use node IDs**: Always provide unique `id` fields for nodes to ensure stable edge references
2. **Include schema**: Add `"$schema"` for IDE autocompletion and validation
3. **Minimal JSON**: Omit default values (direction "LR", theme "pastel") to keep JSON concise
4. **Version control**: Store diagrams as JSON for better diff tracking than binary images
5. **Cross-platform**: JSON diagrams work the same in Node.js, browsers, Deno, and Bun

## See Also[​](#see-also "Direct link to See Also")

* [Diagram Guide](/docs/guides/diagram) - Core diagram concepts
* [Rendering Guide](/docs/guides/rendering) - Output formats and options
* [Custom Nodes](/docs/guides/custom-nodes) - Using custom icons in JSON


---

# Migration from Python diagrams

This guide helps you migrate from the Python [diagrams library](https://diagrams.mingrammer.com) to diagrams-js.

## Why JavaScript?[​](#why-javascript "Direct link to Why JavaScript?")

The JavaScript/TypeScript port has some unique features:

* **Browser support** - runs directly in browsers with no need for a build step ([demo](/playground))
* **Runs everywhere** - works in Node.js, Deno, and Bun
* **Dependency-free** - no dependencies required (uses a Wasm build of Graphviz)
* **Render as [Data URL](/docs/guides/rendering#render-as-data-url)** - returns base64 data URL for easy embedding in HTML
* **JSON serialization** - two-way [conversion between diagrams and JSON](/docs/guides/json)
* **Type safety** - full TypeScript support with IDE autocompletion
* **CLI** - CLI for rendering, importing, diffing, and scaffolding ([docs](/docs/guides/cli))

![IDE autocompletion](/assets/images/autocomplete-7b51834452b17f3b9819b70cbfaf2b3d.png)

tip

Let your AI agent do the migration for you!

There is a [skill](/docs/ai-guide#skills) available for migration from Python to TypeScript.

## Syntax Differences[​](#syntax-differences "Direct link to Syntax Differences")

### Creating Diagrams[​](#creating-diagrams "Direct link to Creating Diagrams")

**Python:**

```
from diagrams import Diagram
from diagrams.aws.compute import EC2

with Diagram("My Diagram", show=False):
    EC2("web")
```

**TypeScript:**

```
import { Diagram } from "diagrams-js";
import { EC2 } from "diagrams-js/aws/compute";

const diagram = Diagram("My Diagram");
diagram.add(EC2("web"));

const svg = await diagram.render();
```

Key differences:

* Use function call `Diagram()` instead of context manager `with Diagram()`
* Explicitly add nodes with `diagram.add()`
* Call `render()` explicitly

### Creating Nodes[​](#creating-nodes "Direct link to Creating Nodes")

**Python:**

```
web = EC2("Web Server")
```

**TypeScript:**

```
const web = diagram.add(EC2("Web Server"));
```

Key differences:

* Always add nodes to diagram explicitly
* Provider functions return node instances

### Connections[​](#connections "Direct link to Connections")

| Python                    | TypeScript                                 |
| ------------------------- | ------------------------------------------ |
| `node1 >> node2`          | `node1.to(node2)`                          |
| `node1 << node2`          | `node1.from(node2)`                        |
| `node1 - node2`           | `node1.with(node2)`                        |
| `node1 >> [node2, node3]` | `node1.to([node2, node3])`                 |
| `node1 << [node2, node3]` | `node1.from([node2, node3])`               |
| `[node1, node2] >> node3` | `[node1, node2].forEach(n => n.to(node3))` |

**Python:**

```
web >> api >> database
api >> storage
```

**TypeScript:**

```
web.to(api).to(database);
api.to(storage);
```

### Clusters[​](#clusters "Direct link to Clusters")

**Python:**

```
from diagrams import Cluster

with Diagram("Services"):
    with Cluster("Web Tier"):
        web1 = EC2("web1")
        web2 = EC2("web2")
```

**TypeScript:**

```
import { Diagram } from "diagrams-js";

const diagram = Diagram("Services");
const webTier = diagram.cluster("Web Tier");
const web1 = webTier.add(EC2("web1"));
const web2 = webTier.add(EC2("web2"));
```

Key differences:

* Call `diagram.cluster()` to create a cluster
* Add nodes to cluster with `cluster.add()`

### Nested Clusters[​](#nested-clusters "Direct link to Nested Clusters")

**Python:**

```
with Cluster("Production"):
    with Cluster("Services"):
        api = ECS("api")
```

**TypeScript:**

```
const production = diagram.cluster("Production");
const services = production.cluster("Services");
const api = services.add(ECS("api"));
```

### Edges[​](#edges "Direct link to Edges")

**Python:**

```
from diagrams import Edge

web >> Edge(color="red") >> db
```

**TypeScript:**

```
import { Edge } from "diagrams-js";

web.to(Edge({ color: "red" }), db);
```

Key differences:

* Use object notation for options: `Edge({ color: "red" })`
* Pass edge as first argument to `to()`, `from()`, or `with()`

### Custom Nodes[​](#custom-nodes "Direct link to Custom Nodes")

**Python:**

```
from diagrams.custom import Custom

with Diagram("Custom"):
    prod = Custom("Product", "https://mywebsite.com/icon.png")
```

**TypeScript:**

```
import { Custom } from "diagrams-js";

const diagram = Diagram("Custom");
const prod = diagram.add(Custom("Product", "https://mywebsite.com/icon.png"));
```

## Import Paths[​](#import-paths "Direct link to Import Paths")

Provider import paths follow the same pattern:

| Python                                  | TypeScript                                       |
| --------------------------------------- | ------------------------------------------------ |
| `from diagrams.aws.compute import EC2`  | `import { EC2 } from "diagrams-js/aws/compute"`  |
| `from diagrams.aws.database import RDS` | `import { RDS } from "diagrams-js/aws/database"` |
| `from diagrams.gcp.compute import GCE`  | `import { GCE } from "diagrams-js/gcp/compute"`  |
| `from diagrams.k8s.compute import Pod`  | `import { Pod } from "diagrams-js/k8s/compute"`  |

## Full Migration Example[​](#full-migration-example "Direct link to Full Migration Example")

**Python:**

```
from diagrams import Diagram, Cluster, Edge
from diagrams.aws.compute import EC2, ECS
from diagrams.aws.database import RDS
from diagrams.aws.network import ELB

with Diagram("Web Services", show=False):
    lb = ELB("lb")

    with Cluster("Services"):
        web1 = ECS("web1")
        web2 = ECS("web2")

    db = RDS("database")

    lb >> [web1, web2]
    web1 >> Edge(color="red") >> db
    web2 >> Edge(color="red") >> db
```

**TypeScript:**

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

const diagram = Diagram("Web Services");

const lb = diagram.add(ELB("lb"));

const services = diagram.cluster("Services");
const web1 = services.add(ECS("web1"));
const web2 = services.add(ECS("web2"));

const db = diagram.add(RDS("database"));

lb.to([web1, web2]);
web1.to(Edge({ color: "red" }), db);
web2.to(Edge({ color: "red" }), db);

const svg = await diagram.render();
```

## Getting Help[​](#getting-help "Direct link to Getting Help")

* [Documentation](/docs/getting-started/installation) - Full documentation
* [Examples](/docs/getting-started/examples) - More examples
* [API Reference](/docs/guides/diagram) - Complete API
* [GitHub Issues](https://github.com/diagrams-js/diagrams-js/issues) - Report issues


---

# Nodes

`Node` is an object representing a node or system component.

## Basic Usage[​](#basic-usage "Direct link to Basic Usage")

A node object consists of three parts: **provider**, **resource type**, and **name**. You create nodes by calling provider functions:

```
import { Diagram } from "diagrams-js";
import { EC2 } from "diagrams-js/aws/compute";

const diagram = Diagram("Simple Diagram");
const server = diagram.add(EC2("web"));
```

In this example, `EC2` is a node of resource type `compute` provided by `aws`.

## Available Providers[​](#available-providers "Direct link to Available Providers")

You can use nodes from any supported [provider](/docs/guides/providers):

```
// AWS resources
import { ECS, Lambda } from "diagrams-js/aws/compute";
import { RDS, ElastiCache } from "diagrams-js/aws/database";
import { ELB, Route53, VPC } from "diagrams-js/aws/network";

// Azure resources
import { FunctionApps } from "diagrams-js/azure/compute";
import { BlobStorage } from "diagrams-js/azure/storage";

// GCP resources
import { AppEngine, GKE } from "diagrams-js/gcp/compute";
import { AutoML } from "diagrams-js/gcp/ml";

// Kubernetes resources
import { Pod, StatefulSet } from "diagrams-js/k8s/compute";
import { Service } from "diagrams-js/k8s/network";
import { PV, PVC, StorageClass } from "diagrams-js/k8s/storage";
```

See the [Providers](/docs/guides/providers) section for a complete list.

## Data Flow[​](#data-flow "Direct link to Data Flow")

You can represent data flow by connecting nodes with the methods `to()`, `from()`, and `with()`.

### Forward Direction (to)[​](#forward-direction-to "Direct link to Forward Direction (to)")

Connect nodes from left to right:

```
web.to(api).to(database);
```

This creates a chain: web → api → database

### Reverse Direction (from)[​](#reverse-direction-from "Direct link to Reverse Direction (from)")

Connect nodes from right to left:

```
database.from(api); // Creates: api → database with reverse arrow
database.from([backup1, backup2]); // Multiple sources
```

### Undirected (with)[​](#undirected-with "Direct link to Undirected (with)")

Connect nodes with no direction:

```
primary.with(replica);
```

This creates a connection without arrowheads.

## Multiple Connections[​](#multiple-connections "Direct link to Multiple Connections")

Connect one node to multiple targets:

```
loadBalancer.to([server1, server2, server3]);
```

## Chaining[​](#chaining "Direct link to Chaining")

Chain multiple connections together:

```
client
  .to(loadBalancer)
  .to([web1, web2])
  .forEach((web) => web.to(api));
```

## Direction Control[​](#direction-control "Direct link to Direction Control")

Change the overall diagram direction:

```
const diagram = Diagram("Workers", {
  direction: "TB", // Top to Bottom
});

const lb = diagram.add(ELB("lb"));
const worker1 = diagram.add(EC2("worker1"));
const worker2 = diagram.add(EC2("worker2"));
const db = diagram.add(RDS("events"));

lb.to(worker1).to(db);
lb.to(worker2).to(db);
```

## Complete Example[​](#complete-example "Direct link to Complete Example")

```
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";
import { S3 } from "diagrams-js/aws/storage";

const diagram = Diagram("Web Services", { direction: "LR" });

const lb = diagram.add(ELB("lb"));
const web = diagram.add(EC2("web"));
const db = diagram.add(RDS("userdb"));
const storage = diagram.add(S3("store"));

// Forward flow
lb.to(web).to(db).to(storage);

// Multiple paths
const stats = diagram.add(EC2("stat"));
web.to(db).from(stats); // stats also connects to db

// Bidirectional
web.with(db); // Undirected connection

const svg = await diagram.render();
```

## Custom CSS Classes and Data Attributes[​](#custom-css-classes-and-data-attributes "Direct link to Custom CSS Classes and Data Attributes")

Add CSS classes and data attributes to nodes for DOM manipulation after rendering:

```
const server = diagram.add(
  Node("Server", {
    className: "highlight server-node",
    dataAttrs: { team: "backend", priority: "high" },
  }),
);
```

These are injected into the rendered SVG:

```
<g
  class="node highlight server-node"
  data-node-id="Server"
  data-team="backend"
  data-priority="high"
>
  ...
</g>
```

You can then query and manipulate these elements in the browser:

```
const svg = await diagram.render();
document.body.innerHTML = svg;

// Get the SVG element for this node
const el = server.getElement();
el?.addEventListener("click", () => console.log("Clicked!"));

// Query by data attribute
const backendNodes = document.querySelectorAll('[data-team="backend"]');
```

## Notes[​](#notes "Direct link to Notes")

* The order of rendered diagrams is not guaranteed
* Use `direction` option to control the overall layout
* Node connections create directed graph edges


---

# Providers

diagrams-js includes 17 providers with over 2000 node types.

## Available Providers[​](#available-providers "Direct link to Available Providers")

| Provider                                 | Description                              |
| ---------------------------------------- | ---------------------------------------- |
| [AWS](/docs/nodes/aws)                   | Amazon Web Services nodes                |
| [Azure](/docs/nodes/azure)               | Microsoft Azure nodes                    |
| [GCP](/docs/nodes/gcp)                   | Google Cloud Platform nodes              |
| [Kubernetes](/docs/nodes/k8s)            | Kubernetes nodes                         |
| [OnPrem](/docs/nodes/onprem)             | On-premises infrastructure nodes         |
| [AlibabaCloud](/docs/nodes/alibabacloud) | Alibaba Cloud nodes                      |
| [DigitalOcean](/docs/nodes/digitalocean) | DigitalOcean nodes                       |
| [Elastic](/docs/nodes/elastic)           | Elastic Stack nodes                      |
| [Firebase](/docs/nodes/firebase)         | Firebase nodes                           |
| [Generic](/docs/nodes/generic)           | Generic computing nodes                  |
| [GIS](/docs/nodes/gis)                   | GIS nodes                                |
| [IBM](/docs/nodes/ibm)                   | IBM Cloud nodes                          |
| [OCI](/docs/nodes/oci)                   | Oracle Cloud Infrastructure nodes        |
| [OpenStack](/docs/nodes/openstack)       | OpenStack nodes                          |
| [Outscale](/docs/nodes/outscale)         | Outscale nodes                           |
| [Programming](/docs/nodes/programming)   | Programming language and framework nodes |
| [SaaS](/docs/nodes/saas)                 | SaaS application nodes                   |
| [C4 Model](/docs/nodes/c4)               | C4 model for software architecture       |

## Usage[​](#usage "Direct link to Usage")

```
import { EC2, Lambda } from "diagrams-js/aws/compute";
import { RDS } from "diagrams-js/aws/database";
import { GCE } from "diagrams-js/gcp/compute";
```

## Provider Structure[​](#provider-structure "Direct link to Provider Structure")

Each provider is organized by service category:

```
providers/aws/
  ├── compute.ts     # EC2, Lambda, ECS, etc.
  ├── database.ts    # RDS, DynamoDB, etc.
  ├── storage.ts     # S3, EBS, etc.
  └── ...
```


---

# Rendering

## Render to SVG[​](#render-to-svg "Direct link to Render to SVG")

```
const diagram = Diagram("My Diagram");
// ... add nodes

const svg = await diagram.render();
// Returns SVG string
```

## Render to PNG[​](#render-to-png "Direct link to Render to PNG")

```
const png = await diagram.render({ format: "png" });
// Returns Uint8Array
```

## Render to JPG[​](#render-to-jpg "Direct link to Render to JPG")

```
const jpg = await diagram.render({ format: "jpg" });
// Returns Uint8Array
```

## Render as Data URL[​](#render-as-data-url "Direct link to Render as Data URL")

Get the diagram as a base64 data URL for direct use in HTML:

```
// SVG as data URL
const svgDataUrl = await diagram.render({ dataUrl: true });
// Returns: data:image/svg+xml;base64,...

// PNG as data URL
const pngDataUrl = await diagram.render({ format: "png", dataUrl: true });
// Returns: data:image/png;base64,...

// JPG as data URL
const jpgDataUrl = await diagram.render({ format: "jpg", dataUrl: true });
// Returns: data:image/jpeg;base64,...
```

### Browser Usage with Data URLs[​](#browser-usage-with-data-urls "Direct link to Browser Usage with Data URLs")

Use data URLs to display diagrams in `<img>` tags or download them:

```
const dataUrl = await diagram.render({ dataUrl: true });

// Display in an image element
const img = document.createElement("img");
img.src = dataUrl;
document.body.appendChild(img);

// Or create a download link
const link = document.createElement("a");
link.href = dataUrl;
link.download = "diagram.svg";
link.click();
```

## Save to File[​](#save-to-file "Direct link to Save to File")

```
// Auto-detects format from extension
await diagram.save("diagram.svg");
await diagram.save("diagram.png");
```

## Render Options[​](#render-options "Direct link to Render Options")

```
const svg = await diagram.render({
  format: "svg", // 'svg' | 'png' | 'jpg' | 'dot'
  width: 800, // Output width (for PNG/JPG)
  height: 600, // Output height (for PNG/JPG)
  scale: 2, // Scale factor (default: 2 for PNG/JPG)
  dataUrl: true, // Return as base64 data URL
  embedData: false, // Disable embedded diagram metadata in SVG
});
```

## SVG Data Embedding[​](#svg-data-embedding "Direct link to SVG Data Embedding")

By default, all SVG output includes embedded diagram metadata, allowing you to re-import the SVG later:

```
const svg = await diagram.render();
// SVG contains embedded data-diagram-json attribute

// Re-import later
const restored = await Diagram.fromSVG(svg);
```

To generate a clean SVG without embedded data:

```
const cleanSvg = await diagram.render({ embedData: false });
```

### Import from SVG[​](#import-from-svg "Direct link to Import from SVG")

Restore a diagram from an SVG that was previously exported or rendered:

```
import { Diagram } from "diagrams-js";

// From a rendered/exported SVG string
const restored = await Diagram.fromSVG(svgString);

// Or merge into an existing diagram
const diagram = Diagram("Merged");
await diagram.import(svgString, "svg");
```

## Browser Usage[​](#browser-usage "Direct link to Browser Usage")

```
// Get SVG string
const svg = await diagram.render();

// Insert into DOM
document.getElementById("diagram").innerHTML = svg;
```

## SVG DOM Manipulation[​](#svg-dom-manipulation "Direct link to SVG DOM Manipulation")

You can attach CSS classes and data attributes to nodes, edges, and clusters, then manipulate them in the browser after rendering.

### Adding CSS Classes and Data Attributes[​](#adding-css-classes-and-data-attributes "Direct link to Adding CSS Classes and Data Attributes")

```
const diagram = Diagram("Interactive");

const server = diagram.add(
  Node("Server", {
    className: "server-node",
    dataAttrs: { team: "backend", env: "prod" },
  }),
);

const db = diagram.add(
  Node("Database", {
    className: "db-node",
    dataAttrs: { team: "data" },
  }),
);

server.to(
  Edge({
    className: "critical-edge",
    dataAttrs: { latency: "50ms" },
  }),
  db,
);

const cluster = diagram.cluster("Production", {
  className: "prod-cluster",
  dataAttrs: { region: "us-east-1" },
});
```

### Querying SVG Elements[​](#querying-svg-elements "Direct link to Querying SVG Elements")

After rendering and inserting into the DOM, use `getElement()` to access SVG elements:

```
const svg = await diagram.render();
document.getElementById("diagram").innerHTML = svg;

// Query from current document (browser only)
const serverEl = server.getElement();
const dbEl = db.getElement();
const edgeEl = edge.getElement();
const clusterEl = cluster.getElement();

// Or query within a specific SVG string/element
const serverEl2 = server.getElement(svg);
```

### Adding Event Handlers[​](#adding-event-handlers "Direct link to Adding Event Handlers")

```
const serverEl = server.getElement();
if (serverEl) {
  serverEl.addEventListener("click", () => {
    console.log("Server clicked!");
    serverEl.classList.add("selected");
  });

  serverEl.addEventListener("mouseenter", () => {
    serverEl.style.opacity = "0.8";
  });
}
```

### Dynamic Styling[​](#dynamic-styling "Direct link to Dynamic Styling")

```
// Highlight all nodes in production
const nodes = document.querySelectorAll('[data-env="prod"]');
nodes.forEach((el) => el.classList.add("highlight"));

// Dim non-critical edges
const edges = document.querySelectorAll(".edge:not(.critical-edge)");
edges.forEach((el) => (el.style.opacity = "0.5"));
```

## The `after:layout` Hook[​](#the-afterlayout-hook "Direct link to the-afterlayout-hook")

For plugin authors, the `after:layout` hook fires after Graphviz produces the SVG but before format conversion (PNG/JPG). This lets you modify the SVG string and have changes reflected in raster output too.

```
import { HookEvent } from "diagrams-js";

const modifySvgPlugin = () => ({
  name: "svg-modifier",
  version: "1.0.0",
  apiVersion: "1.0",
  runtimeSupport: { node: true, browser: true, deno: true, bun: true },
  capabilities: [
    {
      type: "hook",
      hooks: [
        {
          event: HookEvent.AFTER_LAYOUT,
          handler: async ({ svg, diagram, format }) => {
            // Modify SVG before PNG/JPG conversion
            const modified = svg.replace(/stroke="#7b8894"/g, 'stroke="red"');
            return { svg: modified, diagram, format };
          },
        },
      ],
    },
  ],
});

const diagram = Diagram("Test");
await diagram.registerPlugins([modifySvgPlugin()]);
```

## Node.js Usage[​](#nodejs-usage "Direct link to Node.js Usage")

```
import { writeFile } from "fs/promises";

const svg = await diagram.render();
await writeFile("output.svg", svg);

const png = await diagram.render({ format: "png" });
await writeFile("output.png", Buffer.from(png));
```

## Export to JSON[​](#export-to-json "Direct link to Export to JSON")

```
const diagram = Diagram("Web Architecture");
diagram.add(EC2("Web Server"));
diagram.add(RDS("Database"));

// Export to JSON
const json = diagram.toJSON();
console.log(JSON.stringify(json, null, 2));
```

### JSON Output Example[​](#json-output-example "Direct link to JSON Output Example")

```
{
  "name": "Web Architecture",
  "nodes": [
    {
      "id": "n1",
      "label": "Web Server",
      "provider": "aws",
      "type": "compute",
      "resource": "EC2"
    },
    {
      "id": "n2",
      "label": "Database",
      "provider": "aws",
      "type": "database",
      "resource": "RDS"
    }
  ],
  "edges": [{ "from": "n1", "to": "n2" }]
}
```

### Import from JSON[​](#import-from-json "Direct link to Import from JSON")

Restore a diagram from JSON using the static `Diagram.fromJSON()` method:

```
import { Diagram } from "diagrams-js";

const json = {
  name: "My Architecture",
  nodes: [
    {
      id: "web",
      label: "Web Server",
      provider: "aws",
      type: "compute",
      resource: "EC2",
    },
    {
      id: "db",
      label: "Database",
      provider: "aws",
      type: "database",
      resource: "RDS",
    },
  ],
  edges: [{ from: "web", to: "db", label: "SQL" }],
};

const diagram = await Diagram.fromJSON(json);
const svg = await diagram.render();
```

### JSON Schema[​](#json-schema "Direct link to JSON Schema")

The JSON format follows a JSON Schema for validation. Reference it in your JSON files:

```
{
  "$schema": "https://diagrams-js.hatemhosny.dev/schema/diagram.json",
  "name": "My Architecture",
  "nodes": [...]
}
```


---

# Alibaba Cloud

Node types list for the Alibaba Cloud provider.

## Example Usage[​](#example-usage "Direct link to Example Usage")

```
import { Diagram } from "diagrams-js";
import { AnalyticDb, ClickHouse, DataLakeAnalytics } from "diagrams-js/alibabacloud/analytics";
import { ApiGateway, BeeBot, BlockchainAsAService } from "diagrams-js/alibabacloud/application";

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

const node1 = diagram.add(AnalyticDb("Node 1"));
const node2 = diagram.add(ApiGateway("Node 2"));

node1.to(node2);

const svg = await diagram.render();
```

note

All node types available in the [Python diagrams library](https://diagrams.mingrammer.com/docs/nodes/alibabacloud) are also available in diagrams-js with the same class names and structure.

## Node Reference[​](#node-reference "Direct link to Node Reference")

### alibabacloud/analytics[​](#alibabacloudanalytics "Direct link to alibabacloud/analytics")

![AnalyticDb](/resources/alibabacloud/analytics/analytic-db.png) **AnalyticDb**

```
import { AnalyticDb } from "diagrams-js/alibabacloud/analytics"
```

![ClickHouse](/resources/alibabacloud/analytics/click-house.png) **ClickHouse**

```
import { ClickHouse } from "diagrams-js/alibabacloud/analytics"
```

![DataLakeAnalytics](/resources/alibabacloud/analytics/data-lake-analytics.png) **DataLakeAnalytics**

```
import { DataLakeAnalytics } from "diagrams-js/alibabacloud/analytics"
```

![ElaticMapReduce](/resources/alibabacloud/analytics/elatic-map-reduce.png) **ElaticMapReduce**

```
import { ElaticMapReduce } from "diagrams-js/alibabacloud/analytics"
```

![OpenSearch](/resources/alibabacloud/analytics/open-search.png) **OpenSearch**

```
import { OpenSearch } from "diagrams-js/alibabacloud/analytics"
```

### alibabacloud/application[​](#alibabacloudapplication "Direct link to alibabacloud/application")

![ApiGateway](/resources/alibabacloud/application/api-gateway.png) **ApiGateway**

```
import { ApiGateway } from "diagrams-js/alibabacloud/application"
```

![BeeBot](/resources/alibabacloud/application/bee-bot.png) **BeeBot**

```
import { BeeBot } from "diagrams-js/alibabacloud/application"
```

![BlockchainAsAService](/resources/alibabacloud/application/blockchain-as-a-service.png) **BlockchainAsAService**

```
import { BlockchainAsAService } from "diagrams-js/alibabacloud/application"
```

![CloudCallCenter](/resources/alibabacloud/application/cloud-call-center.png) **CloudCallCenter**

```
import { CloudCallCenter } from "diagrams-js/alibabacloud/application"
```

![CodePipeline](/resources/alibabacloud/application/code-pipeline.png) **CodePipeline**

```
import { CodePipeline } from "diagrams-js/alibabacloud/application"
```

![DirectMail](/resources/alibabacloud/application/direct-mail.png) **DirectMail**

```
import { DirectMail } from "diagrams-js/alibabacloud/application"
```

![LogService](/resources/alibabacloud/application/log-service.png) **LogService**

```
import { LogService } from "diagrams-js/alibabacloud/application"
```

![MessageNotificationService](/resources/alibabacloud/application/message-notification-service.png) **MessageNotificationService**

```
import { MessageNotificationService } from "diagrams-js/alibabacloud/application"
```

![NodeJsPerformancePlatform](/resources/alibabacloud/application/node-js-performance-platform.png) **NodeJsPerformancePlatform**

```
import { NodeJsPerformancePlatform } from "diagrams-js/alibabacloud/application"
```

![OpenSearch](/resources/alibabacloud/application/open-search.png) **OpenSearch**

```
import { OpenSearch } from "diagrams-js/alibabacloud/application"
```

![PerformanceTestingService](/resources/alibabacloud/application/performance-testing-service.png) **PerformanceTestingService**

```
import { PerformanceTestingService } from "diagrams-js/alibabacloud/application"
```

![RdCloud](/resources/alibabacloud/application/rd-cloud.png) **RdCloud**

```
import { RdCloud } from "diagrams-js/alibabacloud/application"
```

![SmartConversationAnalysis](/resources/alibabacloud/application/smart-conversation-analysis.png) **SmartConversationAnalysis**

```
import { SmartConversationAnalysis } from "diagrams-js/alibabacloud/application"
```

![Yida](/resources/alibabacloud/application/yida.png) **Yida**

```
import { Yida } from "diagrams-js/alibabacloud/application"
```

### alibabacloud/communication[​](#alibabacloudcommunication "Direct link to alibabacloud/communication")

![DirectMail](/resources/alibabacloud/communication/direct-mail.png) **DirectMail**

```
import { DirectMail } from "diagrams-js/alibabacloud/communication"
```

![MobilePush](/resources/alibabacloud/communication/mobile-push.png) **MobilePush**

```
import { MobilePush } from "diagrams-js/alibabacloud/communication"
```

### alibabacloud/compute[​](#alibabacloudcompute "Direct link to alibabacloud/compute")

![AutoScaling](/resources/alibabacloud/compute/auto-scaling.png) **AutoScaling**

```
import { AutoScaling } from "diagrams-js/alibabacloud/compute"
```

![BatchCompute](/resources/alibabacloud/compute/batch-compute.png) **BatchCompute**

```
import { BatchCompute } from "diagrams-js/alibabacloud/compute"
```

![ContainerRegistry](/resources/alibabacloud/compute/container-registry.png) **ContainerRegistry**

```
import { ContainerRegistry } from "diagrams-js/alibabacloud/compute"
```

![ContainerService](/resources/alibabacloud/compute/container-service.png) **ContainerService**

```
import { ContainerService } from "diagrams-js/alibabacloud/compute"
```

![ElasticComputeService](/resources/alibabacloud/compute/elastic-compute-service.png) **ElasticComputeService**

```
import { ElasticComputeService } from "diagrams-js/alibabacloud/compute"
```

![ElasticContainerInstance](/resources/alibabacloud/compute/elastic-container-instance.png) **ElasticContainerInstance**

```
import { ElasticContainerInstance } from "diagrams-js/alibabacloud/compute"
```

![ElasticHighPerformanceComputing](/resources/alibabacloud/compute/elastic-high-performance-computing.png) **ElasticHighPerformanceComputing**

```
import { ElasticHighPerformanceComputing } from "diagrams-js/alibabacloud/compute"
```

![ElasticSearch](/resources/alibabacloud/compute/elastic-search.png) **ElasticSearch**

```
import { ElasticSearch } from "diagrams-js/alibabacloud/compute"
```

![FunctionCompute](/resources/alibabacloud/compute/function-compute.png) **FunctionCompute**

```
import { FunctionCompute } from "diagrams-js/alibabacloud/compute"
```

![OperationOrchestrationService](/resources/alibabacloud/compute/operation-orchestration-service.png) **OperationOrchestrationService**

```
import { OperationOrchestrationService } from "diagrams-js/alibabacloud/compute"
```

![ResourceOrchestrationService](/resources/alibabacloud/compute/resource-orchestration-service.png) **ResourceOrchestrationService**

```
import { ResourceOrchestrationService } from "diagrams-js/alibabacloud/compute"
```

![ServerLoadBalancer](/resources/alibabacloud/compute/server-load-balancer.png) **ServerLoadBalancer**

```
import { ServerLoadBalancer } from "diagrams-js/alibabacloud/compute"
```

![ServerlessAppEngine](/resources/alibabacloud/compute/serverless-app-engine.png) **ServerlessAppEngine**

```
import { ServerlessAppEngine } from "diagrams-js/alibabacloud/compute"
```

![SimpleApplicationServer](/resources/alibabacloud/compute/simple-application-server.png) **SimpleApplicationServer**

```
import { SimpleApplicationServer } from "diagrams-js/alibabacloud/compute"
```

![WebAppService](/resources/alibabacloud/compute/web-app-service.png) **WebAppService**

```
import { WebAppService } from "diagrams-js/alibabacloud/compute"
```

### alibabacloud/database[​](#alibabaclouddatabase "Direct link to alibabacloud/database")

![ApsaradbCassandra](/resources/alibabacloud/database/apsaradb-cassandra.png) **ApsaradbCassandra**

```
import { ApsaradbCassandra } from "diagrams-js/alibabacloud/database"
```

![ApsaradbHbase](/resources/alibabacloud/database/apsaradb-hbase.png) **ApsaradbHbase**

```
import { ApsaradbHbase } from "diagrams-js/alibabacloud/database"
```

![ApsaradbMemcache](/resources/alibabacloud/database/apsaradb-memcache.png) **ApsaradbMemcache**

```
import { ApsaradbMemcache } from "diagrams-js/alibabacloud/database"
```

![ApsaradbMongodb](/resources/alibabacloud/database/apsaradb-mongodb.png) **ApsaradbMongodb**

```
import { ApsaradbMongodb } from "diagrams-js/alibabacloud/database"
```

![ApsaradbOceanbase](/resources/alibabacloud/database/apsaradb-oceanbase.png) **ApsaradbOceanbase**

```
import { ApsaradbOceanbase } from "diagrams-js/alibabacloud/database"
```

![ApsaradbPolardb](/resources/alibabacloud/database/apsaradb-polardb.png) **ApsaradbPolardb**

```
import { ApsaradbPolardb } from "diagrams-js/alibabacloud/database"
```

![ApsaradbPostgresql](/resources/alibabacloud/database/apsaradb-postgresql.png) **ApsaradbPostgresql**

```
import { ApsaradbPostgresql } from "diagrams-js/alibabacloud/database"
```

![ApsaradbPpas](/resources/alibabacloud/database/apsaradb-ppas.png) **ApsaradbPpas**

```
import { ApsaradbPpas } from "diagrams-js/alibabacloud/database"
```

![ApsaradbRedis](/resources/alibabacloud/database/apsaradb-redis.png) **ApsaradbRedis**

```
import { ApsaradbRedis } from "diagrams-js/alibabacloud/database"
```

![ApsaradbSqlserver](/resources/alibabacloud/database/apsaradb-sqlserver.png) **ApsaradbSqlserver**

```
import { ApsaradbSqlserver } from "diagrams-js/alibabacloud/database"
```

![DataManagementService](/resources/alibabacloud/database/data-management-service.png) **DataManagementService**

```
import { DataManagementService } from "diagrams-js/alibabacloud/database"
```

![DataTransmissionService](/resources/alibabacloud/database/data-transmission-service.png) **DataTransmissionService**

```
import { DataTransmissionService } from "diagrams-js/alibabacloud/database"
```

![DatabaseBackupService](/resources/alibabacloud/database/database-backup-service.png) **DatabaseBackupService**

```
import { DatabaseBackupService } from "diagrams-js/alibabacloud/database"
```

![DisributeRelationalDatabaseService](/resources/alibabacloud/database/disribute-relational-database-service.png) **DisributeRelationalDatabaseService**

```
import { DisributeRelationalDatabaseService } from "diagrams-js/alibabacloud/database"
```

![GraphDatabaseService](/resources/alibabacloud/database/graph-database-service.png) **GraphDatabaseService**

```
import { GraphDatabaseService } from "diagrams-js/alibabacloud/database"
```

![HybriddbForMysql](/resources/alibabacloud/database/hybriddb-for-mysql.png) **HybriddbForMysql**

```
import { HybriddbForMysql } from "diagrams-js/alibabacloud/database"
```

![RelationalDatabaseService](/resources/alibabacloud/database/relational-database-service.png) **RelationalDatabaseService**

```
import { RelationalDatabaseService } from "diagrams-js/alibabacloud/database"
```

### alibabacloud/iot[​](#alibabacloudiot "Direct link to alibabacloud/iot")

![IotInternetDeviceId](/resources/alibabacloud/iot/iot-internet-device-id.png) **IotInternetDeviceId**

```
import { IotInternetDeviceId } from "diagrams-js/alibabacloud/iot"
```

![IotLinkWan](/resources/alibabacloud/iot/iot-link-wan.png) **IotLinkWan**

```
import { IotLinkWan } from "diagrams-js/alibabacloud/iot"
```

![IotMobileConnectionPackage](/resources/alibabacloud/iot/iot-mobile-connection-package.png) **IotMobileConnectionPackage**

```
import { IotMobileConnectionPackage } from "diagrams-js/alibabacloud/iot"
```

![IotPlatform](/resources/alibabacloud/iot/iot-platform.png) **IotPlatform**

```
import { IotPlatform } from "diagrams-js/alibabacloud/iot"
```

### alibabacloud/network[​](#alibabacloudnetwork "Direct link to alibabacloud/network")

![Cdn](/resources/alibabacloud/network/cdn.png) **Cdn**

```
import { Cdn } from "diagrams-js/alibabacloud/network"
```

![CloudEnterpriseNetwork](/resources/alibabacloud/network/cloud-enterprise-network.png) **CloudEnterpriseNetwork**

```
import { CloudEnterpriseNetwork } from "diagrams-js/alibabacloud/network"
```

![ElasticIpAddress](/resources/alibabacloud/network/elastic-ip-address.png) **ElasticIpAddress**

```
import { ElasticIpAddress } from "diagrams-js/alibabacloud/network"
```

![ExpressConnect](/resources/alibabacloud/network/express-connect.png) **ExpressConnect**

```
import { ExpressConnect } from "diagrams-js/alibabacloud/network"
```

![NatGateway](/resources/alibabacloud/network/nat-gateway.png) **NatGateway**

```
import { NatGateway } from "diagrams-js/alibabacloud/network"
```

![ServerLoadBalancer](/resources/alibabacloud/network/server-load-balancer.png) **ServerLoadBalancer**

```
import { ServerLoadBalancer } from "diagrams-js/alibabacloud/network"
```

![SmartAccessGateway](/resources/alibabacloud/network/smart-access-gateway.png) **SmartAccessGateway**

```
import { SmartAccessGateway } from "diagrams-js/alibabacloud/network"
```

![VirtualPrivateCloud](/resources/alibabacloud/network/virtual-private-cloud.png) **VirtualPrivateCloud**

```
import { VirtualPrivateCloud } from "diagrams-js/alibabacloud/network"
```

![VpnGateway](/resources/alibabacloud/network/vpn-gateway.png) **VpnGateway**

```
import { VpnGateway } from "diagrams-js/alibabacloud/network"
```

### alibabacloud/security[​](#alibabacloudsecurity "Direct link to alibabacloud/security")

![AntiBotService](/resources/alibabacloud/security/anti-bot-service.png) **AntiBotService**

```
import { AntiBotService } from "diagrams-js/alibabacloud/security"
```

![AntiDdosBasic](/resources/alibabacloud/security/anti-ddos-basic.png) **AntiDdosBasic**

```
import { AntiDdosBasic } from "diagrams-js/alibabacloud/security"
```

![AntiDdosPro](/resources/alibabacloud/security/anti-ddos-pro.png) **AntiDdosPro**

```
import { AntiDdosPro } from "diagrams-js/alibabacloud/security"
```

![AntifraudService](/resources/alibabacloud/security/antifraud-service.png) **AntifraudService**

```
import { AntifraudService } from "diagrams-js/alibabacloud/security"
```

![BastionHost](/resources/alibabacloud/security/bastion-host.png) **BastionHost**

```
import { BastionHost } from "diagrams-js/alibabacloud/security"
```

![CloudFirewall](/resources/alibabacloud/security/cloud-firewall.png) **CloudFirewall**

```
import { CloudFirewall } from "diagrams-js/alibabacloud/security"
```

![CloudSecurityScanner](/resources/alibabacloud/security/cloud-security-scanner.png) **CloudSecurityScanner**

```
import { CloudSecurityScanner } from "diagrams-js/alibabacloud/security"
```

![ContentModeration](/resources/alibabacloud/security/content-moderation.png) **ContentModeration**

```
import { ContentModeration } from "diagrams-js/alibabacloud/security"
```

![CrowdsourcedSecurityTesting](/resources/alibabacloud/security/crowdsourced-security-testing.png) **CrowdsourcedSecurityTesting**

```
import { CrowdsourcedSecurityTesting } from "diagrams-js/alibabacloud/security"
```

![DataEncryptionService](/resources/alibabacloud/security/data-encryption-service.png) **DataEncryptionService**

```
import { DataEncryptionService } from "diagrams-js/alibabacloud/security"
```

![DbAudit](/resources/alibabacloud/security/db-audit.png) **DbAudit**

```
import { DbAudit } from "diagrams-js/alibabacloud/security"
```

![GameShield](/resources/alibabacloud/security/game-shield.png) **GameShield**

```
import { GameShield } from "diagrams-js/alibabacloud/security"
```

![IdVerification](/resources/alibabacloud/security/id-verification.png) **IdVerification**

```
import { IdVerification } from "diagrams-js/alibabacloud/security"
```

![ManagedSecurityService](/resources/alibabacloud/security/managed-security-service.png) **ManagedSecurityService**

```
import { ManagedSecurityService } from "diagrams-js/alibabacloud/security"
```

![SecurityCenter](/resources/alibabacloud/security/security-center.png) **SecurityCenter**

```
import { SecurityCenter } from "diagrams-js/alibabacloud/security"
```

![ServerGuard](/resources/alibabacloud/security/server-guard.png) **ServerGuard**

```
import { ServerGuard } from "diagrams-js/alibabacloud/security"
```

![SslCertificates](/resources/alibabacloud/security/ssl-certificates.png) **SslCertificates**

```
import { SslCertificates } from "diagrams-js/alibabacloud/security"
```

![WebApplicationFirewall](/resources/alibabacloud/security/web-application-firewall.png) **WebApplicationFirewall**

```
import { WebApplicationFirewall } from "diagrams-js/alibabacloud/security"
```

### alibabacloud/storage[​](#alibabacloudstorage "Direct link to alibabacloud/storage")

![CloudStorageGateway](/resources/alibabacloud/storage/cloud-storage-gateway.png) **CloudStorageGateway**

```
import { CloudStorageGateway } from "diagrams-js/alibabacloud/storage"
```

![FileStorageHdfs](/resources/alibabacloud/storage/file-storage-hdfs.png) **FileStorageHdfs**

```
import { FileStorageHdfs } from "diagrams-js/alibabacloud/storage"
```

![FileStorageNas](/resources/alibabacloud/storage/file-storage-nas.png) **FileStorageNas**

```
import { FileStorageNas } from "diagrams-js/alibabacloud/storage"
```

![HybridBackupRecovery](/resources/alibabacloud/storage/hybrid-backup-recovery.png) **HybridBackupRecovery**

```
import { HybridBackupRecovery } from "diagrams-js/alibabacloud/storage"
```

![HybridCloudDisasterRecovery](/resources/alibabacloud/storage/hybrid-cloud-disaster-recovery.png) **HybridCloudDisasterRecovery**

```
import { HybridCloudDisasterRecovery } from "diagrams-js/alibabacloud/storage"
```

![Imm](/resources/alibabacloud/storage/imm.png) **Imm**

```
import { Imm } from "diagrams-js/alibabacloud/storage"
```

![ObjectStorageService](/resources/alibabacloud/storage/object-storage-service.png) **ObjectStorageService**

```
import { ObjectStorageService } from "diagrams-js/alibabacloud/storage"
```

![ObjectTableStore](/resources/alibabacloud/storage/object-table-store.png) **ObjectTableStore**

```
import { ObjectTableStore } from "diagrams-js/alibabacloud/storage"
```

### alibabacloud/web[​](#alibabacloudweb "Direct link to alibabacloud/web")

![Dns](/resources/alibabacloud/web/dns.png) **Dns**

```
import { Dns } from "diagrams-js/alibabacloud/web"
```

![Domain](/resources/alibabacloud/web/domain.png) **Domain**

```
import { Domain } from "diagrams-js/alibabacloud/web"
```


---

# AWS

Node types list for the AWS provider.

## Example Usage[​](#example-usage "Direct link to Example Usage")

```
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();
```

note

All node types available in the [Python diagrams library](https://diagrams.mingrammer.com/docs/nodes/aws) are also available in diagrams-js with the same class names and structure.

## Node Reference[​](#node-reference "Direct link to Node Reference")

### aws/analytics[​](#awsanalytics "Direct link to aws/analytics")

![AmazonOpensearchService](/resources/aws/analytics/amazon-opensearch-service.png) **AmazonOpensearchService**

```
import { AmazonOpensearchService } from "diagrams-js/aws/analytics"
```

![Analytics](/resources/aws/analytics/analytics.png) **Analytics**

```
import { Analytics } from "diagrams-js/aws/analytics"
```

![Athena](/resources/aws/analytics/athena.png) **Athena**

```
import { Athena } from "diagrams-js/aws/analytics"
```

![CloudsearchSearchDocuments](/resources/aws/analytics/cloudsearch-search-documents.png) **CloudsearchSearchDocuments**

```
import { CloudsearchSearchDocuments } from "diagrams-js/aws/analytics"
```

![Cloudsearch](/resources/aws/analytics/cloudsearch.png) **Cloudsearch**

```
import { Cloudsearch } from "diagrams-js/aws/analytics"
```

![DataLakeResource](/resources/aws/analytics/data-lake-resource.png) **DataLakeResource**

```
import { DataLakeResource } from "diagrams-js/aws/analytics"
```

![DataPipeline](/resources/aws/analytics/data-pipeline.png) **DataPipeline**

```
import { DataPipeline } from "diagrams-js/aws/analytics"
```

![ElasticsearchService](/resources/aws/analytics/elasticsearch-service.png) **ElasticsearchService**

```
import { ElasticsearchService } from "diagrams-js/aws/analytics"
```

![EMRCluster](/resources/aws/analytics/emr-cluster.png) **EMRCluster**

```
import { EMRCluster } from "diagrams-js/aws/analytics"
```

![EMREngineMaprM3](/resources/aws/analytics/emr-engine-mapr-m3.png) **EMREngineMaprM3**

```
import { EMREngineMaprM3 } from "diagrams-js/aws/analytics"
```

![EMREngineMaprM5](/resources/aws/analytics/emr-engine-mapr-m5.png) **EMREngineMaprM5**

```
import { EMREngineMaprM5 } from "diagrams-js/aws/analytics"
```

![EMREngineMaprM7](/resources/aws/analytics/emr-engine-mapr-m7.png) **EMREngineMaprM7**

```
import { EMREngineMaprM7 } from "diagrams-js/aws/analytics"
```

![EMREngine](/resources/aws/analytics/emr-engine.png) **EMREngine**

```
import { EMREngine } from "diagrams-js/aws/analytics"
```

![EMRHdfsCluster](/resources/aws/analytics/emr-hdfs-cluster.png) **EMRHdfsCluster**

```
import { EMRHdfsCluster } from "diagrams-js/aws/analytics"
```

![EMR](/resources/aws/analytics/emr.png) **EMR**

```
import { EMR } from "diagrams-js/aws/analytics"
```

![GlueCrawlers](/resources/aws/analytics/glue-crawlers.png) **GlueCrawlers**

```
import { GlueCrawlers } from "diagrams-js/aws/analytics"
```

![GlueDataCatalog](/resources/aws/analytics/glue-data-catalog.png) **GlueDataCatalog**

```
import { GlueDataCatalog } from "diagrams-js/aws/analytics"
```

![Glue](/resources/aws/analytics/glue.png) **Glue**

```
import { Glue } from "diagrams-js/aws/analytics"
```

![KinesisDataAnalytics](/resources/aws/analytics/kinesis-data-analytics.png) **KinesisDataAnalytics**

```
import { KinesisDataAnalytics } from "diagrams-js/aws/analytics"
```

![KinesisDataFirehose](/resources/aws/analytics/kinesis-data-firehose.png) **KinesisDataFirehose**

```
import { KinesisDataFirehose } from "diagrams-js/aws/analytics"
```

![KinesisDataStreams](/resources/aws/analytics/kinesis-data-streams.png) **KinesisDataStreams**

```
import { KinesisDataStreams } from "diagrams-js/aws/analytics"
```

![KinesisVideoStreams](/resources/aws/analytics/kinesis-video-streams.png) **KinesisVideoStreams**

```
import { KinesisVideoStreams } from "diagrams-js/aws/analytics"
```

![Kinesis](/resources/aws/analytics/kinesis.png) **Kinesis**

```
import { Kinesis } from "diagrams-js/aws/analytics"
```

![LakeFormation](/resources/aws/analytics/lake-formation.png) **LakeFormation**

```
import { LakeFormation } from "diagrams-js/aws/analytics"
```

![ManagedStreamingForKafka](/resources/aws/analytics/managed-streaming-for-kafka.png) **ManagedStreamingForKafka**

```
import { ManagedStreamingForKafka } from "diagrams-js/aws/analytics"
```

![Quicksight](/resources/aws/analytics/quicksight.png) **Quicksight**

```
import { Quicksight } from "diagrams-js/aws/analytics"
```

![RedshiftDenseComputeNode](/resources/aws/analytics/redshift-dense-compute-node.png) **RedshiftDenseComputeNode**

```
import { RedshiftDenseComputeNode } from "diagrams-js/aws/analytics"
```

![RedshiftDenseStorageNode](/resources/aws/analytics/redshift-dense-storage-node.png) **RedshiftDenseStorageNode**

```
import { RedshiftDenseStorageNode } from "diagrams-js/aws/analytics"
```

![Redshift](/resources/aws/analytics/redshift.png) **Redshift**

```
import { Redshift } from "diagrams-js/aws/analytics"
```

### aws/ar[​](#awsar "Direct link to aws/ar")

![ArVr](/resources/aws/ar/ar-vr.png) **ArVr**

```
import { ArVr } from "diagrams-js/aws/ar"
```

![Sumerian](/resources/aws/ar/sumerian.png) **Sumerian**

```
import { Sumerian } from "diagrams-js/aws/ar"
```

### aws/blockchain[​](#awsblockchain "Direct link to aws/blockchain")

![BlockchainResource](/resources/aws/blockchain/blockchain-resource.png) **BlockchainResource**

```
import { BlockchainResource } from "diagrams-js/aws/blockchain"
```

![Blockchain](/resources/aws/blockchain/blockchain.png) **Blockchain**

```
import { Blockchain } from "diagrams-js/aws/blockchain"
```

![ManagedBlockchain](/resources/aws/blockchain/managed-blockchain.png) **ManagedBlockchain**

```
import { ManagedBlockchain } from "diagrams-js/aws/blockchain"
```

![QuantumLedgerDatabaseQldb](/resources/aws/blockchain/quantum-ledger-database-qldb.png) **QuantumLedgerDatabaseQldb**

```
import { QuantumLedgerDatabaseQldb } from "diagrams-js/aws/blockchain"
```

### aws/business[​](#awsbusiness "Direct link to aws/business")

![AlexaForBusiness](/resources/aws/business/alexa-for-business.png) **AlexaForBusiness**

```
import { AlexaForBusiness } from "diagrams-js/aws/business"
```

![BusinessApplications](/resources/aws/business/business-applications.png) **BusinessApplications**

```
import { BusinessApplications } from "diagrams-js/aws/business"
```

![Chime](/resources/aws/business/chime.png) **Chime**

```
import { Chime } from "diagrams-js/aws/business"
```

![Workmail](/resources/aws/business/workmail.png) **Workmail**

```
import { Workmail } from "diagrams-js/aws/business"
```

### aws/compute[​](#awscompute "Direct link to aws/compute")

![AppRunner](/resources/aws/compute/app-runner.png) **AppRunner**

```
import { AppRunner } from "diagrams-js/aws/compute"
```

![ApplicationAutoScaling](/resources/aws/compute/application-auto-scaling.png) **ApplicationAutoScaling**

```
import { ApplicationAutoScaling } from "diagrams-js/aws/compute"
```

![Batch](/resources/aws/compute/batch.png) **Batch**

```
import { Batch } from "diagrams-js/aws/compute"
```

![ComputeOptimizer](/resources/aws/compute/compute-optimizer.png) **ComputeOptimizer**

```
import { ComputeOptimizer } from "diagrams-js/aws/compute"
```

![Compute](/resources/aws/compute/compute.png) **Compute**

```
import { Compute } from "diagrams-js/aws/compute"
```

![EC2Ami](/resources/aws/compute/ec2-ami.png) **EC2Ami**

```
import { EC2Ami } from "diagrams-js/aws/compute"
```

![EC2AutoScaling](/resources/aws/compute/ec2-auto-scaling.png) **EC2AutoScaling**

```
import { EC2AutoScaling } from "diagrams-js/aws/compute"
```

![EC2ContainerRegistryImage](/resources/aws/compute/ec2-container-registry-image.png) **EC2ContainerRegistryImage**

```
import { EC2ContainerRegistryImage } from "diagrams-js/aws/compute"
```

![EC2ContainerRegistryRegistry](/resources/aws/compute/ec2-container-registry-registry.png) **EC2ContainerRegistryRegistry**

```
import { EC2ContainerRegistryRegistry } from "diagrams-js/aws/compute"
```

![EC2ContainerRegistry](/resources/aws/compute/ec2-container-registry.png) **EC2ContainerRegistry**

```
import { EC2ContainerRegistry } from "diagrams-js/aws/compute"
```

![EC2ElasticIpAddress](/resources/aws/compute/ec2-elastic-ip-address.png) **EC2ElasticIpAddress**

```
import { EC2ElasticIpAddress } from "diagrams-js/aws/compute"
```

![EC2ImageBuilder](/resources/aws/compute/ec2-image-builder.png) **EC2ImageBuilder**

```
import { EC2ImageBuilder } from "diagrams-js/aws/compute"
```

![EC2Instance](/resources/aws/compute/ec2-instance.png) **EC2Instance**

```
import { EC2Instance } from "diagrams-js/aws/compute"
```

![EC2Instances](/resources/aws/compute/ec2-instances.png) **EC2Instances**

```
import { EC2Instances } from "diagrams-js/aws/compute"
```

![EC2Rescue](/resources/aws/compute/ec2-rescue.png) **EC2Rescue**

```
import { EC2Rescue } from "diagrams-js/aws/compute"
```

![EC2SpotInstance](/resources/aws/compute/ec2-spot-instance.png) **EC2SpotInstance**

```
import { EC2SpotInstance } from "diagrams-js/aws/compute"
```

![EC2](/resources/aws/compute/ec2.png) **EC2**

```
import { EC2 } from "diagrams-js/aws/compute"
```

![ElasticBeanstalkApplication](/resources/aws/compute/elastic-beanstalk-application.png) **ElasticBeanstalkApplication**

```
import { ElasticBeanstalkApplication } from "diagrams-js/aws/compute"
```

![ElasticBeanstalkDeployment](/resources/aws/compute/elastic-beanstalk-deployment.png) **ElasticBeanstalkDeployment**

```
import { ElasticBeanstalkDeployment } from "diagrams-js/aws/compute"
```

![ElasticBeanstalk](/resources/aws/compute/elastic-beanstalk.png) **ElasticBeanstalk**

```
import { ElasticBeanstalk } from "diagrams-js/aws/compute"
```

![ElasticContainerServiceContainer](/resources/aws/compute/elastic-container-service-container.png) **ElasticContainerServiceContainer**

```
import { ElasticContainerServiceContainer } from "diagrams-js/aws/compute"
```

![ElasticContainerServiceServiceConnect](/resources/aws/compute/elastic-container-service-service-connect.png) **ElasticContainerServiceServiceConnect**

```
import { ElasticContainerServiceServiceConnect } from "diagrams-js/aws/compute"
```

![ElasticContainerServiceService](/resources/aws/compute/elastic-container-service-service.png) **ElasticContainerServiceService**

```
import { ElasticContainerServiceService } from "diagrams-js/aws/compute"
```

![ElasticContainerServiceTask](/resources/aws/compute/elastic-container-service-task.png) **ElasticContainerServiceTask**

```
import { ElasticContainerServiceTask } from "diagrams-js/aws/compute"
```

![ElasticContainerService](/resources/aws/compute/elastic-container-service.png) **ElasticContainerService**

```
import { ElasticContainerService } from "diagrams-js/aws/compute"
```

![ElasticKubernetesService](/resources/aws/compute/elastic-kubernetes-service.png) **ElasticKubernetesService**

```
import { ElasticKubernetesService } from "diagrams-js/aws/compute"
```

![Fargate](/resources/aws/compute/fargate.png) **Fargate**

```
import { Fargate } from "diagrams-js/aws/compute"
```

![LambdaFunction](/resources/aws/compute/lambda-function.png) **LambdaFunction**

```
import { LambdaFunction } from "diagrams-js/aws/compute"
```

![Lambda](/resources/aws/compute/lambda.png) **Lambda**

```
import { Lambda } from "diagrams-js/aws/compute"
```

![Lightsail](/resources/aws/compute/lightsail.png) **Lightsail**

```
import { Lightsail } from "diagrams-js/aws/compute"
```

![LocalZones](/resources/aws/compute/local-zones.png) **LocalZones**

```
import { LocalZones } from "diagrams-js/aws/compute"
```

![Outposts](/resources/aws/compute/outposts.png) **Outposts**

```
import { Outposts } from "diagrams-js/aws/compute"
```

![ServerlessApplicationRepository](/resources/aws/compute/serverless-application-repository.png) **ServerlessApplicationRepository**

```
import { ServerlessApplicationRepository } from "diagrams-js/aws/compute"
```

![ThinkboxDeadline](/resources/aws/compute/thinkbox-deadline.png) **ThinkboxDeadline**

```
import { ThinkboxDeadline } from "diagrams-js/aws/compute"
```

![ThinkboxDraft](/resources/aws/compute/thinkbox-draft.png) **ThinkboxDraft**

```
import { ThinkboxDraft } from "diagrams-js/aws/compute"
```

![ThinkboxFrost](/resources/aws/compute/thinkbox-frost.png) **ThinkboxFrost**

```
import { ThinkboxFrost } from "diagrams-js/aws/compute"
```

![ThinkboxKrakatoa](/resources/aws/compute/thinkbox-krakatoa.png) **ThinkboxKrakatoa**

```
import { ThinkboxKrakatoa } from "diagrams-js/aws/compute"
```

![ThinkboxSequoia](/resources/aws/compute/thinkbox-sequoia.png) **ThinkboxSequoia**

```
import { ThinkboxSequoia } from "diagrams-js/aws/compute"
```

![ThinkboxStoke](/resources/aws/compute/thinkbox-stoke.png) **ThinkboxStoke**

```
import { ThinkboxStoke } from "diagrams-js/aws/compute"
```

![ThinkboxXmesh](/resources/aws/compute/thinkbox-xmesh.png) **ThinkboxXmesh**

```
import { ThinkboxXmesh } from "diagrams-js/aws/compute"
```

![VmwareCloudOnAWS](/resources/aws/compute/vmware-cloud-on-aws.png) **VmwareCloudOnAWS**

```
import { VmwareCloudOnAWS } from "diagrams-js/aws/compute"
```

![Wavelength](/resources/aws/compute/wavelength.png) **Wavelength**

```
import { Wavelength } from "diagrams-js/aws/compute"
```

### aws/cost[​](#awscost "Direct link to aws/cost")

![Budgets](/resources/aws/cost/budgets.png) **Budgets**

```
import { Budgets } from "diagrams-js/aws/cost"
```

![CostAndUsageReport](/resources/aws/cost/cost-and-usage-report.png) **CostAndUsageReport**

```
import { CostAndUsageReport } from "diagrams-js/aws/cost"
```

![CostExplorer](/resources/aws/cost/cost-explorer.png) **CostExplorer**

```
import { CostExplorer } from "diagrams-js/aws/cost"
```

![CostManagement](/resources/aws/cost/cost-management.png) **CostManagement**

```
import { CostManagement } from "diagrams-js/aws/cost"
```

![ReservedInstanceReporting](/resources/aws/cost/reserved-instance-reporting.png) **ReservedInstanceReporting**

```
import { ReservedInstanceReporting } from "diagrams-js/aws/cost"
```

![SavingsPlans](/resources/aws/cost/savings-plans.png) **SavingsPlans**

```
import { SavingsPlans } from "diagrams-js/aws/cost"
```

### aws/database[​](#awsdatabase "Direct link to aws/database")

![AuroraInstance](/resources/aws/database/aurora-instance.png) **AuroraInstance**

```
import { AuroraInstance } from "diagrams-js/aws/database"
```

![Aurora](/resources/aws/database/aurora.png) **Aurora**

```
import { Aurora } from "diagrams-js/aws/database"
```

![DatabaseMigrationServiceDatabaseMigrationWorkflow](/resources/aws/database/database-migration-service-database-migration-workflow.png) **DatabaseMigrationServiceDatabaseMigrationWorkflow**

```
import { DatabaseMigrationServiceDatabaseMigrationWorkflow } from "diagrams-js/aws/database"
```

![DatabaseMigrationService](/resources/aws/database/database-migration-service.png) **DatabaseMigrationService**

```
import { DatabaseMigrationService } from "diagrams-js/aws/database"
```

![Database](/resources/aws/database/database.png) **Database**

```
import { Database } from "diagrams-js/aws/database"
```

![DocumentdbMongodbCompatibility](/resources/aws/database/documentdb-mongodb-compatibility.png) **DocumentdbMongodbCompatibility**

```
import { DocumentdbMongodbCompatibility } from "diagrams-js/aws/database"
```

![DynamodbAttribute](/resources/aws/database/dynamodb-attribute.png) **DynamodbAttribute**

```
import { DynamodbAttribute } from "diagrams-js/aws/database"
```

![DynamodbAttributes](/resources/aws/database/dynamodb-attributes.png) **DynamodbAttributes**

```
import { DynamodbAttributes } from "diagrams-js/aws/database"
```

![DynamodbDax](/resources/aws/database/dynamodb-dax.png) **DynamodbDax**

```
import { DynamodbDax } from "diagrams-js/aws/database"
```

![DynamodbGlobalSecondaryIndex](/resources/aws/database/dynamodb-global-secondary-index.png) **DynamodbGlobalSecondaryIndex**

```
import { DynamodbGlobalSecondaryIndex } from "diagrams-js/aws/database"
```

![DynamodbItem](/resources/aws/database/dynamodb-item.png) **DynamodbItem**

```
import { DynamodbItem } from "diagrams-js/aws/database"
```

![DynamodbItems](/resources/aws/database/dynamodb-items.png) **DynamodbItems**

```
import { DynamodbItems } from "diagrams-js/aws/database"
```

![DynamodbStreams](/resources/aws/database/dynamodb-streams.png) **DynamodbStreams**

```
import { DynamodbStreams } from "diagrams-js/aws/database"
```

![DynamodbTable](/resources/aws/database/dynamodb-table.png) **DynamodbTable**

```
import { DynamodbTable } from "diagrams-js/aws/database"
```

![Dynamodb](/resources/aws/database/dynamodb.png) **Dynamodb**

```
import { Dynamodb } from "diagrams-js/aws/database"
```

![ElasticacheCacheNode](/resources/aws/database/elasticache-cache-node.png) **ElasticacheCacheNode**

```
import { ElasticacheCacheNode } from "diagrams-js/aws/database"
```

![ElasticacheForMemcached](/resources/aws/database/elasticache-for-memcached.png) **ElasticacheForMemcached**

```
import { ElasticacheForMemcached } from "diagrams-js/aws/database"
```

![ElasticacheForRedis](/resources/aws/database/elasticache-for-redis.png) **ElasticacheForRedis**

```
import { ElasticacheForRedis } from "diagrams-js/aws/database"
```

![Elasticache](/resources/aws/database/elasticache.png) **Elasticache**

```
import { Elasticache } from "diagrams-js/aws/database"
```

![KeyspacesManagedApacheCassandraService](/resources/aws/database/keyspaces-managed-apache-cassandra-service.png) **KeyspacesManagedApacheCassandraService**

```
import { KeyspacesManagedApacheCassandraService } from "diagrams-js/aws/database"
```

![Neptune](/resources/aws/database/neptune.png) **Neptune**

```
import { Neptune } from "diagrams-js/aws/database"
```

![QuantumLedgerDatabaseQldb](/resources/aws/database/quantum-ledger-database-qldb.png) **QuantumLedgerDatabaseQldb**

```
import { QuantumLedgerDatabaseQldb } from "diagrams-js/aws/database"
```

![RDSInstance](/resources/aws/database/rds-instance.png) **RDSInstance**

```
import { RDSInstance } from "diagrams-js/aws/database"
```

![RDSMariadbInstance](/resources/aws/database/rds-mariadb-instance.png) **RDSMariadbInstance**

```
import { RDSMariadbInstance } from "diagrams-js/aws/database"
```

![RDSMysqlInstance](/resources/aws/database/rds-mysql-instance.png) **RDSMysqlInstance**

```
import { RDSMysqlInstance } from "diagrams-js/aws/database"
```

![RDSOnVmware](/resources/aws/database/rds-on-vmware.png) **RDSOnVmware**

```
import { RDSOnVmware } from "diagrams-js/aws/database"
```

![RDSOracleInstance](/resources/aws/database/rds-oracle-instance.png) **RDSOracleInstance**

```
import { RDSOracleInstance } from "diagrams-js/aws/database"
```

![RDSPostgresqlInstance](/resources/aws/database/rds-postgresql-instance.png) **RDSPostgresqlInstance**

```
import { RDSPostgresqlInstance } from "diagrams-js/aws/database"
```

![RDSSqlServerInstance](/resources/aws/database/rds-sql-server-instance.png) **RDSSqlServerInstance**

```
import { RDSSqlServerInstance } from "diagrams-js/aws/database"
```

![RDS](/resources/aws/database/rds.png) **RDS**

```
import { RDS } from "diagrams-js/aws/database"
```

![RedshiftDenseComputeNode](/resources/aws/database/redshift-dense-compute-node.png) **RedshiftDenseComputeNode**

```
import { RedshiftDenseComputeNode } from "diagrams-js/aws/database"
```

![RedshiftDenseStorageNode](/resources/aws/database/redshift-dense-storage-node.png) **RedshiftDenseStorageNode**

```
import { RedshiftDenseStorageNode } from "diagrams-js/aws/database"
```

![Redshift](/resources/aws/database/redshift.png) **Redshift**

```
import { Redshift } from "diagrams-js/aws/database"
```

![Timestream](/resources/aws/database/timestream.png) **Timestream**

```
import { Timestream } from "diagrams-js/aws/database"
```

### aws/devtools[​](#awsdevtools "Direct link to aws/devtools")

![CloudDevelopmentKit](/resources/aws/devtools/cloud-development-kit.png) **CloudDevelopmentKit**

```
import { CloudDevelopmentKit } from "diagrams-js/aws/devtools"
```

![Cloud9Resource](/resources/aws/devtools/cloud9-resource.png) **Cloud9Resource**

```
import { Cloud9Resource } from "diagrams-js/aws/devtools"
```

![Cloud9](/resources/aws/devtools/cloud9.png) **Cloud9**

```
import { Cloud9 } from "diagrams-js/aws/devtools"
```

![Cloudshell](/resources/aws/devtools/cloudshell.png) **Cloudshell**

```
import { Cloudshell } from "diagrams-js/aws/devtools"
```

![Codeartifact](/resources/aws/devtools/codeartifact.png) **Codeartifact**

```
import { Codeartifact } from "diagrams-js/aws/devtools"
```

![Codebuild](/resources/aws/devtools/codebuild.png) **Codebuild**

```
import { Codebuild } from "diagrams-js/aws/devtools"
```

![Codecommit](/resources/aws/devtools/codecommit.png) **Codecommit**

```
import { Codecommit } from "diagrams-js/aws/devtools"
```

![Codedeploy](/resources/aws/devtools/codedeploy.png) **Codedeploy**

```
import { Codedeploy } from "diagrams-js/aws/devtools"
```

![Codepipeline](/resources/aws/devtools/codepipeline.png) **Codepipeline**

```
import { Codepipeline } from "diagrams-js/aws/devtools"
```

![Codestar](/resources/aws/devtools/codestar.png) **Codestar**

```
import { Codestar } from "diagrams-js/aws/devtools"
```

![CommandLineInterface](/resources/aws/devtools/command-line-interface.png) **CommandLineInterface**

```
import { CommandLineInterface } from "diagrams-js/aws/devtools"
```

![DeveloperTools](/resources/aws/devtools/developer-tools.png) **DeveloperTools**

```
import { DeveloperTools } from "diagrams-js/aws/devtools"
```

![ToolsAndSdks](/resources/aws/devtools/tools-and-sdks.png) **ToolsAndSdks**

```
import { ToolsAndSdks } from "diagrams-js/aws/devtools"
```

![XRay](/resources/aws/devtools/x-ray.png) **XRay**

```
import { XRay } from "diagrams-js/aws/devtools"
```

### aws/enablement[​](#awsenablement "Direct link to aws/enablement")

![CustomerEnablement](/resources/aws/enablement/customer-enablement.png) **CustomerEnablement**

```
import { CustomerEnablement } from "diagrams-js/aws/enablement"
```

![Iq](/resources/aws/enablement/iq.png) **Iq**

```
import { Iq } from "diagrams-js/aws/enablement"
```

![ManagedServices](/resources/aws/enablement/managed-services.png) **ManagedServices**

```
import { ManagedServices } from "diagrams-js/aws/enablement"
```

![ProfessionalServices](/resources/aws/enablement/professional-services.png) **ProfessionalServices**

```
import { ProfessionalServices } from "diagrams-js/aws/enablement"
```

![Support](/resources/aws/enablement/support.png) **Support**

```
import { Support } from "diagrams-js/aws/enablement"
```

### aws/enduser[​](#awsenduser "Direct link to aws/enduser")

![Appstream20](/resources/aws/enduser/appstream-2-0.png) **Appstream20**

```
import { Appstream20 } from "diagrams-js/aws/enduser"
```

![DesktopAndAppStreaming](/resources/aws/enduser/desktop-and-app-streaming.png) **DesktopAndAppStreaming**

```
import { DesktopAndAppStreaming } from "diagrams-js/aws/enduser"
```

![Workdocs](/resources/aws/enduser/workdocs.png) **Workdocs**

```
import { Workdocs } from "diagrams-js/aws/enduser"
```

![Worklink](/resources/aws/enduser/worklink.png) **Worklink**

```
import { Worklink } from "diagrams-js/aws/enduser"
```

![Workspaces](/resources/aws/enduser/workspaces.png) **Workspaces**

```
import { Workspaces } from "diagrams-js/aws/enduser"
```

### aws/engagement[​](#awsengagement "Direct link to aws/engagement")

![Connect](/resources/aws/engagement/connect.png) **Connect**

```
import { Connect } from "diagrams-js/aws/engagement"
```

![CustomerEngagement](/resources/aws/engagement/customer-engagement.png) **CustomerEngagement**

```
import { CustomerEngagement } from "diagrams-js/aws/engagement"
```

![Pinpoint](/resources/aws/engagement/pinpoint.png) **Pinpoint**

```
import { Pinpoint } from "diagrams-js/aws/engagement"
```

![SimpleEmailServiceSesEmail](/resources/aws/engagement/simple-email-service-ses-email.png) **SimpleEmailServiceSesEmail**

```
import { SimpleEmailServiceSesEmail } from "diagrams-js/aws/engagement"
```

![SimpleEmailServiceSes](/resources/aws/engagement/simple-email-service-ses.png) **SimpleEmailServiceSes**

```
import { SimpleEmailServiceSes } from "diagrams-js/aws/engagement"
```

### aws/game[​](#awsgame "Direct link to aws/game")

![GameTech](/resources/aws/game/game-tech.png) **GameTech**

```
import { GameTech } from "diagrams-js/aws/game"
```

![Gamelift](/resources/aws/game/gamelift.png) **Gamelift**

```
import { Gamelift } from "diagrams-js/aws/game"
```

### aws/general[​](#awsgeneral "Direct link to aws/general")

![Client](/resources/aws/general/client.png) **Client**

```
import { Client } from "diagrams-js/aws/general"
```

![Disk](/resources/aws/general/disk.png) **Disk**

```
import { Disk } from "diagrams-js/aws/general"
```

![Forums](/resources/aws/general/forums.png) **Forums**

```
import { Forums } from "diagrams-js/aws/general"
```

![General](/resources/aws/general/general.png) **General**

```
import { General } from "diagrams-js/aws/general"
```

![GenericDatabase](/resources/aws/general/generic-database.png) **GenericDatabase**

```
import { GenericDatabase } from "diagrams-js/aws/general"
```

![GenericFirewall](/resources/aws/general/generic-firewall.png) **GenericFirewall**

```
import { GenericFirewall } from "diagrams-js/aws/general"
```

![GenericOfficeBuilding](/resources/aws/general/generic-office-building.png) **GenericOfficeBuilding**

```
import { GenericOfficeBuilding } from "diagrams-js/aws/general"
```

![GenericSamlToken](/resources/aws/general/generic-saml-token.png) **GenericSamlToken**

```
import { GenericSamlToken } from "diagrams-js/aws/general"
```

![GenericSDK](/resources/aws/general/generic-sdk.png) **GenericSDK**

```
import { GenericSDK } from "diagrams-js/aws/general"
```

![InternetAlt1](/resources/aws/general/internet-alt1.png) **InternetAlt1**

```
import { InternetAlt1 } from "diagrams-js/aws/general"
```

![InternetAlt2](/resources/aws/general/internet-alt2.png) **InternetAlt2**

```
import { InternetAlt2 } from "diagrams-js/aws/general"
```

![InternetGateway](/resources/aws/general/internet-gateway.png) **InternetGateway**

```
import { InternetGateway } from "diagrams-js/aws/general"
```

![Marketplace](/resources/aws/general/marketplace.png) **Marketplace**

```
import { Marketplace } from "diagrams-js/aws/general"
```

![MobileClient](/resources/aws/general/mobile-client.png) **MobileClient**

```
import { MobileClient } from "diagrams-js/aws/general"
```

![Multimedia](/resources/aws/general/multimedia.png) **Multimedia**

```
import { Multimedia } from "diagrams-js/aws/general"
```

![OfficeBuilding](/resources/aws/general/office-building.png) **OfficeBuilding**

```
import { OfficeBuilding } from "diagrams-js/aws/general"
```

![SamlToken](/resources/aws/general/saml-token.png) **SamlToken**

```
import { SamlToken } from "diagrams-js/aws/general"
```

![SDK](/resources/aws/general/sdk.png) **SDK**

```
import { SDK } from "diagrams-js/aws/general"
```

![SslPadlock](/resources/aws/general/ssl-padlock.png) **SslPadlock**

```
import { SslPadlock } from "diagrams-js/aws/general"
```

![TapeStorage](/resources/aws/general/tape-storage.png) **TapeStorage**

```
import { TapeStorage } from "diagrams-js/aws/general"
```

![Toolkit](/resources/aws/general/toolkit.png) **Toolkit**

```
import { Toolkit } from "diagrams-js/aws/general"
```

![TraditionalServer](/resources/aws/general/traditional-server.png) **TraditionalServer**

```
import { TraditionalServer } from "diagrams-js/aws/general"
```

![User](/resources/aws/general/user.png) **User**

```
import { User } from "diagrams-js/aws/general"
```

![Users](/resources/aws/general/users.png) **Users**

```
import { Users } from "diagrams-js/aws/general"
```

### aws/integration[​](#awsintegration "Direct link to aws/integration")

![ApplicationIntegration](/resources/aws/integration/application-integration.png) **ApplicationIntegration**

```
import { ApplicationIntegration } from "diagrams-js/aws/integration"
```

![Appsync](/resources/aws/integration/appsync.png) **Appsync**

```
import { Appsync } from "diagrams-js/aws/integration"
```

![ConsoleMobileApplication](/resources/aws/integration/console-mobile-application.png) **ConsoleMobileApplication**

```
import { ConsoleMobileApplication } from "diagrams-js/aws/integration"
```

![EventResource](/resources/aws/integration/event-resource.png) **EventResource**

```
import { EventResource } from "diagrams-js/aws/integration"
```

![EventbridgeCustomEventBusResource](/resources/aws/integration/eventbridge-custom-event-bus-resource.png) **EventbridgeCustomEventBusResource**

```
import { EventbridgeCustomEventBusResource } from "diagrams-js/aws/integration"
```

![EventbridgeDefaultEventBusResource](/resources/aws/integration/eventbridge-default-event-bus-resource.png) **EventbridgeDefaultEventBusResource**

```
import { EventbridgeDefaultEventBusResource } from "diagrams-js/aws/integration"
```

![EventbridgeEvent](/resources/aws/integration/eventbridge-event.png) **EventbridgeEvent**

```
import { EventbridgeEvent } from "diagrams-js/aws/integration"
```

![EventbridgePipes](/resources/aws/integration/eventbridge-pipes.png) **EventbridgePipes**

```
import { EventbridgePipes } from "diagrams-js/aws/integration"
```

![EventbridgeRule](/resources/aws/integration/eventbridge-rule.png) **EventbridgeRule**

```
import { EventbridgeRule } from "diagrams-js/aws/integration"
```

![EventbridgeSaasPartnerEventBusResource](/resources/aws/integration/eventbridge-saas-partner-event-bus-resource.png) **EventbridgeSaasPartnerEventBusResource**

```
import { EventbridgeSaasPartnerEventBusResource } from "diagrams-js/aws/integration"
```

![EventbridgeScheduler](/resources/aws/integration/eventbridge-scheduler.png) **EventbridgeScheduler**

```
import { EventbridgeScheduler } from "diagrams-js/aws/integration"
```

![EventbridgeSchema](/resources/aws/integration/eventbridge-schema.png) **EventbridgeSchema**

```
import { EventbridgeSchema } from "diagrams-js/aws/integration"
```

![Eventbridge](/resources/aws/integration/eventbridge.png) **Eventbridge**

```
import { Eventbridge } from "diagrams-js/aws/integration"
```

![ExpressWorkflows](/resources/aws/integration/express-workflows.png) **ExpressWorkflows**

```
import { ExpressWorkflows } from "diagrams-js/aws/integration"
```

![MQ](/resources/aws/integration/mq.png) **MQ**

```
import { MQ } from "diagrams-js/aws/integration"
```

![SimpleNotificationServiceSnsEmailNotification](/resources/aws/integration/simple-notification-service-sns-email-notification.png) **SimpleNotificationServiceSnsEmailNotification**

```
import { SimpleNotificationServiceSnsEmailNotification } from "diagrams-js/aws/integration"
```

![SimpleNotificationServiceSnsHttpNotification](/resources/aws/integration/simple-notification-service-sns-http-notification.png) **SimpleNotificationServiceSnsHttpNotification**

```
import { SimpleNotificationServiceSnsHttpNotification } from "diagrams-js/aws/integration"
```

![SimpleNotificationServiceSnsTopic](/resources/aws/integration/simple-notification-service-sns-topic.png) **SimpleNotificationServiceSnsTopic**

```
import { SimpleNotificationServiceSnsTopic } from "diagrams-js/aws/integration"
```

![SimpleNotificationServiceSns](/resources/aws/integration/simple-notification-service-sns.png) **SimpleNotificationServiceSns**

```
import { SimpleNotificationServiceSns } from "diagrams-js/aws/integration"
```

![SimpleQueueServiceSqsMessage](/resources/aws/integration/simple-queue-service-sqs-message.png) **SimpleQueueServiceSqsMessage**

```
import { SimpleQueueServiceSqsMessage } from "diagrams-js/aws/integration"
```

![SimpleQueueServiceSqsQueue](/resources/aws/integration/simple-queue-service-sqs-queue.png) **SimpleQueueServiceSqsQueue**

```
import { SimpleQueueServiceSqsQueue } from "diagrams-js/aws/integration"
```

![SimpleQueueServiceSqs](/resources/aws/integration/simple-queue-service-sqs.png) **SimpleQueueServiceSqs**

```
import { SimpleQueueServiceSqs } from "diagrams-js/aws/integration"
```

![StepFunctions](/resources/aws/integration/step-functions.png) **StepFunctions**

```
import { StepFunctions } from "diagrams-js/aws/integration"
```

### aws/iot[​](#awsiot "Direct link to aws/iot")

![Freertos](/resources/aws/iot/freertos.png) **Freertos**

```
import { Freertos } from "diagrams-js/aws/iot"
```

![InternetOfThings](/resources/aws/iot/internet-of-things.png) **InternetOfThings**

```
import { InternetOfThings } from "diagrams-js/aws/iot"
```

![Iot1Click](/resources/aws/iot/iot-1-click.png) **Iot1Click**

```
import { Iot1Click } from "diagrams-js/aws/iot"
```

![IotAction](/resources/aws/iot/iot-action.png) **IotAction**

```
import { IotAction } from "diagrams-js/aws/iot"
```

![IotActuator](/resources/aws/iot/iot-actuator.png) **IotActuator**

```
import { IotActuator } from "diagrams-js/aws/iot"
```

![IotAlexaEcho](/resources/aws/iot/iot-alexa-echo.png) **IotAlexaEcho**

```
import { IotAlexaEcho } from "diagrams-js/aws/iot"
```

![IotAlexaEnabledDevice](/resources/aws/iot/iot-alexa-enabled-device.png) **IotAlexaEnabledDevice**

```
import { IotAlexaEnabledDevice } from "diagrams-js/aws/iot"
```

![IotAlexaSkill](/resources/aws/iot/iot-alexa-skill.png) **IotAlexaSkill**

```
import { IotAlexaSkill } from "diagrams-js/aws/iot"
```

![IotAlexaVoiceService](/resources/aws/iot/iot-alexa-voice-service.png) **IotAlexaVoiceService**

```
import { IotAlexaVoiceService } from "diagrams-js/aws/iot"
```

![IotAnalyticsChannel](/resources/aws/iot/iot-analytics-channel.png) **IotAnalyticsChannel**

```
import { IotAnalyticsChannel } from "diagrams-js/aws/iot"
```

![IotAnalyticsDataSet](/resources/aws/iot/iot-analytics-data-set.png) **IotAnalyticsDataSet**

```
import { IotAnalyticsDataSet } from "diagrams-js/aws/iot"
```

![IotAnalyticsDataStore](/resources/aws/iot/iot-analytics-data-store.png) **IotAnalyticsDataStore**

```
import { IotAnalyticsDataStore } from "diagrams-js/aws/iot"
```

![IotAnalyticsNotebook](/resources/aws/iot/iot-analytics-notebook.png) **IotAnalyticsNotebook**

```
import { IotAnalyticsNotebook } from "diagrams-js/aws/iot"
```

![IotAnalyticsPipeline](/resources/aws/iot/iot-analytics-pipeline.png) **IotAnalyticsPipeline**

```
import { IotAnalyticsPipeline } from "diagrams-js/aws/iot"
```

![IotAnalytics](/resources/aws/iot/iot-analytics.png) **IotAnalytics**

```
import { IotAnalytics } from "diagrams-js/aws/iot"
```

![IotBank](/resources/aws/iot/iot-bank.png) **IotBank**

```
import { IotBank } from "diagrams-js/aws/iot"
```

![IotBicycle](/resources/aws/iot/iot-bicycle.png) **IotBicycle**

```
import { IotBicycle } from "diagrams-js/aws/iot"
```

![IotButton](/resources/aws/iot/iot-button.png) **IotButton**

```
import { IotButton } from "diagrams-js/aws/iot"
```

![IotCamera](/resources/aws/iot/iot-camera.png) **IotCamera**

```
import { IotCamera } from "diagrams-js/aws/iot"
```

![IotCar](/resources/aws/iot/iot-car.png) **IotCar**

```
import { IotCar } from "diagrams-js/aws/iot"
```

![IotCart](/resources/aws/iot/iot-cart.png) **IotCart**

```
import { IotCart } from "diagrams-js/aws/iot"
```

![IotCertificate](/resources/aws/iot/iot-certificate.png) **IotCertificate**

```
import { IotCertificate } from "diagrams-js/aws/iot"
```

![IotCoffeePot](/resources/aws/iot/iot-coffee-pot.png) **IotCoffeePot**

```
import { IotCoffeePot } from "diagrams-js/aws/iot"
```

![IotCore](/resources/aws/iot/iot-core.png) **IotCore**

```
import { IotCore } from "diagrams-js/aws/iot"
```

![IotDesiredState](/resources/aws/iot/iot-desired-state.png) **IotDesiredState**

```
import { IotDesiredState } from "diagrams-js/aws/iot"
```

![IotDeviceDefender](/resources/aws/iot/iot-device-defender.png) **IotDeviceDefender**

```
import { IotDeviceDefender } from "diagrams-js/aws/iot"
```

![IotDeviceGateway](/resources/aws/iot/iot-device-gateway.png) **IotDeviceGateway**

```
import { IotDeviceGateway } from "diagrams-js/aws/iot"
```

![IotDeviceManagement](/resources/aws/iot/iot-device-management.png) **IotDeviceManagement**

```
import { IotDeviceManagement } from "diagrams-js/aws/iot"
```

![IotDoorLock](/resources/aws/iot/iot-door-lock.png) **IotDoorLock**

```
import { IotDoorLock } from "diagrams-js/aws/iot"
```

![IotEvents](/resources/aws/iot/iot-events.png) **IotEvents**

```
import { IotEvents } from "diagrams-js/aws/iot"
```

![IotFactory](/resources/aws/iot/iot-factory.png) **IotFactory**

```
import { IotFactory } from "diagrams-js/aws/iot"
```

![IotFireTvStick](/resources/aws/iot/iot-fire-tv-stick.png) **IotFireTvStick**

```
import { IotFireTvStick } from "diagrams-js/aws/iot"
```

![IotFireTv](/resources/aws/iot/iot-fire-tv.png) **IotFireTv**

```
import { IotFireTv } from "diagrams-js/aws/iot"
```

![IotGeneric](/resources/aws/iot/iot-generic.png) **IotGeneric**

```
import { IotGeneric } from "diagrams-js/aws/iot"
```

![IotGreengrassConnector](/resources/aws/iot/iot-greengrass-connector.png) **IotGreengrassConnector**

```
import { IotGreengrassConnector } from "diagrams-js/aws/iot"
```

![IotGreengrass](/resources/aws/iot/iot-greengrass.png) **IotGreengrass**

```
import { IotGreengrass } from "diagrams-js/aws/iot"
```

![IotHardwareBoard](/resources/aws/iot/iot-hardware-board.png) **IotHardwareBoard**

```
import { IotHardwareBoard } from "diagrams-js/aws/iot"
```

![IotHouse](/resources/aws/iot/iot-house.png) **IotHouse**

```
import { IotHouse } from "diagrams-js/aws/iot"
```

![IotHttp](/resources/aws/iot/iot-http.png) **IotHttp**

```
import { IotHttp } from "diagrams-js/aws/iot"
```

![IotHttp2](/resources/aws/iot/iot-http2.png) **IotHttp2**

```
import { IotHttp2 } from "diagrams-js/aws/iot"
```

![IotJobs](/resources/aws/iot/iot-jobs.png) **IotJobs**

```
import { IotJobs } from "diagrams-js/aws/iot"
```

![IotLambda](/resources/aws/iot/iot-lambda.png) **IotLambda**

```
import { IotLambda } from "diagrams-js/aws/iot"
```

![IotLightbulb](/resources/aws/iot/iot-lightbulb.png) **IotLightbulb**

```
import { IotLightbulb } from "diagrams-js/aws/iot"
```

![IotMedicalEmergency](/resources/aws/iot/iot-medical-emergency.png) **IotMedicalEmergency**

```
import { IotMedicalEmergency } from "diagrams-js/aws/iot"
```

![IotMqtt](/resources/aws/iot/iot-mqtt.png) **IotMqtt**

```
import { IotMqtt } from "diagrams-js/aws/iot"
```

![IotOverTheAirUpdate](/resources/aws/iot/iot-over-the-air-update.png) **IotOverTheAirUpdate**

```
import { IotOverTheAirUpdate } from "diagrams-js/aws/iot"
```

![IotPolicyEmergency](/resources/aws/iot/iot-policy-emergency.png) **IotPolicyEmergency**

```
import { IotPolicyEmergency } from "diagrams-js/aws/iot"
```

![IotPolicy](/resources/aws/iot/iot-policy.png) **IotPolicy**

```
import { IotPolicy } from "diagrams-js/aws/iot"
```

![IotReportedState](/resources/aws/iot/iot-reported-state.png) **IotReportedState**

```
import { IotReportedState } from "diagrams-js/aws/iot"
```

![IotRule](/resources/aws/iot/iot-rule.png) **IotRule**

```
import { IotRule } from "diagrams-js/aws/iot"
```

![IotSensor](/resources/aws/iot/iot-sensor.png) **IotSensor**

```
import { IotSensor } from "diagrams-js/aws/iot"
```

![IotServo](/resources/aws/iot/iot-servo.png) **IotServo**

```
import { IotServo } from "diagrams-js/aws/iot"
```

![IotShadow](/resources/aws/iot/iot-shadow.png) **IotShadow**

```
import { IotShadow } from "diagrams-js/aws/iot"
```

![IotSimulator](/resources/aws/iot/iot-simulator.png) **IotSimulator**

```
import { IotSimulator } from "diagrams-js/aws/iot"
```

![IotSitewise](/resources/aws/iot/iot-sitewise.png) **IotSitewise**

```
import { IotSitewise } from "diagrams-js/aws/iot"
```

![IotThermostat](/resources/aws/iot/iot-thermostat.png) **IotThermostat**

```
import { IotThermostat } from "diagrams-js/aws/iot"
```

![IotThingsGraph](/resources/aws/iot/iot-things-graph.png) **IotThingsGraph**

```
import { IotThingsGraph } from "diagrams-js/aws/iot"
```

![IotTopic](/resources/aws/iot/iot-topic.png) **IotTopic**

```
import { IotTopic } from "diagrams-js/aws/iot"
```

![IotTravel](/resources/aws/iot/iot-travel.png) **IotTravel**

```
import { IotTravel } from "diagrams-js/aws/iot"
```

![IotUtility](/resources/aws/iot/iot-utility.png) **IotUtility**

```
import { IotUtility } from "diagrams-js/aws/iot"
```

![IotWindfarm](/resources/aws/iot/iot-windfarm.png) **IotWindfarm**

```
import { IotWindfarm } from "diagrams-js/aws/iot"
```

### aws/management[​](#awsmanagement "Direct link to aws/management")

![AmazonDevopsGuru](/resources/aws/management/amazon-devops-guru.png) **AmazonDevopsGuru**

```
import { AmazonDevopsGuru } from "diagrams-js/aws/management"
```

![AmazonManagedGrafana](/resources/aws/management/amazon-managed-grafana.png) **AmazonManagedGrafana**

```
import { AmazonManagedGrafana } from "diagrams-js/aws/management"
```

![AmazonManagedPrometheus](/resources/aws/management/amazon-managed-prometheus.png) **AmazonManagedPrometheus**

```
import { AmazonManagedPrometheus } from "diagrams-js/aws/management"
```

![AmazonManagedWorkflowsApacheAirflow](/resources/aws/management/amazon-managed-workflows-apache-airflow.png) **AmazonManagedWorkflowsApacheAirflow**

```
import { AmazonManagedWorkflowsApacheAirflow } from "diagrams-js/aws/management"
```

![AutoScaling](/resources/aws/management/auto-scaling.png) **AutoScaling**

```
import { AutoScaling } from "diagrams-js/aws/management"
```

![Chatbot](/resources/aws/management/chatbot.png) **Chatbot**

```
import { Chatbot } from "diagrams-js/aws/management"
```

![CloudformationChangeSet](/resources/aws/management/cloudformation-change-set.png) **CloudformationChangeSet**

```
import { CloudformationChangeSet } from "diagrams-js/aws/management"
```

![CloudformationStack](/resources/aws/management/cloudformation-stack.png) **CloudformationStack**

```
import { CloudformationStack } from "diagrams-js/aws/management"
```

![CloudformationTemplate](/resources/aws/management/cloudformation-template.png) **CloudformationTemplate**

```
import { CloudformationTemplate } from "diagrams-js/aws/management"
```

![Cloudformation](/resources/aws/management/cloudformation.png) **Cloudformation**

```
import { Cloudformation } from "diagrams-js/aws/management"
```

![Cloudtrail](/resources/aws/management/cloudtrail.png) **Cloudtrail**

```
import { Cloudtrail } from "diagrams-js/aws/management"
```

![CloudwatchAlarm](/resources/aws/management/cloudwatch-alarm.png) **CloudwatchAlarm**

```
import { CloudwatchAlarm } from "diagrams-js/aws/management"
```

![CloudwatchEventEventBased](/resources/aws/management/cloudwatch-event-event-based.png) **CloudwatchEventEventBased**

```
import { CloudwatchEventEventBased } from "diagrams-js/aws/management"
```

![CloudwatchEventTimeBased](/resources/aws/management/cloudwatch-event-time-based.png) **CloudwatchEventTimeBased**

```
import { CloudwatchEventTimeBased } from "diagrams-js/aws/management"
```

![CloudwatchLogs](/resources/aws/management/cloudwatch-logs.png) **CloudwatchLogs**

```
import { CloudwatchLogs } from "diagrams-js/aws/management"
```

![CloudwatchRule](/resources/aws/management/cloudwatch-rule.png) **CloudwatchRule**

```
import { CloudwatchRule } from "diagrams-js/aws/management"
```

![Cloudwatch](/resources/aws/management/cloudwatch.png) **Cloudwatch**

```
import { Cloudwatch } from "diagrams-js/aws/management"
```

![Codeguru](/resources/aws/management/codeguru.png) **Codeguru**

```
import { Codeguru } from "diagrams-js/aws/management"
```

![CommandLineInterface](/resources/aws/management/command-line-interface.png) **CommandLineInterface**

```
import { CommandLineInterface } from "diagrams-js/aws/management"
```

![Config](/resources/aws/management/config.png) **Config**

```
import { Config } from "diagrams-js/aws/management"
```

![ControlTower](/resources/aws/management/control-tower.png) **ControlTower**

```
import { ControlTower } from "diagrams-js/aws/management"
```

![LicenseManager](/resources/aws/management/license-manager.png) **LicenseManager**

```
import { LicenseManager } from "diagrams-js/aws/management"
```

![ManagedServices](/resources/aws/management/managed-services.png) **ManagedServices**

```
import { ManagedServices } from "diagrams-js/aws/management"
```

![ManagementAndGovernance](/resources/aws/management/management-and-governance.png) **ManagementAndGovernance**

```
import { ManagementAndGovernance } from "diagrams-js/aws/management"
```

![ManagementConsole](/resources/aws/management/management-console.png) **ManagementConsole**

```
import { ManagementConsole } from "diagrams-js/aws/management"
```

![OpsworksApps](/resources/aws/management/opsworks-apps.png) **OpsworksApps**

```
import { OpsworksApps } from "diagrams-js/aws/management"
```

![OpsworksDeployments](/resources/aws/management/opsworks-deployments.png) **OpsworksDeployments**

```
import { OpsworksDeployments } from "diagrams-js/aws/management"
```

![OpsworksInstances](/resources/aws/management/opsworks-instances.png) **OpsworksInstances**

```
import { OpsworksInstances } from "diagrams-js/aws/management"
```

![OpsworksLayers](/resources/aws/management/opsworks-layers.png) **OpsworksLayers**

```
import { OpsworksLayers } from "diagrams-js/aws/management"
```

![OpsworksMonitoring](/resources/aws/management/opsworks-monitoring.png) **OpsworksMonitoring**

```
import { OpsworksMonitoring } from "diagrams-js/aws/management"
```

![OpsworksPermissions](/resources/aws/management/opsworks-permissions.png) **OpsworksPermissions**

```
import { OpsworksPermissions } from "diagrams-js/aws/management"
```

![OpsworksResources](/resources/aws/management/opsworks-resources.png) **OpsworksResources**

```
import { OpsworksResources } from "diagrams-js/aws/management"
```

![OpsworksStack](/resources/aws/management/opsworks-stack.png) **OpsworksStack**

```
import { OpsworksStack } from "diagrams-js/aws/management"
```

![Opsworks](/resources/aws/management/opsworks.png) **Opsworks**

```
import { Opsworks } from "diagrams-js/aws/management"
```

![OrganizationsAccount](/resources/aws/management/organizations-account.png) **OrganizationsAccount**

```
import { OrganizationsAccount } from "diagrams-js/aws/management"
```

![OrganizationsOrganizationalUnit](/resources/aws/management/organizations-organizational-unit.png) **OrganizationsOrganizationalUnit**

```
import { OrganizationsOrganizationalUnit } from "diagrams-js/aws/management"
```

![Organizations](/resources/aws/management/organizations.png) **Organizations**

```
import { Organizations } from "diagrams-js/aws/management"
```

![PersonalHealthDashboard](/resources/aws/management/personal-health-dashboard.png) **PersonalHealthDashboard**

```
import { PersonalHealthDashboard } from "diagrams-js/aws/management"
```

![Proton](/resources/aws/management/proton.png) **Proton**

```
import { Proton } from "diagrams-js/aws/management"
```

![ServiceCatalog](/resources/aws/management/service-catalog.png) **ServiceCatalog**

```
import { ServiceCatalog } from "diagrams-js/aws/management"
```

![SystemsManagerAppConfig](/resources/aws/management/systems-manager-app-config.png) **SystemsManagerAppConfig**

```
import { SystemsManagerAppConfig } from "diagrams-js/aws/management"
```

![SystemsManagerAutomation](/resources/aws/management/systems-manager-automation.png) **SystemsManagerAutomation**

```
import { SystemsManagerAutomation } from "diagrams-js/aws/management"
```

![SystemsManagerDocuments](/resources/aws/management/systems-manager-documents.png) **SystemsManagerDocuments**

```
import { SystemsManagerDocuments } from "diagrams-js/aws/management"
```

![SystemsManagerInventory](/resources/aws/management/systems-manager-inventory.png) **SystemsManagerInventory**

```
import { SystemsManagerInventory } from "diagrams-js/aws/management"
```

![SystemsManagerMaintenanceWindows](/resources/aws/management/systems-manager-maintenance-windows.png) **SystemsManagerMaintenanceWindows**

```
import { SystemsManagerMaintenanceWindows } from "diagrams-js/aws/management"
```

![SystemsManagerOpscenter](/resources/aws/management/systems-manager-opscenter.png) **SystemsManagerOpscenter**

```
import { SystemsManagerOpscenter } from "diagrams-js/aws/management"
```

![SystemsManagerParameterStore](/resources/aws/management/systems-manager-parameter-store.png) **SystemsManagerParameterStore**

```
import { SystemsManagerParameterStore } from "diagrams-js/aws/management"
```

![SystemsManagerPatchManager](/resources/aws/management/systems-manager-patch-manager.png) **SystemsManagerPatchManager**

```
import { SystemsManagerPatchManager } from "diagrams-js/aws/management"
```

![SystemsManagerRunCommand](/resources/aws/management/systems-manager-run-command.png) **SystemsManagerRunCommand**

```
import { SystemsManagerRunCommand } from "diagrams-js/aws/management"
```

![SystemsManagerStateManager](/resources/aws/management/systems-manager-state-manager.png) **SystemsManagerStateManager**

```
import { SystemsManagerStateManager } from "diagrams-js/aws/management"
```

![SystemsManager](/resources/aws/management/systems-manager.png) **SystemsManager**

```
import { SystemsManager } from "diagrams-js/aws/management"
```

![TrustedAdvisorChecklistCost](/resources/aws/management/trusted-advisor-checklist-cost.png) **TrustedAdvisorChecklistCost**

```
import { TrustedAdvisorChecklistCost } from "diagrams-js/aws/management"
```

![TrustedAdvisorChecklistFaultTolerant](/resources/aws/management/trusted-advisor-checklist-fault-tolerant.png) **TrustedAdvisorChecklistFaultTolerant**

```
import { TrustedAdvisorChecklistFaultTolerant } from "diagrams-js/aws/management"
```

![TrustedAdvisorChecklistPerformance](/resources/aws/management/trusted-advisor-checklist-performance.png) **TrustedAdvisorChecklistPerformance**

```
import { TrustedAdvisorChecklistPerformance } from "diagrams-js/aws/management"
```

![TrustedAdvisorChecklistSecurity](/resources/aws/management/trusted-advisor-checklist-security.png) **TrustedAdvisorChecklistSecurity**

```
import { TrustedAdvisorChecklistSecurity } from "diagrams-js/aws/management"
```

![TrustedAdvisorChecklist](/resources/aws/management/trusted-advisor-checklist.png) **TrustedAdvisorChecklist**

```
import { TrustedAdvisorChecklist } from "diagrams-js/aws/management"
```

![TrustedAdvisor](/resources/aws/management/trusted-advisor.png) **TrustedAdvisor**

```
import { TrustedAdvisor } from "diagrams-js/aws/management"
```

![UserNotifications](/resources/aws/management/user-notifications.png) **UserNotifications**

```
import { UserNotifications } from "diagrams-js/aws/management"
```

![WellArchitectedTool](/resources/aws/management/well-architected-tool.png) **WellArchitectedTool**

```
import { WellArchitectedTool } from "diagrams-js/aws/management"
```

### aws/media[​](#awsmedia "Direct link to aws/media")

![ElasticTranscoder](/resources/aws/media/elastic-transcoder.png) **ElasticTranscoder**

```
import { ElasticTranscoder } from "diagrams-js/aws/media"
```

![ElementalConductor](/resources/aws/media/elemental-conductor.png) **ElementalConductor**

```
import { ElementalConductor } from "diagrams-js/aws/media"
```

![ElementalDelta](/resources/aws/media/elemental-delta.png) **ElementalDelta**

```
import { ElementalDelta } from "diagrams-js/aws/media"
```

![ElementalLive](/resources/aws/media/elemental-live.png) **ElementalLive**

```
import { ElementalLive } from "diagrams-js/aws/media"
```

![ElementalMediaconnect](/resources/aws/media/elemental-mediaconnect.png) **ElementalMediaconnect**

```
import { ElementalMediaconnect } from "diagrams-js/aws/media"
```

![ElementalMediaconvert](/resources/aws/media/elemental-mediaconvert.png) **ElementalMediaconvert**

```
import { ElementalMediaconvert } from "diagrams-js/aws/media"
```

![ElementalMedialive](/resources/aws/media/elemental-medialive.png) **ElementalMedialive**

```
import { ElementalMedialive } from "diagrams-js/aws/media"
```

![ElementalMediapackage](/resources/aws/media/elemental-mediapackage.png) **ElementalMediapackage**

```
import { ElementalMediapackage } from "diagrams-js/aws/media"
```

![ElementalMediastore](/resources/aws/media/elemental-mediastore.png) **ElementalMediastore**

```
import { ElementalMediastore } from "diagrams-js/aws/media"
```

![ElementalMediatailor](/resources/aws/media/elemental-mediatailor.png) **ElementalMediatailor**

```
import { ElementalMediatailor } from "diagrams-js/aws/media"
```

![ElementalServer](/resources/aws/media/elemental-server.png) **ElementalServer**

```
import { ElementalServer } from "diagrams-js/aws/media"
```

![KinesisVideoStreams](/resources/aws/media/kinesis-video-streams.png) **KinesisVideoStreams**

```
import { KinesisVideoStreams } from "diagrams-js/aws/media"
```

![MediaServices](/resources/aws/media/media-services.png) **MediaServices**

```
import { MediaServices } from "diagrams-js/aws/media"
```

### aws/migration[​](#awsmigration "Direct link to aws/migration")

![ApplicationDiscoveryService](/resources/aws/migration/application-discovery-service.png) **ApplicationDiscoveryService**

```
import { ApplicationDiscoveryService } from "diagrams-js/aws/migration"
```

![CloudendureMigration](/resources/aws/migration/cloudendure-migration.png) **CloudendureMigration**

```
import { CloudendureMigration } from "diagrams-js/aws/migration"
```

![DatabaseMigrationService](/resources/aws/migration/database-migration-service.png) **DatabaseMigrationService**

```
import { DatabaseMigrationService } from "diagrams-js/aws/migration"
```

![DatasyncAgent](/resources/aws/migration/datasync-agent.png) **DatasyncAgent**

```
import { DatasyncAgent } from "diagrams-js/aws/migration"
```

![Datasync](/resources/aws/migration/datasync.png) **Datasync**

```
import { Datasync } from "diagrams-js/aws/migration"
```

![MigrationAndTransfer](/resources/aws/migration/migration-and-transfer.png) **MigrationAndTransfer**

```
import { MigrationAndTransfer } from "diagrams-js/aws/migration"
```

![MigrationHub](/resources/aws/migration/migration-hub.png) **MigrationHub**

```
import { MigrationHub } from "diagrams-js/aws/migration"
```

![ServerMigrationService](/resources/aws/migration/server-migration-service.png) **ServerMigrationService**

```
import { ServerMigrationService } from "diagrams-js/aws/migration"
```

![SnowballEdge](/resources/aws/migration/snowball-edge.png) **SnowballEdge**

```
import { SnowballEdge } from "diagrams-js/aws/migration"
```

![Snowball](/resources/aws/migration/snowball.png) **Snowball**

```
import { Snowball } from "diagrams-js/aws/migration"
```

![Snowmobile](/resources/aws/migration/snowmobile.png) **Snowmobile**

```
import { Snowmobile } from "diagrams-js/aws/migration"
```

![TransferForSftp](/resources/aws/migration/transfer-for-sftp.png) **TransferForSftp**

```
import { TransferForSftp } from "diagrams-js/aws/migration"
```

### aws/ml[​](#awsml "Direct link to aws/ml")

![ApacheMxnetOnAWS](/resources/aws/ml/apache-mxnet-on-aws.png) **ApacheMxnetOnAWS**

```
import { ApacheMxnetOnAWS } from "diagrams-js/aws/ml"
```

![AugmentedAi](/resources/aws/ml/augmented-ai.png) **AugmentedAi**

```
import { AugmentedAi } from "diagrams-js/aws/ml"
```

![Bedrock](/resources/aws/ml/bedrock.png) **Bedrock**

```
import { Bedrock } from "diagrams-js/aws/ml"
```

![Comprehend](/resources/aws/ml/comprehend.png) **Comprehend**

```
import { Comprehend } from "diagrams-js/aws/ml"
```

![DeepLearningAmis](/resources/aws/ml/deep-learning-amis.png) **DeepLearningAmis**

```
import { DeepLearningAmis } from "diagrams-js/aws/ml"
```

![DeepLearningContainers](/resources/aws/ml/deep-learning-containers.png) **DeepLearningContainers**

```
import { DeepLearningContainers } from "diagrams-js/aws/ml"
```

![Deepcomposer](/resources/aws/ml/deepcomposer.png) **Deepcomposer**

```
import { Deepcomposer } from "diagrams-js/aws/ml"
```

![Deeplens](/resources/aws/ml/deeplens.png) **Deeplens**

```
import { Deeplens } from "diagrams-js/aws/ml"
```

![Deepracer](/resources/aws/ml/deepracer.png) **Deepracer**

```
import { Deepracer } from "diagrams-js/aws/ml"
```

![ElasticInference](/resources/aws/ml/elastic-inference.png) **ElasticInference**

```
import { ElasticInference } from "diagrams-js/aws/ml"
```

![Forecast](/resources/aws/ml/forecast.png) **Forecast**

```
import { Forecast } from "diagrams-js/aws/ml"
```

![FraudDetector](/resources/aws/ml/fraud-detector.png) **FraudDetector**

```
import { FraudDetector } from "diagrams-js/aws/ml"
```

![Kendra](/resources/aws/ml/kendra.png) **Kendra**

```
import { Kendra } from "diagrams-js/aws/ml"
```

![Lex](/resources/aws/ml/lex.png) **Lex**

```
import { Lex } from "diagrams-js/aws/ml"
```

![MachineLearning](/resources/aws/ml/machine-learning.png) **MachineLearning**

```
import { MachineLearning } from "diagrams-js/aws/ml"
```

![Personalize](/resources/aws/ml/personalize.png) **Personalize**

```
import { Personalize } from "diagrams-js/aws/ml"
```

![Polly](/resources/aws/ml/polly.png) **Polly**

```
import { Polly } from "diagrams-js/aws/ml"
```

![Q](/resources/aws/ml/q.png) **Q**

```
import { Q } from "diagrams-js/aws/ml"
```

![RekognitionImage](/resources/aws/ml/rekognition-image.png) **RekognitionImage**

```
import { RekognitionImage } from "diagrams-js/aws/ml"
```

![RekognitionVideo](/resources/aws/ml/rekognition-video.png) **RekognitionVideo**

```
import { RekognitionVideo } from "diagrams-js/aws/ml"
```

![Rekognition](/resources/aws/ml/rekognition.png) **Rekognition**

```
import { Rekognition } from "diagrams-js/aws/ml"
```

![SagemakerGroundTruth](/resources/aws/ml/sagemaker-ground-truth.png) **SagemakerGroundTruth**

```
import { SagemakerGroundTruth } from "diagrams-js/aws/ml"
```

![SagemakerModel](/resources/aws/ml/sagemaker-model.png) **SagemakerModel**

```
import { SagemakerModel } from "diagrams-js/aws/ml"
```

![SagemakerNotebook](/resources/aws/ml/sagemaker-notebook.png) **SagemakerNotebook**

```
import { SagemakerNotebook } from "diagrams-js/aws/ml"
```

![SagemakerTrainingJob](/resources/aws/ml/sagemaker-training-job.png) **SagemakerTrainingJob**

```
import { SagemakerTrainingJob } from "diagrams-js/aws/ml"
```

![Sagemaker](/resources/aws/ml/sagemaker.png) **Sagemaker**

```
import { Sagemaker } from "diagrams-js/aws/ml"
```

![TensorflowOnAWS](/resources/aws/ml/tensorflow-on-aws.png) **TensorflowOnAWS**

```
import { TensorflowOnAWS } from "diagrams-js/aws/ml"
```

![Textract](/resources/aws/ml/textract.png) **Textract**

```
import { Textract } from "diagrams-js/aws/ml"
```

![Transcribe](/resources/aws/ml/transcribe.png) **Transcribe**

```
import { Transcribe } from "diagrams-js/aws/ml"
```

![Transform](/resources/aws/ml/transform.png) **Transform**

```
import { Transform } from "diagrams-js/aws/ml"
```

![Translate](/resources/aws/ml/translate.png) **Translate**

```
import { Translate } from "diagrams-js/aws/ml"
```

### aws/mobile[​](#awsmobile "Direct link to aws/mobile")

![Amplify](/resources/aws/mobile/amplify.png) **Amplify**

```
import { Amplify } from "diagrams-js/aws/mobile"
```

![APIGatewayEndpoint](/resources/aws/mobile/api-gateway-endpoint.png) **APIGatewayEndpoint**

```
import { APIGatewayEndpoint } from "diagrams-js/aws/mobile"
```

![APIGateway](/resources/aws/mobile/api-gateway.png) **APIGateway**

```
import { APIGateway } from "diagrams-js/aws/mobile"
```

![Appsync](/resources/aws/mobile/appsync.png) **Appsync**

```
import { Appsync } from "diagrams-js/aws/mobile"
```

![DeviceFarm](/resources/aws/mobile/device-farm.png) **DeviceFarm**

```
import { DeviceFarm } from "diagrams-js/aws/mobile"
```

![Mobile](/resources/aws/mobile/mobile.png) **Mobile**

```
import { Mobile } from "diagrams-js/aws/mobile"
```

![Pinpoint](/resources/aws/mobile/pinpoint.png) **Pinpoint**

```
import { Pinpoint } from "diagrams-js/aws/mobile"
```

### aws/network[​](#awsnetwork "Direct link to aws/network")

![APIGatewayEndpoint](/resources/aws/network/api-gateway-endpoint.png) **APIGatewayEndpoint**

```
import { APIGatewayEndpoint } from "diagrams-js/aws/network"
```

![APIGateway](/resources/aws/network/api-gateway.png) **APIGateway**

```
import { APIGateway } from "diagrams-js/aws/network"
```

![AppMesh](/resources/aws/network/app-mesh.png) **AppMesh**

```
import { AppMesh } from "diagrams-js/aws/network"
```

![ClientVpn](/resources/aws/network/client-vpn.png) **ClientVpn**

```
import { ClientVpn } from "diagrams-js/aws/network"
```

![CloudMap](/resources/aws/network/cloud-map.png) **CloudMap**

```
import { CloudMap } from "diagrams-js/aws/network"
```

![CloudFrontDownloadDistribution](/resources/aws/network/cloudfront-download-distribution.png) **CloudFrontDownloadDistribution**

```
import { CloudFrontDownloadDistribution } from "diagrams-js/aws/network"
```

![CloudFrontEdgeLocation](/resources/aws/network/cloudfront-edge-location.png) **CloudFrontEdgeLocation**

```
import { CloudFrontEdgeLocation } from "diagrams-js/aws/network"
```

![CloudFrontStreamingDistribution](/resources/aws/network/cloudfront-streaming-distribution.png) **CloudFrontStreamingDistribution**

```
import { CloudFrontStreamingDistribution } from "diagrams-js/aws/network"
```

![CloudFront](/resources/aws/network/cloudfront.png) **CloudFront**

```
import { CloudFront } from "diagrams-js/aws/network"
```

![DirectConnect](/resources/aws/network/direct-connect.png) **DirectConnect**

```
import { DirectConnect } from "diagrams-js/aws/network"
```

![ElasticLoadBalancing](/resources/aws/network/elastic-load-balancing.png) **ElasticLoadBalancing**

```
import { ElasticLoadBalancing } from "diagrams-js/aws/network"
```

![ElbApplicationLoadBalancer](/resources/aws/network/elb-application-load-balancer.png) **ElbApplicationLoadBalancer**

```
import { ElbApplicationLoadBalancer } from "diagrams-js/aws/network"
```

![ElbClassicLoadBalancer](/resources/aws/network/elb-classic-load-balancer.png) **ElbClassicLoadBalancer**

```
import { ElbClassicLoadBalancer } from "diagrams-js/aws/network"
```

![ElbNetworkLoadBalancer](/resources/aws/network/elb-network-load-balancer.png) **ElbNetworkLoadBalancer**

```
import { ElbNetworkLoadBalancer } from "diagrams-js/aws/network"
```

![Endpoint](/resources/aws/network/endpoint.png) **Endpoint**

```
import { Endpoint } from "diagrams-js/aws/network"
```

![GlobalAccelerator](/resources/aws/network/global-accelerator.png) **GlobalAccelerator**

```
import { GlobalAccelerator } from "diagrams-js/aws/network"
```

![InternetGateway](/resources/aws/network/internet-gateway.png) **InternetGateway**

```
import { InternetGateway } from "diagrams-js/aws/network"
```

![Nacl](/resources/aws/network/nacl.png) **Nacl**

```
import { Nacl } from "diagrams-js/aws/network"
```

![NATGateway](/resources/aws/network/nat-gateway.png) **NATGateway**

```
import { NATGateway } from "diagrams-js/aws/network"
```

![NetworkFirewall](/resources/aws/network/network-firewall.png) **NetworkFirewall**

```
import { NetworkFirewall } from "diagrams-js/aws/network"
```

![NetworkingAndContentDelivery](/resources/aws/network/networking-and-content-delivery.png) **NetworkingAndContentDelivery**

```
import { NetworkingAndContentDelivery } from "diagrams-js/aws/network"
```

![PrivateSubnet](/resources/aws/network/private-subnet.png) **PrivateSubnet**

```
import { PrivateSubnet } from "diagrams-js/aws/network"
```

![Privatelink](/resources/aws/network/privatelink.png) **Privatelink**

```
import { Privatelink } from "diagrams-js/aws/network"
```

![PublicSubnet](/resources/aws/network/public-subnet.png) **PublicSubnet**

```
import { PublicSubnet } from "diagrams-js/aws/network"
```

![Route53HostedZone](/resources/aws/network/route-53-hosted-zone.png) **Route53HostedZone**

```
import { Route53HostedZone } from "diagrams-js/aws/network"
```

![Route53](/resources/aws/network/route-53.png) **Route53**

```
import { Route53 } from "diagrams-js/aws/network"
```

![RouteTable](/resources/aws/network/route-table.png) **RouteTable**

```
import { RouteTable } from "diagrams-js/aws/network"
```

![SiteToSiteVpn](/resources/aws/network/site-to-site-vpn.png) **SiteToSiteVpn**

```
import { SiteToSiteVpn } from "diagrams-js/aws/network"
```

![TransitGatewayAttachment](/resources/aws/network/transit-gateway-attachment.png) **TransitGatewayAttachment**

```
import { TransitGatewayAttachment } from "diagrams-js/aws/network"
```

![TransitGateway](/resources/aws/network/transit-gateway.png) **TransitGateway**

```
import { TransitGateway } from "diagrams-js/aws/network"
```

![VPCCustomerGateway](/resources/aws/network/vpc-customer-gateway.png) **VPCCustomerGateway**

```
import { VPCCustomerGateway } from "diagrams-js/aws/network"
```

![VPCElasticNetworkAdapter](/resources/aws/network/vpc-elastic-network-adapter.png) **VPCElasticNetworkAdapter**

```
import { VPCElasticNetworkAdapter } from "diagrams-js/aws/network"
```

![VPCElasticNetworkInterface](/resources/aws/network/vpc-elastic-network-interface.png) **VPCElasticNetworkInterface**

```
import { VPCElasticNetworkInterface } from "diagrams-js/aws/network"
```

![VPCFlowLogs](/resources/aws/network/vpc-flow-logs.png) **VPCFlowLogs**

```
import { VPCFlowLogs } from "diagrams-js/aws/network"
```

![VPCPeering](/resources/aws/network/vpc-peering.png) **VPCPeering**

```
import { VPCPeering } from "diagrams-js/aws/network"
```

![VPCRouter](/resources/aws/network/vpc-router.png) **VPCRouter**

```
import { VPCRouter } from "diagrams-js/aws/network"
```

![VPCTrafficMirroring](/resources/aws/network/vpc-traffic-mirroring.png) **VPCTrafficMirroring**

```
import { VPCTrafficMirroring } from "diagrams-js/aws/network"
```

![VPC](/resources/aws/network/vpc.png) **VPC**

```
import { VPC } from "diagrams-js/aws/network"
```

![VpnConnection](/resources/aws/network/vpn-connection.png) **VpnConnection**

```
import { VpnConnection } from "diagrams-js/aws/network"
```

![VpnGateway](/resources/aws/network/vpn-gateway.png) **VpnGateway**

```
import { VpnGateway } from "diagrams-js/aws/network"
```

### aws/quantum[​](#awsquantum "Direct link to aws/quantum")

![Braket](/resources/aws/quantum/braket.png) **Braket**

```
import { Braket } from "diagrams-js/aws/quantum"
```

![QuantumTechnologies](/resources/aws/quantum/quantum-technologies.png) **QuantumTechnologies**

```
import { QuantumTechnologies } from "diagrams-js/aws/quantum"
```

### aws/robotics[​](#awsrobotics "Direct link to aws/robotics")

![RobomakerCloudExtensionRos](/resources/aws/robotics/robomaker-cloud-extension-ros.png) **RobomakerCloudExtensionRos**

```
import { RobomakerCloudExtensionRos } from "diagrams-js/aws/robotics"
```

![RobomakerDevelopmentEnvironment](/resources/aws/robotics/robomaker-development-environment.png) **RobomakerDevelopmentEnvironment**

```
import { RobomakerDevelopmentEnvironment } from "diagrams-js/aws/robotics"
```

![RobomakerFleetManagement](/resources/aws/robotics/robomaker-fleet-management.png) **RobomakerFleetManagement**

```
import { RobomakerFleetManagement } from "diagrams-js/aws/robotics"
```

![RobomakerSimulator](/resources/aws/robotics/robomaker-simulator.png) **RobomakerSimulator**

```
import { RobomakerSimulator } from "diagrams-js/aws/robotics"
```

![Robomaker](/resources/aws/robotics/robomaker.png) **Robomaker**

```
import { Robomaker } from "diagrams-js/aws/robotics"
```

![Robotics](/resources/aws/robotics/robotics.png) **Robotics**

```
import { Robotics } from "diagrams-js/aws/robotics"
```

### aws/satellite[​](#awssatellite "Direct link to aws/satellite")

![GroundStation](/resources/aws/satellite/ground-station.png) **GroundStation**

```
import { GroundStation } from "diagrams-js/aws/satellite"
```

![Satellite](/resources/aws/satellite/satellite.png) **Satellite**

```
import { Satellite } from "diagrams-js/aws/satellite"
```

### aws/security[​](#awssecurity "Direct link to aws/security")

![AdConnector](/resources/aws/security/ad-connector.png) **AdConnector**

```
import { AdConnector } from "diagrams-js/aws/security"
```

![Artifact](/resources/aws/security/artifact.png) **Artifact**

```
import { Artifact } from "diagrams-js/aws/security"
```

![CertificateAuthority](/resources/aws/security/certificate-authority.png) **CertificateAuthority**

```
import { CertificateAuthority } from "diagrams-js/aws/security"
```

![CertificateManager](/resources/aws/security/certificate-manager.png) **CertificateManager**

```
import { CertificateManager } from "diagrams-js/aws/security"
```

![CloudDirectory](/resources/aws/security/cloud-directory.png) **CloudDirectory**

```
import { CloudDirectory } from "diagrams-js/aws/security"
```

![Cloudhsm](/resources/aws/security/cloudhsm.png) **Cloudhsm**

```
import { Cloudhsm } from "diagrams-js/aws/security"
```

![Cognito](/resources/aws/security/cognito.png) **Cognito**

```
import { Cognito } from "diagrams-js/aws/security"
```

![Detective](/resources/aws/security/detective.png) **Detective**

```
import { Detective } from "diagrams-js/aws/security"
```

![DirectoryService](/resources/aws/security/directory-service.png) **DirectoryService**

```
import { DirectoryService } from "diagrams-js/aws/security"
```

![FirewallManager](/resources/aws/security/firewall-manager.png) **FirewallManager**

```
import { FirewallManager } from "diagrams-js/aws/security"
```

![Guardduty](/resources/aws/security/guardduty.png) **Guardduty**

```
import { Guardduty } from "diagrams-js/aws/security"
```

![IdentityAndAccessManagementIamAccessAnalyzer](/resources/aws/security/identity-and-access-management-iam-access-analyzer.png) **IdentityAndAccessManagementIamAccessAnalyzer**

```
import { IdentityAndAccessManagementIamAccessAnalyzer } from "diagrams-js/aws/security"
```

![IdentityAndAccessManagementIamAddOn](/resources/aws/security/identity-and-access-management-iam-add-on.png) **IdentityAndAccessManagementIamAddOn**

```
import { IdentityAndAccessManagementIamAddOn } from "diagrams-js/aws/security"
```

![IdentityAndAccessManagementIamAWSStsAlternate](/resources/aws/security/identity-and-access-management-iam-aws-sts-alternate.png) **IdentityAndAccessManagementIamAWSStsAlternate**

```
import { IdentityAndAccessManagementIamAWSStsAlternate } from "diagrams-js/aws/security"
```

![IdentityAndAccessManagementIamAWSSts](/resources/aws/security/identity-and-access-management-iam-aws-sts.png) **IdentityAndAccessManagementIamAWSSts**

```
import { IdentityAndAccessManagementIamAWSSts } from "diagrams-js/aws/security"
```

![IdentityAndAccessManagementIamDataEncryptionKey](/resources/aws/security/identity-and-access-management-iam-data-encryption-key.png) **IdentityAndAccessManagementIamDataEncryptionKey**

```
import { IdentityAndAccessManagementIamDataEncryptionKey } from "diagrams-js/aws/security"
```

![IdentityAndAccessManagementIamEncryptedData](/resources/aws/security/identity-and-access-management-iam-encrypted-data.png) **IdentityAndAccessManagementIamEncryptedData**

```
import { IdentityAndAccessManagementIamEncryptedData } from "diagrams-js/aws/security"
```

![IdentityAndAccessManagementIamLongTermSecurityCredential](/resources/aws/security/identity-and-access-management-iam-long-term-security-credential.png) **IdentityAndAccessManagementIamLongTermSecurityCredential**

```
import { IdentityAndAccessManagementIamLongTermSecurityCredential } from "diagrams-js/aws/security"
```

![IdentityAndAccessManagementIamMfaToken](/resources/aws/security/identity-and-access-management-iam-mfa-token.png) **IdentityAndAccessManagementIamMfaToken**

```
import { IdentityAndAccessManagementIamMfaToken } from "diagrams-js/aws/security"
```

![IdentityAndAccessManagementIamPermissions](/resources/aws/security/identity-and-access-management-iam-permissions.png) **IdentityAndAccessManagementIamPermissions**

```
import { IdentityAndAccessManagementIamPermissions } from "diagrams-js/aws/security"
```

![IdentityAndAccessManagementIamRole](/resources/aws/security/identity-and-access-management-iam-role.png) **IdentityAndAccessManagementIamRole**

```
import { IdentityAndAccessManagementIamRole } from "diagrams-js/aws/security"
```

![IdentityAndAccessManagementIamTemporarySecurityCredential](/resources/aws/security/identity-and-access-management-iam-temporary-security-credential.png) **IdentityAndAccessManagementIamTemporarySecurityCredential**

```
import { IdentityAndAccessManagementIamTemporarySecurityCredential } from "diagrams-js/aws/security"
```

![IdentityAndAccessManagementIam](/resources/aws/security/identity-and-access-management-iam.png) **IdentityAndAccessManagementIam**

```
import { IdentityAndAccessManagementIam } from "diagrams-js/aws/security"
```

![InspectorAgent](/resources/aws/security/inspector-agent.png) **InspectorAgent**

```
import { InspectorAgent } from "diagrams-js/aws/security"
```

![Inspector](/resources/aws/security/inspector.png) **Inspector**

```
import { Inspector } from "diagrams-js/aws/security"
```

![KeyManagementService](/resources/aws/security/key-management-service.png) **KeyManagementService**

```
import { KeyManagementService } from "diagrams-js/aws/security"
```

![Macie](/resources/aws/security/macie.png) **Macie**

```
import { Macie } from "diagrams-js/aws/security"
```

![ManagedMicrosoftAd](/resources/aws/security/managed-microsoft-ad.png) **ManagedMicrosoftAd**

```
import { ManagedMicrosoftAd } from "diagrams-js/aws/security"
```

![ResourceAccessManager](/resources/aws/security/resource-access-manager.png) **ResourceAccessManager**

```
import { ResourceAccessManager } from "diagrams-js/aws/security"
```

![SecretsManager](/resources/aws/security/secrets-manager.png) **SecretsManager**

```
import { SecretsManager } from "diagrams-js/aws/security"
```

![SecurityHubFinding](/resources/aws/security/security-hub-finding.png) **SecurityHubFinding**

```
import { SecurityHubFinding } from "diagrams-js/aws/security"
```

![SecurityHub](/resources/aws/security/security-hub.png) **SecurityHub**

```
import { SecurityHub } from "diagrams-js/aws/security"
```

![SecurityIdentityAndCompliance](/resources/aws/security/security-identity-and-compliance.png) **SecurityIdentityAndCompliance**

```
import { SecurityIdentityAndCompliance } from "diagrams-js/aws/security"
```

![SecurityLake](/resources/aws/security/security-lake.png) **SecurityLake**

```
import { SecurityLake } from "diagrams-js/aws/security"
```

![ShieldAdvanced](/resources/aws/security/shield-advanced.png) **ShieldAdvanced**

```
import { ShieldAdvanced } from "diagrams-js/aws/security"
```

![Shield](/resources/aws/security/shield.png) **Shield**

```
import { Shield } from "diagrams-js/aws/security"
```

![SimpleAd](/resources/aws/security/simple-ad.png) **SimpleAd**

```
import { SimpleAd } from "diagrams-js/aws/security"
```

![SingleSignOn](/resources/aws/security/single-sign-on.png) **SingleSignOn**

```
import { SingleSignOn } from "diagrams-js/aws/security"
```

![WAFFilteringRule](/resources/aws/security/waf-filtering-rule.png) **WAFFilteringRule**

```
import { WAFFilteringRule } from "diagrams-js/aws/security"
```

![WAF](/resources/aws/security/waf.png) **WAF**

```
import { WAF } from "diagrams-js/aws/security"
```

### aws/storage[​](#awsstorage "Direct link to aws/storage")

![Backup](/resources/aws/storage/backup.png) **Backup**

```
import { Backup } from "diagrams-js/aws/storage"
```

![CloudendureDisasterRecovery](/resources/aws/storage/cloudendure-disaster-recovery.png) **CloudendureDisasterRecovery**

```
import { CloudendureDisasterRecovery } from "diagrams-js/aws/storage"
```

![EFSInfrequentaccessPrimaryBg](/resources/aws/storage/efs-infrequentaccess-primary-bg.png) **EFSInfrequentaccessPrimaryBg**

```
import { EFSInfrequentaccessPrimaryBg } from "diagrams-js/aws/storage"
```

![EFSStandardPrimaryBg](/resources/aws/storage/efs-standard-primary-bg.png) **EFSStandardPrimaryBg**

```
import { EFSStandardPrimaryBg } from "diagrams-js/aws/storage"
```

![ElasticBlockStoreEBSSnapshot](/resources/aws/storage/elastic-block-store-ebs-snapshot.png) **ElasticBlockStoreEBSSnapshot**

```
import { ElasticBlockStoreEBSSnapshot } from "diagrams-js/aws/storage"
```

![ElasticBlockStoreEBSVolume](/resources/aws/storage/elastic-block-store-ebs-volume.png) **ElasticBlockStoreEBSVolume**

```
import { ElasticBlockStoreEBSVolume } from "diagrams-js/aws/storage"
```

![ElasticBlockStoreEBS](/resources/aws/storage/elastic-block-store-ebs.png) **ElasticBlockStoreEBS**

```
import { ElasticBlockStoreEBS } from "diagrams-js/aws/storage"
```

![ElasticFileSystemEFSFileSystem](/resources/aws/storage/elastic-file-system-efs-file-system.png) **ElasticFileSystemEFSFileSystem**

```
import { ElasticFileSystemEFSFileSystem } from "diagrams-js/aws/storage"
```

![ElasticFileSystemEFS](/resources/aws/storage/elastic-file-system-efs.png) **ElasticFileSystemEFS**

```
import { ElasticFileSystemEFS } from "diagrams-js/aws/storage"
```

![FsxForLustre](/resources/aws/storage/fsx-for-lustre.png) **FsxForLustre**

```
import { FsxForLustre } from "diagrams-js/aws/storage"
```

![FsxForWindowsFileServer](/resources/aws/storage/fsx-for-windows-file-server.png) **FsxForWindowsFileServer**

```
import { FsxForWindowsFileServer } from "diagrams-js/aws/storage"
```

![Fsx](/resources/aws/storage/fsx.png) **Fsx**

```
import { Fsx } from "diagrams-js/aws/storage"
```

![MultipleVolumesResource](/resources/aws/storage/multiple-volumes-resource.png) **MultipleVolumesResource**

```
import { MultipleVolumesResource } from "diagrams-js/aws/storage"
```

![S3AccessPoints](/resources/aws/storage/s3-access-points.png) **S3AccessPoints**

```
import { S3AccessPoints } from "diagrams-js/aws/storage"
```

![S3GlacierArchive](/resources/aws/storage/s3-glacier-archive.png) **S3GlacierArchive**

```
import { S3GlacierArchive } from "diagrams-js/aws/storage"
```

![S3GlacierVault](/resources/aws/storage/s3-glacier-vault.png) **S3GlacierVault**

```
import { S3GlacierVault } from "diagrams-js/aws/storage"
```

![S3Glacier](/resources/aws/storage/s3-glacier.png) **S3Glacier**

```
import { S3Glacier } from "diagrams-js/aws/storage"
```

![S3ObjectLambdaAccessPoints](/resources/aws/storage/s3-object-lambda-access-points.png) **S3ObjectLambdaAccessPoints**

```
import { S3ObjectLambdaAccessPoints } from "diagrams-js/aws/storage"
```

![SimpleStorageServiceS3BucketWithObjects](/resources/aws/storage/simple-storage-service-s3-bucket-with-objects.png) **SimpleStorageServiceS3BucketWithObjects**

```
import { SimpleStorageServiceS3BucketWithObjects } from "diagrams-js/aws/storage"
```

![SimpleStorageServiceS3Bucket](/resources/aws/storage/simple-storage-service-s3-bucket.png) **SimpleStorageServiceS3Bucket**

```
import { SimpleStorageServiceS3Bucket } from "diagrams-js/aws/storage"
```

![SimpleStorageServiceS3Object](/resources/aws/storage/simple-storage-service-s3-object.png) **SimpleStorageServiceS3Object**

```
import { SimpleStorageServiceS3Object } from "diagrams-js/aws/storage"
```

![SimpleStorageServiceS3](/resources/aws/storage/simple-storage-service-s3.png) **SimpleStorageServiceS3**

```
import { SimpleStorageServiceS3 } from "diagrams-js/aws/storage"
```

![SnowFamilySnowballImportExport](/resources/aws/storage/snow-family-snowball-import-export.png) **SnowFamilySnowballImportExport**

```
import { SnowFamilySnowballImportExport } from "diagrams-js/aws/storage"
```

![SnowballEdge](/resources/aws/storage/snowball-edge.png) **SnowballEdge**

```
import { SnowballEdge } from "diagrams-js/aws/storage"
```

![Snowball](/resources/aws/storage/snowball.png) **Snowball**

```
import { Snowball } from "diagrams-js/aws/storage"
```

![Snowmobile](/resources/aws/storage/snowmobile.png) **Snowmobile**

```
import { Snowmobile } from "diagrams-js/aws/storage"
```

![StorageGatewayCachedVolume](/resources/aws/storage/storage-gateway-cached-volume.png) **StorageGatewayCachedVolume**

```
import { StorageGatewayCachedVolume } from "diagrams-js/aws/storage"
```

![StorageGatewayNonCachedVolume](/resources/aws/storage/storage-gateway-non-cached-volume.png) **StorageGatewayNonCachedVolume**

```
import { StorageGatewayNonCachedVolume } from "diagrams-js/aws/storage"
```

![StorageGatewayVirtualTapeLibrary](/resources/aws/storage/storage-gateway-virtual-tape-library.png) **StorageGatewayVirtualTapeLibrary**

```
import { StorageGatewayVirtualTapeLibrary } from "diagrams-js/aws/storage"
```

![StorageGateway](/resources/aws/storage/storage-gateway.png) **StorageGateway**

```
import { StorageGateway } from "diagrams-js/aws/storage"
```

![Storage](/resources/aws/storage/storage.png) **Storage**

```
import { Storage } from "diagrams-js/aws/storage"
```


---

# Azure

Node types list for the Azure provider.

## Example Usage[​](#example-usage "Direct link to Example Usage")

```
import { Diagram } from "diagrams-js";
import { AIStudio, AnomalyDetector, AzureAppliedAIServices } from "diagrams-js/azure/aimachinelearning";
import { AnalysisServices, AzureDataExplorerClusters, AzureDatabricks } from "diagrams-js/azure/analytics";

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

const node1 = diagram.add(AIStudio("Node 1"));
const node2 = diagram.add(AnalysisServices("Node 2"));

node1.to(node2);

const svg = await diagram.render();
```

note

All node types available in the [Python diagrams library](https://diagrams.mingrammer.com/docs/nodes/azure) are also available in diagrams-js with the same class names and structure.

## Node Reference[​](#node-reference "Direct link to Node Reference")

### azure/aimachinelearning[​](#azureaimachinelearning "Direct link to azure/aimachinelearning")

![AIStudio](/resources/azure/aimachinelearning/ai-studio.png) **AIStudio**

```
import { AIStudio } from "diagrams-js/azure/aimachinelearning"
```

![AnomalyDetector](/resources/azure/aimachinelearning/anomaly-detector.png) **AnomalyDetector**

```
import { AnomalyDetector } from "diagrams-js/azure/aimachinelearning"
```

![AzureAppliedAIServices](/resources/azure/aimachinelearning/azure-applied-ai-services.png) **AzureAppliedAIServices**

```
import { AzureAppliedAIServices } from "diagrams-js/azure/aimachinelearning"
```

![AzureExperimentationStudio](/resources/azure/aimachinelearning/azure-experimentation-studio.png) **AzureExperimentationStudio**

```
import { AzureExperimentationStudio } from "diagrams-js/azure/aimachinelearning"
```

![AzureObjectUnderstanding](/resources/azure/aimachinelearning/azure-object-understanding.png) **AzureObjectUnderstanding**

```
import { AzureObjectUnderstanding } from "diagrams-js/azure/aimachinelearning"
```

![AzureOpenai](/resources/azure/aimachinelearning/azure-openai.png) **AzureOpenai**

```
import { AzureOpenai } from "diagrams-js/azure/aimachinelearning"
```

![BatchAI](/resources/azure/aimachinelearning/batch-ai.png) **BatchAI**

```
import { BatchAI } from "diagrams-js/azure/aimachinelearning"
```

![Bonsai](/resources/azure/aimachinelearning/bonsai.png) **Bonsai**

```
import { Bonsai } from "diagrams-js/azure/aimachinelearning"
```

![BotServices](/resources/azure/aimachinelearning/bot-services.png) **BotServices**

```
import { BotServices } from "diagrams-js/azure/aimachinelearning"
```

![CognitiveSearch](/resources/azure/aimachinelearning/cognitive-search.png) **CognitiveSearch**

```
import { CognitiveSearch } from "diagrams-js/azure/aimachinelearning"
```

![CognitiveServicesDecisions](/resources/azure/aimachinelearning/cognitive-services-decisions.png) **CognitiveServicesDecisions**

```
import { CognitiveServicesDecisions } from "diagrams-js/azure/aimachinelearning"
```

![CognitiveServices](/resources/azure/aimachinelearning/cognitive-services.png) **CognitiveServices**

```
import { CognitiveServices } from "diagrams-js/azure/aimachinelearning"
```

![ComputerVision](/resources/azure/aimachinelearning/computer-vision.png) **ComputerVision**

```
import { ComputerVision } from "diagrams-js/azure/aimachinelearning"
```

![ContentModerators](/resources/azure/aimachinelearning/content-moderators.png) **ContentModerators**

```
import { ContentModerators } from "diagrams-js/azure/aimachinelearning"
```

![CustomVision](/resources/azure/aimachinelearning/custom-vision.png) **CustomVision**

```
import { CustomVision } from "diagrams-js/azure/aimachinelearning"
```

![FaceApis](/resources/azure/aimachinelearning/face-apis.png) **FaceApis**

```
import { FaceApis } from "diagrams-js/azure/aimachinelearning"
```

![FormRecognizers](/resources/azure/aimachinelearning/form-recognizers.png) **FormRecognizers**

```
import { FormRecognizers } from "diagrams-js/azure/aimachinelearning"
```

![GenomicsAccounts](/resources/azure/aimachinelearning/genomics-accounts.png) **GenomicsAccounts**

```
import { GenomicsAccounts } from "diagrams-js/azure/aimachinelearning"
```

![Genomics](/resources/azure/aimachinelearning/genomics.png) **Genomics**

```
import { Genomics } from "diagrams-js/azure/aimachinelearning"
```

![ImmersiveReaders](/resources/azure/aimachinelearning/immersive-readers.png) **ImmersiveReaders**

```
import { ImmersiveReaders } from "diagrams-js/azure/aimachinelearning"
```

![LanguageUnderstanding](/resources/azure/aimachinelearning/language-understanding.png) **LanguageUnderstanding**

```
import { LanguageUnderstanding } from "diagrams-js/azure/aimachinelearning"
```

![Language](/resources/azure/aimachinelearning/language.png) **Language**

```
import { Language } from "diagrams-js/azure/aimachinelearning"
```

![MachineLearningStudioClassicWebServices](/resources/azure/aimachinelearning/machine-learning-studio-classic-web-services.png) **MachineLearningStudioClassicWebServices**

```
import { MachineLearningStudioClassicWebServices } from "diagrams-js/azure/aimachinelearning"
```

![MachineLearningStudioWebServicePlans](/resources/azure/aimachinelearning/machine-learning-studio-web-service-plans.png) **MachineLearningStudioWebServicePlans**

```
import { MachineLearningStudioWebServicePlans } from "diagrams-js/azure/aimachinelearning"
```

![MachineLearningStudioWorkspaces](/resources/azure/aimachinelearning/machine-learning-studio-workspaces.png) **MachineLearningStudioWorkspaces**

```
import { MachineLearningStudioWorkspaces } from "diagrams-js/azure/aimachinelearning"
```

![MachineLearning](/resources/azure/aimachinelearning/machine-learning.png) **MachineLearning**

```
import { MachineLearning } from "diagrams-js/azure/aimachinelearning"
```

![MetricsAdvisor](/resources/azure/aimachinelearning/metrics-advisor.png) **MetricsAdvisor**

```
import { MetricsAdvisor } from "diagrams-js/azure/aimachinelearning"
```

![Personalizers](/resources/azure/aimachinelearning/personalizers.png) **Personalizers**

```
import { Personalizers } from "diagrams-js/azure/aimachinelearning"
```

![QnaMakers](/resources/azure/aimachinelearning/qna-makers.png) **QnaMakers**

```
import { QnaMakers } from "diagrams-js/azure/aimachinelearning"
```

![ServerlessSearch](/resources/azure/aimachinelearning/serverless-search.png) **ServerlessSearch**

```
import { ServerlessSearch } from "diagrams-js/azure/aimachinelearning"
```

![SpeechServices](/resources/azure/aimachinelearning/speech-services.png) **SpeechServices**

```
import { SpeechServices } from "diagrams-js/azure/aimachinelearning"
```

![TranslatorText](/resources/azure/aimachinelearning/translator-text.png) **TranslatorText**

```
import { TranslatorText } from "diagrams-js/azure/aimachinelearning"
```

### azure/analytics[​](#azureanalytics "Direct link to azure/analytics")

![AnalysisServices](/resources/azure/analytics/analysis-services.png) **AnalysisServices**

```
import { AnalysisServices } from "diagrams-js/azure/analytics"
```

![AzureDataExplorerClusters](/resources/azure/analytics/azure-data-explorer-clusters.png) **AzureDataExplorerClusters**

```
import { AzureDataExplorerClusters } from "diagrams-js/azure/analytics"
```

![AzureDatabricks](/resources/azure/analytics/azure-databricks.png) **AzureDatabricks**

```
import { AzureDatabricks } from "diagrams-js/azure/analytics"
```

![AzureSynapseAnalytics](/resources/azure/analytics/azure-synapse-analytics.png) **AzureSynapseAnalytics**

```
import { AzureSynapseAnalytics } from "diagrams-js/azure/analytics"
```

![AzureWorkbooks](/resources/azure/analytics/azure-workbooks.png) **AzureWorkbooks**

```
import { AzureWorkbooks } from "diagrams-js/azure/analytics"
```

![DataExplorerClusters](/resources/azure/analytics/data-explorer-clusters.png) **DataExplorerClusters**

```
import { DataExplorerClusters } from "diagrams-js/azure/analytics"
```

![DataFactories](/resources/azure/analytics/data-factories.png) **DataFactories**

```
import { DataFactories } from "diagrams-js/azure/analytics"
```

![DataLakeAnalytics](/resources/azure/analytics/data-lake-analytics.png) **DataLakeAnalytics**

```
import { DataLakeAnalytics } from "diagrams-js/azure/analytics"
```

![DataLakeStoreGen1](/resources/azure/analytics/data-lake-store-gen1.png) **DataLakeStoreGen1**

```
import { DataLakeStoreGen1 } from "diagrams-js/azure/analytics"
```

![Databricks](/resources/azure/analytics/databricks.png) **Databricks**

```
import { Databricks } from "diagrams-js/azure/analytics"
```

![EndpointAnalytics](/resources/azure/analytics/endpoint-analytics.png) **EndpointAnalytics**

```
import { EndpointAnalytics } from "diagrams-js/azure/analytics"
```

![EventHubClusters](/resources/azure/analytics/event-hub-clusters.png) **EventHubClusters**

```
import { EventHubClusters } from "diagrams-js/azure/analytics"
```

![EventHubs](/resources/azure/analytics/event-hubs.png) **EventHubs**

```
import { EventHubs } from "diagrams-js/azure/analytics"
```

![HDInsightClusters](/resources/azure/analytics/hd-insight-clusters.png) **HDInsightClusters**

```
import { HDInsightClusters } from "diagrams-js/azure/analytics"
```

![LogAnalyticsWorkspaces](/resources/azure/analytics/log-analytics-workspaces.png) **LogAnalyticsWorkspaces**

```
import { LogAnalyticsWorkspaces } from "diagrams-js/azure/analytics"
```

![PowerBiEmbedded](/resources/azure/analytics/power-bi-embedded.png) **PowerBiEmbedded**

```
import { PowerBiEmbedded } from "diagrams-js/azure/analytics"
```

![PowerPlatform](/resources/azure/analytics/power-platform.png) **PowerPlatform**

```
import { PowerPlatform } from "diagrams-js/azure/analytics"
```

![PrivateLinkServices](/resources/azure/analytics/private-link-services.png) **PrivateLinkServices**

```
import { PrivateLinkServices } from "diagrams-js/azure/analytics"
```

![StreamAnalyticsJobs](/resources/azure/analytics/stream-analytics-jobs.png) **StreamAnalyticsJobs**

```
import { StreamAnalyticsJobs } from "diagrams-js/azure/analytics"
```

![SynapseAnalytics](/resources/azure/analytics/synapse-analytics.png) **SynapseAnalytics**

```
import { SynapseAnalytics } from "diagrams-js/azure/analytics"
```

### azure/appservices[​](#azureappservices "Direct link to azure/appservices")

![AppServiceCertificates](/resources/azure/appservices/app-service-certificates.png) **AppServiceCertificates**

```
import { AppServiceCertificates } from "diagrams-js/azure/appservices"
```

![AppServiceDomains](/resources/azure/appservices/app-service-domains.png) **AppServiceDomains**

```
import { AppServiceDomains } from "diagrams-js/azure/appservices"
```

![AppServiceEnvironments](/resources/azure/appservices/app-service-environments.png) **AppServiceEnvironments**

```
import { AppServiceEnvironments } from "diagrams-js/azure/appservices"
```

![AppServicePlans](/resources/azure/appservices/app-service-plans.png) **AppServicePlans**

```
import { AppServicePlans } from "diagrams-js/azure/appservices"
```

![AppServices](/resources/azure/appservices/app-services.png) **AppServices**

```
import { AppServices } from "diagrams-js/azure/appservices"
```

![CDNProfiles](/resources/azure/appservices/cdn-profiles.png) **CDNProfiles**

```
import { CDNProfiles } from "diagrams-js/azure/appservices"
```

![CognitiveSearch](/resources/azure/appservices/cognitive-search.png) **CognitiveSearch**

```
import { CognitiveSearch } from "diagrams-js/azure/appservices"
```

![NotificationHubs](/resources/azure/appservices/notification-hubs.png) **NotificationHubs**

```
import { NotificationHubs } from "diagrams-js/azure/appservices"
```

### azure/azureecosystem[​](#azureazureecosystem "Direct link to azure/azureecosystem")

![Applens](/resources/azure/azureecosystem/applens.png) **Applens**

```
import { Applens } from "diagrams-js/azure/azureecosystem"
```

![AzureHybridCenter](/resources/azure/azureecosystem/azure-hybrid-center.png) **AzureHybridCenter**

```
import { AzureHybridCenter } from "diagrams-js/azure/azureecosystem"
```

![CollaborativeService](/resources/azure/azureecosystem/collaborative-service.png) **CollaborativeService**

```
import { CollaborativeService } from "diagrams-js/azure/azureecosystem"
```

### azure/azurestack[​](#azureazurestack "Direct link to azure/azurestack")

![Capacity](/resources/azure/azurestack/capacity.png) **Capacity**

```
import { Capacity } from "diagrams-js/azure/azurestack"
```

![InfrastructureBackup](/resources/azure/azurestack/infrastructure-backup.png) **InfrastructureBackup**

```
import { InfrastructureBackup } from "diagrams-js/azure/azurestack"
```

![MultiTenancy](/resources/azure/azurestack/multi-tenancy.png) **MultiTenancy**

```
import { MultiTenancy } from "diagrams-js/azure/azurestack"
```

![Offers](/resources/azure/azurestack/offers.png) **Offers**

```
import { Offers } from "diagrams-js/azure/azurestack"
```

![Plans](/resources/azure/azurestack/plans.png) **Plans**

```
import { Plans } from "diagrams-js/azure/azurestack"
```

![Updates](/resources/azure/azurestack/updates.png) **Updates**

```
import { Updates } from "diagrams-js/azure/azurestack"
```

![UserSubscriptions](/resources/azure/azurestack/user-subscriptions.png) **UserSubscriptions**

```
import { UserSubscriptions } from "diagrams-js/azure/azurestack"
```

### azure/blockchain[​](#azureblockchain "Direct link to azure/blockchain")

![AbsMember](/resources/azure/blockchain/abs-member.png) **AbsMember**

```
import { AbsMember } from "diagrams-js/azure/blockchain"
```

![AzureBlockchainService](/resources/azure/blockchain/azure-blockchain-service.png) **AzureBlockchainService**

```
import { AzureBlockchainService } from "diagrams-js/azure/blockchain"
```

![AzureTokenService](/resources/azure/blockchain/azure-token-service.png) **AzureTokenService**

```
import { AzureTokenService } from "diagrams-js/azure/blockchain"
```

![BlockchainApplications](/resources/azure/blockchain/blockchain-applications.png) **BlockchainApplications**

```
import { BlockchainApplications } from "diagrams-js/azure/blockchain"
```

![Consortium](/resources/azure/blockchain/consortium.png) **Consortium**

```
import { Consortium } from "diagrams-js/azure/blockchain"
```

![OutboundConnection](/resources/azure/blockchain/outbound-connection.png) **OutboundConnection**

```
import { OutboundConnection } from "diagrams-js/azure/blockchain"
```

### azure/compute[​](#azurecompute "Direct link to azure/compute")

![AppServices](/resources/azure/compute/app-services.png) **AppServices**

```
import { AppServices } from "diagrams-js/azure/compute"
```

![ApplicationGroup](/resources/azure/compute/application-group.png) **ApplicationGroup**

```
import { ApplicationGroup } from "diagrams-js/azure/compute"
```

![AutomanagedVM](/resources/azure/compute/automanaged-vm.png) **AutomanagedVM**

```
import { AutomanagedVM } from "diagrams-js/azure/compute"
```

![AvailabilitySets](/resources/azure/compute/availability-sets.png) **AvailabilitySets**

```
import { AvailabilitySets } from "diagrams-js/azure/compute"
```

![AzureComputeGalleries](/resources/azure/compute/azure-compute-galleries.png) **AzureComputeGalleries**

```
import { AzureComputeGalleries } from "diagrams-js/azure/compute"
```

![AzureSpringApps](/resources/azure/compute/azure-spring-apps.png) **AzureSpringApps**

```
import { AzureSpringApps } from "diagrams-js/azure/compute"
```

![BatchAccounts](/resources/azure/compute/batch-accounts.png) **BatchAccounts**

```
import { BatchAccounts } from "diagrams-js/azure/compute"
```

![CitrixVirtualDesktopsEssentials](/resources/azure/compute/citrix-virtual-desktops-essentials.png) **CitrixVirtualDesktopsEssentials**

```
import { CitrixVirtualDesktopsEssentials } from "diagrams-js/azure/compute"
```

![CloudServicesClassic](/resources/azure/compute/cloud-services-classic.png) **CloudServicesClassic**

```
import { CloudServicesClassic } from "diagrams-js/azure/compute"
```

![CloudServices](/resources/azure/compute/cloud-services.png) **CloudServices**

```
import { CloudServices } from "diagrams-js/azure/compute"
```

![CloudsimpleVirtualMachines](/resources/azure/compute/cloudsimple-virtual-machines.png) **CloudsimpleVirtualMachines**

```
import { CloudsimpleVirtualMachines } from "diagrams-js/azure/compute"
```

![ContainerApps](/resources/azure/compute/container-apps.png) **ContainerApps**

```
import { ContainerApps } from "diagrams-js/azure/compute"
```

![ContainerInstances](/resources/azure/compute/container-instances.png) **ContainerInstances**

```
import { ContainerInstances } from "diagrams-js/azure/compute"
```

![ContainerRegistries](/resources/azure/compute/container-registries.png) **ContainerRegistries**

```
import { ContainerRegistries } from "diagrams-js/azure/compute"
```

![ContainerServicesDeprecated](/resources/azure/compute/container-services-deprecated.png) **ContainerServicesDeprecated**

```
import { ContainerServicesDeprecated } from "diagrams-js/azure/compute"
```

![DiskEncryptionSets](/resources/azure/compute/disk-encryption-sets.png) **DiskEncryptionSets**

```
import { DiskEncryptionSets } from "diagrams-js/azure/compute"
```

![DiskSnapshots](/resources/azure/compute/disk-snapshots.png) **DiskSnapshots**

```
import { DiskSnapshots } from "diagrams-js/azure/compute"
```

![DisksClassic](/resources/azure/compute/disks-classic.png) **DisksClassic**

```
import { DisksClassic } from "diagrams-js/azure/compute"
```

![DisksSnapshots](/resources/azure/compute/disks-snapshots.png) **DisksSnapshots**

```
import { DisksSnapshots } from "diagrams-js/azure/compute"
```

![Disks](/resources/azure/compute/disks.png) **Disks**

```
import { Disks } from "diagrams-js/azure/compute"
```

![FunctionApps](/resources/azure/compute/function-apps.png) **FunctionApps**

```
import { FunctionApps } from "diagrams-js/azure/compute"
```

![HostGroups](/resources/azure/compute/host-groups.png) **HostGroups**

```
import { HostGroups } from "diagrams-js/azure/compute"
```

![HostPools](/resources/azure/compute/host-pools.png) **HostPools**

```
import { HostPools } from "diagrams-js/azure/compute"
```

![Hosts](/resources/azure/compute/hosts.png) **Hosts**

```
import { Hosts } from "diagrams-js/azure/compute"
```

![ImageDefinitions](/resources/azure/compute/image-definitions.png) **ImageDefinitions**

```
import { ImageDefinitions } from "diagrams-js/azure/compute"
```

![ImageTemplates](/resources/azure/compute/image-templates.png) **ImageTemplates**

```
import { ImageTemplates } from "diagrams-js/azure/compute"
```

![ImageVersions](/resources/azure/compute/image-versions.png) **ImageVersions**

```
import { ImageVersions } from "diagrams-js/azure/compute"
```

![Images](/resources/azure/compute/images.png) **Images**

```
import { Images } from "diagrams-js/azure/compute"
```

![KubernetesServices](/resources/azure/compute/kubernetes-services.png) **KubernetesServices**

```
import { KubernetesServices } from "diagrams-js/azure/compute"
```

![MaintenanceConfiguration](/resources/azure/compute/maintenance-configuration.png) **MaintenanceConfiguration**

```
import { MaintenanceConfiguration } from "diagrams-js/azure/compute"
```

![ManagedServiceFabric](/resources/azure/compute/managed-service-fabric.png) **ManagedServiceFabric**

```
import { ManagedServiceFabric } from "diagrams-js/azure/compute"
```

![MeshApplications](/resources/azure/compute/mesh-applications.png) **MeshApplications**

```
import { MeshApplications } from "diagrams-js/azure/compute"
```

![MetricsAdvisor](/resources/azure/compute/metrics-advisor.png) **MetricsAdvisor**

```
import { MetricsAdvisor } from "diagrams-js/azure/compute"
```

![OsImagesClassic](/resources/azure/compute/os-images-classic.png) **OsImagesClassic**

```
import { OsImagesClassic } from "diagrams-js/azure/compute"
```

![OsImages](/resources/azure/compute/os-images.png) **OsImages**

```
import { OsImages } from "diagrams-js/azure/compute"
```

![RestorePointsCollections](/resources/azure/compute/restore-points-collections.png) **RestorePointsCollections**

```
import { RestorePointsCollections } from "diagrams-js/azure/compute"
```

![RestorePoints](/resources/azure/compute/restore-points.png) **RestorePoints**

```
import { RestorePoints } from "diagrams-js/azure/compute"
```

![SAPHANAOnAzure](/resources/azure/compute/sap-hana-on-azure.png) **SAPHANAOnAzure**

```
import { SAPHANAOnAzure } from "diagrams-js/azure/compute"
```

![ServiceFabricClusters](/resources/azure/compute/service-fabric-clusters.png) **ServiceFabricClusters**

```
import { ServiceFabricClusters } from "diagrams-js/azure/compute"
```

![SharedImageGalleries](/resources/azure/compute/shared-image-galleries.png) **SharedImageGalleries**

```
import { SharedImageGalleries } from "diagrams-js/azure/compute"
```

![SpringCloud](/resources/azure/compute/spring-cloud.png) **SpringCloud**

```
import { SpringCloud } from "diagrams-js/azure/compute"
```

![VirtualMachine](/resources/azure/compute/virtual-machine.png) **VirtualMachine**

```
import { VirtualMachine } from "diagrams-js/azure/compute"
```

![VirtualMachinesClassic](/resources/azure/compute/virtual-machines-classic.png) **VirtualMachinesClassic**

```
import { VirtualMachinesClassic } from "diagrams-js/azure/compute"
```

![VMClassic](/resources/azure/compute/vm-classic.png) **VMClassic**

```
import { VMClassic } from "diagrams-js/azure/compute"
```

![VMImagesClassic](/resources/azure/compute/vm-images-classic.png) **VMImagesClassic**

```
import { VMImagesClassic } from "diagrams-js/azure/compute"
```

![VMImages](/resources/azure/compute/vm-images.png) **VMImages**

```
import { VMImages } from "diagrams-js/azure/compute"
```

![VMLinux](/resources/azure/compute/vm-linux.png) **VMLinux**

```
import { VMLinux } from "diagrams-js/azure/compute"
```

![VMScaleSet](/resources/azure/compute/vm-scale-set.png) **VMScaleSet**

```
import { VMScaleSet } from "diagrams-js/azure/compute"
```

![VMScaleSets](/resources/azure/compute/vm-scale-sets.png) **VMScaleSets**

```
import { VMScaleSets } from "diagrams-js/azure/compute"
```

![VMWindows](/resources/azure/compute/vm-windows.png) **VMWindows**

```
import { VMWindows } from "diagrams-js/azure/compute"
```

![VM](/resources/azure/compute/vm.png) **VM**

```
import { VM } from "diagrams-js/azure/compute"
```

![Workspaces2](/resources/azure/compute/workspaces-2.png) **Workspaces2**

```
import { Workspaces2 } from "diagrams-js/azure/compute"
```

![Workspaces](/resources/azure/compute/workspaces.png) **Workspaces**

```
import { Workspaces } from "diagrams-js/azure/compute"
```

### azure/containers[​](#azurecontainers "Direct link to azure/containers")

![AppServices](/resources/azure/containers/app-services.png) **AppServices**

```
import { AppServices } from "diagrams-js/azure/containers"
```

![AzureRedHatOpenshift](/resources/azure/containers/azure-red-hat-openshift.png) **AzureRedHatOpenshift**

```
import { AzureRedHatOpenshift } from "diagrams-js/azure/containers"
```

![BatchAccounts](/resources/azure/containers/batch-accounts.png) **BatchAccounts**

```
import { BatchAccounts } from "diagrams-js/azure/containers"
```

![ContainerInstances](/resources/azure/containers/container-instances.png) **ContainerInstances**

```
import { ContainerInstances } from "diagrams-js/azure/containers"
```

![ContainerRegistries](/resources/azure/containers/container-registries.png) **ContainerRegistries**

```
import { ContainerRegistries } from "diagrams-js/azure/containers"
```

![KubernetesServices](/resources/azure/containers/kubernetes-services.png) **KubernetesServices**

```
import { KubernetesServices } from "diagrams-js/azure/containers"
```

![ServiceFabricClusters](/resources/azure/containers/service-fabric-clusters.png) **ServiceFabricClusters**

```
import { ServiceFabricClusters } from "diagrams-js/azure/containers"
```

### azure/database[​](#azuredatabase "Direct link to azure/database")

![BlobStorage](/resources/azure/database/blob-storage.png) **BlobStorage**

```
import { BlobStorage } from "diagrams-js/azure/database"
```

![CacheForRedis](/resources/azure/database/cache-for-redis.png) **CacheForRedis**

```
import { CacheForRedis } from "diagrams-js/azure/database"
```

![CosmosDb](/resources/azure/database/cosmos-db.png) **CosmosDb**

```
import { CosmosDb } from "diagrams-js/azure/database"
```

![DataExplorerClusters](/resources/azure/database/data-explorer-clusters.png) **DataExplorerClusters**

```
import { DataExplorerClusters } from "diagrams-js/azure/database"
```

![DataFactory](/resources/azure/database/data-factory.png) **DataFactory**

```
import { DataFactory } from "diagrams-js/azure/database"
```

![DataLake](/resources/azure/database/data-lake.png) **DataLake**

```
import { DataLake } from "diagrams-js/azure/database"
```

![DatabaseForMariadbServers](/resources/azure/database/database-for-mariadb-servers.png) **DatabaseForMariadbServers**

```
import { DatabaseForMariadbServers } from "diagrams-js/azure/database"
```

![DatabaseForMysqlServers](/resources/azure/database/database-for-mysql-servers.png) **DatabaseForMysqlServers**

```
import { DatabaseForMysqlServers } from "diagrams-js/azure/database"
```

![DatabaseForPostgresqlServers](/resources/azure/database/database-for-postgresql-servers.png) **DatabaseForPostgresqlServers**

```
import { DatabaseForPostgresqlServers } from "diagrams-js/azure/database"
```

![ElasticDatabasePools](/resources/azure/database/elastic-database-pools.png) **ElasticDatabasePools**

```
import { ElasticDatabasePools } from "diagrams-js/azure/database"
```

![ElasticJobAgents](/resources/azure/database/elastic-job-agents.png) **ElasticJobAgents**

```
import { ElasticJobAgents } from "diagrams-js/azure/database"
```

![InstancePools](/resources/azure/database/instance-pools.png) **InstancePools**

```
import { InstancePools } from "diagrams-js/azure/database"
```

![ManagedDatabases](/resources/azure/database/managed-databases.png) **ManagedDatabases**

```
import { ManagedDatabases } from "diagrams-js/azure/database"
```

![SQLDatabases](/resources/azure/database/sql-databases.png) **SQLDatabases**

```
import { SQLDatabases } from "diagrams-js/azure/database"
```

![SQLDatawarehouse](/resources/azure/database/sql-datawarehouse.png) **SQLDatawarehouse**

```
import { SQLDatawarehouse } from "diagrams-js/azure/database"
```

![SQLManagedInstances](/resources/azure/database/sql-managed-instances.png) **SQLManagedInstances**

```
import { SQLManagedInstances } from "diagrams-js/azure/database"
```

![SQLServerStretchDatabases](/resources/azure/database/sql-server-stretch-databases.png) **SQLServerStretchDatabases**

```
import { SQLServerStretchDatabases } from "diagrams-js/azure/database"
```

![SQLServers](/resources/azure/database/sql-servers.png) **SQLServers**

```
import { SQLServers } from "diagrams-js/azure/database"
```

![SQLVM](/resources/azure/database/sql-vm.png) **SQLVM**

```
import { SQLVM } from "diagrams-js/azure/database"
```

![SQL](/resources/azure/database/sql.png) **SQL**

```
import { SQL } from "diagrams-js/azure/database"
```

![SsisLiftAndShiftIr](/resources/azure/database/ssis-lift-and-shift-ir.png) **SsisLiftAndShiftIr**

```
import { SsisLiftAndShiftIr } from "diagrams-js/azure/database"
```

![SynapseAnalytics](/resources/azure/database/synapse-analytics.png) **SynapseAnalytics**

```
import { SynapseAnalytics } from "diagrams-js/azure/database"
```

![VirtualClusters](/resources/azure/database/virtual-clusters.png) **VirtualClusters**

```
import { VirtualClusters } from "diagrams-js/azure/database"
```

![VirtualDatacenter](/resources/azure/database/virtual-datacenter.png) **VirtualDatacenter**

```
import { VirtualDatacenter } from "diagrams-js/azure/database"
```

### azure/databases[​](#azuredatabases "Direct link to azure/databases")

![AzureCosmosDb](/resources/azure/databases/azure-cosmos-db.png) **AzureCosmosDb**

```
import { AzureCosmosDb } from "diagrams-js/azure/databases"
```

![AzureDataExplorerClusters](/resources/azure/databases/azure-data-explorer-clusters.png) **AzureDataExplorerClusters**

```
import { AzureDataExplorerClusters } from "diagrams-js/azure/databases"
```

![AzureDatabaseMariadbServer](/resources/azure/databases/azure-database-mariadb-server.png) **AzureDatabaseMariadbServer**

```
import { AzureDatabaseMariadbServer } from "diagrams-js/azure/databases"
```

![AzureDatabaseMigrationServices](/resources/azure/databases/azure-database-migration-services.png) **AzureDatabaseMigrationServices**

```
import { AzureDatabaseMigrationServices } from "diagrams-js/azure/databases"
```

![AzureDatabaseMysqlServer](/resources/azure/databases/azure-database-mysql-server.png) **AzureDatabaseMysqlServer**

```
import { AzureDatabaseMysqlServer } from "diagrams-js/azure/databases"
```

![AzureDatabasePostgresqlServerGroup](/resources/azure/databases/azure-database-postgresql-server-group.png) **AzureDatabasePostgresqlServerGroup**

```
import { AzureDatabasePostgresqlServerGroup } from "diagrams-js/azure/databases"
```

![AzureDatabasePostgresqlServer](/resources/azure/databases/azure-database-postgresql-server.png) **AzureDatabasePostgresqlServer**

```
import { AzureDatabasePostgresqlServer } from "diagrams-js/azure/databases"
```

![AzurePurviewAccounts](/resources/azure/databases/azure-purview-accounts.png) **AzurePurviewAccounts**

```
import { AzurePurviewAccounts } from "diagrams-js/azure/databases"
```

![AzureSQLEdge](/resources/azure/databases/azure-sql-edge.png) **AzureSQLEdge**

```
import { AzureSQLEdge } from "diagrams-js/azure/databases"
```

![AzureSQLServerStretchDatabases](/resources/azure/databases/azure-sql-server-stretch-databases.png) **AzureSQLServerStretchDatabases**

```
import { AzureSQLServerStretchDatabases } from "diagrams-js/azure/databases"
```

![AzureSQLVM](/resources/azure/databases/azure-sql-vm.png) **AzureSQLVM**

```
import { AzureSQLVM } from "diagrams-js/azure/databases"
```

![AzureSQL](/resources/azure/databases/azure-sql.png) **AzureSQL**

```
import { AzureSQL } from "diagrams-js/azure/databases"
```

![AzureSynapseAnalytics](/resources/azure/databases/azure-synapse-analytics.png) **AzureSynapseAnalytics**

```
import { AzureSynapseAnalytics } from "diagrams-js/azure/databases"
```

![CacheRedis](/resources/azure/databases/cache-redis.png) **CacheRedis**

```
import { CacheRedis } from "diagrams-js/azure/databases"
```

![DataFactories](/resources/azure/databases/data-factories.png) **DataFactories**

```
import { DataFactories } from "diagrams-js/azure/databases"
```

![ElasticJobAgents](/resources/azure/databases/elastic-job-agents.png) **ElasticJobAgents**

```
import { ElasticJobAgents } from "diagrams-js/azure/databases"
```

![InstancePools](/resources/azure/databases/instance-pools.png) **InstancePools**

```
import { InstancePools } from "diagrams-js/azure/databases"
```

![ManagedDatabase](/resources/azure/databases/managed-database.png) **ManagedDatabase**

```
import { ManagedDatabase } from "diagrams-js/azure/databases"
```

![OracleDatabase](/resources/azure/databases/oracle-database.png) **OracleDatabase**

```
import { OracleDatabase } from "diagrams-js/azure/databases"
```

![SQLDataWarehouses](/resources/azure/databases/sql-data-warehouses.png) **SQLDataWarehouses**

```
import { SQLDataWarehouses } from "diagrams-js/azure/databases"
```

![SQLDatabase](/resources/azure/databases/sql-database.png) **SQLDatabase**

```
import { SQLDatabase } from "diagrams-js/azure/databases"
```

![SQLElasticPools](/resources/azure/databases/sql-elastic-pools.png) **SQLElasticPools**

```
import { SQLElasticPools } from "diagrams-js/azure/databases"
```

![SQLManagedInstance](/resources/azure/databases/sql-managed-instance.png) **SQLManagedInstance**

```
import { SQLManagedInstance } from "diagrams-js/azure/databases"
```

![SQLServerRegistries](/resources/azure/databases/sql-server-registries.png) **SQLServerRegistries**

```
import { SQLServerRegistries } from "diagrams-js/azure/databases"
```

![SQLServer](/resources/azure/databases/sql-server.png) **SQLServer**

```
import { SQLServer } from "diagrams-js/azure/databases"
```

![SsisLiftAndShiftIr](/resources/azure/databases/ssis-lift-and-shift-ir.png) **SsisLiftAndShiftIr**

```
import { SsisLiftAndShiftIr } from "diagrams-js/azure/databases"
```

![VirtualClusters](/resources/azure/databases/virtual-clusters.png) **VirtualClusters**

```
import { VirtualClusters } from "diagrams-js/azure/databases"
```

### azure/devops[​](#azuredevops "Direct link to azure/devops")

![APIConnections](/resources/azure/devops/api-connections.png) **APIConnections**

```
import { APIConnections } from "diagrams-js/azure/devops"
```

![APIManagementServices](/resources/azure/devops/api-management-services.png) **APIManagementServices**

```
import { APIManagementServices } from "diagrams-js/azure/devops"
```

![ApplicationInsights](/resources/azure/devops/application-insights.png) **ApplicationInsights**

```
import { ApplicationInsights } from "diagrams-js/azure/devops"
```

![Artifacts](/resources/azure/devops/artifacts.png) **Artifacts**

```
import { Artifacts } from "diagrams-js/azure/devops"
```

![AzureDevops](/resources/azure/devops/azure-devops.png) **AzureDevops**

```
import { AzureDevops } from "diagrams-js/azure/devops"
```

![Boards](/resources/azure/devops/boards.png) **Boards**

```
import { Boards } from "diagrams-js/azure/devops"
```

![ChangeAnalysis](/resources/azure/devops/change-analysis.png) **ChangeAnalysis**

```
import { ChangeAnalysis } from "diagrams-js/azure/devops"
```

![Cloudtest](/resources/azure/devops/cloudtest.png) **Cloudtest**

```
import { Cloudtest } from "diagrams-js/azure/devops"
```

![CodeOptimization](/resources/azure/devops/code-optimization.png) **CodeOptimization**

```
import { CodeOptimization } from "diagrams-js/azure/devops"
```

![DevopsStarter](/resources/azure/devops/devops-starter.png) **DevopsStarter**

```
import { DevopsStarter } from "diagrams-js/azure/devops"
```

![Devops](/resources/azure/devops/devops.png) **Devops**

```
import { Devops } from "diagrams-js/azure/devops"
```

![DevtestLabs](/resources/azure/devops/devtest-labs.png) **DevtestLabs**

```
import { DevtestLabs } from "diagrams-js/azure/devops"
```

![LabAccounts](/resources/azure/devops/lab-accounts.png) **LabAccounts**

```
import { LabAccounts } from "diagrams-js/azure/devops"
```

![LabServices](/resources/azure/devops/lab-services.png) **LabServices**

```
import { LabServices } from "diagrams-js/azure/devops"
```

![LoadTesting](/resources/azure/devops/load-testing.png) **LoadTesting**

```
import { LoadTesting } from "diagrams-js/azure/devops"
```

![Pipelines](/resources/azure/devops/pipelines.png) **Pipelines**

```
import { Pipelines } from "diagrams-js/azure/devops"
```

![Repos](/resources/azure/devops/repos.png) **Repos**

```
import { Repos } from "diagrams-js/azure/devops"
```

![TestPlans](/resources/azure/devops/test-plans.png) **TestPlans**

```
import { TestPlans } from "diagrams-js/azure/devops"
```

### azure/general[​](#azuregeneral "Direct link to azure/general")

![AllResources](/resources/azure/general/all-resources.png) **AllResources**

```
import { AllResources } from "diagrams-js/azure/general"
```

![Allresources](/resources/azure/general/allresources.png) **Allresources**

```
import { Allresources } from "diagrams-js/azure/general"
```

![Azurehome](/resources/azure/general/azurehome.png) **Azurehome**

```
import { Azurehome } from "diagrams-js/azure/general"
```

![Backlog](/resources/azure/general/backlog.png) **Backlog**

```
import { Backlog } from "diagrams-js/azure/general"
```

![BizTalk](/resources/azure/general/biz-talk.png) **BizTalk**

```
import { BizTalk } from "diagrams-js/azure/general"
```

![BlobBlock](/resources/azure/general/blob-block.png) **BlobBlock**

```
import { BlobBlock } from "diagrams-js/azure/general"
```

![BlobPage](/resources/azure/general/blob-page.png) **BlobPage**

```
import { BlobPage } from "diagrams-js/azure/general"
```

![Branch](/resources/azure/general/branch.png) **Branch**

```
import { Branch } from "diagrams-js/azure/general"
```

![Browser](/resources/azure/general/browser.png) **Browser**

```
import { Browser } from "diagrams-js/azure/general"
```

![Bug](/resources/azure/general/bug.png) **Bug**

```
import { Bug } from "diagrams-js/azure/general"
```

![Builds](/resources/azure/general/builds.png) **Builds**

```
import { Builds } from "diagrams-js/azure/general"
```

![Cache](/resources/azure/general/cache.png) **Cache**

```
import { Cache } from "diagrams-js/azure/general"
```

![Code](/resources/azure/general/code.png) **Code**

```
import { Code } from "diagrams-js/azure/general"
```

![Commit](/resources/azure/general/commit.png) **Commit**

```
import { Commit } from "diagrams-js/azure/general"
```

![ControlsHorizontal](/resources/azure/general/controls-horizontal.png) **ControlsHorizontal**

```
import { ControlsHorizontal } from "diagrams-js/azure/general"
```

![Controls](/resources/azure/general/controls.png) **Controls**

```
import { Controls } from "diagrams-js/azure/general"
```

![CostAlerts](/resources/azure/general/cost-alerts.png) **CostAlerts**

```
import { CostAlerts } from "diagrams-js/azure/general"
```

![CostAnalysis](/resources/azure/general/cost-analysis.png) **CostAnalysis**

```
import { CostAnalysis } from "diagrams-js/azure/general"
```

![CostBudgets](/resources/azure/general/cost-budgets.png) **CostBudgets**

```
import { CostBudgets } from "diagrams-js/azure/general"
```

![CostManagementAndBilling](/resources/azure/general/cost-management-and-billing.png) **CostManagementAndBilling**

```
import { CostManagementAndBilling } from "diagrams-js/azure/general"
```

![CostManagement](/resources/azure/general/cost-management.png) **CostManagement**

```
import { CostManagement } from "diagrams-js/azure/general"
```

![Counter](/resources/azure/general/counter.png) **Counter**

```
import { Counter } from "diagrams-js/azure/general"
```

![Cubes](/resources/azure/general/cubes.png) **Cubes**

```
import { Cubes } from "diagrams-js/azure/general"
```

![Dashboard](/resources/azure/general/dashboard.png) **Dashboard**

```
import { Dashboard } from "diagrams-js/azure/general"
```

![DevConsole](/resources/azure/general/dev-console.png) **DevConsole**

```
import { DevConsole } from "diagrams-js/azure/general"
```

![Developertools](/resources/azure/general/developertools.png) **Developertools**

```
import { Developertools } from "diagrams-js/azure/general"
```

![Download](/resources/azure/general/download.png) **Download**

```
import { Download } from "diagrams-js/azure/general"
```

![Error](/resources/azure/general/error.png) **Error**

```
import { Error } from "diagrams-js/azure/general"
```

![Extensions](/resources/azure/general/extensions.png) **Extensions**

```
import { Extensions } from "diagrams-js/azure/general"
```

![FeaturePreviews](/resources/azure/general/feature-previews.png) **FeaturePreviews**

```
import { FeaturePreviews } from "diagrams-js/azure/general"
```

![File](/resources/azure/general/file.png) **File**

```
import { File } from "diagrams-js/azure/general"
```

![Files](/resources/azure/general/files.png) **Files**

```
import { Files } from "diagrams-js/azure/general"
```

![FolderBlank](/resources/azure/general/folder-blank.png) **FolderBlank**

```
import { FolderBlank } from "diagrams-js/azure/general"
```

![FolderWebsite](/resources/azure/general/folder-website.png) **FolderWebsite**

```
import { FolderWebsite } from "diagrams-js/azure/general"
```

![FreeServices](/resources/azure/general/free-services.png) **FreeServices**

```
import { FreeServices } from "diagrams-js/azure/general"
```

![Ftp](/resources/azure/general/ftp.png) **Ftp**

```
import { Ftp } from "diagrams-js/azure/general"
```

![Gear](/resources/azure/general/gear.png) **Gear**

```
import { Gear } from "diagrams-js/azure/general"
```

![GlobeError](/resources/azure/general/globe-error.png) **GlobeError**

```
import { GlobeError } from "diagrams-js/azure/general"
```

![GlobeSuccess](/resources/azure/general/globe-success.png) **GlobeSuccess**

```
import { GlobeSuccess } from "diagrams-js/azure/general"
```

![GlobeWarning](/resources/azure/general/globe-warning.png) **GlobeWarning**

```
import { GlobeWarning } from "diagrams-js/azure/general"
```

![Guide](/resources/azure/general/guide.png) **Guide**

```
import { Guide } from "diagrams-js/azure/general"
```

![Heart](/resources/azure/general/heart.png) **Heart**

```
import { Heart } from "diagrams-js/azure/general"
```

![HelpAndSupport](/resources/azure/general/help-and-support.png) **HelpAndSupport**

```
import { HelpAndSupport } from "diagrams-js/azure/general"
```

![Helpsupport](/resources/azure/general/helpsupport.png) **Helpsupport**

```
import { Helpsupport } from "diagrams-js/azure/general"
```

![Image](/resources/azure/general/image.png) **Image**

```
import { Image } from "diagrams-js/azure/general"
```

![Information](/resources/azure/general/information.png) **Information**

```
import { Information } from "diagrams-js/azure/general"
```

![InputOutput](/resources/azure/general/input-output.png) **InputOutput**

```
import { InputOutput } from "diagrams-js/azure/general"
```

![JourneyHub](/resources/azure/general/journey-hub.png) **JourneyHub**

```
import { JourneyHub } from "diagrams-js/azure/general"
```

![LaunchPortal](/resources/azure/general/launch-portal.png) **LaunchPortal**

```
import { LaunchPortal } from "diagrams-js/azure/general"
```

![Learn](/resources/azure/general/learn.png) **Learn**

```
import { Learn } from "diagrams-js/azure/general"
```

![LoadTest](/resources/azure/general/load-test.png) **LoadTest**

```
import { LoadTest } from "diagrams-js/azure/general"
```

![Location](/resources/azure/general/location.png) **Location**

```
import { Location } from "diagrams-js/azure/general"
```

![LogStreaming](/resources/azure/general/log-streaming.png) **LogStreaming**

```
import { LogStreaming } from "diagrams-js/azure/general"
```

![ManagementGroups](/resources/azure/general/management-groups.png) **ManagementGroups**

```
import { ManagementGroups } from "diagrams-js/azure/general"
```

![ManagementPortal](/resources/azure/general/management-portal.png) **ManagementPortal**

```
import { ManagementPortal } from "diagrams-js/azure/general"
```

![Managementgroups](/resources/azure/general/managementgroups.png) **Managementgroups**

```
import { Managementgroups } from "diagrams-js/azure/general"
```

![MarketplaceManagement](/resources/azure/general/marketplace-management.png) **MarketplaceManagement**

```
import { MarketplaceManagement } from "diagrams-js/azure/general"
```

![Marketplace](/resources/azure/general/marketplace.png) **Marketplace**

```
import { Marketplace } from "diagrams-js/azure/general"
```

![MediaFile](/resources/azure/general/media-file.png) **MediaFile**

```
import { MediaFile } from "diagrams-js/azure/general"
```

![Media](/resources/azure/general/media.png) **Media**

```
import { Media } from "diagrams-js/azure/general"
```

![MobileEngagement](/resources/azure/general/mobile-engagement.png) **MobileEngagement**

```
import { MobileEngagement } from "diagrams-js/azure/general"
```

![Mobile](/resources/azure/general/mobile.png) **Mobile**

```
import { Mobile } from "diagrams-js/azure/general"
```

![Module](/resources/azure/general/module.png) **Module**

```
import { Module } from "diagrams-js/azure/general"
```

![PowerUp](/resources/azure/general/power-up.png) **PowerUp**

```
import { PowerUp } from "diagrams-js/azure/general"
```

![Power](/resources/azure/general/power.png) **Power**

```
import { Power } from "diagrams-js/azure/general"
```

![Powershell](/resources/azure/general/powershell.png) **Powershell**

```
import { Powershell } from "diagrams-js/azure/general"
```

![PreviewFeatures](/resources/azure/general/preview-features.png) **PreviewFeatures**

```
import { PreviewFeatures } from "diagrams-js/azure/general"
```

![ProcessExplorer](/resources/azure/general/process-explorer.png) **ProcessExplorer**

```
import { ProcessExplorer } from "diagrams-js/azure/general"
```

![ProductionReadyDatabase](/resources/azure/general/production-ready-database.png) **ProductionReadyDatabase**

```
import { ProductionReadyDatabase } from "diagrams-js/azure/general"
```

![QuickstartCenter](/resources/azure/general/quickstart-center.png) **QuickstartCenter**

```
import { QuickstartCenter } from "diagrams-js/azure/general"
```

![Quickstartcenter](/resources/azure/general/quickstartcenter.png) **Quickstartcenter**

```
import { Quickstartcenter } from "diagrams-js/azure/general"
```

![Recent](/resources/azure/general/recent.png) **Recent**

```
import { Recent } from "diagrams-js/azure/general"
```

![RegionManagement](/resources/azure/general/region-management.png) **RegionManagement**

```
import { RegionManagement } from "diagrams-js/azure/general"
```

![Reservations](/resources/azure/general/reservations.png) **Reservations**

```
import { Reservations } from "diagrams-js/azure/general"
```

![ResourceExplorer](/resources/azure/general/resource-explorer.png) **ResourceExplorer**

```
import { ResourceExplorer } from "diagrams-js/azure/general"
```

![ResourceGroupList](/resources/azure/general/resource-group-list.png) **ResourceGroupList**

```
import { ResourceGroupList } from "diagrams-js/azure/general"
```

![ResourceGroups](/resources/azure/general/resource-groups.png) **ResourceGroups**

```
import { ResourceGroups } from "diagrams-js/azure/general"
```

![ResourceLinked](/resources/azure/general/resource-linked.png) **ResourceLinked**

```
import { ResourceLinked } from "diagrams-js/azure/general"
```

![Resource](/resources/azure/general/resource.png) **Resource**

```
import { Resource } from "diagrams-js/azure/general"
```

![Resourcegroups](/resources/azure/general/resourcegroups.png) **Resourcegroups**

```
import { Resourcegroups } from "diagrams-js/azure/general"
```

![Scheduler](/resources/azure/general/scheduler.png) **Scheduler**

```
import { Scheduler } from "diagrams-js/azure/general"
```

![SearchGrid](/resources/azure/general/search-grid.png) **SearchGrid**

```
import { SearchGrid } from "diagrams-js/azure/general"
```

![Search](/resources/azure/general/search.png) **Search**

```
import { Search } from "diagrams-js/azure/general"
```

![ServerFarm](/resources/azure/general/server-farm.png) **ServerFarm**

```
import { ServerFarm } from "diagrams-js/azure/general"
```

![ServiceHealth](/resources/azure/general/service-health.png) **ServiceHealth**

```
import { ServiceHealth } from "diagrams-js/azure/general"
```

![Servicehealth](/resources/azure/general/servicehealth.png) **Servicehealth**

```
import { Servicehealth } from "diagrams-js/azure/general"
```

![Shareddashboard](/resources/azure/general/shareddashboard.png) **Shareddashboard**

```
import { Shareddashboard } from "diagrams-js/azure/general"
```

![Ssd](/resources/azure/general/ssd.png) **Ssd**

```
import { Ssd } from "diagrams-js/azure/general"
```

![StorageAzureFiles](/resources/azure/general/storage-azure-files.png) **StorageAzureFiles**

```
import { StorageAzureFiles } from "diagrams-js/azure/general"
```

![StorageContainer](/resources/azure/general/storage-container.png) **StorageContainer**

```
import { StorageContainer } from "diagrams-js/azure/general"
```

![StorageQueue](/resources/azure/general/storage-queue.png) **StorageQueue**

```
import { StorageQueue } from "diagrams-js/azure/general"
```

![Subscriptions](/resources/azure/general/subscriptions.png) **Subscriptions**

```
import { Subscriptions } from "diagrams-js/azure/general"
```

![Support](/resources/azure/general/support.png) **Support**

```
import { Support } from "diagrams-js/azure/general"
```

![Supportrequests](/resources/azure/general/supportrequests.png) **Supportrequests**

```
import { Supportrequests } from "diagrams-js/azure/general"
```

![Table](/resources/azure/general/table.png) **Table**

```
import { Table } from "diagrams-js/azure/general"
```

![Tag](/resources/azure/general/tag.png) **Tag**

```
import { Tag } from "diagrams-js/azure/general"
```

![Tags](/resources/azure/general/tags.png) **Tags**

```
import { Tags } from "diagrams-js/azure/general"
```

![Templates](/resources/azure/general/templates.png) **Templates**

```
import { Templates } from "diagrams-js/azure/general"
```

![TfsVcRepository](/resources/azure/general/tfs-vc-repository.png) **TfsVcRepository**

```
import { TfsVcRepository } from "diagrams-js/azure/general"
```

![Toolbox](/resources/azure/general/toolbox.png) **Toolbox**

```
import { Toolbox } from "diagrams-js/azure/general"
```

![Troubleshoot](/resources/azure/general/troubleshoot.png) **Troubleshoot**

```
import { Troubleshoot } from "diagrams-js/azure/general"
```

![Twousericon](/resources/azure/general/twousericon.png) **Twousericon**

```
import { Twousericon } from "diagrams-js/azure/general"
```

![Userhealthicon](/resources/azure/general/userhealthicon.png) **Userhealthicon**

```
import { Userhealthicon } from "diagrams-js/azure/general"
```

![Usericon](/resources/azure/general/usericon.png) **Usericon**

```
import { Usericon } from "diagrams-js/azure/general"
```

![Userprivacy](/resources/azure/general/userprivacy.png) **Userprivacy**

```
import { Userprivacy } from "diagrams-js/azure/general"
```

![Userresource](/resources/azure/general/userresource.png) **Userresource**

```
import { Userresource } from "diagrams-js/azure/general"
```

![Versions](/resources/azure/general/versions.png) **Versions**

```
import { Versions } from "diagrams-js/azure/general"
```

![WebSlots](/resources/azure/general/web-slots.png) **WebSlots**

```
import { WebSlots } from "diagrams-js/azure/general"
```

![WebTest](/resources/azure/general/web-test.png) **WebTest**

```
import { WebTest } from "diagrams-js/azure/general"
```

![WebsitePower](/resources/azure/general/website-power.png) **WebsitePower**

```
import { WebsitePower } from "diagrams-js/azure/general"
```

![WebsiteStaging](/resources/azure/general/website-staging.png) **WebsiteStaging**

```
import { WebsiteStaging } from "diagrams-js/azure/general"
```

![Whatsnew](/resources/azure/general/whatsnew.png) **Whatsnew**

```
import { Whatsnew } from "diagrams-js/azure/general"
```

![Workbooks](/resources/azure/general/workbooks.png) **Workbooks**

```
import { Workbooks } from "diagrams-js/azure/general"
```

![Workflow](/resources/azure/general/workflow.png) **Workflow**

```
import { Workflow } from "diagrams-js/azure/general"
```

### azure/hybridmulticloud[​](#azurehybridmulticloud "Direct link to azure/hybridmulticloud")

![AzureOperator5gCore](/resources/azure/hybridmulticloud/azure-operator-5g-core.png) **AzureOperator5gCore**

```
import { AzureOperator5gCore } from "diagrams-js/azure/hybridmulticloud"
```

![AzureOperatorInsights](/resources/azure/hybridmulticloud/azure-operator-insights.png) **AzureOperatorInsights**

```
import { AzureOperatorInsights } from "diagrams-js/azure/hybridmulticloud"
```

![AzureOperatorNexus](/resources/azure/hybridmulticloud/azure-operator-nexus.png) **AzureOperatorNexus**

```
import { AzureOperatorNexus } from "diagrams-js/azure/hybridmulticloud"
```

![AzureOperatorServiceManager](/resources/azure/hybridmulticloud/azure-operator-service-manager.png) **AzureOperatorServiceManager**

```
import { AzureOperatorServiceManager } from "diagrams-js/azure/hybridmulticloud"
```

![AzureProgrammableConnectivity](/resources/azure/hybridmulticloud/azure-programmable-connectivity.png) **AzureProgrammableConnectivity**

```
import { AzureProgrammableConnectivity } from "diagrams-js/azure/hybridmulticloud"
```

### azure/identity[​](#azureidentity "Direct link to azure/identity")

![AadLicenses](/resources/azure/identity/aad-licenses.png) **AadLicenses**

```
import { AadLicenses } from "diagrams-js/azure/identity"
```

![AccessReview](/resources/azure/identity/access-review.png) **AccessReview**

```
import { AccessReview } from "diagrams-js/azure/identity"
```

![ActiveDirectoryConnectHealth](/resources/azure/identity/active-directory-connect-health.png) **ActiveDirectoryConnectHealth**

```
import { ActiveDirectoryConnectHealth } from "diagrams-js/azure/identity"
```

![ActiveDirectory](/resources/azure/identity/active-directory.png) **ActiveDirectory**

```
import { ActiveDirectory } from "diagrams-js/azure/identity"
```

![ADB2C](/resources/azure/identity/ad-b2c.png) **ADB2C**

```
import { ADB2C } from "diagrams-js/azure/identity"
```

![ADDomainServices](/resources/azure/identity/ad-domain-services.png) **ADDomainServices**

```
import { ADDomainServices } from "diagrams-js/azure/identity"
```

![ADIdentityProtection](/resources/azure/identity/ad-identity-protection.png) **ADIdentityProtection**

```
import { ADIdentityProtection } from "diagrams-js/azure/identity"
```

![ADPrivilegedIdentityManagement](/resources/azure/identity/ad-privileged-identity-management.png) **ADPrivilegedIdentityManagement**

```
import { ADPrivilegedIdentityManagement } from "diagrams-js/azure/identity"
```

![AdministrativeUnits](/resources/azure/identity/administrative-units.png) **AdministrativeUnits**

```
import { AdministrativeUnits } from "diagrams-js/azure/identity"
```

![APIProxy](/resources/azure/identity/api-proxy.png) **APIProxy**

```
import { APIProxy } from "diagrams-js/azure/identity"
```

![AppRegistrations](/resources/azure/identity/app-registrations.png) **AppRegistrations**

```
import { AppRegistrations } from "diagrams-js/azure/identity"
```

![AzureActiveDirectory](/resources/azure/identity/azure-active-directory.png) **AzureActiveDirectory**

```
import { AzureActiveDirectory } from "diagrams-js/azure/identity"
```

![AzureADB2C](/resources/azure/identity/azure-ad-b2c.png) **AzureADB2C**

```
import { AzureADB2C } from "diagrams-js/azure/identity"
```

![AzureADDomainServices](/resources/azure/identity/azure-ad-domain-services.png) **AzureADDomainServices**

```
import { AzureADDomainServices } from "diagrams-js/azure/identity"
```

![AzureADIdentityProtection](/resources/azure/identity/azure-ad-identity-protection.png) **AzureADIdentityProtection**

```
import { AzureADIdentityProtection } from "diagrams-js/azure/identity"
```

![AzureADPrivilegeIdentityManagement](/resources/azure/identity/azure-ad-privilege-identity-management.png) **AzureADPrivilegeIdentityManagement**

```
import { AzureADPrivilegeIdentityManagement } from "diagrams-js/azure/identity"
```

![AzureADPrivlegedIdentityManagement](/resources/azure/identity/azure-ad-privleged-identity-management.png) **AzureADPrivlegedIdentityManagement**

```
import { AzureADPrivlegedIdentityManagement } from "diagrams-js/azure/identity"
```

![AzureADRolesAndAdministrators](/resources/azure/identity/azure-ad-roles-and-administrators.png) **AzureADRolesAndAdministrators**

```
import { AzureADRolesAndAdministrators } from "diagrams-js/azure/identity"
```

![AzureInformationProtection](/resources/azure/identity/azure-information-protection.png) **AzureInformationProtection**

```
import { AzureInformationProtection } from "diagrams-js/azure/identity"
```

![ConditionalAccess](/resources/azure/identity/conditional-access.png) **ConditionalAccess**

```
import { ConditionalAccess } from "diagrams-js/azure/identity"
```

![CustomAzureADRoles](/resources/azure/identity/custom-azure-ad-roles.png) **CustomAzureADRoles**

```
import { CustomAzureADRoles } from "diagrams-js/azure/identity"
```

![EnterpriseApplications](/resources/azure/identity/enterprise-applications.png) **EnterpriseApplications**

```
import { EnterpriseApplications } from "diagrams-js/azure/identity"
```

![EntraConnect](/resources/azure/identity/entra-connect.png) **EntraConnect**

```
import { EntraConnect } from "diagrams-js/azure/identity"
```

![EntraDomainServices](/resources/azure/identity/entra-domain-services.png) **EntraDomainServices**

```
import { EntraDomainServices } from "diagrams-js/azure/identity"
```

![EntraIDProtection](/resources/azure/identity/entra-id-protection.png) **EntraIDProtection**

```
import { EntraIDProtection } from "diagrams-js/azure/identity"
```

![EntraManagedIdentities](/resources/azure/identity/entra-managed-identities.png) **EntraManagedIdentities**

```
import { EntraManagedIdentities } from "diagrams-js/azure/identity"
```

![EntraPrivlegedIdentityManagement](/resources/azure/identity/entra-privleged-identity-management.png) **EntraPrivlegedIdentityManagement**

```
import { EntraPrivlegedIdentityManagement } from "diagrams-js/azure/identity"
```

![EntraVerifiedID](/resources/azure/identity/entra-verified-id.png) **EntraVerifiedID**

```
import { EntraVerifiedID } from "diagrams-js/azure/identity"
```

![ExternalIdentities](/resources/azure/identity/external-identities.png) **ExternalIdentities**

```
import { ExternalIdentities } from "diagrams-js/azure/identity"
```

![GlobalSecureAccess](/resources/azure/identity/global-secure-access.png) **GlobalSecureAccess**

```
import { GlobalSecureAccess } from "diagrams-js/azure/identity"
```

![Groups](/resources/azure/identity/groups.png) **Groups**

```
import { Groups } from "diagrams-js/azure/identity"
```

![IdentityGovernance](/resources/azure/identity/identity-governance.png) **IdentityGovernance**

```
import { IdentityGovernance } from "diagrams-js/azure/identity"
```

![InformationProtection](/resources/azure/identity/information-protection.png) **InformationProtection**

```
import { InformationProtection } from "diagrams-js/azure/identity"
```

![InternetAccess](/resources/azure/identity/internet-access.png) **InternetAccess**

```
import { InternetAccess } from "diagrams-js/azure/identity"
```

![ManagedIdentities](/resources/azure/identity/managed-identities.png) **ManagedIdentities**

```
import { ManagedIdentities } from "diagrams-js/azure/identity"
```

![PrivateAccess](/resources/azure/identity/private-access.png) **PrivateAccess**

```
import { PrivateAccess } from "diagrams-js/azure/identity"
```

![Security](/resources/azure/identity/security.png) **Security**

```
import { Security } from "diagrams-js/azure/identity"
```

![TenantProperties](/resources/azure/identity/tenant-properties.png) **TenantProperties**

```
import { TenantProperties } from "diagrams-js/azure/identity"
```

![UserSettings](/resources/azure/identity/user-settings.png) **UserSettings**

```
import { UserSettings } from "diagrams-js/azure/identity"
```

![Users](/resources/azure/identity/users.png) **Users**

```
import { Users } from "diagrams-js/azure/identity"
```

![VerifiableCredentials](/resources/azure/identity/verifiable-credentials.png) **VerifiableCredentials**

```
import { VerifiableCredentials } from "diagrams-js/azure/identity"
```

### azure/integration[​](#azureintegration "Direct link to azure/integration")

![APIConnections](/resources/azure/integration/api-connections.png) **APIConnections**

```
import { APIConnections } from "diagrams-js/azure/integration"
```

![APIForFhir](/resources/azure/integration/api-for-fhir.png) **APIForFhir**

```
import { APIForFhir } from "diagrams-js/azure/integration"
```

![APIManagementServices](/resources/azure/integration/api-management-services.png) **APIManagementServices**

```
import { APIManagementServices } from "diagrams-js/azure/integration"
```

![APIManagement](/resources/azure/integration/api-management.png) **APIManagement**

```
import { APIManagement } from "diagrams-js/azure/integration"
```

![AppConfiguration](/resources/azure/integration/app-configuration.png) **AppConfiguration**

```
import { AppConfiguration } from "diagrams-js/azure/integration"
```

![AzureAPIForFhir](/resources/azure/integration/azure-api-for-fhir.png) **AzureAPIForFhir**

```
import { AzureAPIForFhir } from "diagrams-js/azure/integration"
```

![AzureDataCatalog](/resources/azure/integration/azure-data-catalog.png) **AzureDataCatalog**

```
import { AzureDataCatalog } from "diagrams-js/azure/integration"
```

![AzureDataboxGateway](/resources/azure/integration/azure-databox-gateway.png) **AzureDataboxGateway**

```
import { AzureDataboxGateway } from "diagrams-js/azure/integration"
```

![AzureServiceBus](/resources/azure/integration/azure-service-bus.png) **AzureServiceBus**

```
import { AzureServiceBus } from "diagrams-js/azure/integration"
```

![AzureSQLServerStretchDatabases](/resources/azure/integration/azure-sql-server-stretch-databases.png) **AzureSQLServerStretchDatabases**

```
import { AzureSQLServerStretchDatabases } from "diagrams-js/azure/integration"
```

![AzureStackEdge](/resources/azure/integration/azure-stack-edge.png) **AzureStackEdge**

```
import { AzureStackEdge } from "diagrams-js/azure/integration"
```

![DataCatalog](/resources/azure/integration/data-catalog.png) **DataCatalog**

```
import { DataCatalog } from "diagrams-js/azure/integration"
```

![DataFactories](/resources/azure/integration/data-factories.png) **DataFactories**

```
import { DataFactories } from "diagrams-js/azure/integration"
```

![EventGridDomains](/resources/azure/integration/event-grid-domains.png) **EventGridDomains**

```
import { EventGridDomains } from "diagrams-js/azure/integration"
```

![EventGridSubscriptions](/resources/azure/integration/event-grid-subscriptions.png) **EventGridSubscriptions**

```
import { EventGridSubscriptions } from "diagrams-js/azure/integration"
```

![EventGridTopics](/resources/azure/integration/event-grid-topics.png) **EventGridTopics**

```
import { EventGridTopics } from "diagrams-js/azure/integration"
```

![IntegrationAccounts](/resources/azure/integration/integration-accounts.png) **IntegrationAccounts**

```
import { IntegrationAccounts } from "diagrams-js/azure/integration"
```

![IntegrationEnvironments](/resources/azure/integration/integration-environments.png) **IntegrationEnvironments**

```
import { IntegrationEnvironments } from "diagrams-js/azure/integration"
```

![IntegrationServiceEnvironments](/resources/azure/integration/integration-service-environments.png) **IntegrationServiceEnvironments**

```
import { IntegrationServiceEnvironments } from "diagrams-js/azure/integration"
```

![LogicAppsCustomConnector](/resources/azure/integration/logic-apps-custom-connector.png) **LogicAppsCustomConnector**

```
import { LogicAppsCustomConnector } from "diagrams-js/azure/integration"
```

![LogicApps](/resources/azure/integration/logic-apps.png) **LogicApps**

```
import { LogicApps } from "diagrams-js/azure/integration"
```

![PartnerNamespace](/resources/azure/integration/partner-namespace.png) **PartnerNamespace**

```
import { PartnerNamespace } from "diagrams-js/azure/integration"
```

![PartnerRegistration](/resources/azure/integration/partner-registration.png) **PartnerRegistration**

```
import { PartnerRegistration } from "diagrams-js/azure/integration"
```

![PartnerTopic](/resources/azure/integration/partner-topic.png) **PartnerTopic**

```
import { PartnerTopic } from "diagrams-js/azure/integration"
```

![PowerPlatform](/resources/azure/integration/power-platform.png) **PowerPlatform**

```
import { PowerPlatform } from "diagrams-js/azure/integration"
```

![Relays](/resources/azure/integration/relays.png) **Relays**

```
import { Relays } from "diagrams-js/azure/integration"
```

![SendgridAccounts](/resources/azure/integration/sendgrid-accounts.png) **SendgridAccounts**

```
import { SendgridAccounts } from "diagrams-js/azure/integration"
```

![ServiceBusRelays](/resources/azure/integration/service-bus-relays.png) **ServiceBusRelays**

```
import { ServiceBusRelays } from "diagrams-js/azure/integration"
```

![ServiceBus](/resources/azure/integration/service-bus.png) **ServiceBus**

```
import { ServiceBus } from "diagrams-js/azure/integration"
```

![ServiceCatalogManagedApplicationDefinitions](/resources/azure/integration/service-catalog-managed-application-definitions.png) **ServiceCatalogManagedApplicationDefinitions**

```
import { ServiceCatalogManagedApplicationDefinitions } from "diagrams-js/azure/integration"
```

![SoftwareAsAService](/resources/azure/integration/software-as-a-service.png) **SoftwareAsAService**

```
import { SoftwareAsAService } from "diagrams-js/azure/integration"
```

![SQLDataWarehouses](/resources/azure/integration/sql-data-warehouses.png) **SQLDataWarehouses**

```
import { SQLDataWarehouses } from "diagrams-js/azure/integration"
```

![StorsimpleDeviceManagers](/resources/azure/integration/storsimple-device-managers.png) **StorsimpleDeviceManagers**

```
import { StorsimpleDeviceManagers } from "diagrams-js/azure/integration"
```

![SystemTopic](/resources/azure/integration/system-topic.png) **SystemTopic**

```
import { SystemTopic } from "diagrams-js/azure/integration"
```

### azure/intune[​](#azureintune "Direct link to azure/intune")

![AzureADRolesAndAdministrators](/resources/azure/intune/azure-ad-roles-and-administrators.png) **AzureADRolesAndAdministrators**

```
import { AzureADRolesAndAdministrators } from "diagrams-js/azure/intune"
```

![ClientApps](/resources/azure/intune/client-apps.png) **ClientApps**

```
import { ClientApps } from "diagrams-js/azure/intune"
```

![DeviceCompliance](/resources/azure/intune/device-compliance.png) **DeviceCompliance**

```
import { DeviceCompliance } from "diagrams-js/azure/intune"
```

![DeviceConfiguration](/resources/azure/intune/device-configuration.png) **DeviceConfiguration**

```
import { DeviceConfiguration } from "diagrams-js/azure/intune"
```

![DeviceEnrollment](/resources/azure/intune/device-enrollment.png) **DeviceEnrollment**

```
import { DeviceEnrollment } from "diagrams-js/azure/intune"
```

![DeviceSecurityApple](/resources/azure/intune/device-security-apple.png) **DeviceSecurityApple**

```
import { DeviceSecurityApple } from "diagrams-js/azure/intune"
```

![DeviceSecurityGoogle](/resources/azure/intune/device-security-google.png) **DeviceSecurityGoogle**

```
import { DeviceSecurityGoogle } from "diagrams-js/azure/intune"
```

![DeviceSecurityWindows](/resources/azure/intune/device-security-windows.png) **DeviceSecurityWindows**

```
import { DeviceSecurityWindows } from "diagrams-js/azure/intune"
```

![Devices](/resources/azure/intune/devices.png) **Devices**

```
import { Devices } from "diagrams-js/azure/intune"
```

![Ebooks](/resources/azure/intune/ebooks.png) **Ebooks**

```
import { Ebooks } from "diagrams-js/azure/intune"
```

![ExchangeAccess](/resources/azure/intune/exchange-access.png) **ExchangeAccess**

```
import { ExchangeAccess } from "diagrams-js/azure/intune"
```

![IntuneAppProtection](/resources/azure/intune/intune-app-protection.png) **IntuneAppProtection**

```
import { IntuneAppProtection } from "diagrams-js/azure/intune"
```

![IntuneForEducation](/resources/azure/intune/intune-for-education.png) **IntuneForEducation**

```
import { IntuneForEducation } from "diagrams-js/azure/intune"
```

![Intune](/resources/azure/intune/intune.png) **Intune**

```
import { Intune } from "diagrams-js/azure/intune"
```

![Mindaro](/resources/azure/intune/mindaro.png) **Mindaro**

```
import { Mindaro } from "diagrams-js/azure/intune"
```

![SecurityBaselines](/resources/azure/intune/security-baselines.png) **SecurityBaselines**

```
import { SecurityBaselines } from "diagrams-js/azure/intune"
```

![SoftwareUpdates](/resources/azure/intune/software-updates.png) **SoftwareUpdates**

```
import { SoftwareUpdates } from "diagrams-js/azure/intune"
```

![TenantStatus](/resources/azure/intune/tenant-status.png) **TenantStatus**

```
import { TenantStatus } from "diagrams-js/azure/intune"
```

### azure/iot[​](#azureiot "Direct link to azure/iot")

![AzureCosmosDb](/resources/azure/iot/azure-cosmos-db.png) **AzureCosmosDb**

```
import { AzureCosmosDb } from "diagrams-js/azure/iot"
```

![AzureDataboxGateway](/resources/azure/iot/azure-databox-gateway.png) **AzureDataboxGateway**

```
import { AzureDataboxGateway } from "diagrams-js/azure/iot"
```

![AzureIotOperations](/resources/azure/iot/azure-iot-operations.png) **AzureIotOperations**

```
import { AzureIotOperations } from "diagrams-js/azure/iot"
```

![AzureMapsAccounts](/resources/azure/iot/azure-maps-accounts.png) **AzureMapsAccounts**

```
import { AzureMapsAccounts } from "diagrams-js/azure/iot"
```

![AzureStack](/resources/azure/iot/azure-stack.png) **AzureStack**

```
import { AzureStack } from "diagrams-js/azure/iot"
```

![DeviceProvisioningServices](/resources/azure/iot/device-provisioning-services.png) **DeviceProvisioningServices**

```
import { DeviceProvisioningServices } from "diagrams-js/azure/iot"
```

![DigitalTwins](/resources/azure/iot/digital-twins.png) **DigitalTwins**

```
import { DigitalTwins } from "diagrams-js/azure/iot"
```

![EventGridSubscriptions](/resources/azure/iot/event-grid-subscriptions.png) **EventGridSubscriptions**

```
import { EventGridSubscriptions } from "diagrams-js/azure/iot"
```

![EventHubClusters](/resources/azure/iot/event-hub-clusters.png) **EventHubClusters**

```
import { EventHubClusters } from "diagrams-js/azure/iot"
```

![EventHubs](/resources/azure/iot/event-hubs.png) **EventHubs**

```
import { EventHubs } from "diagrams-js/azure/iot"
```

![FunctionApps](/resources/azure/iot/function-apps.png) **FunctionApps**

```
import { FunctionApps } from "diagrams-js/azure/iot"
```

![IndustrialIot](/resources/azure/iot/industrial-iot.png) **IndustrialIot**

```
import { IndustrialIot } from "diagrams-js/azure/iot"
```

![IotCentralApplications](/resources/azure/iot/iot-central-applications.png) **IotCentralApplications**

```
import { IotCentralApplications } from "diagrams-js/azure/iot"
```

![IotEdge](/resources/azure/iot/iot-edge.png) **IotEdge**

```
import { IotEdge } from "diagrams-js/azure/iot"
```

![IotHubSecurity](/resources/azure/iot/iot-hub-security.png) **IotHubSecurity**

```
import { IotHubSecurity } from "diagrams-js/azure/iot"
```

![IotHub](/resources/azure/iot/iot-hub.png) **IotHub**

```
import { IotHub } from "diagrams-js/azure/iot"
```

![LogicApps](/resources/azure/iot/logic-apps.png) **LogicApps**

```
import { LogicApps } from "diagrams-js/azure/iot"
```

![MachineLearningStudioClassicWebServices](/resources/azure/iot/machine-learning-studio-classic-web-services.png) **MachineLearningStudioClassicWebServices**

```
import { MachineLearningStudioClassicWebServices } from "diagrams-js/azure/iot"
```

![MachineLearningStudioWebServicePlans](/resources/azure/iot/machine-learning-studio-web-service-plans.png) **MachineLearningStudioWebServicePlans**

```
import { MachineLearningStudioWebServicePlans } from "diagrams-js/azure/iot"
```

![MachineLearningStudioWorkspaces](/resources/azure/iot/machine-learning-studio-workspaces.png) **MachineLearningStudioWorkspaces**

```
import { MachineLearningStudioWorkspaces } from "diagrams-js/azure/iot"
```

![Maps](/resources/azure/iot/maps.png) **Maps**

```
import { Maps } from "diagrams-js/azure/iot"
```

![NotificationHubNamespaces](/resources/azure/iot/notification-hub-namespaces.png) **NotificationHubNamespaces**

```
import { NotificationHubNamespaces } from "diagrams-js/azure/iot"
```

![NotificationHubs](/resources/azure/iot/notification-hubs.png) **NotificationHubs**

```
import { NotificationHubs } from "diagrams-js/azure/iot"
```

![Sphere](/resources/azure/iot/sphere.png) **Sphere**

```
import { Sphere } from "diagrams-js/azure/iot"
```

![StackHciPremium](/resources/azure/iot/stack-hci-premium.png) **StackHciPremium**

```
import { StackHciPremium } from "diagrams-js/azure/iot"
```

![StreamAnalyticsJobs](/resources/azure/iot/stream-analytics-jobs.png) **StreamAnalyticsJobs**

```
import { StreamAnalyticsJobs } from "diagrams-js/azure/iot"
```

![TimeSeriesDataSets](/resources/azure/iot/time-series-data-sets.png) **TimeSeriesDataSets**

```
import { TimeSeriesDataSets } from "diagrams-js/azure/iot"
```

![TimeSeriesInsightsAccessPolicies](/resources/azure/iot/time-series-insights-access-policies.png) **TimeSeriesInsightsAccessPolicies**

```
import { TimeSeriesInsightsAccessPolicies } from "diagrams-js/azure/iot"
```

![TimeSeriesInsightsEnvironments](/resources/azure/iot/time-series-insights-environments.png) **TimeSeriesInsightsEnvironments**

```
import { TimeSeriesInsightsEnvironments } from "diagrams-js/azure/iot"
```

![TimeSeriesInsightsEventSources](/resources/azure/iot/time-series-insights-event-sources.png) **TimeSeriesInsightsEventSources**

```
import { TimeSeriesInsightsEventSources } from "diagrams-js/azure/iot"
```

![TimeSeriesInsightsEventsSources](/resources/azure/iot/time-series-insights-events-sources.png) **TimeSeriesInsightsEventsSources**

```
import { TimeSeriesInsightsEventsSources } from "diagrams-js/azure/iot"
```

![Windows10IotCoreServices](/resources/azure/iot/windows-10-iot-core-services.png) **Windows10IotCoreServices**

```
import { Windows10IotCoreServices } from "diagrams-js/azure/iot"
```

![Windows10CoreServices](/resources/azure/iot/windows10-core-services.png) **Windows10CoreServices**

```
import { Windows10CoreServices } from "diagrams-js/azure/iot"
```

### azure/managementgovernance[​](#azuremanagementgovernance "Direct link to azure/managementgovernance")

![ActivityLog](/resources/azure/managementgovernance/activity-log.png) **ActivityLog**

```
import { ActivityLog } from "diagrams-js/azure/managementgovernance"
```

![Advisor](/resources/azure/managementgovernance/advisor.png) **Advisor**

```
import { Advisor } from "diagrams-js/azure/managementgovernance"
```

![Alerts](/resources/azure/managementgovernance/alerts.png) **Alerts**

```
import { Alerts } from "diagrams-js/azure/managementgovernance"
```

![ApplicationInsights](/resources/azure/managementgovernance/application-insights.png) **ApplicationInsights**

```
import { ApplicationInsights } from "diagrams-js/azure/managementgovernance"
```

![ArcMachines](/resources/azure/managementgovernance/arc-machines.png) **ArcMachines**

```
import { ArcMachines } from "diagrams-js/azure/managementgovernance"
```

![AutomationAccounts](/resources/azure/managementgovernance/automation-accounts.png) **AutomationAccounts**

```
import { AutomationAccounts } from "diagrams-js/azure/managementgovernance"
```

![AzureArc](/resources/azure/managementgovernance/azure-arc.png) **AzureArc**

```
import { AzureArc } from "diagrams-js/azure/managementgovernance"
```

![AzureLighthouse](/resources/azure/managementgovernance/azure-lighthouse.png) **AzureLighthouse**

```
import { AzureLighthouse } from "diagrams-js/azure/managementgovernance"
```

![Blueprints](/resources/azure/managementgovernance/blueprints.png) **Blueprints**

```
import { Blueprints } from "diagrams-js/azure/managementgovernance"
```

![Compliance](/resources/azure/managementgovernance/compliance.png) **Compliance**

```
import { Compliance } from "diagrams-js/azure/managementgovernance"
```

![CostManagementAndBilling](/resources/azure/managementgovernance/cost-management-and-billing.png) **CostManagementAndBilling**

```
import { CostManagementAndBilling } from "diagrams-js/azure/managementgovernance"
```

![CustomerLockboxForMicrosoftAzure](/resources/azure/managementgovernance/customer-lockbox-for-microsoft-azure.png) **CustomerLockboxForMicrosoftAzure**

```
import { CustomerLockboxForMicrosoftAzure } from "diagrams-js/azure/managementgovernance"
```

![DiagnosticsSettings](/resources/azure/managementgovernance/diagnostics-settings.png) **DiagnosticsSettings**

```
import { DiagnosticsSettings } from "diagrams-js/azure/managementgovernance"
```

![Education](/resources/azure/managementgovernance/education.png) **Education**

```
import { Education } from "diagrams-js/azure/managementgovernance"
```

![IntuneTrends](/resources/azure/managementgovernance/intune-trends.png) **IntuneTrends**

```
import { IntuneTrends } from "diagrams-js/azure/managementgovernance"
```

![LogAnalyticsWorkspaces](/resources/azure/managementgovernance/log-analytics-workspaces.png) **LogAnalyticsWorkspaces**

```
import { LogAnalyticsWorkspaces } from "diagrams-js/azure/managementgovernance"
```

![Machinesazurearc](/resources/azure/managementgovernance/machinesazurearc.png) **Machinesazurearc**

```
import { Machinesazurearc } from "diagrams-js/azure/managementgovernance"
```

![ManagedApplicationsCenter](/resources/azure/managementgovernance/managed-applications-center.png) **ManagedApplicationsCenter**

```
import { ManagedApplicationsCenter } from "diagrams-js/azure/managementgovernance"
```

![ManagedDesktop](/resources/azure/managementgovernance/managed-desktop.png) **ManagedDesktop**

```
import { ManagedDesktop } from "diagrams-js/azure/managementgovernance"
```

![Metrics](/resources/azure/managementgovernance/metrics.png) **Metrics**

```
import { Metrics } from "diagrams-js/azure/managementgovernance"
```

![Monitor](/resources/azure/managementgovernance/monitor.png) **Monitor**

```
import { Monitor } from "diagrams-js/azure/managementgovernance"
```

![MyCustomers](/resources/azure/managementgovernance/my-customers.png) **MyCustomers**

```
import { MyCustomers } from "diagrams-js/azure/managementgovernance"
```

![OperationLogClassic](/resources/azure/managementgovernance/operation-log-classic.png) **OperationLogClassic**

```
import { OperationLogClassic } from "diagrams-js/azure/managementgovernance"
```

![Policy](/resources/azure/managementgovernance/policy.png) **Policy**

```
import { Policy } from "diagrams-js/azure/managementgovernance"
```

![RecoveryServicesVaults](/resources/azure/managementgovernance/recovery-services-vaults.png) **RecoveryServicesVaults**

```
import { RecoveryServicesVaults } from "diagrams-js/azure/managementgovernance"
```

![ResourceGraphExplorer](/resources/azure/managementgovernance/resource-graph-explorer.png) **ResourceGraphExplorer**

```
import { ResourceGraphExplorer } from "diagrams-js/azure/managementgovernance"
```

![ResourcesProvider](/resources/azure/managementgovernance/resources-provider.png) **ResourcesProvider**

```
import { ResourcesProvider } from "diagrams-js/azure/managementgovernance"
```

![SchedulerJobCollections](/resources/azure/managementgovernance/scheduler-job-collections.png) **SchedulerJobCollections**

```
import { SchedulerJobCollections } from "diagrams-js/azure/managementgovernance"
```

![ServiceCatalogMad](/resources/azure/managementgovernance/service-catalog-mad.png) **ServiceCatalogMad**

```
import { ServiceCatalogMad } from "diagrams-js/azure/managementgovernance"
```

![ServiceProviders](/resources/azure/managementgovernance/service-providers.png) **ServiceProviders**

```
import { ServiceProviders } from "diagrams-js/azure/managementgovernance"
```

![Solutions](/resources/azure/managementgovernance/solutions.png) **Solutions**

```
import { Solutions } from "diagrams-js/azure/managementgovernance"
```

![UniversalPrint](/resources/azure/managementgovernance/universal-print.png) **UniversalPrint**

```
import { UniversalPrint } from "diagrams-js/azure/managementgovernance"
```

![UserPrivacy](/resources/azure/managementgovernance/user-privacy.png) **UserPrivacy**

```
import { UserPrivacy } from "diagrams-js/azure/managementgovernance"
```

### azure/menu[​](#azuremenu "Direct link to azure/menu")

![Keys](/resources/azure/menu/keys.png) **Keys**

```
import { Keys } from "diagrams-js/azure/menu"
```

### azure/migrate[​](#azuremigrate "Direct link to azure/migrate")

![AzureDataboxGateway](/resources/azure/migrate/azure-databox-gateway.png) **AzureDataboxGateway**

```
import { AzureDataboxGateway } from "diagrams-js/azure/migrate"
```

![AzureMigrate](/resources/azure/migrate/azure-migrate.png) **AzureMigrate**

```
import { AzureMigrate } from "diagrams-js/azure/migrate"
```

![AzureStackEdge](/resources/azure/migrate/azure-stack-edge.png) **AzureStackEdge**

```
import { AzureStackEdge } from "diagrams-js/azure/migrate"
```

![CostManagementAndBilling](/resources/azure/migrate/cost-management-and-billing.png) **CostManagementAndBilling**

```
import { CostManagementAndBilling } from "diagrams-js/azure/migrate"
```

![DataBox](/resources/azure/migrate/data-box.png) **DataBox**

```
import { DataBox } from "diagrams-js/azure/migrate"
```

![RecoveryServicesVaults](/resources/azure/migrate/recovery-services-vaults.png) **RecoveryServicesVaults**

```
import { RecoveryServicesVaults } from "diagrams-js/azure/migrate"
```

### azure/migration[​](#azuremigration "Direct link to azure/migration")

![AzureDatabaseMigrationServices](/resources/azure/migration/azure-database-migration-services.png) **AzureDatabaseMigrationServices**

```
import { AzureDatabaseMigrationServices } from "diagrams-js/azure/migration"
```

![DataBoxEdge](/resources/azure/migration/data-box-edge.png) **DataBoxEdge**

```
import { DataBoxEdge } from "diagrams-js/azure/migration"
```

![DataBox](/resources/azure/migration/data-box.png) **DataBox**

```
import { DataBox } from "diagrams-js/azure/migration"
```

![DatabaseMigrationServices](/resources/azure/migration/database-migration-services.png) **DatabaseMigrationServices**

```
import { DatabaseMigrationServices } from "diagrams-js/azure/migration"
```

![MigrationProjects](/resources/azure/migration/migration-projects.png) **MigrationProjects**

```
import { MigrationProjects } from "diagrams-js/azure/migration"
```

![RecoveryServicesVaults](/resources/azure/migration/recovery-services-vaults.png) **RecoveryServicesVaults**

```
import { RecoveryServicesVaults } from "diagrams-js/azure/migration"
```

### azure/mixedreality[​](#azuremixedreality "Direct link to azure/mixedreality")

![RemoteRendering](/resources/azure/mixedreality/remote-rendering.png) **RemoteRendering**

```
import { RemoteRendering } from "diagrams-js/azure/mixedreality"
```

![SpatialAnchorAccounts](/resources/azure/mixedreality/spatial-anchor-accounts.png) **SpatialAnchorAccounts**

```
import { SpatialAnchorAccounts } from "diagrams-js/azure/mixedreality"
```

### azure/ml[​](#azureml "Direct link to azure/ml")

![AzureOpenAI](/resources/azure/ml/azure-open-ai.png) **AzureOpenAI**

```
import { AzureOpenAI } from "diagrams-js/azure/ml"
```

![AzureSpeechService](/resources/azure/ml/azure-speech-service.png) **AzureSpeechService**

```
import { AzureSpeechService } from "diagrams-js/azure/ml"
```

![BatchAI](/resources/azure/ml/batch-ai.png) **BatchAI**

```
import { BatchAI } from "diagrams-js/azure/ml"
```

![BotServices](/resources/azure/ml/bot-services.png) **BotServices**

```
import { BotServices } from "diagrams-js/azure/ml"
```

![CognitiveServices](/resources/azure/ml/cognitive-services.png) **CognitiveServices**

```
import { CognitiveServices } from "diagrams-js/azure/ml"
```

![GenomicsAccounts](/resources/azure/ml/genomics-accounts.png) **GenomicsAccounts**

```
import { GenomicsAccounts } from "diagrams-js/azure/ml"
```

![MachineLearningServiceWorkspaces](/resources/azure/ml/machine-learning-service-workspaces.png) **MachineLearningServiceWorkspaces**

```
import { MachineLearningServiceWorkspaces } from "diagrams-js/azure/ml"
```

![MachineLearningStudioWebServicePlans](/resources/azure/ml/machine-learning-studio-web-service-plans.png) **MachineLearningStudioWebServicePlans**

```
import { MachineLearningStudioWebServicePlans } from "diagrams-js/azure/ml"
```

![MachineLearningStudioWebServices](/resources/azure/ml/machine-learning-studio-web-services.png) **MachineLearningStudioWebServices**

```
import { MachineLearningStudioWebServices } from "diagrams-js/azure/ml"
```

![MachineLearningStudioWorkspaces](/resources/azure/ml/machine-learning-studio-workspaces.png) **MachineLearningStudioWorkspaces**

```
import { MachineLearningStudioWorkspaces } from "diagrams-js/azure/ml"
```

### azure/mobile[​](#azuremobile "Direct link to azure/mobile")

![AppServiceMobile](/resources/azure/mobile/app-service-mobile.png) **AppServiceMobile**

```
import { AppServiceMobile } from "diagrams-js/azure/mobile"
```

![AppServices](/resources/azure/mobile/app-services.png) **AppServices**

```
import { AppServices } from "diagrams-js/azure/mobile"
```

![MobileEngagement](/resources/azure/mobile/mobile-engagement.png) **MobileEngagement**

```
import { MobileEngagement } from "diagrams-js/azure/mobile"
```

![NotificationHubs](/resources/azure/mobile/notification-hubs.png) **NotificationHubs**

```
import { NotificationHubs } from "diagrams-js/azure/mobile"
```

![PowerPlatform](/resources/azure/mobile/power-platform.png) **PowerPlatform**

```
import { PowerPlatform } from "diagrams-js/azure/mobile"
```

### azure/monitor[​](#azuremonitor "Direct link to azure/monitor")

![ActivityLog](/resources/azure/monitor/activity-log.png) **ActivityLog**

```
import { ActivityLog } from "diagrams-js/azure/monitor"
```

![ApplicationInsights](/resources/azure/monitor/application-insights.png) **ApplicationInsights**

```
import { ApplicationInsights } from "diagrams-js/azure/monitor"
```

![AutoScale](/resources/azure/monitor/auto-scale.png) **AutoScale**

```
import { AutoScale } from "diagrams-js/azure/monitor"
```

![AzureMonitorsForSAPSolutions](/resources/azure/monitor/azure-monitors-for-sap-solutions.png) **AzureMonitorsForSAPSolutions**

```
import { AzureMonitorsForSAPSolutions } from "diagrams-js/azure/monitor"
```

![AzureWorkbooks](/resources/azure/monitor/azure-workbooks.png) **AzureWorkbooks**

```
import { AzureWorkbooks } from "diagrams-js/azure/monitor"
```

![ChangeAnalysis](/resources/azure/monitor/change-analysis.png) **ChangeAnalysis**

```
import { ChangeAnalysis } from "diagrams-js/azure/monitor"
```

![DiagnosticsSettings](/resources/azure/monitor/diagnostics-settings.png) **DiagnosticsSettings**

```
import { DiagnosticsSettings } from "diagrams-js/azure/monitor"
```

![LogAnalyticsWorkspaces](/resources/azure/monitor/log-analytics-workspaces.png) **LogAnalyticsWorkspaces**

```
import { LogAnalyticsWorkspaces } from "diagrams-js/azure/monitor"
```

![Logs](/resources/azure/monitor/logs.png) **Logs**

```
import { Logs } from "diagrams-js/azure/monitor"
```

![Metrics](/resources/azure/monitor/metrics.png) **Metrics**

```
import { Metrics } from "diagrams-js/azure/monitor"
```

![Monitor](/resources/azure/monitor/monitor.png) **Monitor**

```
import { Monitor } from "diagrams-js/azure/monitor"
```

![NetworkWatcher](/resources/azure/monitor/network-watcher.png) **NetworkWatcher**

```
import { NetworkWatcher } from "diagrams-js/azure/monitor"
```

### azure/network[​](#azurenetwork "Direct link to azure/network")

![ApplicationGateway](/resources/azure/network/application-gateway.png) **ApplicationGateway**

```
import { ApplicationGateway } from "diagrams-js/azure/network"
```

![ApplicationSecurityGroups](/resources/azure/network/application-security-groups.png) **ApplicationSecurityGroups**

```
import { ApplicationSecurityGroups } from "diagrams-js/azure/network"
```

![CDNProfiles](/resources/azure/network/cdn-profiles.png) **CDNProfiles**

```
import { CDNProfiles } from "diagrams-js/azure/network"
```

![Connections](/resources/azure/network/connections.png) **Connections**

```
import { Connections } from "diagrams-js/azure/network"
```

![DDOSProtectionPlans](/resources/azure/network/ddos-protection-plans.png) **DDOSProtectionPlans**

```
import { DDOSProtectionPlans } from "diagrams-js/azure/network"
```

![DNSPrivateZones](/resources/azure/network/dns-private-zones.png) **DNSPrivateZones**

```
import { DNSPrivateZones } from "diagrams-js/azure/network"
```

![DNSZones](/resources/azure/network/dns-zones.png) **DNSZones**

```
import { DNSZones } from "diagrams-js/azure/network"
```

![ExpressrouteCircuits](/resources/azure/network/expressroute-circuits.png) **ExpressrouteCircuits**

```
import { ExpressrouteCircuits } from "diagrams-js/azure/network"
```

![Firewall](/resources/azure/network/firewall.png) **Firewall**

```
import { Firewall } from "diagrams-js/azure/network"
```

![FrontDoors](/resources/azure/network/front-doors.png) **FrontDoors**

```
import { FrontDoors } from "diagrams-js/azure/network"
```

![LoadBalancers](/resources/azure/network/load-balancers.png) **LoadBalancers**

```
import { LoadBalancers } from "diagrams-js/azure/network"
```

![LocalNetworkGateways](/resources/azure/network/local-network-gateways.png) **LocalNetworkGateways**

```
import { LocalNetworkGateways } from "diagrams-js/azure/network"
```

![NetworkInterfaces](/resources/azure/network/network-interfaces.png) **NetworkInterfaces**

```
import { NetworkInterfaces } from "diagrams-js/azure/network"
```

![NetworkSecurityGroupsClassic](/resources/azure/network/network-security-groups-classic.png) **NetworkSecurityGroupsClassic**

```
import { NetworkSecurityGroupsClassic } from "diagrams-js/azure/network"
```

![NetworkWatcher](/resources/azure/network/network-watcher.png) **NetworkWatcher**

```
import { NetworkWatcher } from "diagrams-js/azure/network"
```

![OnPremisesDataGateways](/resources/azure/network/on-premises-data-gateways.png) **OnPremisesDataGateways**

```
import { OnPremisesDataGateways } from "diagrams-js/azure/network"
```

![PrivateEndpoint](/resources/azure/network/private-endpoint.png) **PrivateEndpoint**

```
import { PrivateEndpoint } from "diagrams-js/azure/network"
```

![PublicIpAddresses](/resources/azure/network/public-ip-addresses.png) **PublicIpAddresses**

```
import { PublicIpAddresses } from "diagrams-js/azure/network"
```

![ReservedIpAddressesClassic](/resources/azure/network/reserved-ip-addresses-classic.png) **ReservedIpAddressesClassic**

```
import { ReservedIpAddressesClassic } from "diagrams-js/azure/network"
```

![RouteFilters](/resources/azure/network/route-filters.png) **RouteFilters**

```
import { RouteFilters } from "diagrams-js/azure/network"
```

![RouteTables](/resources/azure/network/route-tables.png) **RouteTables**

```
import { RouteTables } from "diagrams-js/azure/network"
```

![ServiceEndpointPolicies](/resources/azure/network/service-endpoint-policies.png) **ServiceEndpointPolicies**

```
import { ServiceEndpointPolicies } from "diagrams-js/azure/network"
```

![Subnets](/resources/azure/network/subnets.png) **Subnets**

```
import { Subnets } from "diagrams-js/azure/network"
```

![TrafficManagerProfiles](/resources/azure/network/traffic-manager-profiles.png) **TrafficManagerProfiles**

```
import { TrafficManagerProfiles } from "diagrams-js/azure/network"
```

![VirtualNetworkClassic](/resources/azure/network/virtual-network-classic.png) **VirtualNetworkClassic**

```
import { VirtualNetworkClassic } from "diagrams-js/azure/network"
```

![VirtualNetworkGateways](/resources/azure/network/virtual-network-gateways.png) **VirtualNetworkGateways**

```
import { VirtualNetworkGateways } from "diagrams-js/azure/network"
```

![VirtualNetworks](/resources/azure/network/virtual-networks.png) **VirtualNetworks**

```
import { VirtualNetworks } from "diagrams-js/azure/network"
```

![VirtualWans](/resources/azure/network/virtual-wans.png) **VirtualWans**

```
import { VirtualWans } from "diagrams-js/azure/network"
```

### azure/networking[​](#azurenetworking "Direct link to azure/networking")

![ApplicationGateways](/resources/azure/networking/application-gateways.png) **ApplicationGateways**

```
import { ApplicationGateways } from "diagrams-js/azure/networking"
```

![AtmMultistack](/resources/azure/networking/atm-multistack.png) **AtmMultistack**

```
import { AtmMultistack } from "diagrams-js/azure/networking"
```

![AzureCommunicationsGateway](/resources/azure/networking/azure-communications-gateway.png) **AzureCommunicationsGateway**

```
import { AzureCommunicationsGateway } from "diagrams-js/azure/networking"
```

![AzureFirewallManager](/resources/azure/networking/azure-firewall-manager.png) **AzureFirewallManager**

```
import { AzureFirewallManager } from "diagrams-js/azure/networking"
```

![AzureFirewallPolicy](/resources/azure/networking/azure-firewall-policy.png) **AzureFirewallPolicy**

```
import { AzureFirewallPolicy } from "diagrams-js/azure/networking"
```

![Bastions](/resources/azure/networking/bastions.png) **Bastions**

```
import { Bastions } from "diagrams-js/azure/networking"
```

![CDNProfiles](/resources/azure/networking/cdn-profiles.png) **CDNProfiles**

```
import { CDNProfiles } from "diagrams-js/azure/networking"
```

![ConnectedCache](/resources/azure/networking/connected-cache.png) **ConnectedCache**

```
import { ConnectedCache } from "diagrams-js/azure/networking"
```

![Connections](/resources/azure/networking/connections.png) **Connections**

```
import { Connections } from "diagrams-js/azure/networking"
```

![DDOSProtectionPlans](/resources/azure/networking/ddos-protection-plans.png) **DDOSProtectionPlans**

```
import { DDOSProtectionPlans } from "diagrams-js/azure/networking"
```

![DNSMultistack](/resources/azure/networking/dns-multistack.png) **DNSMultistack**

```
import { DNSMultistack } from "diagrams-js/azure/networking"
```

![DNSPrivateResolver](/resources/azure/networking/dns-private-resolver.png) **DNSPrivateResolver**

```
import { DNSPrivateResolver } from "diagrams-js/azure/networking"
```

![DNSSecurityPolicy](/resources/azure/networking/dns-security-policy.png) **DNSSecurityPolicy**

```
import { DNSSecurityPolicy } from "diagrams-js/azure/networking"
```

![DNSZones](/resources/azure/networking/dns-zones.png) **DNSZones**

```
import { DNSZones } from "diagrams-js/azure/networking"
```

![ExpressrouteCircuits](/resources/azure/networking/expressroute-circuits.png) **ExpressrouteCircuits**

```
import { ExpressrouteCircuits } from "diagrams-js/azure/networking"
```

![Firewalls](/resources/azure/networking/firewalls.png) **Firewalls**

```
import { Firewalls } from "diagrams-js/azure/networking"
```

![FrontDoorAndCDNProfiles](/resources/azure/networking/front-door-and-cdn-profiles.png) **FrontDoorAndCDNProfiles**

```
import { FrontDoorAndCDNProfiles } from "diagrams-js/azure/networking"
```

![IpAddressManager](/resources/azure/networking/ip-address-manager.png) **IpAddressManager**

```
import { IpAddressManager } from "diagrams-js/azure/networking"
```

![IpGroups](/resources/azure/networking/ip-groups.png) **IpGroups**

```
import { IpGroups } from "diagrams-js/azure/networking"
```

![LoadBalancerHub](/resources/azure/networking/load-balancer-hub.png) **LoadBalancerHub**

```
import { LoadBalancerHub } from "diagrams-js/azure/networking"
```

![LoadBalancers](/resources/azure/networking/load-balancers.png) **LoadBalancers**

```
import { LoadBalancers } from "diagrams-js/azure/networking"
```

![LocalNetworkGateways](/resources/azure/networking/local-network-gateways.png) **LocalNetworkGateways**

```
import { LocalNetworkGateways } from "diagrams-js/azure/networking"
```

![Nat](/resources/azure/networking/nat.png) **Nat**

```
import { Nat } from "diagrams-js/azure/networking"
```

![NetworkInterfaces](/resources/azure/networking/network-interfaces.png) **NetworkInterfaces**

```
import { NetworkInterfaces } from "diagrams-js/azure/networking"
```

![NetworkSecurityGroups](/resources/azure/networking/network-security-groups.png) **NetworkSecurityGroups**

```
import { NetworkSecurityGroups } from "diagrams-js/azure/networking"
```

![NetworkWatcher](/resources/azure/networking/network-watcher.png) **NetworkWatcher**

```
import { NetworkWatcher } from "diagrams-js/azure/networking"
```

![OnPremisesDataGateways](/resources/azure/networking/on-premises-data-gateways.png) **OnPremisesDataGateways**

```
import { OnPremisesDataGateways } from "diagrams-js/azure/networking"
```

![PrivateLinkService](/resources/azure/networking/private-link-service.png) **PrivateLinkService**

```
import { PrivateLinkService } from "diagrams-js/azure/networking"
```

![PrivateLinkServices](/resources/azure/networking/private-link-services.png) **PrivateLinkServices**

```
import { PrivateLinkServices } from "diagrams-js/azure/networking"
```

![PrivateLink](/resources/azure/networking/private-link.png) **PrivateLink**

```
import { PrivateLink } from "diagrams-js/azure/networking"
```

![ProximityPlacementGroups](/resources/azure/networking/proximity-placement-groups.png) **ProximityPlacementGroups**

```
import { ProximityPlacementGroups } from "diagrams-js/azure/networking"
```

![PublicIpAddressesClassic](/resources/azure/networking/public-ip-addresses-classic.png) **PublicIpAddressesClassic**

```
import { PublicIpAddressesClassic } from "diagrams-js/azure/networking"
```

![PublicIpAddresses](/resources/azure/networking/public-ip-addresses.png) **PublicIpAddresses**

```
import { PublicIpAddresses } from "diagrams-js/azure/networking"
```

![PublicIpPrefixes](/resources/azure/networking/public-ip-prefixes.png) **PublicIpPrefixes**

```
import { PublicIpPrefixes } from "diagrams-js/azure/networking"
```

![ReservedIpAddressesClassic](/resources/azure/networking/reserved-ip-addresses-classic.png) **ReservedIpAddressesClassic**

```
import { ReservedIpAddressesClassic } from "diagrams-js/azure/networking"
```

![ResourceManagementPrivateLink](/resources/azure/networking/resource-management-private-link.png) **ResourceManagementPrivateLink**

```
import { ResourceManagementPrivateLink } from "diagrams-js/azure/networking"
```

![RouteFilters](/resources/azure/networking/route-filters.png) **RouteFilters**

```
import { RouteFilters } from "diagrams-js/azure/networking"
```

![RouteTables](/resources/azure/networking/route-tables.png) **RouteTables**

```
import { RouteTables } from "diagrams-js/azure/networking"
```

![ServiceEndpointPolicies](/resources/azure/networking/service-endpoint-policies.png) **ServiceEndpointPolicies**

```
import { ServiceEndpointPolicies } from "diagrams-js/azure/networking"
```

![SpotVM](/resources/azure/networking/spot-vm.png) **SpotVM**

```
import { SpotVM } from "diagrams-js/azure/networking"
```

![SpotVmss](/resources/azure/networking/spot-vmss.png) **SpotVmss**

```
import { SpotVmss } from "diagrams-js/azure/networking"
```

![Subnet](/resources/azure/networking/subnet.png) **Subnet**

```
import { Subnet } from "diagrams-js/azure/networking"
```

![TrafficController](/resources/azure/networking/traffic-controller.png) **TrafficController**

```
import { TrafficController } from "diagrams-js/azure/networking"
```

![TrafficManagerProfiles](/resources/azure/networking/traffic-manager-profiles.png) **TrafficManagerProfiles**

```
import { TrafficManagerProfiles } from "diagrams-js/azure/networking"
```

![VirtualNetworkGateways](/resources/azure/networking/virtual-network-gateways.png) **VirtualNetworkGateways**

```
import { VirtualNetworkGateways } from "diagrams-js/azure/networking"
```

![VirtualNetworksClassic](/resources/azure/networking/virtual-networks-classic.png) **VirtualNetworksClassic**

```
import { VirtualNetworksClassic } from "diagrams-js/azure/networking"
```

![VirtualNetworks](/resources/azure/networking/virtual-networks.png) **VirtualNetworks**

```
import { VirtualNetworks } from "diagrams-js/azure/networking"
```

![VirtualRouter](/resources/azure/networking/virtual-router.png) **VirtualRouter**

```
import { VirtualRouter } from "diagrams-js/azure/networking"
```

![VirtualWanHub](/resources/azure/networking/virtual-wan-hub.png) **VirtualWanHub**

```
import { VirtualWanHub } from "diagrams-js/azure/networking"
```

![VirtualWans](/resources/azure/networking/virtual-wans.png) **VirtualWans**

```
import { VirtualWans } from "diagrams-js/azure/networking"
```

![WebApplicationFirewallPolicieswaf](/resources/azure/networking/web-application-firewall-policieswaf.png) **WebApplicationFirewallPolicieswaf**

```
import { WebApplicationFirewallPolicieswaf } from "diagrams-js/azure/networking"
```

### azure/newicons[​](#azurenewicons "Direct link to azure/newicons")

![AzureSustainability](/resources/azure/newicons/azure-sustainability.png) **AzureSustainability**

```
import { AzureSustainability } from "diagrams-js/azure/newicons"
```

![ConnectedVehiclePlatform](/resources/azure/newicons/connected-vehicle-platform.png) **ConnectedVehiclePlatform**

```
import { ConnectedVehiclePlatform } from "diagrams-js/azure/newicons"
```

![EntraConnectHealth](/resources/azure/newicons/entra-connect-health.png) **EntraConnectHealth**

```
import { EntraConnectHealth } from "diagrams-js/azure/newicons"
```

![EntraConnectSync](/resources/azure/newicons/entra-connect-sync.png) **EntraConnectSync**

```
import { EntraConnectSync } from "diagrams-js/azure/newicons"
```

![IcmTroubleshooting](/resources/azure/newicons/icm-troubleshooting.png) **IcmTroubleshooting**

```
import { IcmTroubleshooting } from "diagrams-js/azure/newicons"
```

![Osconfig](/resources/azure/newicons/osconfig.png) **Osconfig**

```
import { Osconfig } from "diagrams-js/azure/newicons"
```

![StorageActions](/resources/azure/newicons/storage-actions.png) **StorageActions**

```
import { StorageActions } from "diagrams-js/azure/newicons"
```

### azure/other[​](#azureother "Direct link to azure/other")

![AadLicenses](/resources/azure/other/aad-licenses.png) **AadLicenses**

```
import { AadLicenses } from "diagrams-js/azure/other"
```

![AksIstio](/resources/azure/other/aks-istio.png) **AksIstio**

```
import { AksIstio } from "diagrams-js/azure/other"
```

![AppComplianceAutomation](/resources/azure/other/app-compliance-automation.png) **AppComplianceAutomation**

```
import { AppComplianceAutomation } from "diagrams-js/azure/other"
```

![AppRegistrations](/resources/azure/other/app-registrations.png) **AppRegistrations**

```
import { AppRegistrations } from "diagrams-js/azure/other"
```

![Aquila](/resources/azure/other/aquila.png) **Aquila**

```
import { Aquila } from "diagrams-js/azure/other"
```

![ArcDataServices](/resources/azure/other/arc-data-services.png) **ArcDataServices**

```
import { ArcDataServices } from "diagrams-js/azure/other"
```

![ArcKubernetes](/resources/azure/other/arc-kubernetes.png) **ArcKubernetes**

```
import { ArcKubernetes } from "diagrams-js/azure/other"
```

![ArcPostgresql](/resources/azure/other/arc-postgresql-.png) **ArcPostgresql**

```
import { ArcPostgresql } from "diagrams-js/azure/other"
```

![ArcSQLManagedInstance](/resources/azure/other/arc-sql-managed-instance.png) **ArcSQLManagedInstance**

```
import { ArcSQLManagedInstance } from "diagrams-js/azure/other"
```

![ArcSQLServer](/resources/azure/other/arc-sql-server.png) **ArcSQLServer**

```
import { ArcSQLServer } from "diagrams-js/azure/other"
```

![AvsVM](/resources/azure/other/avs-vm.png) **AvsVM**

```
import { AvsVM } from "diagrams-js/azure/other"
```

![AzureA](/resources/azure/other/azure-a.png) **AzureA**

```
import { AzureA } from "diagrams-js/azure/other"
```

![AzureBackupCenter](/resources/azure/other/azure-backup-center.png) **AzureBackupCenter**

```
import { AzureBackupCenter } from "diagrams-js/azure/other"
```

![AzureCenterForSAP](/resources/azure/other/azure-center-for-sap.png) **AzureCenterForSAP**

```
import { AzureCenterForSAP } from "diagrams-js/azure/other"
```

![AzureChaosStudio](/resources/azure/other/azure-chaos-studio.png) **AzureChaosStudio**

```
import { AzureChaosStudio } from "diagrams-js/azure/other"
```

![AzureCloudShell](/resources/azure/other/azure-cloud-shell.png) **AzureCloudShell**

```
import { AzureCloudShell } from "diagrams-js/azure/other"
```

![AzureCommunicationServices](/resources/azure/other/azure-communication-services.png) **AzureCommunicationServices**

```
import { AzureCommunicationServices } from "diagrams-js/azure/other"
```

![AzureComputeGalleries](/resources/azure/other/azure-compute-galleries.png) **AzureComputeGalleries**

```
import { AzureComputeGalleries } from "diagrams-js/azure/other"
```

![AzureDeploymentEnvironments](/resources/azure/other/azure-deployment-environments.png) **AzureDeploymentEnvironments**

```
import { AzureDeploymentEnvironments } from "diagrams-js/azure/other"
```

![AzureDevTunnels](/resources/azure/other/azure-dev-tunnels.png) **AzureDevTunnels**

```
import { AzureDevTunnels } from "diagrams-js/azure/other"
```

![AzureEdgeHardwareCenter](/resources/azure/other/azure-edge-hardware-center.png) **AzureEdgeHardwareCenter**

```
import { AzureEdgeHardwareCenter } from "diagrams-js/azure/other"
```

![AzureHpcWorkbenches](/resources/azure/other/azure-hpc-workbenches.png) **AzureHpcWorkbenches**

```
import { AzureHpcWorkbenches } from "diagrams-js/azure/other"
```

![AzureLoadTesting](/resources/azure/other/azure-load-testing.png) **AzureLoadTesting**

```
import { AzureLoadTesting } from "diagrams-js/azure/other"
```

![AzureManagedGrafana](/resources/azure/other/azure-managed-grafana.png) **AzureManagedGrafana**

```
import { AzureManagedGrafana } from "diagrams-js/azure/other"
```

![AzureMonitorDashboard](/resources/azure/other/azure-monitor-dashboard.png) **AzureMonitorDashboard**

```
import { AzureMonitorDashboard } from "diagrams-js/azure/other"
```

![AzureNetworkFunctionManagerFunctions](/resources/azure/other/azure-network-function-manager-functions.png) **AzureNetworkFunctionManagerFunctions**

```
import { AzureNetworkFunctionManagerFunctions } from "diagrams-js/azure/other"
```

![AzureNetworkFunctionManager](/resources/azure/other/azure-network-function-manager.png) **AzureNetworkFunctionManager**

```
import { AzureNetworkFunctionManager } from "diagrams-js/azure/other"
```

![AzureOrbital](/resources/azure/other/azure-orbital.png) **AzureOrbital**

```
import { AzureOrbital } from "diagrams-js/azure/other"
```

![AzureQuotas](/resources/azure/other/azure-quotas.png) **AzureQuotas**

```
import { AzureQuotas } from "diagrams-js/azure/other"
```

![AzureSphere](/resources/azure/other/azure-sphere.png) **AzureSphere**

```
import { AzureSphere } from "diagrams-js/azure/other"
```

![AzureStorageMover](/resources/azure/other/azure-storage-mover.png) **AzureStorageMover**

```
import { AzureStorageMover } from "diagrams-js/azure/other"
```

![AzureSupportCenterBlue](/resources/azure/other/azure-support-center-blue.png) **AzureSupportCenterBlue**

```
import { AzureSupportCenterBlue } from "diagrams-js/azure/other"
```

![AzureVideoIndexer](/resources/azure/other/azure-video-indexer.png) **AzureVideoIndexer**

```
import { AzureVideoIndexer } from "diagrams-js/azure/other"
```

![AzureVirtualDesktop](/resources/azure/other/azure-virtual-desktop.png) **AzureVirtualDesktop**

```
import { AzureVirtualDesktop } from "diagrams-js/azure/other"
```

![AzureVmwareSolution](/resources/azure/other/azure-vmware-solution.png) **AzureVmwareSolution**

```
import { AzureVmwareSolution } from "diagrams-js/azure/other"
```

![Azureattestation](/resources/azure/other/azureattestation.png) **Azureattestation**

```
import { Azureattestation } from "diagrams-js/azure/other"
```

![Azurite](/resources/azure/other/azurite.png) **Azurite**

```
import { Azurite } from "diagrams-js/azure/other"
```

![BackupVault](/resources/azure/other/backup-vault.png) **BackupVault**

```
import { BackupVault } from "diagrams-js/azure/other"
```

![BareMetalInfrastructure](/resources/azure/other/bare-metal-infrastructure.png) **BareMetalInfrastructure**

```
import { BareMetalInfrastructure } from "diagrams-js/azure/other"
```

![CapacityReservationGroups](/resources/azure/other/capacity-reservation-groups.png) **CapacityReservationGroups**

```
import { CapacityReservationGroups } from "diagrams-js/azure/other"
```

![CentralServiceInstanceForSAP](/resources/azure/other/central-service-instance-for-sap.png) **CentralServiceInstanceForSAP**

```
import { CentralServiceInstanceForSAP } from "diagrams-js/azure/other"
```

![Ceres](/resources/azure/other/ceres.png) **Ceres**

```
import { Ceres } from "diagrams-js/azure/other"
```

![CloudServicesExtendedSupport](/resources/azure/other/cloud-services-extended-support.png) **CloudServicesExtendedSupport**

```
import { CloudServicesExtendedSupport } from "diagrams-js/azure/other"
```

![CommunityImages](/resources/azure/other/community-images.png) **CommunityImages**

```
import { CommunityImages } from "diagrams-js/azure/other"
```

![ComplianceCenter](/resources/azure/other/compliance-center.png) **ComplianceCenter**

```
import { ComplianceCenter } from "diagrams-js/azure/other"
```

![ConfidentialLedgers](/resources/azure/other/confidential-ledgers.png) **ConfidentialLedgers**

```
import { ConfidentialLedgers } from "diagrams-js/azure/other"
```

![ContainerAppsEnvironments](/resources/azure/other/container-apps-environments.png) **ContainerAppsEnvironments**

```
import { ContainerAppsEnvironments } from "diagrams-js/azure/other"
```

![CostExport](/resources/azure/other/cost-export.png) **CostExport**

```
import { CostExport } from "diagrams-js/azure/other"
```

![CustomIpPrefix](/resources/azure/other/custom-ip-prefix.png) **CustomIpPrefix**

```
import { CustomIpPrefix } from "diagrams-js/azure/other"
```

![DashboardHub](/resources/azure/other/dashboard-hub.png) **DashboardHub**

```
import { DashboardHub } from "diagrams-js/azure/other"
```

![DataCollectionRules](/resources/azure/other/data-collection-rules.png) **DataCollectionRules**

```
import { DataCollectionRules } from "diagrams-js/azure/other"
```

![DatabaseInstanceForSAP](/resources/azure/other/database-instance-for-sap.png) **DatabaseInstanceForSAP**

```
import { DatabaseInstanceForSAP } from "diagrams-js/azure/other"
```

![DedicatedHsm](/resources/azure/other/dedicated-hsm.png) **DedicatedHsm**

```
import { DedicatedHsm } from "diagrams-js/azure/other"
```

![DefenderCmLocalManager](/resources/azure/other/defender-cm-local-manager.png) **DefenderCmLocalManager**

```
import { DefenderCmLocalManager } from "diagrams-js/azure/other"
```

![DefenderDcsController](/resources/azure/other/defender-dcs-controller.png) **DefenderDcsController**

```
import { DefenderDcsController } from "diagrams-js/azure/other"
```

![DefenderDistributerControlSystem](/resources/azure/other/defender-distributer-control-system.png) **DefenderDistributerControlSystem**

```
import { DefenderDistributerControlSystem } from "diagrams-js/azure/other"
```

![DefenderEngineeringStation](/resources/azure/other/defender-engineering-station.png) **DefenderEngineeringStation**

```
import { DefenderEngineeringStation } from "diagrams-js/azure/other"
```

![DefenderExternalManagement](/resources/azure/other/defender-external-management.png) **DefenderExternalManagement**

```
import { DefenderExternalManagement } from "diagrams-js/azure/other"
```

![DefenderFreezerMonitor](/resources/azure/other/defender-freezer-monitor.png) **DefenderFreezerMonitor**

```
import { DefenderFreezerMonitor } from "diagrams-js/azure/other"
```

![DefenderHistorian](/resources/azure/other/defender-historian.png) **DefenderHistorian**

```
import { DefenderHistorian } from "diagrams-js/azure/other"
```

![DefenderHmi](/resources/azure/other/defender-hmi.png) **DefenderHmi**

```
import { DefenderHmi } from "diagrams-js/azure/other"
```

![DefenderIndustrialPackagingSystem](/resources/azure/other/defender-industrial-packaging-system.png) **DefenderIndustrialPackagingSystem**

```
import { DefenderIndustrialPackagingSystem } from "diagrams-js/azure/other"
```

![DefenderIndustrialPrinter](/resources/azure/other/defender-industrial-printer.png) **DefenderIndustrialPrinter**

```
import { DefenderIndustrialPrinter } from "diagrams-js/azure/other"
```

![DefenderIndustrialRobot](/resources/azure/other/defender-industrial-robot.png) **DefenderIndustrialRobot**

```
import { DefenderIndustrialRobot } from "diagrams-js/azure/other"
```

![DefenderIndustrialScaleSystem](/resources/azure/other/defender-industrial-scale-system.png) **DefenderIndustrialScaleSystem**

```
import { DefenderIndustrialScaleSystem } from "diagrams-js/azure/other"
```

![DefenderMarquee](/resources/azure/other/defender-marquee.png) **DefenderMarquee**

```
import { DefenderMarquee } from "diagrams-js/azure/other"
```

![DefenderMeter](/resources/azure/other/defender-meter.png) **DefenderMeter**

```
import { DefenderMeter } from "diagrams-js/azure/other"
```

![DefenderPlc](/resources/azure/other/defender-plc.png) **DefenderPlc**

```
import { DefenderPlc } from "diagrams-js/azure/other"
```

![DefenderPneumaticDevice](/resources/azure/other/defender-pneumatic-device.png) **DefenderPneumaticDevice**

```
import { DefenderPneumaticDevice } from "diagrams-js/azure/other"
```

![DefenderProgramableBoard](/resources/azure/other/defender-programable-board.png) **DefenderProgramableBoard**

```
import { DefenderProgramableBoard } from "diagrams-js/azure/other"
```

![DefenderRelay](/resources/azure/other/defender-relay.png) **DefenderRelay**

```
import { DefenderRelay } from "diagrams-js/azure/other"
```

![DefenderRobotController](/resources/azure/other/defender-robot-controller.png) **DefenderRobotController**

```
import { DefenderRobotController } from "diagrams-js/azure/other"
```

![DefenderRtu](/resources/azure/other/defender-rtu.png) **DefenderRtu**

```
import { DefenderRtu } from "diagrams-js/azure/other"
```

![DefenderSensor](/resources/azure/other/defender-sensor.png) **DefenderSensor**

```
import { DefenderSensor } from "diagrams-js/azure/other"
```

![DefenderSlot](/resources/azure/other/defender-slot.png) **DefenderSlot**

```
import { DefenderSlot } from "diagrams-js/azure/other"
```

![DefenderWebGuidingSystem](/resources/azure/other/defender-web-guiding-system.png) **DefenderWebGuidingSystem**

```
import { DefenderWebGuidingSystem } from "diagrams-js/azure/other"
```

![DeviceUpdateIotHub](/resources/azure/other/device-update-iot-hub.png) **DeviceUpdateIotHub**

```
import { DeviceUpdateIotHub } from "diagrams-js/azure/other"
```

![DiskPool](/resources/azure/other/disk-pool.png) **DiskPool**

```
import { DiskPool } from "diagrams-js/azure/other"
```

![EdgeManagement](/resources/azure/other/edge-management.png) **EdgeManagement**

```
import { EdgeManagement } from "diagrams-js/azure/other"
```

![ElasticSan](/resources/azure/other/elastic-san.png) **ElasticSan**

```
import { ElasticSan } from "diagrams-js/azure/other"
```

![ExchangeOnPremisesAccess](/resources/azure/other/exchange-on-premises-access.png) **ExchangeOnPremisesAccess**

```
import { ExchangeOnPremisesAccess } from "diagrams-js/azure/other"
```

![ExpressRouteTrafficCollector](/resources/azure/other/express-route-traffic-collector.png) **ExpressRouteTrafficCollector**

```
import { ExpressRouteTrafficCollector } from "diagrams-js/azure/other"
```

![ExpressrouteDirect](/resources/azure/other/expressroute-direct.png) **ExpressrouteDirect**

```
import { ExpressrouteDirect } from "diagrams-js/azure/other"
```

![FhirService](/resources/azure/other/fhir-service.png) **FhirService**

```
import { FhirService } from "diagrams-js/azure/other"
```

![Fiji](/resources/azure/other/fiji.png) **Fiji**

```
import { Fiji } from "diagrams-js/azure/other"
```

![HdiAksCluster](/resources/azure/other/hdi-aks-cluster.png) **HdiAksCluster**

```
import { HdiAksCluster } from "diagrams-js/azure/other"
```

![InstancePools](/resources/azure/other/instance-pools.png) **InstancePools**

```
import { InstancePools } from "diagrams-js/azure/other"
```

![InternetAnalyzerProfiles](/resources/azure/other/internet-analyzer-profiles.png) **InternetAnalyzerProfiles**

```
import { InternetAnalyzerProfiles } from "diagrams-js/azure/other"
```

![KubernetesFleetManager](/resources/azure/other/kubernetes-fleet-manager.png) **KubernetesFleetManager**

```
import { KubernetesFleetManager } from "diagrams-js/azure/other"
```

![LocalNetworkGateways](/resources/azure/other/local-network-gateways.png) **LocalNetworkGateways**

```
import { LocalNetworkGateways } from "diagrams-js/azure/other"
```

![LogAnalyticsQueryPack](/resources/azure/other/log-analytics-query-pack.png) **LogAnalyticsQueryPack**

```
import { LogAnalyticsQueryPack } from "diagrams-js/azure/other"
```

![ManagedInstanceApacheCassandra](/resources/azure/other/managed-instance-apache-cassandra.png) **ManagedInstanceApacheCassandra**

```
import { ManagedInstanceApacheCassandra } from "diagrams-js/azure/other"
```

![MedtechService](/resources/azure/other/medtech-service.png) **MedtechService**

```
import { MedtechService } from "diagrams-js/azure/other"
```

![MicrosoftDevBox](/resources/azure/other/microsoft-dev-box.png) **MicrosoftDevBox**

```
import { MicrosoftDevBox } from "diagrams-js/azure/other"
```

![MissionLandingZone](/resources/azure/other/mission-landing-zone.png) **MissionLandingZone**

```
import { MissionLandingZone } from "diagrams-js/azure/other"
```

![MobileNetworks](/resources/azure/other/mobile-networks.png) **MobileNetworks**

```
import { MobileNetworks } from "diagrams-js/azure/other"
```

![ModularDataCenter](/resources/azure/other/modular-data-center.png) **ModularDataCenter**

```
import { ModularDataCenter } from "diagrams-js/azure/other"
```

![NetworkManagers](/resources/azure/other/network-managers.png) **NetworkManagers**

```
import { NetworkManagers } from "diagrams-js/azure/other"
```

![NetworkSecurityPerimeters](/resources/azure/other/network-security-perimeters.png) **NetworkSecurityPerimeters**

```
import { NetworkSecurityPerimeters } from "diagrams-js/azure/other"
```

![OpenSupplyChainPlatform](/resources/azure/other/open-supply-chain-platform.png) **OpenSupplyChainPlatform**

```
import { OpenSupplyChainPlatform } from "diagrams-js/azure/other"
```

![PeeringService](/resources/azure/other/peering-service.png) **PeeringService**

```
import { PeeringService } from "diagrams-js/azure/other"
```

![Peerings](/resources/azure/other/peerings.png) **Peerings**

```
import { Peerings } from "diagrams-js/azure/other"
```

![PrivateEndpoints](/resources/azure/other/private-endpoints.png) **PrivateEndpoints**

```
import { PrivateEndpoints } from "diagrams-js/azure/other"
```

![ReservedCapacity](/resources/azure/other/reserved-capacity.png) **ReservedCapacity**

```
import { ReservedCapacity } from "diagrams-js/azure/other"
```

![ResourceGuard](/resources/azure/other/resource-guard.png) **ResourceGuard**

```
import { ResourceGuard } from "diagrams-js/azure/other"
```

![ResourceMover](/resources/azure/other/resource-mover.png) **ResourceMover**

```
import { ResourceMover } from "diagrams-js/azure/other"
```

![Rtos](/resources/azure/other/rtos.png) **Rtos**

```
import { Rtos } from "diagrams-js/azure/other"
```

![SavingsPlans](/resources/azure/other/savings-plans.png) **SavingsPlans**

```
import { SavingsPlans } from "diagrams-js/azure/other"
```

![ScvmmManagementServers](/resources/azure/other/scvmm-management-servers.png) **ScvmmManagementServers**

```
import { ScvmmManagementServers } from "diagrams-js/azure/other"
```

![SonicDash](/resources/azure/other/sonic-dash.png) **SonicDash**

```
import { SonicDash } from "diagrams-js/azure/other"
```

![SshKeys](/resources/azure/other/ssh-keys.png) **SshKeys**

```
import { SshKeys } from "diagrams-js/azure/other"
```

![StorageFunctions](/resources/azure/other/storage-functions.png) **StorageFunctions**

```
import { StorageFunctions } from "diagrams-js/azure/other"
```

![TargetsManagement](/resources/azure/other/targets-management.png) **TargetsManagement**

```
import { TargetsManagement } from "diagrams-js/azure/other"
```

![TemplateSpecs](/resources/azure/other/template-specs.png) **TemplateSpecs**

```
import { TemplateSpecs } from "diagrams-js/azure/other"
```

![TestBase](/resources/azure/other/test-base.png) **TestBase**

```
import { TestBase } from "diagrams-js/azure/other"
```

![UpdateManagementCenter](/resources/azure/other/update-management-center.png) **UpdateManagementCenter**

```
import { UpdateManagementCenter } from "diagrams-js/azure/other"
```

![VideoAnalyzers](/resources/azure/other/video-analyzers.png) **VideoAnalyzers**

```
import { VideoAnalyzers } from "diagrams-js/azure/other"
```

![VirtualEnclaves](/resources/azure/other/virtual-enclaves.png) **VirtualEnclaves**

```
import { VirtualEnclaves } from "diagrams-js/azure/other"
```

![VirtualInstanceForSAP](/resources/azure/other/virtual-instance-for-sap.png) **VirtualInstanceForSAP**

```
import { VirtualInstanceForSAP } from "diagrams-js/azure/other"
```

![VirtualVisitsBuilder](/resources/azure/other/virtual-visits-builder.png) **VirtualVisitsBuilder**

```
import { VirtualVisitsBuilder } from "diagrams-js/azure/other"
```

![VMAppDefinitions](/resources/azure/other/vm-app-definitions.png) **VMAppDefinitions**

```
import { VMAppDefinitions } from "diagrams-js/azure/other"
```

![VMAppVersions](/resources/azure/other/vm-app-versions.png) **VMAppVersions**

```
import { VMAppVersions } from "diagrams-js/azure/other"
```

![VMImageVersion](/resources/azure/other/vm-image-version.png) **VMImageVersion**

```
import { VMImageVersion } from "diagrams-js/azure/other"
```

![Wac](/resources/azure/other/wac.png) **Wac**

```
import { Wac } from "diagrams-js/azure/other"
```

![WebAppDatabase](/resources/azure/other/web-app-database.png) **WebAppDatabase**

```
import { WebAppDatabase } from "diagrams-js/azure/other"
```

![WebJobs](/resources/azure/other/web-jobs.png) **WebJobs**

```
import { WebJobs } from "diagrams-js/azure/other"
```

![WindowsNotificationServices](/resources/azure/other/windows-notification-services.png) **WindowsNotificationServices**

```
import { WindowsNotificationServices } from "diagrams-js/azure/other"
```

![WorkerContainerApp](/resources/azure/other/worker-container-app.png) **WorkerContainerApp**

```
import { WorkerContainerApp } from "diagrams-js/azure/other"
```

### azure/security[​](#azuresecurity "Direct link to azure/security")

![ApplicationSecurityGroups](/resources/azure/security/application-security-groups.png) **ApplicationSecurityGroups**

```
import { ApplicationSecurityGroups } from "diagrams-js/azure/security"
```

![AzureADAuthenticationMethods](/resources/azure/security/azure-ad-authentication-methods.png) **AzureADAuthenticationMethods**

```
import { AzureADAuthenticationMethods } from "diagrams-js/azure/security"
```

![AzureADIdentityProtection](/resources/azure/security/azure-ad-identity-protection.png) **AzureADIdentityProtection**

```
import { AzureADIdentityProtection } from "diagrams-js/azure/security"
```

![AzureADPrivlegedIdentityManagement](/resources/azure/security/azure-ad-privleged-identity-management.png) **AzureADPrivlegedIdentityManagement**

```
import { AzureADPrivlegedIdentityManagement } from "diagrams-js/azure/security"
```

![AzureADRiskySignins](/resources/azure/security/azure-ad-risky-signins.png) **AzureADRiskySignins**

```
import { AzureADRiskySignins } from "diagrams-js/azure/security"
```

![AzureADRiskyUsers](/resources/azure/security/azure-ad-risky-users.png) **AzureADRiskyUsers**

```
import { AzureADRiskyUsers } from "diagrams-js/azure/security"
```

![AzureInformationProtection](/resources/azure/security/azure-information-protection.png) **AzureInformationProtection**

```
import { AzureInformationProtection } from "diagrams-js/azure/security"
```

![AzureSentinel](/resources/azure/security/azure-sentinel.png) **AzureSentinel**

```
import { AzureSentinel } from "diagrams-js/azure/security"
```

![ConditionalAccess](/resources/azure/security/conditional-access.png) **ConditionalAccess**

```
import { ConditionalAccess } from "diagrams-js/azure/security"
```

![Defender](/resources/azure/security/defender.png) **Defender**

```
import { Defender } from "diagrams-js/azure/security"
```

![Detonation](/resources/azure/security/detonation.png) **Detonation**

```
import { Detonation } from "diagrams-js/azure/security"
```

![ExtendedSecurityUpdates](/resources/azure/security/extended-security-updates.png) **ExtendedSecurityUpdates**

```
import { ExtendedSecurityUpdates } from "diagrams-js/azure/security"
```

![Extendedsecurityupdates](/resources/azure/security/extendedsecurityupdates.png) **Extendedsecurityupdates**

```
import { Extendedsecurityupdates } from "diagrams-js/azure/security"
```

![IdentitySecureScore](/resources/azure/security/identity-secure-score.png) **IdentitySecureScore**

```
import { IdentitySecureScore } from "diagrams-js/azure/security"
```

![KeyVaults](/resources/azure/security/key-vaults.png) **KeyVaults**

```
import { KeyVaults } from "diagrams-js/azure/security"
```

![MicrosoftDefenderEasm](/resources/azure/security/microsoft-defender-easm.png) **MicrosoftDefenderEasm**

```
import { MicrosoftDefenderEasm } from "diagrams-js/azure/security"
```

![MicrosoftDefenderForCloud](/resources/azure/security/microsoft-defender-for-cloud.png) **MicrosoftDefenderForCloud**

```
import { MicrosoftDefenderForCloud } from "diagrams-js/azure/security"
```

![MicrosoftDefenderForIot](/resources/azure/security/microsoft-defender-for-iot.png) **MicrosoftDefenderForIot**

```
import { MicrosoftDefenderForIot } from "diagrams-js/azure/security"
```

![MultifactorAuthentication](/resources/azure/security/multifactor-authentication.png) **MultifactorAuthentication**

```
import { MultifactorAuthentication } from "diagrams-js/azure/security"
```

![SecurityCenter](/resources/azure/security/security-center.png) **SecurityCenter**

```
import { SecurityCenter } from "diagrams-js/azure/security"
```

![Sentinel](/resources/azure/security/sentinel.png) **Sentinel**

```
import { Sentinel } from "diagrams-js/azure/security"
```

![UserSettings](/resources/azure/security/user-settings.png) **UserSettings**

```
import { UserSettings } from "diagrams-js/azure/security"
```

### azure/storage[​](#azurestorage "Direct link to azure/storage")

![ArchiveStorage](/resources/azure/storage/archive-storage.png) **ArchiveStorage**

```
import { ArchiveStorage } from "diagrams-js/azure/storage"
```

![AzureDataboxGateway](/resources/azure/storage/azure-databox-gateway.png) **AzureDataboxGateway**

```
import { AzureDataboxGateway } from "diagrams-js/azure/storage"
```

![AzureFileshares](/resources/azure/storage/azure-fileshares.png) **AzureFileshares**

```
import { AzureFileshares } from "diagrams-js/azure/storage"
```

![AzureHcpCache](/resources/azure/storage/azure-hcp-cache.png) **AzureHcpCache**

```
import { AzureHcpCache } from "diagrams-js/azure/storage"
```

![AzureNetappFiles](/resources/azure/storage/azure-netapp-files.png) **AzureNetappFiles**

```
import { AzureNetappFiles } from "diagrams-js/azure/storage"
```

![AzureStackEdge](/resources/azure/storage/azure-stack-edge.png) **AzureStackEdge**

```
import { AzureStackEdge } from "diagrams-js/azure/storage"
```

![Azurefxtedgefiler](/resources/azure/storage/azurefxtedgefiler.png) **Azurefxtedgefiler**

```
import { Azurefxtedgefiler } from "diagrams-js/azure/storage"
```

![BlobStorage](/resources/azure/storage/blob-storage.png) **BlobStorage**

```
import { BlobStorage } from "diagrams-js/azure/storage"
```

![DataBoxEdgeDataBoxGateway](/resources/azure/storage/data-box-edge-data-box-gateway.png) **DataBoxEdgeDataBoxGateway**

```
import { DataBoxEdgeDataBoxGateway } from "diagrams-js/azure/storage"
```

![DataBox](/resources/azure/storage/data-box.png) **DataBox**

```
import { DataBox } from "diagrams-js/azure/storage"
```

![DataLakeStorageGen1](/resources/azure/storage/data-lake-storage-gen1.png) **DataLakeStorageGen1**

```
import { DataLakeStorageGen1 } from "diagrams-js/azure/storage"
```

![DataLakeStorage](/resources/azure/storage/data-lake-storage.png) **DataLakeStorage**

```
import { DataLakeStorage } from "diagrams-js/azure/storage"
```

![DataShareInvitations](/resources/azure/storage/data-share-invitations.png) **DataShareInvitations**

```
import { DataShareInvitations } from "diagrams-js/azure/storage"
```

![DataShares](/resources/azure/storage/data-shares.png) **DataShares**

```
import { DataShares } from "diagrams-js/azure/storage"
```

![GeneralStorage](/resources/azure/storage/general-storage.png) **GeneralStorage**

```
import { GeneralStorage } from "diagrams-js/azure/storage"
```

![ImportExportJobs](/resources/azure/storage/import-export-jobs.png) **ImportExportJobs**

```
import { ImportExportJobs } from "diagrams-js/azure/storage"
```

![NetappFiles](/resources/azure/storage/netapp-files.png) **NetappFiles**

```
import { NetappFiles } from "diagrams-js/azure/storage"
```

![QueuesStorage](/resources/azure/storage/queues-storage.png) **QueuesStorage**

```
import { QueuesStorage } from "diagrams-js/azure/storage"
```

![RecoveryServicesVaults](/resources/azure/storage/recovery-services-vaults.png) **RecoveryServicesVaults**

```
import { RecoveryServicesVaults } from "diagrams-js/azure/storage"
```

![StorageAccountsClassic](/resources/azure/storage/storage-accounts-classic.png) **StorageAccountsClassic**

```
import { StorageAccountsClassic } from "diagrams-js/azure/storage"
```

![StorageAccounts](/resources/azure/storage/storage-accounts.png) **StorageAccounts**

```
import { StorageAccounts } from "diagrams-js/azure/storage"
```

![StorageExplorer](/resources/azure/storage/storage-explorer.png) **StorageExplorer**

```
import { StorageExplorer } from "diagrams-js/azure/storage"
```

![StorageSyncServices](/resources/azure/storage/storage-sync-services.png) **StorageSyncServices**

```
import { StorageSyncServices } from "diagrams-js/azure/storage"
```

![StorsimpleDataManagers](/resources/azure/storage/storsimple-data-managers.png) **StorsimpleDataManagers**

```
import { StorsimpleDataManagers } from "diagrams-js/azure/storage"
```

![StorsimpleDeviceManagers](/resources/azure/storage/storsimple-device-managers.png) **StorsimpleDeviceManagers**

```
import { StorsimpleDeviceManagers } from "diagrams-js/azure/storage"
```

![TableStorage](/resources/azure/storage/table-storage.png) **TableStorage**

```
import { TableStorage } from "diagrams-js/azure/storage"
```

### azure/web[​](#azureweb "Direct link to azure/web")

![APICenter](/resources/azure/web/api-center.png) **APICenter**

```
import { APICenter } from "diagrams-js/azure/web"
```

![APIConnections](/resources/azure/web/api-connections.png) **APIConnections**

```
import { APIConnections } from "diagrams-js/azure/web"
```

![APIManagementServices](/resources/azure/web/api-management-services.png) **APIManagementServices**

```
import { APIManagementServices } from "diagrams-js/azure/web"
```

![AppServiceCertificates](/resources/azure/web/app-service-certificates.png) **AppServiceCertificates**

```
import { AppServiceCertificates } from "diagrams-js/azure/web"
```

![AppServiceDomains](/resources/azure/web/app-service-domains.png) **AppServiceDomains**

```
import { AppServiceDomains } from "diagrams-js/azure/web"
```

![AppServiceEnvironments](/resources/azure/web/app-service-environments.png) **AppServiceEnvironments**

```
import { AppServiceEnvironments } from "diagrams-js/azure/web"
```

![AppServicePlans](/resources/azure/web/app-service-plans.png) **AppServicePlans**

```
import { AppServicePlans } from "diagrams-js/azure/web"
```

![AppServices](/resources/azure/web/app-services.png) **AppServices**

```
import { AppServices } from "diagrams-js/azure/web"
```

![AppSpace](/resources/azure/web/app-space.png) **AppSpace**

```
import { AppSpace } from "diagrams-js/azure/web"
```

![AzureMediaService](/resources/azure/web/azure-media-service.png) **AzureMediaService**

```
import { AzureMediaService } from "diagrams-js/azure/web"
```

![AzureSpringApps](/resources/azure/web/azure-spring-apps.png) **AzureSpringApps**

```
import { AzureSpringApps } from "diagrams-js/azure/web"
```

![CognitiveSearch](/resources/azure/web/cognitive-search.png) **CognitiveSearch**

```
import { CognitiveSearch } from "diagrams-js/azure/web"
```

![CognitiveServices](/resources/azure/web/cognitive-services.png) **CognitiveServices**

```
import { CognitiveServices } from "diagrams-js/azure/web"
```

![FrontDoorAndCDNProfiles](/resources/azure/web/front-door-and-cdn-profiles.png) **FrontDoorAndCDNProfiles**

```
import { FrontDoorAndCDNProfiles } from "diagrams-js/azure/web"
```

![MediaServices](/resources/azure/web/media-services.png) **MediaServices**

```
import { MediaServices } from "diagrams-js/azure/web"
```

![NotificationHubNamespaces](/resources/azure/web/notification-hub-namespaces.png) **NotificationHubNamespaces**

```
import { NotificationHubNamespaces } from "diagrams-js/azure/web"
```

![PowerPlatform](/resources/azure/web/power-platform.png) **PowerPlatform**

```
import { PowerPlatform } from "diagrams-js/azure/web"
```

![Search](/resources/azure/web/search.png) **Search**

```
import { Search } from "diagrams-js/azure/web"
```

![Signalr](/resources/azure/web/signalr.png) **Signalr**

```
import { Signalr } from "diagrams-js/azure/web"
```

![StaticApps](/resources/azure/web/static-apps.png) **StaticApps**

```
import { StaticApps } from "diagrams-js/azure/web"
```


---

# C4 Model

The C4 model is a simple way to visualize software architecture at different levels of detail. diagrams-js provides support for creating C4 diagrams including Context, Container, Component, and Code diagrams.

## Example Usage[​](#example-usage "Direct link to Example Usage")

```
import { Diagram } from "diagrams-js";
import { Person, Container, Database, System, Relationship, SystemBoundary } from "diagrams-js/c4";

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

// External user
const user = diagram.add(Person("User", "System user", true));

// System boundary containing internal containers
const system = SystemBoundary("My Application", diagram);
const webApp = system.add(Container("Web App", "React", "User interface"));
const api = system.add(Container("API", "Node.js", "Business logic"));
const db = system.add(Database("Database", "PostgreSQL", "Data storage"));

// Relationships
user.to(Relationship("Uses"), webApp);
webApp.to(Relationship("Calls"), api);
api.to(Relationship("Reads/Writes"), db);

const svg = await diagram.render();
```

## Node Reference[​](#node-reference "Direct link to Node Reference")

### Person[​](#person "Direct link to Person")

Represents a person (user, actor, role, or persona).

```
import { Person } from "diagrams-js/c4";

// Internal person (blue)
const user = diagram.add(Person("User", "Description"));

// External person (gray)
const externalUser = diagram.add(Person("External User", "Description", true));
```

**Parameters:**

* `name` - The name of the person
* `description` - Optional description text
* `external` - Whether this is an external person (default: false)
* `options` - Additional Graphviz node attributes

### Container[​](#container "Direct link to Container")

Represents a software container (applications, web apps, microservices, etc.).

```
import { Container } from "diagrams-js/c4";

const webApp = diagram.add(Container("Web App", "React", "User interface"));
const api = diagram.add(Container("API", "Node.js"));
```

**Parameters:**

* `name` - The name of the container
* `technology` - Optional technology (e.g., "Java", "Node.js", "React")
* `description` - Optional description text
* `options` - Additional Graphviz node attributes

### Database[​](#database "Direct link to Database")

Represents a data storage container (databases, file systems, etc.).

```
import { Database } from "diagrams-js/c4";

const db = diagram.add(Database("Main DB", "PostgreSQL", "Primary data store"));
```

**Parameters:**

* `name` - The name of the database
* `technology` - Optional technology (e.g., "PostgreSQL", "MongoDB")
* `description` - Optional description text
* `options` - Additional Graphviz node attributes

### System[​](#system "Direct link to System")

Represents a software system.

```
import { System } from "diagrams-js/c4";

// Internal system (blue)
const core = diagram.add(System("Core System", "Main business logic"));

// External system (gray)
const external = diagram.add(System("Payment Gateway", "External service", true));
```

**Parameters:**

* `name` - The name of the system
* `description` - Optional description text
* `external` - Whether this is an external system (default: false)
* `options` - Additional Graphviz node attributes

### SystemBoundary[​](#systemboundary "Direct link to SystemBoundary")

Creates a boundary (cluster) to group related containers or components.

```
import { SystemBoundary, Container } from "diagrams-js/c4";

const boundary = SystemBoundary("My System", diagram);
const container = boundary.add(Container("Web App"));
```

**Parameters:**

* `label` - The name/label of the boundary
* `diagram` - The diagram instance
* `options` - Additional Graphviz graph attributes

### Relationship[​](#relationship "Direct link to Relationship")

Creates a relationship (edge) between C4 elements.

```
import { Relationship } from "diagrams-js/c4";

node1.to(Relationship("Uses"), node2);
node1.to(Relationship(), node3); // Unlabeled relationship
```

**Parameters:**

* `label` - Optional relationship label/description
* `options` - Additional Graphviz edge attributes

## Styling[​](#styling "Direct link to Styling")

C4 nodes use the following default styling:

* **Internal elements** (Person, System, Container): Dodger blue (`dodgerblue4` for Person/System, `dodgerblue3` for Container)
* **External elements**: Gray (`gray60`)
* **Database**: Cylinder shape with bottom-aligned label
* **Person**: Rounded rectangle
* **Relationships**: Dashed lines in gray (`gray60`)
* **System Boundaries**: Dashed borders with white background

All elements support custom Graphviz attributes through the `options` parameter.

## Complete Example[​](#complete-example "Direct link to Complete Example")

Here's a complete C4 Container diagram example:

```
import { Diagram } from "diagrams-js";
import { Person, Container, Database, System, Relationship, SystemBoundary } from "diagrams-js/c4";

const diagram = Diagram("Container diagram for Internet Banking System", {
  direction: "TB",
  curvestyle: "spline",
});

const customer = diagram.add(Person("Personal Banking Customer", "A customer of the bank, with personal bank accounts."));

const bankingSystem = SystemBoundary("Internet Banking System", diagram);
const webApp = bankingSystem.add(Container(
  "Web Application",
  "Java and Spring MVC",
  "Delivers the static content and the Internet banking single page application."
));
const spa = bankingSystem.add(Container(
  "Single-Page Application",
  "Javascript and Angular",
  "Provides all of the Internet banking functionality to customers via their web browser."
));
const mobile = bankingSystem.add(Container(
  "Mobile App",
  "Xamarin",
  "Provides a limited subset of the Internet banking functionality to customers via their mobile device."
));
const api = bankingSystem.add(Container(
  "API Application",
  "Java and Spring MVC",
  "Provides Internet banking functionality via a JSON/HTTPS API."
));
const db = bankingSystem.add(Database(
  "Database",
  "Oracle Database Schema",
  "Stores user registration information, hashed authentication credentials, access logs, etc."
));

const email = diagram.add(System(
  "E-mail System",
  "The internal Microsoft Exchange e-mail system.",
  true
));
const mainframe = diagram.add(System(
  "Mainframe Banking System",
  "Stores all of the core banking information about customers, accounts, transactions, etc.",
  true
));

customer.to(Relationship("Visits bigbank.com/ib using [HTTPS]"), webApp);
customer.to(Relationship("Views account balances, and makes payments using"), [spa, mobile]);
webApp.to(Relationship("Delivers to the customer's web browser"), spa);
spa.to(Relationship("Make API calls to [JSON/HTTPS]"), api);
mobile.to(Relationship("Make API calls to [JSON/HTTPS]"), api);
api.to(Relationship("reads from and writes to"), db);
api.to(Relationship("Sends email using [SMTP]"), email);
api.to(Relationship("Makes API calls to [XML/HTTPS]"), mainframe);
customer.from(Relationship("Sends e-mails to"), email);

const svg = await diagram.render();
```


---

# DigitalOcean

Node types list for the DigitalOcean provider.

## Example Usage[​](#example-usage "Direct link to Example Usage")

```
import { Diagram } from "diagrams-js";
import { Containers, Docker, DropletConnect } from "diagrams-js/digitalocean/compute";
import { DbaasPrimaryStandbyMore, DbaasPrimary, DbaasReadOnly } from "diagrams-js/digitalocean/database";

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

const node1 = diagram.add(Containers("Node 1"));
const node2 = diagram.add(DbaasPrimaryStandbyMore("Node 2"));

node1.to(node2);

const svg = await diagram.render();
```

note

All node types available in the [Python diagrams library](https://diagrams.mingrammer.com/docs/nodes/digitalocean) are also available in diagrams-js with the same class names and structure.

## Node Reference[​](#node-reference "Direct link to Node Reference")

### digitalocean/compute[​](#digitaloceancompute "Direct link to digitalocean/compute")

![Containers](/resources/digitalocean/compute/containers.png) **Containers**

```
import { Containers } from "diagrams-js/digitalocean/compute"
```

![Docker](/resources/digitalocean/compute/docker.png) **Docker**

```
import { Docker } from "diagrams-js/digitalocean/compute"
```

![DropletConnect](/resources/digitalocean/compute/droplet-connect.png) **DropletConnect**

```
import { DropletConnect } from "diagrams-js/digitalocean/compute"
```

![DropletSnapshot](/resources/digitalocean/compute/droplet-snapshot.png) **DropletSnapshot**

```
import { DropletSnapshot } from "diagrams-js/digitalocean/compute"
```

![Droplet](/resources/digitalocean/compute/droplet.png) **Droplet**

```
import { Droplet } from "diagrams-js/digitalocean/compute"
```

![K8sCluster](/resources/digitalocean/compute/k8s-cluster.png) **K8sCluster**

```
import { K8sCluster } from "diagrams-js/digitalocean/compute"
```

![K8sNodePool](/resources/digitalocean/compute/k8s-node-pool.png) **K8sNodePool**

```
import { K8sNodePool } from "diagrams-js/digitalocean/compute"
```

![K8sNode](/resources/digitalocean/compute/k8s-node.png) **K8sNode**

```
import { K8sNode } from "diagrams-js/digitalocean/compute"
```

### digitalocean/database[​](#digitaloceandatabase "Direct link to digitalocean/database")

![DbaasPrimaryStandbyMore](/resources/digitalocean/database/dbaas-primary-standby-more.png) **DbaasPrimaryStandbyMore**

```
import { DbaasPrimaryStandbyMore } from "diagrams-js/digitalocean/database"
```

![DbaasPrimary](/resources/digitalocean/database/dbaas-primary.png) **DbaasPrimary**

```
import { DbaasPrimary } from "diagrams-js/digitalocean/database"
```

![DbaasReadOnly](/resources/digitalocean/database/dbaas-read-only.png) **DbaasReadOnly**

```
import { DbaasReadOnly } from "diagrams-js/digitalocean/database"
```

![DbaasStandby](/resources/digitalocean/database/dbaas-standby.png) **DbaasStandby**

```
import { DbaasStandby } from "diagrams-js/digitalocean/database"
```

### digitalocean/network[​](#digitaloceannetwork "Direct link to digitalocean/network")

![Certificate](/resources/digitalocean/network/certificate.png) **Certificate**

```
import { Certificate } from "diagrams-js/digitalocean/network"
```

![DomainRegistration](/resources/digitalocean/network/domain-registration.png) **DomainRegistration**

```
import { DomainRegistration } from "diagrams-js/digitalocean/network"
```

![Domain](/resources/digitalocean/network/domain.png) **Domain**

```
import { Domain } from "diagrams-js/digitalocean/network"
```

![Firewall](/resources/digitalocean/network/firewall.png) **Firewall**

```
import { Firewall } from "diagrams-js/digitalocean/network"
```

![FloatingIp](/resources/digitalocean/network/floating-ip.png) **FloatingIp**

```
import { FloatingIp } from "diagrams-js/digitalocean/network"
```

![InternetGateway](/resources/digitalocean/network/internet-gateway.png) **InternetGateway**

```
import { InternetGateway } from "diagrams-js/digitalocean/network"
```

![LoadBalancer](/resources/digitalocean/network/load-balancer.png) **LoadBalancer**

```
import { LoadBalancer } from "diagrams-js/digitalocean/network"
```

![ManagedVpn](/resources/digitalocean/network/managed-vpn.png) **ManagedVpn**

```
import { ManagedVpn } from "diagrams-js/digitalocean/network"
```

![Vpc](/resources/digitalocean/network/vpc.png) **Vpc**

```
import { Vpc } from "diagrams-js/digitalocean/network"
```

### digitalocean/storage[​](#digitaloceanstorage "Direct link to digitalocean/storage")

![Folder](/resources/digitalocean/storage/folder.png) **Folder**

```
import { Folder } from "diagrams-js/digitalocean/storage"
```

![Space](/resources/digitalocean/storage/space.png) **Space**

```
import { Space } from "diagrams-js/digitalocean/storage"
```

![VolumeSnapshot](/resources/digitalocean/storage/volume-snapshot.png) **VolumeSnapshot**

```
import { VolumeSnapshot } from "diagrams-js/digitalocean/storage"
```

![Volume](/resources/digitalocean/storage/volume.png) **Volume**

```
import { Volume } from "diagrams-js/digitalocean/storage"
```


---

# Elastic

Node types list for the Elastic provider.

## Example Usage[​](#example-usage "Direct link to Example Usage")

```
import { Diagram } from "diagrams-js";
import { Agent, Endpoint, Fleet } from "diagrams-js/elastic/agent";
import { APM, Auditbeat, Filebeat } from "diagrams-js/elastic/beats";

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

const node1 = diagram.add(Agent("Node 1"));
const node2 = diagram.add(APM("Node 2"));

node1.to(node2);

const svg = await diagram.render();
```

note

All node types available in the [Python diagrams library](https://diagrams.mingrammer.com/docs/nodes/elastic) are also available in diagrams-js with the same class names and structure.

## Node Reference[​](#node-reference "Direct link to Node Reference")

### elastic/agent[​](#elasticagent "Direct link to elastic/agent")

![Agent](/resources/elastic/agent/agent.png) **Agent**

```
import { Agent } from "diagrams-js/elastic/agent"
```

![Endpoint](/resources/elastic/agent/endpoint.png) **Endpoint**

```
import { Endpoint } from "diagrams-js/elastic/agent"
```

![Fleet](/resources/elastic/agent/fleet.png) **Fleet**

```
import { Fleet } from "diagrams-js/elastic/agent"
```

![Integrations](/resources/elastic/agent/integrations.png) **Integrations**

```
import { Integrations } from "diagrams-js/elastic/agent"
```

### elastic/beats[​](#elasticbeats "Direct link to elastic/beats")

![APM](/resources/elastic/beats/apm.png) **APM**

```
import { APM } from "diagrams-js/elastic/beats"
```

![Auditbeat](/resources/elastic/beats/auditbeat.png) **Auditbeat**

```
import { Auditbeat } from "diagrams-js/elastic/beats"
```

![Filebeat](/resources/elastic/beats/filebeat.png) **Filebeat**

```
import { Filebeat } from "diagrams-js/elastic/beats"
```

![Functionbeat](/resources/elastic/beats/functionbeat.png) **Functionbeat**

```
import { Functionbeat } from "diagrams-js/elastic/beats"
```

![Heartbeat](/resources/elastic/beats/heartbeat.png) **Heartbeat**

```
import { Heartbeat } from "diagrams-js/elastic/beats"
```

![Metricbeat](/resources/elastic/beats/metricbeat.png) **Metricbeat**

```
import { Metricbeat } from "diagrams-js/elastic/beats"
```

![Packetbeat](/resources/elastic/beats/packetbeat.png) **Packetbeat**

```
import { Packetbeat } from "diagrams-js/elastic/beats"
```

![Winlogbeat](/resources/elastic/beats/winlogbeat.png) **Winlogbeat**

```
import { Winlogbeat } from "diagrams-js/elastic/beats"
```

### elastic/elasticsearch[​](#elasticelasticsearch "Direct link to elastic/elasticsearch")

![Alerting](/resources/elastic/elasticsearch/alerting.png) **Alerting**

```
import { Alerting } from "diagrams-js/elastic/elasticsearch"
```

![Beats](/resources/elastic/elasticsearch/beats.png) **Beats**

```
import { Beats } from "diagrams-js/elastic/elasticsearch"
```

![Elasticsearch](/resources/elastic/elasticsearch/elasticsearch.png) **Elasticsearch**

```
import { Elasticsearch } from "diagrams-js/elastic/elasticsearch"
```

![Kibana](/resources/elastic/elasticsearch/kibana.png) **Kibana**

```
import { Kibana } from "diagrams-js/elastic/elasticsearch"
```

![LogstashPipeline](/resources/elastic/elasticsearch/logstash-pipeline.png) **LogstashPipeline**

```
import { LogstashPipeline } from "diagrams-js/elastic/elasticsearch"
```

![Logstash](/resources/elastic/elasticsearch/logstash.png) **Logstash**

```
import { Logstash } from "diagrams-js/elastic/elasticsearch"
```

![MachineLearning](/resources/elastic/elasticsearch/machine-learning.png) **MachineLearning**

```
import { MachineLearning } from "diagrams-js/elastic/elasticsearch"
```

![MapServices](/resources/elastic/elasticsearch/map-services.png) **MapServices**

```
import { MapServices } from "diagrams-js/elastic/elasticsearch"
```

![Maps](/resources/elastic/elasticsearch/maps.png) **Maps**

```
import { Maps } from "diagrams-js/elastic/elasticsearch"
```

![Monitoring](/resources/elastic/elasticsearch/monitoring.png) **Monitoring**

```
import { Monitoring } from "diagrams-js/elastic/elasticsearch"
```

![SearchableSnapshots](/resources/elastic/elasticsearch/searchable-snapshots.png) **SearchableSnapshots**

```
import { SearchableSnapshots } from "diagrams-js/elastic/elasticsearch"
```

![SecuritySettings](/resources/elastic/elasticsearch/security-settings.png) **SecuritySettings**

```
import { SecuritySettings } from "diagrams-js/elastic/elasticsearch"
```

![SQL](/resources/elastic/elasticsearch/sql.png) **SQL**

```
import { SQL } from "diagrams-js/elastic/elasticsearch"
```

![Stack](/resources/elastic/elasticsearch/stack.png) **Stack**

```
import { Stack } from "diagrams-js/elastic/elasticsearch"
```

### elastic/enterprisesearch[​](#elasticenterprisesearch "Direct link to elastic/enterprisesearch")

![AppSearch](/resources/elastic/enterprisesearch/app-search.png) **AppSearch**

```
import { AppSearch } from "diagrams-js/elastic/enterprisesearch"
```

![Crawler](/resources/elastic/enterprisesearch/crawler.png) **Crawler**

```
import { Crawler } from "diagrams-js/elastic/enterprisesearch"
```

![EnterpriseSearch](/resources/elastic/enterprisesearch/enterprise-search.png) **EnterpriseSearch**

```
import { EnterpriseSearch } from "diagrams-js/elastic/enterprisesearch"
```

![SiteSearch](/resources/elastic/enterprisesearch/site-search.png) **SiteSearch**

```
import { SiteSearch } from "diagrams-js/elastic/enterprisesearch"
```

![WorkplaceSearch](/resources/elastic/enterprisesearch/workplace-search.png) **WorkplaceSearch**

```
import { WorkplaceSearch } from "diagrams-js/elastic/enterprisesearch"
```

### elastic/observability[​](#elasticobservability "Direct link to elastic/observability")

![APM](/resources/elastic/observability/apm.png) **APM**

```
import { APM } from "diagrams-js/elastic/observability"
```

![Logs](/resources/elastic/observability/logs.png) **Logs**

```
import { Logs } from "diagrams-js/elastic/observability"
```

![Metrics](/resources/elastic/observability/metrics.png) **Metrics**

```
import { Metrics } from "diagrams-js/elastic/observability"
```

![Observability](/resources/elastic/observability/observability.png) **Observability**

```
import { Observability } from "diagrams-js/elastic/observability"
```

![Uptime](/resources/elastic/observability/uptime.png) **Uptime**

```
import { Uptime } from "diagrams-js/elastic/observability"
```

### elastic/orchestration[​](#elasticorchestration "Direct link to elastic/orchestration")

![ECE](/resources/elastic/orchestration/ece.png) **ECE**

```
import { ECE } from "diagrams-js/elastic/orchestration"
```

![ECK](/resources/elastic/orchestration/eck.png) **ECK**

```
import { ECK } from "diagrams-js/elastic/orchestration"
```

### elastic/saas[​](#elasticsaas "Direct link to elastic/saas")

![Cloud](/resources/elastic/saas/cloud.png) **Cloud**

```
import { Cloud } from "diagrams-js/elastic/saas"
```

![Elastic](/resources/elastic/saas/elastic.png) **Elastic**

```
import { Elastic } from "diagrams-js/elastic/saas"
```

### elastic/security[​](#elasticsecurity "Direct link to elastic/security")

![Endpoint](/resources/elastic/security/endpoint.png) **Endpoint**

```
import { Endpoint } from "diagrams-js/elastic/security"
```

![Security](/resources/elastic/security/security.png) **Security**

```
import { Security } from "diagrams-js/elastic/security"
```

![SIEM](/resources/elastic/security/siem.png) **SIEM**

```
import { SIEM } from "diagrams-js/elastic/security"
```

![Xdr](/resources/elastic/security/xdr.png) **Xdr**

```
import { Xdr } from "diagrams-js/elastic/security"
```


---

# Firebase

Node types list for the Firebase provider.

## Example Usage[​](#example-usage "Direct link to Example Usage")

```
import { Diagram } from "diagrams-js";
import { Firebase } from "diagrams-js/firebase/base";
import { Authentication, Firestore, Functions } from "diagrams-js/firebase/develop";

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

const node1 = diagram.add(Firebase("Node 1"));
const node2 = diagram.add(Authentication("Node 2"));

node1.to(node2);

const svg = await diagram.render();
```

note

All node types available in the [Python diagrams library](https://diagrams.mingrammer.com/docs/nodes/firebase) are also available in diagrams-js with the same class names and structure.

## Node Reference[​](#node-reference "Direct link to Node Reference")

### firebase/base[​](#firebasebase "Direct link to firebase/base")

![Firebase](/resources/firebase/base/firebase.png) **Firebase**

```
import { Firebase } from "diagrams-js/firebase/base"
```

### firebase/develop[​](#firebasedevelop "Direct link to firebase/develop")

![Authentication](/resources/firebase/develop/authentication.png) **Authentication**

```
import { Authentication } from "diagrams-js/firebase/develop"
```

![Firestore](/resources/firebase/develop/firestore.png) **Firestore**

```
import { Firestore } from "diagrams-js/firebase/develop"
```

![Functions](/resources/firebase/develop/functions.png) **Functions**

```
import { Functions } from "diagrams-js/firebase/develop"
```

![Hosting](/resources/firebase/develop/hosting.png) **Hosting**

```
import { Hosting } from "diagrams-js/firebase/develop"
```

![MLKit](/resources/firebase/develop/ml-kit.png) **MLKit**

```
import { MLKit } from "diagrams-js/firebase/develop"
```

![RealtimeDatabase](/resources/firebase/develop/realtime-database.png) **RealtimeDatabase**

```
import { RealtimeDatabase } from "diagrams-js/firebase/develop"
```

![Storage](/resources/firebase/develop/storage.png) **Storage**

```
import { Storage } from "diagrams-js/firebase/develop"
```

### firebase/extentions[​](#firebaseextentions "Direct link to firebase/extentions")

![Extensions](/resources/firebase/extentions/extensions.png) **Extensions**

```
import { Extensions } from "diagrams-js/firebase/extentions"
```

### firebase/grow[​](#firebasegrow "Direct link to firebase/grow")

![ABTesting](/resources/firebase/grow/ab-testing.png) **ABTesting**

```
import { ABTesting } from "diagrams-js/firebase/grow"
```

![AppIndexing](/resources/firebase/grow/app-indexing.png) **AppIndexing**

```
import { AppIndexing } from "diagrams-js/firebase/grow"
```

![DynamicLinks](/resources/firebase/grow/dynamic-links.png) **DynamicLinks**

```
import { DynamicLinks } from "diagrams-js/firebase/grow"
```

![InAppMessaging](/resources/firebase/grow/in-app-messaging.png) **InAppMessaging**

```
import { InAppMessaging } from "diagrams-js/firebase/grow"
```

![Invites](/resources/firebase/grow/invites.png) **Invites**

```
import { Invites } from "diagrams-js/firebase/grow"
```

![Messaging](/resources/firebase/grow/messaging.png) **Messaging**

```
import { Messaging } from "diagrams-js/firebase/grow"
```

![Predictions](/resources/firebase/grow/predictions.png) **Predictions**

```
import { Predictions } from "diagrams-js/firebase/grow"
```

![RemoteConfig](/resources/firebase/grow/remote-config.png) **RemoteConfig**

```
import { RemoteConfig } from "diagrams-js/firebase/grow"
```

### firebase/quality[​](#firebasequality "Direct link to firebase/quality")

![AppDistribution](/resources/firebase/quality/app-distribution.png) **AppDistribution**

```
import { AppDistribution } from "diagrams-js/firebase/quality"
```

![CrashReporting](/resources/firebase/quality/crash-reporting.png) **CrashReporting**

```
import { CrashReporting } from "diagrams-js/firebase/quality"
```

![Crashlytics](/resources/firebase/quality/crashlytics.png) **Crashlytics**

```
import { Crashlytics } from "diagrams-js/firebase/quality"
```

![PerformanceMonitoring](/resources/firebase/quality/performance-monitoring.png) **PerformanceMonitoring**

```
import { PerformanceMonitoring } from "diagrams-js/firebase/quality"
```

![TestLab](/resources/firebase/quality/test-lab.png) **TestLab**

```
import { TestLab } from "diagrams-js/firebase/quality"
```


---

# GCP

Node types list for the GCP provider.

## Example Usage[​](#example-usage "Direct link to Example Usage")

```
import { Diagram } from "diagrams-js";
import { Bigquery, Composer, DataCatalog } from "diagrams-js/gcp/analytics";
import { APIGateway, Apigee, Endpoints } from "diagrams-js/gcp/api";

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

const node1 = diagram.add(Bigquery("Node 1"));
const node2 = diagram.add(APIGateway("Node 2"));

node1.to(node2);

const svg = await diagram.render();
```

note

All node types available in the [Python diagrams library](https://diagrams.mingrammer.com/docs/nodes/gcp) are also available in diagrams-js with the same class names and structure.

## Node Reference[​](#node-reference "Direct link to Node Reference")

### gcp/analytics[​](#gcpanalytics "Direct link to gcp/analytics")

![Bigquery](/resources/gcp/analytics/bigquery.png) **Bigquery**

```
import { Bigquery } from "diagrams-js/gcp/analytics"
```

![Composer](/resources/gcp/analytics/composer.png) **Composer**

```
import { Composer } from "diagrams-js/gcp/analytics"
```

![DataCatalog](/resources/gcp/analytics/data-catalog.png) **DataCatalog**

```
import { DataCatalog } from "diagrams-js/gcp/analytics"
```

![DataFusion](/resources/gcp/analytics/data-fusion.png) **DataFusion**

```
import { DataFusion } from "diagrams-js/gcp/analytics"
```

![Dataflow](/resources/gcp/analytics/dataflow.png) **Dataflow**

```
import { Dataflow } from "diagrams-js/gcp/analytics"
```

![Datalab](/resources/gcp/analytics/datalab.png) **Datalab**

```
import { Datalab } from "diagrams-js/gcp/analytics"
```

![Dataprep](/resources/gcp/analytics/dataprep.png) **Dataprep**

```
import { Dataprep } from "diagrams-js/gcp/analytics"
```

![Dataproc](/resources/gcp/analytics/dataproc.png) **Dataproc**

```
import { Dataproc } from "diagrams-js/gcp/analytics"
```

![Genomics](/resources/gcp/analytics/genomics.png) **Genomics**

```
import { Genomics } from "diagrams-js/gcp/analytics"
```

![Looker](/resources/gcp/analytics/looker.png) **Looker**

```
import { Looker } from "diagrams-js/gcp/analytics"
```

![Pubsub](/resources/gcp/analytics/pubsub.png) **Pubsub**

```
import { Pubsub } from "diagrams-js/gcp/analytics"
```

### gcp/api[​](#gcpapi "Direct link to gcp/api")

![APIGateway](/resources/gcp/api/api-gateway.png) **APIGateway**

```
import { APIGateway } from "diagrams-js/gcp/api"
```

![Apigee](/resources/gcp/api/apigee.png) **Apigee**

```
import { Apigee } from "diagrams-js/gcp/api"
```

![Endpoints](/resources/gcp/api/endpoints.png) **Endpoints**

```
import { Endpoints } from "diagrams-js/gcp/api"
```

### gcp/compute[​](#gcpcompute "Direct link to gcp/compute")

![AppEngine](/resources/gcp/compute/app-engine.png) **AppEngine**

```
import { AppEngine } from "diagrams-js/gcp/compute"
```

![BinaryAuthorization](/resources/gcp/compute/binary-authorization.png) **BinaryAuthorization**

```
import { BinaryAuthorization } from "diagrams-js/gcp/compute"
```

![ComputeEngine](/resources/gcp/compute/compute-engine.png) **ComputeEngine**

```
import { ComputeEngine } from "diagrams-js/gcp/compute"
```

![ContainerOptimizedOS](/resources/gcp/compute/container-optimized-os.png) **ContainerOptimizedOS**

```
import { ContainerOptimizedOS } from "diagrams-js/gcp/compute"
```

![Functions](/resources/gcp/compute/functions.png) **Functions**

```
import { Functions } from "diagrams-js/gcp/compute"
```

![GKEOnPrem](/resources/gcp/compute/gke-on-prem.png) **GKEOnPrem**

```
import { GKEOnPrem } from "diagrams-js/gcp/compute"
```

![GPU](/resources/gcp/compute/gpu.png) **GPU**

```
import { GPU } from "diagrams-js/gcp/compute"
```

![KubernetesEngine](/resources/gcp/compute/kubernetes-engine.png) **KubernetesEngine**

```
import { KubernetesEngine } from "diagrams-js/gcp/compute"
```

![OSConfigurationManagement](/resources/gcp/compute/os-configuration-management.png) **OSConfigurationManagement**

```
import { OSConfigurationManagement } from "diagrams-js/gcp/compute"
```

![OSInventoryManagement](/resources/gcp/compute/os-inventory-management.png) **OSInventoryManagement**

```
import { OSInventoryManagement } from "diagrams-js/gcp/compute"
```

![OSPatchManagement](/resources/gcp/compute/os-patch-management.png) **OSPatchManagement**

```
import { OSPatchManagement } from "diagrams-js/gcp/compute"
```

![Run](/resources/gcp/compute/run.png) **Run**

```
import { Run } from "diagrams-js/gcp/compute"
```

### gcp/database[​](#gcpdatabase "Direct link to gcp/database")

![Bigtable](/resources/gcp/database/bigtable.png) **Bigtable**

```
import { Bigtable } from "diagrams-js/gcp/database"
```

![Datastore](/resources/gcp/database/datastore.png) **Datastore**

```
import { Datastore } from "diagrams-js/gcp/database"
```

![Firestore](/resources/gcp/database/firestore.png) **Firestore**

```
import { Firestore } from "diagrams-js/gcp/database"
```

![Memorystore](/resources/gcp/database/memorystore.png) **Memorystore**

```
import { Memorystore } from "diagrams-js/gcp/database"
```

![Spanner](/resources/gcp/database/spanner.png) **Spanner**

```
import { Spanner } from "diagrams-js/gcp/database"
```

![SQL](/resources/gcp/database/sql.png) **SQL**

```
import { SQL } from "diagrams-js/gcp/database"
```

### gcp/devtools[​](#gcpdevtools "Direct link to gcp/devtools")

![Build](/resources/gcp/devtools/build.png) **Build**

```
import { Build } from "diagrams-js/gcp/devtools"
```

![CloudShell](/resources/gcp/devtools/cloud-shell.png) **CloudShell**

```
import { CloudShell } from "diagrams-js/gcp/devtools"
```

![CodeForIntellij](/resources/gcp/devtools/code-for-intellij.png) **CodeForIntellij**

```
import { CodeForIntellij } from "diagrams-js/gcp/devtools"
```

![Code](/resources/gcp/devtools/code.png) **Code**

```
import { Code } from "diagrams-js/gcp/devtools"
```

![ContainerRegistry](/resources/gcp/devtools/container-registry.png) **ContainerRegistry**

```
import { ContainerRegistry } from "diagrams-js/gcp/devtools"
```

![GradleAppEnginePlugin](/resources/gcp/devtools/gradle-app-engine-plugin.png) **GradleAppEnginePlugin**

```
import { GradleAppEnginePlugin } from "diagrams-js/gcp/devtools"
```

![IdePlugins](/resources/gcp/devtools/ide-plugins.png) **IdePlugins**

```
import { IdePlugins } from "diagrams-js/gcp/devtools"
```

![MavenAppEnginePlugin](/resources/gcp/devtools/maven-app-engine-plugin.png) **MavenAppEnginePlugin**

```
import { MavenAppEnginePlugin } from "diagrams-js/gcp/devtools"
```

![Scheduler](/resources/gcp/devtools/scheduler.png) **Scheduler**

```
import { Scheduler } from "diagrams-js/gcp/devtools"
```

![SDK](/resources/gcp/devtools/sdk.png) **SDK**

```
import { SDK } from "diagrams-js/gcp/devtools"
```

![ServiceCatalog](/resources/gcp/devtools/service-catalog.png) **ServiceCatalog**

```
import { ServiceCatalog } from "diagrams-js/gcp/devtools"
```

![SourceRepositories](/resources/gcp/devtools/source-repositories.png) **SourceRepositories**

```
import { SourceRepositories } from "diagrams-js/gcp/devtools"
```

![Tasks](/resources/gcp/devtools/tasks.png) **Tasks**

```
import { Tasks } from "diagrams-js/gcp/devtools"
```

![TestLab](/resources/gcp/devtools/test-lab.png) **TestLab**

```
import { TestLab } from "diagrams-js/gcp/devtools"
```

![ToolsForEclipse](/resources/gcp/devtools/tools-for-eclipse.png) **ToolsForEclipse**

```
import { ToolsForEclipse } from "diagrams-js/gcp/devtools"
```

![ToolsForPowershell](/resources/gcp/devtools/tools-for-powershell.png) **ToolsForPowershell**

```
import { ToolsForPowershell } from "diagrams-js/gcp/devtools"
```

![ToolsForVisualStudio](/resources/gcp/devtools/tools-for-visual-studio.png) **ToolsForVisualStudio**

```
import { ToolsForVisualStudio } from "diagrams-js/gcp/devtools"
```

### gcp/iot[​](#gcpiot "Direct link to gcp/iot")

![IotCore](/resources/gcp/iot/iot-core.png) **IotCore**

```
import { IotCore } from "diagrams-js/gcp/iot"
```

### gcp/management[​](#gcpmanagement "Direct link to gcp/management")

![Billing](/resources/gcp/management/billing.png) **Billing**

```
import { Billing } from "diagrams-js/gcp/management"
```

![Project](/resources/gcp/management/project.png) **Project**

```
import { Project } from "diagrams-js/gcp/management"
```

![Quotas](/resources/gcp/management/quotas.png) **Quotas**

```
import { Quotas } from "diagrams-js/gcp/management"
```

![Support](/resources/gcp/management/support.png) **Support**

```
import { Support } from "diagrams-js/gcp/management"
```

### gcp/migration[​](#gcpmigration "Direct link to gcp/migration")

![MigrateComputeEngine](/resources/gcp/migration/migrate-compute-engine.png) **MigrateComputeEngine**

```
import { MigrateComputeEngine } from "diagrams-js/gcp/migration"
```

![TransferAppliance](/resources/gcp/migration/transfer-appliance.png) **TransferAppliance**

```
import { TransferAppliance } from "diagrams-js/gcp/migration"
```

### gcp/ml[​](#gcpml "Direct link to gcp/ml")

![AdvancedSolutionsLab](/resources/gcp/ml/advanced-solutions-lab.png) **AdvancedSolutionsLab**

```
import { AdvancedSolutionsLab } from "diagrams-js/gcp/ml"
```

![AIHub](/resources/gcp/ml/ai-hub.png) **AIHub**

```
import { AIHub } from "diagrams-js/gcp/ml"
```

![AIPlatformDataLabelingService](/resources/gcp/ml/ai-platform-data-labeling-service.png) **AIPlatformDataLabelingService**

```
import { AIPlatformDataLabelingService } from "diagrams-js/gcp/ml"
```

![AIPlatform](/resources/gcp/ml/ai-platform.png) **AIPlatform**

```
import { AIPlatform } from "diagrams-js/gcp/ml"
```

![AutomlNaturalLanguage](/resources/gcp/ml/automl-natural-language.png) **AutomlNaturalLanguage**

```
import { AutomlNaturalLanguage } from "diagrams-js/gcp/ml"
```

![AutomlTables](/resources/gcp/ml/automl-tables.png) **AutomlTables**

```
import { AutomlTables } from "diagrams-js/gcp/ml"
```

![AutomlTranslation](/resources/gcp/ml/automl-translation.png) **AutomlTranslation**

```
import { AutomlTranslation } from "diagrams-js/gcp/ml"
```

![AutomlVideoIntelligence](/resources/gcp/ml/automl-video-intelligence.png) **AutomlVideoIntelligence**

```
import { AutomlVideoIntelligence } from "diagrams-js/gcp/ml"
```

![AutomlVision](/resources/gcp/ml/automl-vision.png) **AutomlVision**

```
import { AutomlVision } from "diagrams-js/gcp/ml"
```

![Automl](/resources/gcp/ml/automl.png) **Automl**

```
import { Automl } from "diagrams-js/gcp/ml"
```

![DialogFlowEnterpriseEdition](/resources/gcp/ml/dialog-flow-enterprise-edition.png) **DialogFlowEnterpriseEdition**

```
import { DialogFlowEnterpriseEdition } from "diagrams-js/gcp/ml"
```

![InferenceAPI](/resources/gcp/ml/inference-api.png) **InferenceAPI**

```
import { InferenceAPI } from "diagrams-js/gcp/ml"
```

![JobsAPI](/resources/gcp/ml/jobs-api.png) **JobsAPI**

```
import { JobsAPI } from "diagrams-js/gcp/ml"
```

![NaturalLanguageAPI](/resources/gcp/ml/natural-language-api.png) **NaturalLanguageAPI**

```
import { NaturalLanguageAPI } from "diagrams-js/gcp/ml"
```

![RecommendationsAI](/resources/gcp/ml/recommendations-ai.png) **RecommendationsAI**

```
import { RecommendationsAI } from "diagrams-js/gcp/ml"
```

![SpeechToText](/resources/gcp/ml/speech-to-text.png) **SpeechToText**

```
import { SpeechToText } from "diagrams-js/gcp/ml"
```

![TextToSpeech](/resources/gcp/ml/text-to-speech.png) **TextToSpeech**

```
import { TextToSpeech } from "diagrams-js/gcp/ml"
```

![TPU](/resources/gcp/ml/tpu.png) **TPU**

```
import { TPU } from "diagrams-js/gcp/ml"
```

![TranslationAPI](/resources/gcp/ml/translation-api.png) **TranslationAPI**

```
import { TranslationAPI } from "diagrams-js/gcp/ml"
```

![VertexAI](/resources/gcp/ml/vertex-ai.png) **VertexAI**

```
import { VertexAI } from "diagrams-js/gcp/ml"
```

![VideoIntelligenceAPI](/resources/gcp/ml/video-intelligence-api.png) **VideoIntelligenceAPI**

```
import { VideoIntelligenceAPI } from "diagrams-js/gcp/ml"
```

![VisionAPI](/resources/gcp/ml/vision-api.png) **VisionAPI**

```
import { VisionAPI } from "diagrams-js/gcp/ml"
```

### gcp/network[​](#gcpnetwork "Direct link to gcp/network")

![Armor](/resources/gcp/network/armor.png) **Armor**

```
import { Armor } from "diagrams-js/gcp/network"
```

![CDN](/resources/gcp/network/cdn.png) **CDN**

```
import { CDN } from "diagrams-js/gcp/network"
```

![CloudIDS](/resources/gcp/network/cloud-ids.png) **CloudIDS**

```
import { CloudIDS } from "diagrams-js/gcp/network"
```

![DedicatedInterconnect](/resources/gcp/network/dedicated-interconnect.png) **DedicatedInterconnect**

```
import { DedicatedInterconnect } from "diagrams-js/gcp/network"
```

![DNS](/resources/gcp/network/dns.png) **DNS**

```
import { DNS } from "diagrams-js/gcp/network"
```

![ExternalIpAddresses](/resources/gcp/network/external-ip-addresses.png) **ExternalIpAddresses**

```
import { ExternalIpAddresses } from "diagrams-js/gcp/network"
```

![FirewallRules](/resources/gcp/network/firewall-rules.png) **FirewallRules**

```
import { FirewallRules } from "diagrams-js/gcp/network"
```

![LoadBalancing](/resources/gcp/network/load-balancing.png) **LoadBalancing**

```
import { LoadBalancing } from "diagrams-js/gcp/network"
```

![NAT](/resources/gcp/network/nat.png) **NAT**

```
import { NAT } from "diagrams-js/gcp/network"
```

![NetworkConnectivityCenter](/resources/gcp/network/network-connectivity-center.png) **NetworkConnectivityCenter**

```
import { NetworkConnectivityCenter } from "diagrams-js/gcp/network"
```

![NetworkIntelligenceCenter](/resources/gcp/network/network-intelligence-center.png) **NetworkIntelligenceCenter**

```
import { NetworkIntelligenceCenter } from "diagrams-js/gcp/network"
```

![NetworkSecurity](/resources/gcp/network/network-security.png) **NetworkSecurity**

```
import { NetworkSecurity } from "diagrams-js/gcp/network"
```

![NetworkTiers](/resources/gcp/network/network-tiers.png) **NetworkTiers**

```
import { NetworkTiers } from "diagrams-js/gcp/network"
```

![NetworkTopology](/resources/gcp/network/network-topology.png) **NetworkTopology**

```
import { NetworkTopology } from "diagrams-js/gcp/network"
```

![Network](/resources/gcp/network/network.png) **Network**

```
import { Network } from "diagrams-js/gcp/network"
```

![PartnerInterconnect](/resources/gcp/network/partner-interconnect.png) **PartnerInterconnect**

```
import { PartnerInterconnect } from "diagrams-js/gcp/network"
```

![PremiumNetworkTier](/resources/gcp/network/premium-network-tier.png) **PremiumNetworkTier**

```
import { PremiumNetworkTier } from "diagrams-js/gcp/network"
```

![PrivateServiceConnect](/resources/gcp/network/private-service-connect.png) **PrivateServiceConnect**

```
import { PrivateServiceConnect } from "diagrams-js/gcp/network"
```

![Router](/resources/gcp/network/router.png) **Router**

```
import { Router } from "diagrams-js/gcp/network"
```

![Routes](/resources/gcp/network/routes.png) **Routes**

```
import { Routes } from "diagrams-js/gcp/network"
```

![ServiceMesh](/resources/gcp/network/service-mesh.png) **ServiceMesh**

```
import { ServiceMesh } from "diagrams-js/gcp/network"
```

![StandardNetworkTier](/resources/gcp/network/standard-network-tier.png) **StandardNetworkTier**

```
import { StandardNetworkTier } from "diagrams-js/gcp/network"
```

![TrafficDirector](/resources/gcp/network/traffic-director.png) **TrafficDirector**

```
import { TrafficDirector } from "diagrams-js/gcp/network"
```

![VirtualPrivateCloud](/resources/gcp/network/virtual-private-cloud.png) **VirtualPrivateCloud**

```
import { VirtualPrivateCloud } from "diagrams-js/gcp/network"
```

![VPN](/resources/gcp/network/vpn.png) **VPN**

```
import { VPN } from "diagrams-js/gcp/network"
```

### gcp/operations[​](#gcpoperations "Direct link to gcp/operations")

![Logging](/resources/gcp/operations/logging.png) **Logging**

```
import { Logging } from "diagrams-js/gcp/operations"
```

![Monitoring](/resources/gcp/operations/monitoring.png) **Monitoring**

```
import { Monitoring } from "diagrams-js/gcp/operations"
```

### gcp/security[​](#gcpsecurity "Direct link to gcp/security")

![AccessContextManager](/resources/gcp/security/access-context-manager.png) **AccessContextManager**

```
import { AccessContextManager } from "diagrams-js/gcp/security"
```

![AssuredWorkloads](/resources/gcp/security/assured-workloads.png) **AssuredWorkloads**

```
import { AssuredWorkloads } from "diagrams-js/gcp/security"
```

![CertificateAuthorityService](/resources/gcp/security/certificate-authority-service.png) **CertificateAuthorityService**

```
import { CertificateAuthorityService } from "diagrams-js/gcp/security"
```

![CertificateManager](/resources/gcp/security/certificate-manager.png) **CertificateManager**

```
import { CertificateManager } from "diagrams-js/gcp/security"
```

![CloudAssetInventory](/resources/gcp/security/cloud-asset-inventory.png) **CloudAssetInventory**

```
import { CloudAssetInventory } from "diagrams-js/gcp/security"
```

![Iam](/resources/gcp/security/iam.png) **Iam**

```
import { Iam } from "diagrams-js/gcp/security"
```

![IAP](/resources/gcp/security/iap.png) **IAP**

```
import { IAP } from "diagrams-js/gcp/security"
```

![KeyManagementService](/resources/gcp/security/key-management-service.png) **KeyManagementService**

```
import { KeyManagementService } from "diagrams-js/gcp/security"
```

![ResourceManager](/resources/gcp/security/resource-manager.png) **ResourceManager**

```
import { ResourceManager } from "diagrams-js/gcp/security"
```

![SecretManager](/resources/gcp/security/secret-manager.png) **SecretManager**

```
import { SecretManager } from "diagrams-js/gcp/security"
```

![SecurityCommandCenter](/resources/gcp/security/security-command-center.png) **SecurityCommandCenter**

```
import { SecurityCommandCenter } from "diagrams-js/gcp/security"
```

![SecurityHealthAdvisor](/resources/gcp/security/security-health-advisor.png) **SecurityHealthAdvisor**

```
import { SecurityHealthAdvisor } from "diagrams-js/gcp/security"
```

![SecurityScanner](/resources/gcp/security/security-scanner.png) **SecurityScanner**

```
import { SecurityScanner } from "diagrams-js/gcp/security"
```

### gcp/storage[​](#gcpstorage "Direct link to gcp/storage")

![Filestore](/resources/gcp/storage/filestore.png) **Filestore**

```
import { Filestore } from "diagrams-js/gcp/storage"
```

![LocalSSD](/resources/gcp/storage/local-ssd.png) **LocalSSD**

```
import { LocalSSD } from "diagrams-js/gcp/storage"
```

![PersistentDisk](/resources/gcp/storage/persistent-disk.png) **PersistentDisk**

```
import { PersistentDisk } from "diagrams-js/gcp/storage"
```

![Storage](/resources/gcp/storage/storage.png) **Storage**

```
import { Storage } from "diagrams-js/gcp/storage"
```


---

# Generic

Node types list for the Generic provider.

## Example Usage[​](#example-usage "Direct link to Example Usage")

```
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();
```

note

All node types available in the [Python diagrams library](https://diagrams.mingrammer.com/docs/nodes/generic) are also available in diagrams-js with the same class names and structure.

## Node Reference[​](#node-reference "Direct link to Node Reference")

### generic/blank[​](#genericblank "Direct link to generic/blank")

![Blank](/resources/generic/blank/blank.png) **Blank**

```
import { Blank } from "diagrams-js/generic/blank"
```

### generic/compute[​](#genericcompute "Direct link to generic/compute")

![Rack](/resources/generic/compute/rack.png) **Rack**

```
import { Rack } from "diagrams-js/generic/compute"
```

### generic/database[​](#genericdatabase "Direct link to generic/database")

![SQL](/resources/generic/database/sql.png) **SQL**

```
import { SQL } from "diagrams-js/generic/database"
```

### generic/device[​](#genericdevice "Direct link to generic/device")

![Mobile](/resources/generic/device/mobile.png) **Mobile**

```
import { Mobile } from "diagrams-js/generic/device"
```

![Tablet](/resources/generic/device/tablet.png) **Tablet**

```
import { Tablet } from "diagrams-js/generic/device"
```

### generic/network[​](#genericnetwork "Direct link to generic/network")

![Firewall](/resources/generic/network/firewall.png) **Firewall**

```
import { Firewall } from "diagrams-js/generic/network"
```

![Router](/resources/generic/network/router.png) **Router**

```
import { Router } from "diagrams-js/generic/network"
```

![Subnet](/resources/generic/network/subnet.png) **Subnet**

```
import { Subnet } from "diagrams-js/generic/network"
```

![Switch](/resources/generic/network/switch.png) **Switch**

```
import { Switch } from "diagrams-js/generic/network"
```

![VPN](/resources/generic/network/vpn.png) **VPN**

```
import { VPN } from "diagrams-js/generic/network"
```

### generic/os[​](#genericos "Direct link to generic/os")

![Android](/resources/generic/os/android.png) **Android**

```
import { Android } from "diagrams-js/generic/os"
```

![Centos](/resources/generic/os/centos.png) **Centos**

```
import { Centos } from "diagrams-js/generic/os"
```

![Debian](/resources/generic/os/debian.png) **Debian**

```
import { Debian } from "diagrams-js/generic/os"
```

![IOS](/resources/generic/os/ios.png) **IOS**

```
import { IOS } from "diagrams-js/generic/os"
```

![LinuxGeneral](/resources/generic/os/linux-general.png) **LinuxGeneral**

```
import { LinuxGeneral } from "diagrams-js/generic/os"
```

![Raspbian](/resources/generic/os/raspbian.png) **Raspbian**

```
import { Raspbian } from "diagrams-js/generic/os"
```

![RedHat](/resources/generic/os/red-hat.png) **RedHat**

```
import { RedHat } from "diagrams-js/generic/os"
```

![Suse](/resources/generic/os/suse.png) **Suse**

```
import { Suse } from "diagrams-js/generic/os"
```

![Ubuntu](/resources/generic/os/ubuntu.png) **Ubuntu**

```
import { Ubuntu } from "diagrams-js/generic/os"
```

![Windows](/resources/generic/os/windows.png) **Windows**

```
import { Windows } from "diagrams-js/generic/os"
```

### generic/place[​](#genericplace "Direct link to generic/place")

![Datacenter](/resources/generic/place/datacenter.png) **Datacenter**

```
import { Datacenter } from "diagrams-js/generic/place"
```

### generic/storage[​](#genericstorage "Direct link to generic/storage")

![Storage](/resources/generic/storage/storage.png) **Storage**

```
import { Storage } from "diagrams-js/generic/storage"
```

### generic/virtualization[​](#genericvirtualization "Direct link to generic/virtualization")

![Qemu](/resources/generic/virtualization/qemu.png) **Qemu**

```
import { Qemu } from "diagrams-js/generic/virtualization"
```

![Virtualbox](/resources/generic/virtualization/virtualbox.png) **Virtualbox**

```
import { Virtualbox } from "diagrams-js/generic/virtualization"
```

![Vmware](/resources/generic/virtualization/vmware.png) **Vmware**

```
import { Vmware } from "diagrams-js/generic/virtualization"
```

![XEN](/resources/generic/virtualization/xen.png) **XEN**

```
import { XEN } from "diagrams-js/generic/virtualization"
```


---

# GIS

Node types list for the GIS provider.

## Example Usage[​](#example-usage "Direct link to Example Usage")

```
import { Diagram } from "diagrams-js";
import { Gdal, Imposm, Lastools } from "diagrams-js/gis/cli";
import { BAN, Here, IGN } from "diagrams-js/gis/data";

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

const node1 = diagram.add(Gdal("Node 1"));
const node2 = diagram.add(BAN("Node 2"));

node1.to(node2);

const svg = await diagram.render();
```

note

All node types available in the [Python diagrams library](https://diagrams.mingrammer.com/docs/nodes/gis) are also available in diagrams-js with the same class names and structure.

## Node Reference[​](#node-reference "Direct link to Node Reference")

### gis/cli[​](#giscli "Direct link to gis/cli")

![Gdal](/resources/gis/cli/gdal.png) **Gdal**

```
import { Gdal } from "diagrams-js/gis/cli"
```

![Imposm](/resources/gis/cli/imposm.png) **Imposm**

```
import { Imposm } from "diagrams-js/gis/cli"
```

![Lastools](/resources/gis/cli/lastools.png) **Lastools**

```
import { Lastools } from "diagrams-js/gis/cli"
```

![Mapnik](/resources/gis/cli/mapnik.png) **Mapnik**

```
import { Mapnik } from "diagrams-js/gis/cli"
```

![Mdal](/resources/gis/cli/mdal.png) **Mdal**

```
import { Mdal } from "diagrams-js/gis/cli"
```

![Pdal](/resources/gis/cli/pdal.png) **Pdal**

```
import { Pdal } from "diagrams-js/gis/cli"
```

### gis/data[​](#gisdata "Direct link to gis/data")

![BAN](/resources/gis/data/ban.png) **BAN**

```
import { BAN } from "diagrams-js/gis/data"
```

![Here](/resources/gis/data/here.png) **Here**

```
import { Here } from "diagrams-js/gis/data"
```

![IGN](/resources/gis/data/ign.png) **IGN**

```
import { IGN } from "diagrams-js/gis/data"
```

![Openstreetmap](/resources/gis/data/openstreetmap.png) **Openstreetmap**

```
import { Openstreetmap } from "diagrams-js/gis/data"
```

![Overturemaps](/resources/gis/data/overturemaps.png) **Overturemaps**

```
import { Overturemaps } from "diagrams-js/gis/data"
```

### gis/database[​](#gisdatabase "Direct link to gis/database")

![Postgis](/resources/gis/database/postgis.png) **Postgis**

```
import { Postgis } from "diagrams-js/gis/database"
```

### gis/desktop[​](#gisdesktop "Direct link to gis/desktop")

![Maptunik](/resources/gis/desktop/maptunik.png) **Maptunik**

```
import { Maptunik } from "diagrams-js/gis/desktop"
```

![QGIS](/resources/gis/desktop/qgis.png) **QGIS**

```
import { QGIS } from "diagrams-js/gis/desktop"
```

### gis/format[​](#gisformat "Direct link to gis/format")

![Geopackage](/resources/gis/format/geopackage.png) **Geopackage**

```
import { Geopackage } from "diagrams-js/gis/format"
```

![Geoparquet](/resources/gis/format/geoparquet.png) **Geoparquet**

```
import { Geoparquet } from "diagrams-js/gis/format"
```

### gis/geocoding[​](#gisgeocoding "Direct link to gis/geocoding")

![Addok](/resources/gis/geocoding/addok.png) **Addok**

```
import { Addok } from "diagrams-js/gis/geocoding"
```

![Gisgraphy](/resources/gis/geocoding/gisgraphy.png) **Gisgraphy**

```
import { Gisgraphy } from "diagrams-js/gis/geocoding"
```

![Nominatim](/resources/gis/geocoding/nominatim.png) **Nominatim**

```
import { Nominatim } from "diagrams-js/gis/geocoding"
```

![Pelias](/resources/gis/geocoding/pelias.png) **Pelias**

```
import { Pelias } from "diagrams-js/gis/geocoding"
```

### gis/java[​](#gisjava "Direct link to gis/java")

![Geotools](/resources/gis/java/geotools.png) **Geotools**

```
import { Geotools } from "diagrams-js/gis/java"
```

### gis/javascript[​](#gisjavascript "Direct link to gis/javascript")

![Cesium](/resources/gis/javascript/cesium.png) **Cesium**

```
import { Cesium } from "diagrams-js/gis/javascript"
```

![Geostyler](/resources/gis/javascript/geostyler.png) **Geostyler**

```
import { Geostyler } from "diagrams-js/gis/javascript"
```

![Keplerjs](/resources/gis/javascript/keplerjs.png) **Keplerjs**

```
import { Keplerjs } from "diagrams-js/gis/javascript"
```

![Leaflet](/resources/gis/javascript/leaflet.png) **Leaflet**

```
import { Leaflet } from "diagrams-js/gis/javascript"
```

![Maplibre](/resources/gis/javascript/maplibre.png) **Maplibre**

```
import { Maplibre } from "diagrams-js/gis/javascript"
```

![OlExt](/resources/gis/javascript/ol-ext.png) **OlExt**

```
import { OlExt } from "diagrams-js/gis/javascript"
```

![Openlayers](/resources/gis/javascript/openlayers.png) **Openlayers**

```
import { Openlayers } from "diagrams-js/gis/javascript"
```

![Turfjs](/resources/gis/javascript/turfjs.png) **Turfjs**

```
import { Turfjs } from "diagrams-js/gis/javascript"
```

### gis/mobile[​](#gismobile "Direct link to gis/mobile")

![Mergin](/resources/gis/mobile/mergin.png) **Mergin**

```
import { Mergin } from "diagrams-js/gis/mobile"
```

![Qfield](/resources/gis/mobile/qfield.png) **Qfield**

```
import { Qfield } from "diagrams-js/gis/mobile"
```

![Smash](/resources/gis/mobile/smash.png) **Smash**

```
import { Smash } from "diagrams-js/gis/mobile"
```

### gis/ogc[​](#gisogc "Direct link to gis/ogc")

![OGC](/resources/gis/ogc/ogc.png) **OGC**

```
import { OGC } from "diagrams-js/gis/ogc"
```

![WFS](/resources/gis/ogc/wfs.png) **WFS**

```
import { WFS } from "diagrams-js/gis/ogc"
```

![WMS](/resources/gis/ogc/wms.png) **WMS**

```
import { WMS } from "diagrams-js/gis/ogc"
```

### gis/organization[​](#gisorganization "Direct link to gis/organization")

![Osgeo](/resources/gis/organization/osgeo.png) **Osgeo**

```
import { Osgeo } from "diagrams-js/gis/organization"
```

### gis/python[​](#gispython "Direct link to gis/python")

![Geopandas](/resources/gis/python/geopandas.png) **Geopandas**

```
import { Geopandas } from "diagrams-js/gis/python"
```

![Pysal](/resources/gis/python/pysal.png) **Pysal**

```
import { Pysal } from "diagrams-js/gis/python"
```

### gis/routing[​](#gisrouting "Direct link to gis/routing")

![Graphhopper](/resources/gis/routing/graphhopper.png) **Graphhopper**

```
import { Graphhopper } from "diagrams-js/gis/routing"
```

![Osrm](/resources/gis/routing/osrm.png) **Osrm**

```
import { Osrm } from "diagrams-js/gis/routing"
```

![Pgrouting](/resources/gis/routing/pgrouting.png) **Pgrouting**

```
import { Pgrouting } from "diagrams-js/gis/routing"
```

![Valhalla](/resources/gis/routing/valhalla.png) **Valhalla**

```
import { Valhalla } from "diagrams-js/gis/routing"
```

### gis/server[​](#gisserver "Direct link to gis/server")

![Actinia](/resources/gis/server/actinia.png) **Actinia**

```
import { Actinia } from "diagrams-js/gis/server"
```

![Baremaps](/resources/gis/server/baremaps.png) **Baremaps**

```
import { Baremaps } from "diagrams-js/gis/server"
```

![Deegree](/resources/gis/server/deegree.png) **Deegree**

```
import { Deegree } from "diagrams-js/gis/server"
```

![G3wSuite](/resources/gis/server/g3w-suite.png) **G3wSuite**

```
import { G3wSuite } from "diagrams-js/gis/server"
```

![Geohealthcheck](/resources/gis/server/geohealthcheck.png) **Geohealthcheck**

```
import { Geohealthcheck } from "diagrams-js/gis/server"
```

![Geomapfish](/resources/gis/server/geomapfish.png) **Geomapfish**

```
import { Geomapfish } from "diagrams-js/gis/server"
```

![Geomesa](/resources/gis/server/geomesa.png) **Geomesa**

```
import { Geomesa } from "diagrams-js/gis/server"
```

![Geonetwork](/resources/gis/server/geonetwork.png) **Geonetwork**

```
import { Geonetwork } from "diagrams-js/gis/server"
```

![Geonode](/resources/gis/server/geonode.png) **Geonode**

```
import { Geonode } from "diagrams-js/gis/server"
```

![Georchestra](/resources/gis/server/georchestra.png) **Georchestra**

```
import { Georchestra } from "diagrams-js/gis/server"
```

![Geoserver](/resources/gis/server/geoserver.png) **Geoserver**

```
import { Geoserver } from "diagrams-js/gis/server"
```

![Geowebcache](/resources/gis/server/geowebcache.png) **Geowebcache**

```
import { Geowebcache } from "diagrams-js/gis/server"
```

![Kepler](/resources/gis/server/kepler.png) **Kepler**

```
import { Kepler } from "diagrams-js/gis/server"
```

![Mapproxy](/resources/gis/server/mapproxy.png) **Mapproxy**

```
import { Mapproxy } from "diagrams-js/gis/server"
```

![Mapserver](/resources/gis/server/mapserver.png) **Mapserver**

```
import { Mapserver } from "diagrams-js/gis/server"
```

![Mapstore](/resources/gis/server/mapstore.png) **Mapstore**

```
import { Mapstore } from "diagrams-js/gis/server"
```

![Mviewer](/resources/gis/server/mviewer.png) **Mviewer**

```
import { Mviewer } from "diagrams-js/gis/server"
```

![Pg\_tileserv](/resources/gis/server/pg_tileserv.png) **Pg\_tileserv**

```
import { Pg_tileserv } from "diagrams-js/gis/server"
```

![Pycsw](/resources/gis/server/pycsw.png) **Pycsw**

```
import { Pycsw } from "diagrams-js/gis/server"
```

![Pygeoapi](/resources/gis/server/pygeoapi.png) **Pygeoapi**

```
import { Pygeoapi } from "diagrams-js/gis/server"
```

![QGISServer](/resources/gis/server/qgis-server.png) **QGISServer**

```
import { QGISServer } from "diagrams-js/gis/server"
```

![Zooproject](/resources/gis/server/zooproject.png) **Zooproject**

```
import { Zooproject } from "diagrams-js/gis/server"
```


---

# IBM

Node types list for the IBM provider.

## Example Usage[​](#example-usage "Direct link to Example Usage")

```
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();
```

note

All node types available in the [Python diagrams library](https://diagrams.mingrammer.com/docs/nodes/ibm) are also available in diagrams-js with the same class names and structure.

## Node Reference[​](#node-reference "Direct link to Node Reference")

### ibm/analytics[​](#ibmanalytics "Direct link to ibm/analytics")

![Analytics](/resources/ibm/analytics/analytics.png) **Analytics**

```
import { Analytics } from "diagrams-js/ibm/analytics"
```

![DataIntegration](/resources/ibm/analytics/data-integration.png) **DataIntegration**

```
import { DataIntegration } from "diagrams-js/ibm/analytics"
```

![DataRepositories](/resources/ibm/analytics/data-repositories.png) **DataRepositories**

```
import { DataRepositories } from "diagrams-js/ibm/analytics"
```

![DeviceAnalytics](/resources/ibm/analytics/device-analytics.png) **DeviceAnalytics**

```
import { DeviceAnalytics } from "diagrams-js/ibm/analytics"
```

![StreamingComputing](/resources/ibm/analytics/streaming-computing.png) **StreamingComputing**

```
import { StreamingComputing } from "diagrams-js/ibm/analytics"
```

### ibm/applications[​](#ibmapplications "Direct link to ibm/applications")

![ActionableInsight](/resources/ibm/applications/actionable-insight.png) **ActionableInsight**

```
import { ActionableInsight } from "diagrams-js/ibm/applications"
```

![Annotate](/resources/ibm/applications/annotate.png) **Annotate**

```
import { Annotate } from "diagrams-js/ibm/applications"
```

![ApiDeveloperPortal](/resources/ibm/applications/api-developer-portal.png) **ApiDeveloperPortal**

```
import { ApiDeveloperPortal } from "diagrams-js/ibm/applications"
```

![ApiPolyglotRuntimes](/resources/ibm/applications/api-polyglot-runtimes.png) **ApiPolyglotRuntimes**

```
import { ApiPolyglotRuntimes } from "diagrams-js/ibm/applications"
```

![AppServer](/resources/ibm/applications/app-server.png) **AppServer**

```
import { AppServer } from "diagrams-js/ibm/applications"
```

![ApplicationLogic](/resources/ibm/applications/application-logic.png) **ApplicationLogic**

```
import { ApplicationLogic } from "diagrams-js/ibm/applications"
```

![EnterpriseApplications](/resources/ibm/applications/enterprise-applications.png) **EnterpriseApplications**

```
import { EnterpriseApplications } from "diagrams-js/ibm/applications"
```

![Index](/resources/ibm/applications/index.png) **Index**

```
import { Index } from "diagrams-js/ibm/applications"
```

![IotApplication](/resources/ibm/applications/iot-application.png) **IotApplication**

```
import { IotApplication } from "diagrams-js/ibm/applications"
```

![Microservice](/resources/ibm/applications/microservice.png) **Microservice**

```
import { Microservice } from "diagrams-js/ibm/applications"
```

![MobileApp](/resources/ibm/applications/mobile-app.png) **MobileApp**

```
import { MobileApp } from "diagrams-js/ibm/applications"
```

![Ontology](/resources/ibm/applications/ontology.png) **Ontology**

```
import { Ontology } from "diagrams-js/ibm/applications"
```

![OpenSourceTools](/resources/ibm/applications/open-source-tools.png) **OpenSourceTools**

```
import { OpenSourceTools } from "diagrams-js/ibm/applications"
```

![RuntimeServices](/resources/ibm/applications/runtime-services.png) **RuntimeServices**

```
import { RuntimeServices } from "diagrams-js/ibm/applications"
```

![SaasApplications](/resources/ibm/applications/saas-applications.png) **SaasApplications**

```
import { SaasApplications } from "diagrams-js/ibm/applications"
```

![ServiceBroker](/resources/ibm/applications/service-broker.png) **ServiceBroker**

```
import { ServiceBroker } from "diagrams-js/ibm/applications"
```

![SpeechToText](/resources/ibm/applications/speech-to-text.png) **SpeechToText**

```
import { SpeechToText } from "diagrams-js/ibm/applications"
```

![VisualRecognition](/resources/ibm/applications/visual-recognition.png) **VisualRecognition**

```
import { VisualRecognition } from "diagrams-js/ibm/applications"
```

![Visualization](/resources/ibm/applications/visualization.png) **Visualization**

```
import { Visualization } from "diagrams-js/ibm/applications"
```

### ibm/blockchain[​](#ibmblockchain "Direct link to ibm/blockchain")

![BlockchainDeveloper](/resources/ibm/blockchain/blockchain-developer.png) **BlockchainDeveloper**

```
import { BlockchainDeveloper } from "diagrams-js/ibm/blockchain"
```

![Blockchain](/resources/ibm/blockchain/blockchain.png) **Blockchain**

```
import { Blockchain } from "diagrams-js/ibm/blockchain"
```

![CertificateAuthority](/resources/ibm/blockchain/certificate-authority.png) **CertificateAuthority**

```
import { CertificateAuthority } from "diagrams-js/ibm/blockchain"
```

![ClientApplication](/resources/ibm/blockchain/client-application.png) **ClientApplication**

```
import { ClientApplication } from "diagrams-js/ibm/blockchain"
```

![Communication](/resources/ibm/blockchain/communication.png) **Communication**

```
import { Communication } from "diagrams-js/ibm/blockchain"
```

![Consensus](/resources/ibm/blockchain/consensus.png) **Consensus**

```
import { Consensus } from "diagrams-js/ibm/blockchain"
```

![EventListener](/resources/ibm/blockchain/event-listener.png) **EventListener**

```
import { EventListener } from "diagrams-js/ibm/blockchain"
```

![Event](/resources/ibm/blockchain/event.png) **Event**

```
import { Event } from "diagrams-js/ibm/blockchain"
```

![ExistingEnterpriseSystems](/resources/ibm/blockchain/existing-enterprise-systems.png) **ExistingEnterpriseSystems**

```
import { ExistingEnterpriseSystems } from "diagrams-js/ibm/blockchain"
```

![HyperledgerFabric](/resources/ibm/blockchain/hyperledger-fabric.png) **HyperledgerFabric**

```
import { HyperledgerFabric } from "diagrams-js/ibm/blockchain"
```

![KeyManagement](/resources/ibm/blockchain/key-management.png) **KeyManagement**

```
import { KeyManagement } from "diagrams-js/ibm/blockchain"
```

![Ledger](/resources/ibm/blockchain/ledger.png) **Ledger**

```
import { Ledger } from "diagrams-js/ibm/blockchain"
```

![MembershipServicesProviderApi](/resources/ibm/blockchain/membership-services-provider-api.png) **MembershipServicesProviderApi**

```
import { MembershipServicesProviderApi } from "diagrams-js/ibm/blockchain"
```

![Membership](/resources/ibm/blockchain/membership.png) **Membership**

```
import { Membership } from "diagrams-js/ibm/blockchain"
```

![MessageBus](/resources/ibm/blockchain/message-bus.png) **MessageBus**

```
import { MessageBus } from "diagrams-js/ibm/blockchain"
```

![Node](/resources/ibm/blockchain/node.png) **Node**

```
import { Node } from "diagrams-js/ibm/blockchain"
```

![Services](/resources/ibm/blockchain/services.png) **Services**

```
import { Services } from "diagrams-js/ibm/blockchain"
```

![SmartContract](/resources/ibm/blockchain/smart-contract.png) **SmartContract**

```
import { SmartContract } from "diagrams-js/ibm/blockchain"
```

![TransactionManager](/resources/ibm/blockchain/transaction-manager.png) **TransactionManager**

```
import { TransactionManager } from "diagrams-js/ibm/blockchain"
```

![Wallet](/resources/ibm/blockchain/wallet.png) **Wallet**

```
import { Wallet } from "diagrams-js/ibm/blockchain"
```

### ibm/compute[​](#ibmcompute "Direct link to ibm/compute")

![BareMetalServer](/resources/ibm/compute/bare-metal-server.png) **BareMetalServer**

```
import { BareMetalServer } from "diagrams-js/ibm/compute"
```

![ImageService](/resources/ibm/compute/image-service.png) **ImageService**

```
import { ImageService } from "diagrams-js/ibm/compute"
```

![Instance](/resources/ibm/compute/instance.png) **Instance**

```
import { Instance } from "diagrams-js/ibm/compute"
```

![Key](/resources/ibm/compute/key.png) **Key**

```
import { Key } from "diagrams-js/ibm/compute"
```

![PowerInstance](/resources/ibm/compute/power-instance.png) **PowerInstance**

```
import { PowerInstance } from "diagrams-js/ibm/compute"
```

### ibm/data[​](#ibmdata "Direct link to ibm/data")

![Caches](/resources/ibm/data/caches.png) **Caches**

```
import { Caches } from "diagrams-js/ibm/data"
```

![Cloud](/resources/ibm/data/cloud.png) **Cloud**

```
import { Cloud } from "diagrams-js/ibm/data"
```

![ConversationTrainedDeployed](/resources/ibm/data/conversation-trained-deployed.png) **ConversationTrainedDeployed**

```
import { ConversationTrainedDeployed } from "diagrams-js/ibm/data"
```

![DataServices](/resources/ibm/data/data-services.png) **DataServices**

```
import { DataServices } from "diagrams-js/ibm/data"
```

![DataSources](/resources/ibm/data/data-sources.png) **DataSources**

```
import { DataSources } from "diagrams-js/ibm/data"
```

![DeviceIdentityService](/resources/ibm/data/device-identity-service.png) **DeviceIdentityService**

```
import { DeviceIdentityService } from "diagrams-js/ibm/data"
```

![DeviceRegistry](/resources/ibm/data/device-registry.png) **DeviceRegistry**

```
import { DeviceRegistry } from "diagrams-js/ibm/data"
```

![EnterpriseData](/resources/ibm/data/enterprise-data.png) **EnterpriseData**

```
import { EnterpriseData } from "diagrams-js/ibm/data"
```

![EnterpriseUserDirectory](/resources/ibm/data/enterprise-user-directory.png) **EnterpriseUserDirectory**

```
import { EnterpriseUserDirectory } from "diagrams-js/ibm/data"
```

![FileRepository](/resources/ibm/data/file-repository.png) **FileRepository**

```
import { FileRepository } from "diagrams-js/ibm/data"
```

![GroundTruth](/resources/ibm/data/ground-truth.png) **GroundTruth**

```
import { GroundTruth } from "diagrams-js/ibm/data"
```

![Model](/resources/ibm/data/model.png) **Model**

```
import { Model } from "diagrams-js/ibm/data"
```

![TmsDataInterface](/resources/ibm/data/tms-data-interface.png) **TmsDataInterface**

```
import { TmsDataInterface } from "diagrams-js/ibm/data"
```

### ibm/devops[​](#ibmdevops "Direct link to ibm/devops")

![ArtifactManagement](/resources/ibm/devops/artifact-management.png) **ArtifactManagement**

```
import { ArtifactManagement } from "diagrams-js/ibm/devops"
```

![BuildTest](/resources/ibm/devops/build-test.png) **BuildTest**

```
import { BuildTest } from "diagrams-js/ibm/devops"
```

![CodeEditor](/resources/ibm/devops/code-editor.png) **CodeEditor**

```
import { CodeEditor } from "diagrams-js/ibm/devops"
```

![CollaborativeDevelopment](/resources/ibm/devops/collaborative-development.png) **CollaborativeDevelopment**

```
import { CollaborativeDevelopment } from "diagrams-js/ibm/devops"
```

![ConfigurationManagement](/resources/ibm/devops/configuration-management.png) **ConfigurationManagement**

```
import { ConfigurationManagement } from "diagrams-js/ibm/devops"
```

![ContinuousDeploy](/resources/ibm/devops/continuous-deploy.png) **ContinuousDeploy**

```
import { ContinuousDeploy } from "diagrams-js/ibm/devops"
```

![ContinuousTesting](/resources/ibm/devops/continuous-testing.png) **ContinuousTesting**

```
import { ContinuousTesting } from "diagrams-js/ibm/devops"
```

![Devops](/resources/ibm/devops/devops.png) **Devops**

```
import { Devops } from "diagrams-js/ibm/devops"
```

![Provision](/resources/ibm/devops/provision.png) **Provision**

```
import { Provision } from "diagrams-js/ibm/devops"
```

![ReleaseManagement](/resources/ibm/devops/release-management.png) **ReleaseManagement**

```
import { ReleaseManagement } from "diagrams-js/ibm/devops"
```

### ibm/general[​](#ibmgeneral "Direct link to ibm/general")

![CloudMessaging](/resources/ibm/general/cloud-messaging.png) **CloudMessaging**

```
import { CloudMessaging } from "diagrams-js/ibm/general"
```

![CloudServices](/resources/ibm/general/cloud-services.png) **CloudServices**

```
import { CloudServices } from "diagrams-js/ibm/general"
```

![Cloudant](/resources/ibm/general/cloudant.png) **Cloudant**

```
import { Cloudant } from "diagrams-js/ibm/general"
```

![CognitiveServices](/resources/ibm/general/cognitive-services.png) **CognitiveServices**

```
import { CognitiveServices } from "diagrams-js/ibm/general"
```

![DataSecurity](/resources/ibm/general/data-security.png) **DataSecurity**

```
import { DataSecurity } from "diagrams-js/ibm/general"
```

![Enterprise](/resources/ibm/general/enterprise.png) **Enterprise**

```
import { Enterprise } from "diagrams-js/ibm/general"
```

![GovernanceRiskCompliance](/resources/ibm/general/governance-risk-compliance.png) **GovernanceRiskCompliance**

```
import { GovernanceRiskCompliance } from "diagrams-js/ibm/general"
```

![IBMContainers](/resources/ibm/general/ibm-containers.png) **IBMContainers**

```
import { IBMContainers } from "diagrams-js/ibm/general"
```

![IBMPublicCloud](/resources/ibm/general/ibm-public-cloud.png) **IBMPublicCloud**

```
import { IBMPublicCloud } from "diagrams-js/ibm/general"
```

![IdentityAccessManagement](/resources/ibm/general/identity-access-management.png) **IdentityAccessManagement**

```
import { IdentityAccessManagement } from "diagrams-js/ibm/general"
```

![IdentityProvider](/resources/ibm/general/identity-provider.png) **IdentityProvider**

```
import { IdentityProvider } from "diagrams-js/ibm/general"
```

![InfrastructureSecurity](/resources/ibm/general/infrastructure-security.png) **InfrastructureSecurity**

```
import { InfrastructureSecurity } from "diagrams-js/ibm/general"
```

![Internet](/resources/ibm/general/internet.png) **Internet**

```
import { Internet } from "diagrams-js/ibm/general"
```

![IotCloud](/resources/ibm/general/iot-cloud.png) **IotCloud**

```
import { IotCloud } from "diagrams-js/ibm/general"
```

![MicroservicesApplication](/resources/ibm/general/microservices-application.png) **MicroservicesApplication**

```
import { MicroservicesApplication } from "diagrams-js/ibm/general"
```

![MicroservicesMesh](/resources/ibm/general/microservices-mesh.png) **MicroservicesMesh**

```
import { MicroservicesMesh } from "diagrams-js/ibm/general"
```

![MonitoringLogging](/resources/ibm/general/monitoring-logging.png) **MonitoringLogging**

```
import { MonitoringLogging } from "diagrams-js/ibm/general"
```

![Monitoring](/resources/ibm/general/monitoring.png) **Monitoring**

```
import { Monitoring } from "diagrams-js/ibm/general"
```

![ObjectStorage](/resources/ibm/general/object-storage.png) **ObjectStorage**

```
import { ObjectStorage } from "diagrams-js/ibm/general"
```

![OfflineCapabilities](/resources/ibm/general/offline-capabilities.png) **OfflineCapabilities**

```
import { OfflineCapabilities } from "diagrams-js/ibm/general"
```

![Openwhisk](/resources/ibm/general/openwhisk.png) **Openwhisk**

```
import { Openwhisk } from "diagrams-js/ibm/general"
```

![PeerCloud](/resources/ibm/general/peer-cloud.png) **PeerCloud**

```
import { PeerCloud } from "diagrams-js/ibm/general"
```

![RetrieveRank](/resources/ibm/general/retrieve-rank.png) **RetrieveRank**

```
import { RetrieveRank } from "diagrams-js/ibm/general"
```

![Scalable](/resources/ibm/general/scalable.png) **Scalable**

```
import { Scalable } from "diagrams-js/ibm/general"
```

![ServiceDiscoveryConfiguration](/resources/ibm/general/service-discovery-configuration.png) **ServiceDiscoveryConfiguration**

```
import { ServiceDiscoveryConfiguration } from "diagrams-js/ibm/general"
```

![TextToSpeech](/resources/ibm/general/text-to-speech.png) **TextToSpeech**

```
import { TextToSpeech } from "diagrams-js/ibm/general"
```

![TransformationConnectivity](/resources/ibm/general/transformation-connectivity.png) **TransformationConnectivity**

```
import { TransformationConnectivity } from "diagrams-js/ibm/general"
```

### ibm/infrastructure[​](#ibminfrastructure "Direct link to ibm/infrastructure")

![Channels](/resources/ibm/infrastructure/channels.png) **Channels**

```
import { Channels } from "diagrams-js/ibm/infrastructure"
```

![CloudMessaging](/resources/ibm/infrastructure/cloud-messaging.png) **CloudMessaging**

```
import { CloudMessaging } from "diagrams-js/ibm/infrastructure"
```

![Dashboard](/resources/ibm/infrastructure/dashboard.png) **Dashboard**

```
import { Dashboard } from "diagrams-js/ibm/infrastructure"
```

![Diagnostics](/resources/ibm/infrastructure/diagnostics.png) **Diagnostics**

```
import { Diagnostics } from "diagrams-js/ibm/infrastructure"
```

![EdgeServices](/resources/ibm/infrastructure/edge-services.png) **EdgeServices**

```
import { EdgeServices } from "diagrams-js/ibm/infrastructure"
```

![EnterpriseMessaging](/resources/ibm/infrastructure/enterprise-messaging.png) **EnterpriseMessaging**

```
import { EnterpriseMessaging } from "diagrams-js/ibm/infrastructure"
```

![EventFeed](/resources/ibm/infrastructure/event-feed.png) **EventFeed**

```
import { EventFeed } from "diagrams-js/ibm/infrastructure"
```

![InfrastructureServices](/resources/ibm/infrastructure/infrastructure-services.png) **InfrastructureServices**

```
import { InfrastructureServices } from "diagrams-js/ibm/infrastructure"
```

![InterserviceCommunication](/resources/ibm/infrastructure/interservice-communication.png) **InterserviceCommunication**

```
import { InterserviceCommunication } from "diagrams-js/ibm/infrastructure"
```

![LoadBalancingRouting](/resources/ibm/infrastructure/load-balancing-routing.png) **LoadBalancingRouting**

```
import { LoadBalancingRouting } from "diagrams-js/ibm/infrastructure"
```

![MicroservicesMesh](/resources/ibm/infrastructure/microservices-mesh.png) **MicroservicesMesh**

```
import { MicroservicesMesh } from "diagrams-js/ibm/infrastructure"
```

![MobileBackend](/resources/ibm/infrastructure/mobile-backend.png) **MobileBackend**

```
import { MobileBackend } from "diagrams-js/ibm/infrastructure"
```

![MobileProviderNetwork](/resources/ibm/infrastructure/mobile-provider-network.png) **MobileProviderNetwork**

```
import { MobileProviderNetwork } from "diagrams-js/ibm/infrastructure"
```

![MonitoringLogging](/resources/ibm/infrastructure/monitoring-logging.png) **MonitoringLogging**

```
import { MonitoringLogging } from "diagrams-js/ibm/infrastructure"
```

![Monitoring](/resources/ibm/infrastructure/monitoring.png) **Monitoring**

```
import { Monitoring } from "diagrams-js/ibm/infrastructure"
```

![PeerServices](/resources/ibm/infrastructure/peer-services.png) **PeerServices**

```
import { PeerServices } from "diagrams-js/ibm/infrastructure"
```

![ServiceDiscoveryConfiguration](/resources/ibm/infrastructure/service-discovery-configuration.png) **ServiceDiscoveryConfiguration**

```
import { ServiceDiscoveryConfiguration } from "diagrams-js/ibm/infrastructure"
```

![TransformationConnectivity](/resources/ibm/infrastructure/transformation-connectivity.png) **TransformationConnectivity**

```
import { TransformationConnectivity } from "diagrams-js/ibm/infrastructure"
```

### ibm/management[​](#ibmmanagement "Direct link to ibm/management")

![AlertNotification](/resources/ibm/management/alert-notification.png) **AlertNotification**

```
import { AlertNotification } from "diagrams-js/ibm/management"
```

![ApiManagement](/resources/ibm/management/api-management.png) **ApiManagement**

```
import { ApiManagement } from "diagrams-js/ibm/management"
```

![CloudManagement](/resources/ibm/management/cloud-management.png) **CloudManagement**

```
import { CloudManagement } from "diagrams-js/ibm/management"
```

![ClusterManagement](/resources/ibm/management/cluster-management.png) **ClusterManagement**

```
import { ClusterManagement } from "diagrams-js/ibm/management"
```

![ContentManagement](/resources/ibm/management/content-management.png) **ContentManagement**

```
import { ContentManagement } from "diagrams-js/ibm/management"
```

![DataServices](/resources/ibm/management/data-services.png) **DataServices**

```
import { DataServices } from "diagrams-js/ibm/management"
```

![DeviceManagement](/resources/ibm/management/device-management.png) **DeviceManagement**

```
import { DeviceManagement } from "diagrams-js/ibm/management"
```

![InformationGovernance](/resources/ibm/management/information-governance.png) **InformationGovernance**

```
import { InformationGovernance } from "diagrams-js/ibm/management"
```

![ItServiceManagement](/resources/ibm/management/it-service-management.png) **ItServiceManagement**

```
import { ItServiceManagement } from "diagrams-js/ibm/management"
```

![Management](/resources/ibm/management/management.png) **Management**

```
import { Management } from "diagrams-js/ibm/management"
```

![MonitoringMetrics](/resources/ibm/management/monitoring-metrics.png) **MonitoringMetrics**

```
import { MonitoringMetrics } from "diagrams-js/ibm/management"
```

![ProcessManagement](/resources/ibm/management/process-management.png) **ProcessManagement**

```
import { ProcessManagement } from "diagrams-js/ibm/management"
```

![ProviderCloudPortalService](/resources/ibm/management/provider-cloud-portal-service.png) **ProviderCloudPortalService**

```
import { ProviderCloudPortalService } from "diagrams-js/ibm/management"
```

![PushNotifications](/resources/ibm/management/push-notifications.png) **PushNotifications**

```
import { PushNotifications } from "diagrams-js/ibm/management"
```

![ServiceManagementTools](/resources/ibm/management/service-management-tools.png) **ServiceManagementTools**

```
import { ServiceManagementTools } from "diagrams-js/ibm/management"
```

### ibm/network[​](#ibmnetwork "Direct link to ibm/network")

![Bridge](/resources/ibm/network/bridge.png) **Bridge**

```
import { Bridge } from "diagrams-js/ibm/network"
```

![DirectLink](/resources/ibm/network/direct-link.png) **DirectLink**

```
import { DirectLink } from "diagrams-js/ibm/network"
```

![Enterprise](/resources/ibm/network/enterprise.png) **Enterprise**

```
import { Enterprise } from "diagrams-js/ibm/network"
```

![Firewall](/resources/ibm/network/firewall.png) **Firewall**

```
import { Firewall } from "diagrams-js/ibm/network"
```

![FloatingIp](/resources/ibm/network/floating-ip.png) **FloatingIp**

```
import { FloatingIp } from "diagrams-js/ibm/network"
```

![Gateway](/resources/ibm/network/gateway.png) **Gateway**

```
import { Gateway } from "diagrams-js/ibm/network"
```

![InternetServices](/resources/ibm/network/internet-services.png) **InternetServices**

```
import { InternetServices } from "diagrams-js/ibm/network"
```

![LoadBalancerListener](/resources/ibm/network/load-balancer-listener.png) **LoadBalancerListener**

```
import { LoadBalancerListener } from "diagrams-js/ibm/network"
```

![LoadBalancerPool](/resources/ibm/network/load-balancer-pool.png) **LoadBalancerPool**

```
import { LoadBalancerPool } from "diagrams-js/ibm/network"
```

![LoadBalancer](/resources/ibm/network/load-balancer.png) **LoadBalancer**

```
import { LoadBalancer } from "diagrams-js/ibm/network"
```

![LoadBalancingRouting](/resources/ibm/network/load-balancing-routing.png) **LoadBalancingRouting**

```
import { LoadBalancingRouting } from "diagrams-js/ibm/network"
```

![PublicGateway](/resources/ibm/network/public-gateway.png) **PublicGateway**

```
import { PublicGateway } from "diagrams-js/ibm/network"
```

![Region](/resources/ibm/network/region.png) **Region**

```
import { Region } from "diagrams-js/ibm/network"
```

![Router](/resources/ibm/network/router.png) **Router**

```
import { Router } from "diagrams-js/ibm/network"
```

![Rules](/resources/ibm/network/rules.png) **Rules**

```
import { Rules } from "diagrams-js/ibm/network"
```

![Subnet](/resources/ibm/network/subnet.png) **Subnet**

```
import { Subnet } from "diagrams-js/ibm/network"
```

![TransitGateway](/resources/ibm/network/transit-gateway.png) **TransitGateway**

```
import { TransitGateway } from "diagrams-js/ibm/network"
```

![Vpc](/resources/ibm/network/vpc.png) **Vpc**

```
import { Vpc } from "diagrams-js/ibm/network"
```

![VpnConnection](/resources/ibm/network/vpn-connection.png) **VpnConnection**

```
import { VpnConnection } from "diagrams-js/ibm/network"
```

![VpnGateway](/resources/ibm/network/vpn-gateway.png) **VpnGateway**

```
import { VpnGateway } from "diagrams-js/ibm/network"
```

![VpnPolicy](/resources/ibm/network/vpn-policy.png) **VpnPolicy**

```
import { VpnPolicy } from "diagrams-js/ibm/network"
```

### ibm/security[​](#ibmsecurity "Direct link to ibm/security")

![ApiSecurity](/resources/ibm/security/api-security.png) **ApiSecurity**

```
import { ApiSecurity } from "diagrams-js/ibm/security"
```

![BlockchainSecurityService](/resources/ibm/security/blockchain-security-service.png) **BlockchainSecurityService**

```
import { BlockchainSecurityService } from "diagrams-js/ibm/security"
```

![DataSecurity](/resources/ibm/security/data-security.png) **DataSecurity**

```
import { DataSecurity } from "diagrams-js/ibm/security"
```

![Firewall](/resources/ibm/security/firewall.png) **Firewall**

```
import { Firewall } from "diagrams-js/ibm/security"
```

![Gateway](/resources/ibm/security/gateway.png) **Gateway**

```
import { Gateway } from "diagrams-js/ibm/security"
```

![GovernanceRiskCompliance](/resources/ibm/security/governance-risk-compliance.png) **GovernanceRiskCompliance**

```
import { GovernanceRiskCompliance } from "diagrams-js/ibm/security"
```

![IdentityAccessManagement](/resources/ibm/security/identity-access-management.png) **IdentityAccessManagement**

```
import { IdentityAccessManagement } from "diagrams-js/ibm/security"
```

![IdentityProvider](/resources/ibm/security/identity-provider.png) **IdentityProvider**

```
import { IdentityProvider } from "diagrams-js/ibm/security"
```

![InfrastructureSecurity](/resources/ibm/security/infrastructure-security.png) **InfrastructureSecurity**

```
import { InfrastructureSecurity } from "diagrams-js/ibm/security"
```

![PhysicalSecurity](/resources/ibm/security/physical-security.png) **PhysicalSecurity**

```
import { PhysicalSecurity } from "diagrams-js/ibm/security"
```

![SecurityMonitoringIntelligence](/resources/ibm/security/security-monitoring-intelligence.png) **SecurityMonitoringIntelligence**

```
import { SecurityMonitoringIntelligence } from "diagrams-js/ibm/security"
```

![SecurityServices](/resources/ibm/security/security-services.png) **SecurityServices**

```
import { SecurityServices } from "diagrams-js/ibm/security"
```

![TrustendComputing](/resources/ibm/security/trustend-computing.png) **TrustendComputing**

```
import { TrustendComputing } from "diagrams-js/ibm/security"
```

![Vpn](/resources/ibm/security/vpn.png) **Vpn**

```
import { Vpn } from "diagrams-js/ibm/security"
```

### ibm/social[​](#ibmsocial "Direct link to ibm/social")

![Communities](/resources/ibm/social/communities.png) **Communities**

```
import { Communities } from "diagrams-js/ibm/social"
```

![FileSync](/resources/ibm/social/file-sync.png) **FileSync**

```
import { FileSync } from "diagrams-js/ibm/social"
```

![LiveCollaboration](/resources/ibm/social/live-collaboration.png) **LiveCollaboration**

```
import { LiveCollaboration } from "diagrams-js/ibm/social"
```

![Messaging](/resources/ibm/social/messaging.png) **Messaging**

```
import { Messaging } from "diagrams-js/ibm/social"
```

![Networking](/resources/ibm/social/networking.png) **Networking**

```
import { Networking } from "diagrams-js/ibm/social"
```

### ibm/storage[​](#ibmstorage "Direct link to ibm/storage")

![BlockStorage](/resources/ibm/storage/block-storage.png) **BlockStorage**

```
import { BlockStorage } from "diagrams-js/ibm/storage"
```

![ObjectStorage](/resources/ibm/storage/object-storage.png) **ObjectStorage**

```
import { ObjectStorage } from "diagrams-js/ibm/storage"
```

### ibm/user[​](#ibmuser "Direct link to ibm/user")

![Browser](/resources/ibm/user/browser.png) **Browser**

```
import { Browser } from "diagrams-js/ibm/user"
```

![Device](/resources/ibm/user/device.png) **Device**

```
import { Device } from "diagrams-js/ibm/user"
```

![IntegratedDigitalExperiences](/resources/ibm/user/integrated-digital-experiences.png) **IntegratedDigitalExperiences**

```
import { IntegratedDigitalExperiences } from "diagrams-js/ibm/user"
```

![PhysicalEntity](/resources/ibm/user/physical-entity.png) **PhysicalEntity**

```
import { PhysicalEntity } from "diagrams-js/ibm/user"
```

![Sensor](/resources/ibm/user/sensor.png) **Sensor**

```
import { Sensor } from "diagrams-js/ibm/user"
```

![User](/resources/ibm/user/user.png) **User**

```
import { User } from "diagrams-js/ibm/user"
```


---

# Kubernetes

Node types list for the Kubernetes provider.

## Example Usage[​](#example-usage "Direct link to Example Usage")

```
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();
```

note

All node types available in the [Python diagrams library](https://diagrams.mingrammer.com/docs/nodes/k8s) are also available in diagrams-js with the same class names and structure.

## Node Reference[​](#node-reference "Direct link to Node Reference")

### k8s/chaos[​](#k8schaos "Direct link to k8s/chaos")

![ChaosMesh](/resources/k8s/chaos/chaos-mesh.png) **ChaosMesh**

```
import { ChaosMesh } from "diagrams-js/k8s/chaos"
```

![LitmusChaos](/resources/k8s/chaos/litmus-chaos.png) **LitmusChaos**

```
import { LitmusChaos } from "diagrams-js/k8s/chaos"
```

### k8s/clusterconfig[​](#k8sclusterconfig "Direct link to k8s/clusterconfig")

![HPA](/resources/k8s/clusterconfig/hpa.png) **HPA**

```
import { HPA } from "diagrams-js/k8s/clusterconfig"
```

![Limits](/resources/k8s/clusterconfig/limits.png) **Limits**

```
import { Limits } from "diagrams-js/k8s/clusterconfig"
```

![Quota](/resources/k8s/clusterconfig/quota.png) **Quota**

```
import { Quota } from "diagrams-js/k8s/clusterconfig"
```

### k8s/compute[​](#k8scompute "Direct link to k8s/compute")

![Cronjob](/resources/k8s/compute/cronjob.png) **Cronjob**

```
import { Cronjob } from "diagrams-js/k8s/compute"
```

![Deploy](/resources/k8s/compute/deploy.png) **Deploy**

```
import { Deploy } from "diagrams-js/k8s/compute"
```

![DS](/resources/k8s/compute/ds.png) **DS**

```
import { DS } from "diagrams-js/k8s/compute"
```

![Job](/resources/k8s/compute/job.png) **Job**

```
import { Job } from "diagrams-js/k8s/compute"
```

![Pod](/resources/k8s/compute/pod.png) **Pod**

```
import { Pod } from "diagrams-js/k8s/compute"
```

![RS](/resources/k8s/compute/rs.png) **RS**

```
import { RS } from "diagrams-js/k8s/compute"
```

![STS](/resources/k8s/compute/sts.png) **STS**

```
import { STS } from "diagrams-js/k8s/compute"
```

### k8s/controlplane[​](#k8scontrolplane "Direct link to k8s/controlplane")

![API](/resources/k8s/controlplane/api.png) **API**

```
import { API } from "diagrams-js/k8s/controlplane"
```

**CCM**

```
import { CCM } from "diagrams-js/k8s/controlplane"
```

**CM**

```
import { CM } from "diagrams-js/k8s/controlplane"
```

![KProxy](/resources/k8s/controlplane/k-proxy.png) **KProxy**

```
import { KProxy } from "diagrams-js/k8s/controlplane"
```

![Kubelet](/resources/k8s/controlplane/kubelet.png) **Kubelet**

```
import { Kubelet } from "diagrams-js/k8s/controlplane"
```

![Sched](/resources/k8s/controlplane/sched.png) **Sched**

```
import { Sched } from "diagrams-js/k8s/controlplane"
```

### k8s/ecosystem[​](#k8secosystem "Direct link to k8s/ecosystem")

![ExternalDns](/resources/k8s/ecosystem/external-dns.png) **ExternalDns**

```
import { ExternalDns } from "diagrams-js/k8s/ecosystem"
```

![Helm](/resources/k8s/ecosystem/helm.png) **Helm**

```
import { Helm } from "diagrams-js/k8s/ecosystem"
```

![Krew](/resources/k8s/ecosystem/krew.png) **Krew**

```
import { Krew } from "diagrams-js/k8s/ecosystem"
```

![Kustomize](/resources/k8s/ecosystem/kustomize.png) **Kustomize**

```
import { Kustomize } from "diagrams-js/k8s/ecosystem"
```

### k8s/group[​](#k8sgroup "Direct link to k8s/group")

![NS](/resources/k8s/group/ns.png) **NS**

```
import { NS } from "diagrams-js/k8s/group"
```

### k8s/infra[​](#k8sinfra "Direct link to k8s/infra")

![ETCD](/resources/k8s/infra/etcd.png) **ETCD**

```
import { ETCD } from "diagrams-js/k8s/infra"
```

![Master](/resources/k8s/infra/master.png) **Master**

```
import { Master } from "diagrams-js/k8s/infra"
```

![Node](/resources/k8s/infra/node.png) **Node**

```
import { Node } from "diagrams-js/k8s/infra"
```

### k8s/network[​](#k8snetwork "Direct link to k8s/network")

![Ep](/resources/k8s/network/ep.png) **Ep**

```
import { Ep } from "diagrams-js/k8s/network"
```

![Ing](/resources/k8s/network/ing.png) **Ing**

```
import { Ing } from "diagrams-js/k8s/network"
```

![Netpol](/resources/k8s/network/netpol.png) **Netpol**

```
import { Netpol } from "diagrams-js/k8s/network"
```

![SVC](/resources/k8s/network/svc.png) **SVC**

```
import { SVC } from "diagrams-js/k8s/network"
```

### k8s/others[​](#k8sothers "Direct link to k8s/others")

![CRD](/resources/k8s/others/crd.png) **CRD**

```
import { CRD } from "diagrams-js/k8s/others"
```

![PSP](/resources/k8s/others/psp.png) **PSP**

```
import { PSP } from "diagrams-js/k8s/others"
```

### k8s/podconfig[​](#k8spodconfig "Direct link to k8s/podconfig")

![CM](/resources/k8s/podconfig/cm.png) **CM**

```
import { CM } from "diagrams-js/k8s/podconfig"
```

![Secret](/resources/k8s/podconfig/secret.png) **Secret**

```
import { Secret } from "diagrams-js/k8s/podconfig"
```

### k8s/rbac[​](#k8srbac "Direct link to k8s/rbac")

![CRole](/resources/k8s/rbac/c-role.png) **CRole**

```
import { CRole } from "diagrams-js/k8s/rbac"
```

![CRB](/resources/k8s/rbac/crb.png) **CRB**

```
import { CRB } from "diagrams-js/k8s/rbac"
```

![Group](/resources/k8s/rbac/group.png) **Group**

```
import { Group } from "diagrams-js/k8s/rbac"
```

![RB](/resources/k8s/rbac/rb.png) **RB**

```
import { RB } from "diagrams-js/k8s/rbac"
```

![Role](/resources/k8s/rbac/role.png) **Role**

```
import { Role } from "diagrams-js/k8s/rbac"
```

![SA](/resources/k8s/rbac/sa.png) **SA**

```
import { SA } from "diagrams-js/k8s/rbac"
```

![User](/resources/k8s/rbac/user.png) **User**

```
import { User } from "diagrams-js/k8s/rbac"
```

### k8s/storage[​](#k8sstorage "Direct link to k8s/storage")

![PV](/resources/k8s/storage/pv.png) **PV**

```
import { PV } from "diagrams-js/k8s/storage"
```

![PVC](/resources/k8s/storage/pvc.png) **PVC**

```
import { PVC } from "diagrams-js/k8s/storage"
```

![SC](/resources/k8s/storage/sc.png) **SC**

```
import { SC } from "diagrams-js/k8s/storage"
```

![Vol](/resources/k8s/storage/vol.png) **Vol**

```
import { Vol } from "diagrams-js/k8s/storage"
```


---

# OCI

Node types list for the OCI provider.

## Example Usage[​](#example-usage "Direct link to Example Usage")

```
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();
```

note

All node types available in the [Python diagrams library](https://diagrams.mingrammer.com/docs/nodes/oci) are also available in diagrams-js with the same class names and structure.

## Node Reference[​](#node-reference "Direct link to Node Reference")

### oci/compute[​](#ocicompute "Direct link to oci/compute")

![AutoscaleWhite](/resources/oci/compute/autoscale-white.png) **AutoscaleWhite**

```
import { AutoscaleWhite } from "diagrams-js/oci/compute"
```

![Autoscale](/resources/oci/compute/autoscale.png) **Autoscale**

```
import { Autoscale } from "diagrams-js/oci/compute"
```

![BMWhite](/resources/oci/compute/bm-white.png) **BMWhite**

```
import { BMWhite } from "diagrams-js/oci/compute"
```

![BM](/resources/oci/compute/bm.png) **BM**

```
import { BM } from "diagrams-js/oci/compute"
```

![ContainerWhite](/resources/oci/compute/container-white.png) **ContainerWhite**

```
import { ContainerWhite } from "diagrams-js/oci/compute"
```

![Container](/resources/oci/compute/container.png) **Container**

```
import { Container } from "diagrams-js/oci/compute"
```

![FunctionsWhite](/resources/oci/compute/functions-white.png) **FunctionsWhite**

```
import { FunctionsWhite } from "diagrams-js/oci/compute"
```

![Functions](/resources/oci/compute/functions.png) **Functions**

```
import { Functions } from "diagrams-js/oci/compute"
```

![InstancePoolsWhite](/resources/oci/compute/instance-pools-white.png) **InstancePoolsWhite**

```
import { InstancePoolsWhite } from "diagrams-js/oci/compute"
```

![InstancePools](/resources/oci/compute/instance-pools.png) **InstancePools**

```
import { InstancePools } from "diagrams-js/oci/compute"
```

![OCIRWhite](/resources/oci/compute/ocir-white.png) **OCIRWhite**

```
import { OCIRWhite } from "diagrams-js/oci/compute"
```

![OCIR](/resources/oci/compute/ocir.png) **OCIR**

```
import { OCIR } from "diagrams-js/oci/compute"
```

![OKEWhite](/resources/oci/compute/oke-white.png) **OKEWhite**

```
import { OKEWhite } from "diagrams-js/oci/compute"
```

![OKE](/resources/oci/compute/oke.png) **OKE**

```
import { OKE } from "diagrams-js/oci/compute"
```

![VMWhite](/resources/oci/compute/vm-white.png) **VMWhite**

```
import { VMWhite } from "diagrams-js/oci/compute"
```

![VM](/resources/oci/compute/vm.png) **VM**

```
import { VM } from "diagrams-js/oci/compute"
```

### oci/connectivity[​](#ociconnectivity "Direct link to oci/connectivity")

![BackboneWhite](/resources/oci/connectivity/backbone-white.png) **BackboneWhite**

```
import { BackboneWhite } from "diagrams-js/oci/connectivity"
```

![Backbone](/resources/oci/connectivity/backbone.png) **Backbone**

```
import { Backbone } from "diagrams-js/oci/connectivity"
```

![CDNWhite](/resources/oci/connectivity/cdn-white.png) **CDNWhite**

```
import { CDNWhite } from "diagrams-js/oci/connectivity"
```

![CDN](/resources/oci/connectivity/cdn.png) **CDN**

```
import { CDN } from "diagrams-js/oci/connectivity"
```

![CustomerDatacenter](/resources/oci/connectivity/customer-datacenter.png) **CustomerDatacenter**

```
import { CustomerDatacenter } from "diagrams-js/oci/connectivity"
```

![CustomerDatacntrWhite](/resources/oci/connectivity/customer-datacntr-white.png) **CustomerDatacntrWhite**

```
import { CustomerDatacntrWhite } from "diagrams-js/oci/connectivity"
```

![CustomerPremisesWhite](/resources/oci/connectivity/customer-premises-white.png) **CustomerPremisesWhite**

```
import { CustomerPremisesWhite } from "diagrams-js/oci/connectivity"
```

![CustomerPremises](/resources/oci/connectivity/customer-premises.png) **CustomerPremises**

```
import { CustomerPremises } from "diagrams-js/oci/connectivity"
```

![DisconnectedRegionsWhite](/resources/oci/connectivity/disconnected-regions-white.png) **DisconnectedRegionsWhite**

```
import { DisconnectedRegionsWhite } from "diagrams-js/oci/connectivity"
```

![DisconnectedRegions](/resources/oci/connectivity/disconnected-regions.png) **DisconnectedRegions**

```
import { DisconnectedRegions } from "diagrams-js/oci/connectivity"
```

![DNSWhite](/resources/oci/connectivity/dns-white.png) **DNSWhite**

```
import { DNSWhite } from "diagrams-js/oci/connectivity"
```

![DNS](/resources/oci/connectivity/dns.png) **DNS**

```
import { DNS } from "diagrams-js/oci/connectivity"
```

![FastConnectWhite](/resources/oci/connectivity/fast-connect-white.png) **FastConnectWhite**

```
import { FastConnectWhite } from "diagrams-js/oci/connectivity"
```

![FastConnect](/resources/oci/connectivity/fast-connect.png) **FastConnect**

```
import { FastConnect } from "diagrams-js/oci/connectivity"
```

![NATGatewayWhite](/resources/oci/connectivity/nat-gateway-white.png) **NATGatewayWhite**

```
import { NATGatewayWhite } from "diagrams-js/oci/connectivity"
```

![NATGateway](/resources/oci/connectivity/nat-gateway.png) **NATGateway**

```
import { NATGateway } from "diagrams-js/oci/connectivity"
```

![VPNWhite](/resources/oci/connectivity/vpn-white.png) **VPNWhite**

```
import { VPNWhite } from "diagrams-js/oci/connectivity"
```

![VPN](/resources/oci/connectivity/vpn.png) **VPN**

```
import { VPN } from "diagrams-js/oci/connectivity"
```

### oci/database[​](#ocidatabase "Direct link to oci/database")

![AutonomousWhite](/resources/oci/database/autonomous-white.png) **AutonomousWhite**

```
import { AutonomousWhite } from "diagrams-js/oci/database"
```

![Autonomous](/resources/oci/database/autonomous.png) **Autonomous**

```
import { Autonomous } from "diagrams-js/oci/database"
```

![BigdataServiceWhite](/resources/oci/database/bigdata-service-white.png) **BigdataServiceWhite**

```
import { BigdataServiceWhite } from "diagrams-js/oci/database"
```

![BigdataService](/resources/oci/database/bigdata-service.png) **BigdataService**

```
import { BigdataService } from "diagrams-js/oci/database"
```

![DatabaseServiceWhite](/resources/oci/database/database-service-white.png) **DatabaseServiceWhite**

```
import { DatabaseServiceWhite } from "diagrams-js/oci/database"
```

![DatabaseService](/resources/oci/database/database-service.png) **DatabaseService**

```
import { DatabaseService } from "diagrams-js/oci/database"
```

![DataflowApacheWhite](/resources/oci/database/dataflow-apache-white.png) **DataflowApacheWhite**

```
import { DataflowApacheWhite } from "diagrams-js/oci/database"
```

![DataflowApache](/resources/oci/database/dataflow-apache.png) **DataflowApache**

```
import { DataflowApache } from "diagrams-js/oci/database"
```

![DcatWhite](/resources/oci/database/dcat-white.png) **DcatWhite**

```
import { DcatWhite } from "diagrams-js/oci/database"
```

![Dcat](/resources/oci/database/dcat.png) **Dcat**

```
import { Dcat } from "diagrams-js/oci/database"
```

![DisWhite](/resources/oci/database/dis-white.png) **DisWhite**

```
import { DisWhite } from "diagrams-js/oci/database"
```

![Dis](/resources/oci/database/dis.png) **Dis**

```
import { Dis } from "diagrams-js/oci/database"
```

![DMSWhite](/resources/oci/database/dms-white.png) **DMSWhite**

```
import { DMSWhite } from "diagrams-js/oci/database"
```

![DMS](/resources/oci/database/dms.png) **DMS**

```
import { DMS } from "diagrams-js/oci/database"
```

![ScienceWhite](/resources/oci/database/science-white.png) **ScienceWhite**

```
import { ScienceWhite } from "diagrams-js/oci/database"
```

![Science](/resources/oci/database/science.png) **Science**

```
import { Science } from "diagrams-js/oci/database"
```

![StreamWhite](/resources/oci/database/stream-white.png) **StreamWhite**

```
import { StreamWhite } from "diagrams-js/oci/database"
```

![Stream](/resources/oci/database/stream.png) **Stream**

```
import { Stream } from "diagrams-js/oci/database"
```

### oci/devops[​](#ocidevops "Direct link to oci/devops")

![APIGatewayWhite](/resources/oci/devops/api-gateway-white.png) **APIGatewayWhite**

```
import { APIGatewayWhite } from "diagrams-js/oci/devops"
```

![APIGateway](/resources/oci/devops/api-gateway.png) **APIGateway**

```
import { APIGateway } from "diagrams-js/oci/devops"
```

![APIServiceWhite](/resources/oci/devops/api-service-white.png) **APIServiceWhite**

```
import { APIServiceWhite } from "diagrams-js/oci/devops"
```

![APIService](/resources/oci/devops/api-service.png) **APIService**

```
import { APIService } from "diagrams-js/oci/devops"
```

![ResourceMgmtWhite](/resources/oci/devops/resource-mgmt-white.png) **ResourceMgmtWhite**

```
import { ResourceMgmtWhite } from "diagrams-js/oci/devops"
```

![ResourceMgmt](/resources/oci/devops/resource-mgmt.png) **ResourceMgmt**

```
import { ResourceMgmt } from "diagrams-js/oci/devops"
```

### oci/governance[​](#ocigovernance "Direct link to oci/governance")

![AuditWhite](/resources/oci/governance/audit-white.png) **AuditWhite**

```
import { AuditWhite } from "diagrams-js/oci/governance"
```

![Audit](/resources/oci/governance/audit.png) **Audit**

```
import { Audit } from "diagrams-js/oci/governance"
```

![CompartmentsWhite](/resources/oci/governance/compartments-white.png) **CompartmentsWhite**

```
import { CompartmentsWhite } from "diagrams-js/oci/governance"
```

![Compartments](/resources/oci/governance/compartments.png) **Compartments**

```
import { Compartments } from "diagrams-js/oci/governance"
```

![GroupsWhite](/resources/oci/governance/groups-white.png) **GroupsWhite**

```
import { GroupsWhite } from "diagrams-js/oci/governance"
```

![Groups](/resources/oci/governance/groups.png) **Groups**

```
import { Groups } from "diagrams-js/oci/governance"
```

![LoggingWhite](/resources/oci/governance/logging-white.png) **LoggingWhite**

```
import { LoggingWhite } from "diagrams-js/oci/governance"
```

![Logging](/resources/oci/governance/logging.png) **Logging**

```
import { Logging } from "diagrams-js/oci/governance"
```

![OCIDWhite](/resources/oci/governance/ocid-white.png) **OCIDWhite**

```
import { OCIDWhite } from "diagrams-js/oci/governance"
```

![OCID](/resources/oci/governance/ocid.png) **OCID**

```
import { OCID } from "diagrams-js/oci/governance"
```

![PoliciesWhite](/resources/oci/governance/policies-white.png) **PoliciesWhite**

```
import { PoliciesWhite } from "diagrams-js/oci/governance"
```

![Policies](/resources/oci/governance/policies.png) **Policies**

```
import { Policies } from "diagrams-js/oci/governance"
```

![TaggingWhite](/resources/oci/governance/tagging-white.png) **TaggingWhite**

```
import { TaggingWhite } from "diagrams-js/oci/governance"
```

![Tagging](/resources/oci/governance/tagging.png) **Tagging**

```
import { Tagging } from "diagrams-js/oci/governance"
```

### oci/monitoring[​](#ocimonitoring "Direct link to oci/monitoring")

![AlarmWhite](/resources/oci/monitoring/alarm-white.png) **AlarmWhite**

```
import { AlarmWhite } from "diagrams-js/oci/monitoring"
```

![Alarm](/resources/oci/monitoring/alarm.png) **Alarm**

```
import { Alarm } from "diagrams-js/oci/monitoring"
```

![EmailWhite](/resources/oci/monitoring/email-white.png) **EmailWhite**

```
import { EmailWhite } from "diagrams-js/oci/monitoring"
```

![Email](/resources/oci/monitoring/email.png) **Email**

```
import { Email } from "diagrams-js/oci/monitoring"
```

![EventsWhite](/resources/oci/monitoring/events-white.png) **EventsWhite**

```
import { EventsWhite } from "diagrams-js/oci/monitoring"
```

![Events](/resources/oci/monitoring/events.png) **Events**

```
import { Events } from "diagrams-js/oci/monitoring"
```

![HealthCheckWhite](/resources/oci/monitoring/health-check-white.png) **HealthCheckWhite**

```
import { HealthCheckWhite } from "diagrams-js/oci/monitoring"
```

![HealthCheck](/resources/oci/monitoring/health-check.png) **HealthCheck**

```
import { HealthCheck } from "diagrams-js/oci/monitoring"
```

![NotificationsWhite](/resources/oci/monitoring/notifications-white.png) **NotificationsWhite**

```
import { NotificationsWhite } from "diagrams-js/oci/monitoring"
```

![Notifications](/resources/oci/monitoring/notifications.png) **Notifications**

```
import { Notifications } from "diagrams-js/oci/monitoring"
```

![QueueWhite](/resources/oci/monitoring/queue-white.png) **QueueWhite**

```
import { QueueWhite } from "diagrams-js/oci/monitoring"
```

![Queue](/resources/oci/monitoring/queue.png) **Queue**

```
import { Queue } from "diagrams-js/oci/monitoring"
```

![SearchWhite](/resources/oci/monitoring/search-white.png) **SearchWhite**

```
import { SearchWhite } from "diagrams-js/oci/monitoring"
```

![Search](/resources/oci/monitoring/search.png) **Search**

```
import { Search } from "diagrams-js/oci/monitoring"
```

![TelemetryWhite](/resources/oci/monitoring/telemetry-white.png) **TelemetryWhite**

```
import { TelemetryWhite } from "diagrams-js/oci/monitoring"
```

![Telemetry](/resources/oci/monitoring/telemetry.png) **Telemetry**

```
import { Telemetry } from "diagrams-js/oci/monitoring"
```

![WorkflowWhite](/resources/oci/monitoring/workflow-white.png) **WorkflowWhite**

```
import { WorkflowWhite } from "diagrams-js/oci/monitoring"
```

![Workflow](/resources/oci/monitoring/workflow.png) **Workflow**

```
import { Workflow } from "diagrams-js/oci/monitoring"
```

### oci/network[​](#ocinetwork "Direct link to oci/network")

![DrgWhite](/resources/oci/network/drg-white.png) **DrgWhite**

```
import { DrgWhite } from "diagrams-js/oci/network"
```

![Drg](/resources/oci/network/drg.png) **Drg**

```
import { Drg } from "diagrams-js/oci/network"
```

![FirewallWhite](/resources/oci/network/firewall-white.png) **FirewallWhite**

```
import { FirewallWhite } from "diagrams-js/oci/network"
```

![Firewall](/resources/oci/network/firewall.png) **Firewall**

```
import { Firewall } from "diagrams-js/oci/network"
```

![InternetGatewayWhite](/resources/oci/network/internet-gateway-white.png) **InternetGatewayWhite**

```
import { InternetGatewayWhite } from "diagrams-js/oci/network"
```

![InternetGateway](/resources/oci/network/internet-gateway.png) **InternetGateway**

```
import { InternetGateway } from "diagrams-js/oci/network"
```

![LoadBalancerWhite](/resources/oci/network/load-balancer-white.png) **LoadBalancerWhite**

```
import { LoadBalancerWhite } from "diagrams-js/oci/network"
```

![LoadBalancer](/resources/oci/network/load-balancer.png) **LoadBalancer**

```
import { LoadBalancer } from "diagrams-js/oci/network"
```

![RouteTableWhite](/resources/oci/network/route-table-white.png) **RouteTableWhite**

```
import { RouteTableWhite } from "diagrams-js/oci/network"
```

![RouteTable](/resources/oci/network/route-table.png) **RouteTable**

```
import { RouteTable } from "diagrams-js/oci/network"
```

![SecurityListsWhite](/resources/oci/network/security-lists-white.png) **SecurityListsWhite**

```
import { SecurityListsWhite } from "diagrams-js/oci/network"
```

![SecurityLists](/resources/oci/network/security-lists.png) **SecurityLists**

```
import { SecurityLists } from "diagrams-js/oci/network"
```

![ServiceGatewayWhite](/resources/oci/network/service-gateway-white.png) **ServiceGatewayWhite**

```
import { ServiceGatewayWhite } from "diagrams-js/oci/network"
```

![ServiceGateway](/resources/oci/network/service-gateway.png) **ServiceGateway**

```
import { ServiceGateway } from "diagrams-js/oci/network"
```

![VcnWhite](/resources/oci/network/vcn-white.png) **VcnWhite**

```
import { VcnWhite } from "diagrams-js/oci/network"
```

![Vcn](/resources/oci/network/vcn.png) **Vcn**

```
import { Vcn } from "diagrams-js/oci/network"
```

### oci/security[​](#ocisecurity "Direct link to oci/security")

![CloudGuardWhite](/resources/oci/security/cloud-guard-white.png) **CloudGuardWhite**

```
import { CloudGuardWhite } from "diagrams-js/oci/security"
```

![CloudGuard](/resources/oci/security/cloud-guard.png) **CloudGuard**

```
import { CloudGuard } from "diagrams-js/oci/security"
```

![DDOSWhite](/resources/oci/security/ddos-white.png) **DDOSWhite**

```
import { DDOSWhite } from "diagrams-js/oci/security"
```

![DDOS](/resources/oci/security/ddos.png) **DDOS**

```
import { DDOS } from "diagrams-js/oci/security"
```

![EncryptionWhite](/resources/oci/security/encryption-white.png) **EncryptionWhite**

```
import { EncryptionWhite } from "diagrams-js/oci/security"
```

![Encryption](/resources/oci/security/encryption.png) **Encryption**

```
import { Encryption } from "diagrams-js/oci/security"
```

![IDAccessWhite](/resources/oci/security/id-access-white.png) **IDAccessWhite**

```
import { IDAccessWhite } from "diagrams-js/oci/security"
```

![IDAccess](/resources/oci/security/id-access.png) **IDAccess**

```
import { IDAccess } from "diagrams-js/oci/security"
```

![KeyManagementWhite](/resources/oci/security/key-management-white.png) **KeyManagementWhite**

```
import { KeyManagementWhite } from "diagrams-js/oci/security"
```

![KeyManagement](/resources/oci/security/key-management.png) **KeyManagement**

```
import { KeyManagement } from "diagrams-js/oci/security"
```

![MaxSecurityZoneWhite](/resources/oci/security/max-security-zone-white.png) **MaxSecurityZoneWhite**

```
import { MaxSecurityZoneWhite } from "diagrams-js/oci/security"
```

![MaxSecurityZone](/resources/oci/security/max-security-zone.png) **MaxSecurityZone**

```
import { MaxSecurityZone } from "diagrams-js/oci/security"
```

![VaultWhite](/resources/oci/security/vault-white.png) **VaultWhite**

```
import { VaultWhite } from "diagrams-js/oci/security"
```

![Vault](/resources/oci/security/vault.png) **Vault**

```
import { Vault } from "diagrams-js/oci/security"
```

![WAFWhite](/resources/oci/security/waf-white.png) **WAFWhite**

```
import { WAFWhite } from "diagrams-js/oci/security"
```

![WAF](/resources/oci/security/waf.png) **WAF**

```
import { WAF } from "diagrams-js/oci/security"
```

### oci/storage[​](#ocistorage "Direct link to oci/storage")

![BackupRestoreWhite](/resources/oci/storage/backup-restore-white.png) **BackupRestoreWhite**

```
import { BackupRestoreWhite } from "diagrams-js/oci/storage"
```

![BackupRestore](/resources/oci/storage/backup-restore.png) **BackupRestore**

```
import { BackupRestore } from "diagrams-js/oci/storage"
```

![BlockStorageCloneWhite](/resources/oci/storage/block-storage-clone-white.png) **BlockStorageCloneWhite**

```
import { BlockStorageCloneWhite } from "diagrams-js/oci/storage"
```

![BlockStorageClone](/resources/oci/storage/block-storage-clone.png) **BlockStorageClone**

```
import { BlockStorageClone } from "diagrams-js/oci/storage"
```

![BlockStorageWhite](/resources/oci/storage/block-storage-white.png) **BlockStorageWhite**

```
import { BlockStorageWhite } from "diagrams-js/oci/storage"
```

![BlockStorage](/resources/oci/storage/block-storage.png) **BlockStorage**

```
import { BlockStorage } from "diagrams-js/oci/storage"
```

![BucketsWhite](/resources/oci/storage/buckets-white.png) **BucketsWhite**

```
import { BucketsWhite } from "diagrams-js/oci/storage"
```

![Buckets](/resources/oci/storage/buckets.png) **Buckets**

```
import { Buckets } from "diagrams-js/oci/storage"
```

![DataTransferWhite](/resources/oci/storage/data-transfer-white.png) **DataTransferWhite**

```
import { DataTransferWhite } from "diagrams-js/oci/storage"
```

![DataTransfer](/resources/oci/storage/data-transfer.png) **DataTransfer**

```
import { DataTransfer } from "diagrams-js/oci/storage"
```

![ElasticPerformanceWhite](/resources/oci/storage/elastic-performance-white.png) **ElasticPerformanceWhite**

```
import { ElasticPerformanceWhite } from "diagrams-js/oci/storage"
```

![ElasticPerformance](/resources/oci/storage/elastic-performance.png) **ElasticPerformance**

```
import { ElasticPerformance } from "diagrams-js/oci/storage"
```

![FileStorageWhite](/resources/oci/storage/file-storage-white.png) **FileStorageWhite**

```
import { FileStorageWhite } from "diagrams-js/oci/storage"
```

![FileStorage](/resources/oci/storage/file-storage.png) **FileStorage**

```
import { FileStorage } from "diagrams-js/oci/storage"
```

![ObjectStorageWhite](/resources/oci/storage/object-storage-white.png) **ObjectStorageWhite**

```
import { ObjectStorageWhite } from "diagrams-js/oci/storage"
```

![ObjectStorage](/resources/oci/storage/object-storage.png) **ObjectStorage**

```
import { ObjectStorage } from "diagrams-js/oci/storage"
```

![StorageGatewayWhite](/resources/oci/storage/storage-gateway-white.png) **StorageGatewayWhite**

```
import { StorageGatewayWhite } from "diagrams-js/oci/storage"
```

![StorageGateway](/resources/oci/storage/storage-gateway.png) **StorageGateway**

```
import { StorageGateway } from "diagrams-js/oci/storage"
```


---

# On-Premises

Node types list for the On-Premises provider.

## Example Usage[​](#example-usage "Direct link to Example Usage")

```
import { Diagram } from "diagrams-js";
import { Fluentd, Vector } from "diagrams-js/onprem/aggregator";
import { Beam, Databricks, Dbt } from "diagrams-js/onprem/analytics";

const diagram = Diagram("On-Premises Architecture", { direction: "TB" });

const node1 = diagram.add(Fluentd("Node 1"));
const node2 = diagram.add(Beam("Node 2"));

node1.to(node2);

const svg = await diagram.render();
```

note

All node types available in the [Python diagrams library](https://diagrams.mingrammer.com/docs/nodes/onprem) are also available in diagrams-js with the same class names and structure.

## Node Reference[​](#node-reference "Direct link to Node Reference")

### onprem/aggregator[​](#onpremaggregator "Direct link to onprem/aggregator")

![Fluentd](/resources/onprem/aggregator/fluentd.png) **Fluentd**

```
import { Fluentd } from "diagrams-js/onprem/aggregator"
```

![Vector](/resources/onprem/aggregator/vector.png) **Vector**

```
import { Vector } from "diagrams-js/onprem/aggregator"
```

### onprem/analytics[​](#onpremanalytics "Direct link to onprem/analytics")

![Beam](/resources/onprem/analytics/beam.png) **Beam**

```
import { Beam } from "diagrams-js/onprem/analytics"
```

![Databricks](/resources/onprem/analytics/databricks.png) **Databricks**

```
import { Databricks } from "diagrams-js/onprem/analytics"
```

![Dbt](/resources/onprem/analytics/dbt.png) **Dbt**

```
import { Dbt } from "diagrams-js/onprem/analytics"
```

![Dremio](/resources/onprem/analytics/dremio.png) **Dremio**

```
import { Dremio } from "diagrams-js/onprem/analytics"
```

![Flink](/resources/onprem/analytics/flink.png) **Flink**

```
import { Flink } from "diagrams-js/onprem/analytics"
```

![Hadoop](/resources/onprem/analytics/hadoop.png) **Hadoop**

```
import { Hadoop } from "diagrams-js/onprem/analytics"
```

![Hive](/resources/onprem/analytics/hive.png) **Hive**

```
import { Hive } from "diagrams-js/onprem/analytics"
```

![Metabase](/resources/onprem/analytics/metabase.png) **Metabase**

```
import { Metabase } from "diagrams-js/onprem/analytics"
```

![Norikra](/resources/onprem/analytics/norikra.png) **Norikra**

```
import { Norikra } from "diagrams-js/onprem/analytics"
```

![Powerbi](/resources/onprem/analytics/powerbi.png) **Powerbi**

```
import { Powerbi } from "diagrams-js/onprem/analytics"
```

![Presto](/resources/onprem/analytics/presto.png) **Presto**

```
import { Presto } from "diagrams-js/onprem/analytics"
```

![Singer](/resources/onprem/analytics/singer.png) **Singer**

```
import { Singer } from "diagrams-js/onprem/analytics"
```

![Spark](/resources/onprem/analytics/spark.png) **Spark**

```
import { Spark } from "diagrams-js/onprem/analytics"
```

![Storm](/resources/onprem/analytics/storm.png) **Storm**

```
import { Storm } from "diagrams-js/onprem/analytics"
```

![Superset](/resources/onprem/analytics/superset.png) **Superset**

```
import { Superset } from "diagrams-js/onprem/analytics"
```

![Tableau](/resources/onprem/analytics/tableau.png) **Tableau**

```
import { Tableau } from "diagrams-js/onprem/analytics"
```

![Trino](/resources/onprem/analytics/trino.png) **Trino**

```
import { Trino } from "diagrams-js/onprem/analytics"
```

### onprem/auth[​](#onpremauth "Direct link to onprem/auth")

![Boundary](/resources/onprem/auth/boundary.png) **Boundary**

```
import { Boundary } from "diagrams-js/onprem/auth"
```

![BuzzfeedSso](/resources/onprem/auth/buzzfeed-sso.png) **BuzzfeedSso**

```
import { BuzzfeedSso } from "diagrams-js/onprem/auth"
```

![Oauth2Proxy](/resources/onprem/auth/oauth2-proxy.png) **Oauth2Proxy**

```
import { Oauth2Proxy } from "diagrams-js/onprem/auth"
```

### onprem/cd[​](#onpremcd "Direct link to onprem/cd")

![Spinnaker](/resources/onprem/cd/spinnaker.png) **Spinnaker**

```
import { Spinnaker } from "diagrams-js/onprem/cd"
```

![TektonCli](/resources/onprem/cd/tekton-cli.png) **TektonCli**

```
import { TektonCli } from "diagrams-js/onprem/cd"
```

![Tekton](/resources/onprem/cd/tekton.png) **Tekton**

```
import { Tekton } from "diagrams-js/onprem/cd"
```

### onprem/certificates[​](#onpremcertificates "Direct link to onprem/certificates")

![CertManager](/resources/onprem/certificates/cert-manager.png) **CertManager**

```
import { CertManager } from "diagrams-js/onprem/certificates"
```

![LetsEncrypt](/resources/onprem/certificates/lets-encrypt.png) **LetsEncrypt**

```
import { LetsEncrypt } from "diagrams-js/onprem/certificates"
```

### onprem/ci[​](#onpremci "Direct link to onprem/ci")

![Circleci](/resources/onprem/ci/circleci.png) **Circleci**

```
import { Circleci } from "diagrams-js/onprem/ci"
```

![Concourseci](/resources/onprem/ci/concourseci.png) **Concourseci**

```
import { Concourseci } from "diagrams-js/onprem/ci"
```

![Droneci](/resources/onprem/ci/droneci.png) **Droneci**

```
import { Droneci } from "diagrams-js/onprem/ci"
```

![GithubActions](/resources/onprem/ci/github-actions.png) **GithubActions**

```
import { GithubActions } from "diagrams-js/onprem/ci"
```

![Gitlabci](/resources/onprem/ci/gitlabci.png) **Gitlabci**

```
import { Gitlabci } from "diagrams-js/onprem/ci"
```

![Jenkins](/resources/onprem/ci/jenkins.png) **Jenkins**

```
import { Jenkins } from "diagrams-js/onprem/ci"
```

![Teamcity](/resources/onprem/ci/teamcity.png) **Teamcity**

```
import { Teamcity } from "diagrams-js/onprem/ci"
```

![Travisci](/resources/onprem/ci/travisci.png) **Travisci**

```
import { Travisci } from "diagrams-js/onprem/ci"
```

![Zuulci](/resources/onprem/ci/zuulci.png) **Zuulci**

```
import { Zuulci } from "diagrams-js/onprem/ci"
```

### onprem/client[​](#onpremclient "Direct link to onprem/client")

![Client](/resources/onprem/client/client.png) **Client**

```
import { Client } from "diagrams-js/onprem/client"
```

![User](/resources/onprem/client/user.png) **User**

```
import { User } from "diagrams-js/onprem/client"
```

![Users](/resources/onprem/client/users.png) **Users**

```
import { Users } from "diagrams-js/onprem/client"
```

### onprem/compute[​](#onpremcompute "Direct link to onprem/compute")

![Nomad](/resources/onprem/compute/nomad.png) **Nomad**

```
import { Nomad } from "diagrams-js/onprem/compute"
```

![Server](/resources/onprem/compute/server.png) **Server**

```
import { Server } from "diagrams-js/onprem/compute"
```

### onprem/container[​](#onpremcontainer "Direct link to onprem/container")

![Containerd](/resources/onprem/container/containerd.png) **Containerd**

```
import { Containerd } from "diagrams-js/onprem/container"
```

![Crio](/resources/onprem/container/crio.png) **Crio**

```
import { Crio } from "diagrams-js/onprem/container"
```

![Docker](/resources/onprem/container/docker.png) **Docker**

```
import { Docker } from "diagrams-js/onprem/container"
```

![Firecracker](/resources/onprem/container/firecracker.png) **Firecracker**

```
import { Firecracker } from "diagrams-js/onprem/container"
```

![Gvisor](/resources/onprem/container/gvisor.png) **Gvisor**

```
import { Gvisor } from "diagrams-js/onprem/container"
```

![K3s](/resources/onprem/container/k3s.png) **K3s**

```
import { K3s } from "diagrams-js/onprem/container"
```

![Lxc](/resources/onprem/container/lxc.png) **Lxc**

```
import { Lxc } from "diagrams-js/onprem/container"
```

![Rkt](/resources/onprem/container/rkt.png) **Rkt**

```
import { Rkt } from "diagrams-js/onprem/container"
```

### onprem/database[​](#onpremdatabase "Direct link to onprem/database")

![Cassandra](/resources/onprem/database/cassandra.png) **Cassandra**

```
import { Cassandra } from "diagrams-js/onprem/database"
```

![Clickhouse](/resources/onprem/database/clickhouse.png) **Clickhouse**

```
import { Clickhouse } from "diagrams-js/onprem/database"
```

![Cockroachdb](/resources/onprem/database/cockroachdb.png) **Cockroachdb**

```
import { Cockroachdb } from "diagrams-js/onprem/database"
```

![Couchbase](/resources/onprem/database/couchbase.png) **Couchbase**

```
import { Couchbase } from "diagrams-js/onprem/database"
```

![Couchdb](/resources/onprem/database/couchdb.png) **Couchdb**

```
import { Couchdb } from "diagrams-js/onprem/database"
```

![Dgraph](/resources/onprem/database/dgraph.png) **Dgraph**

```
import { Dgraph } from "diagrams-js/onprem/database"
```

![Druid](/resources/onprem/database/druid.png) **Druid**

```
import { Druid } from "diagrams-js/onprem/database"
```

![Duckdb](/resources/onprem/database/duckdb.png) **Duckdb**

```
import { Duckdb } from "diagrams-js/onprem/database"
```

![Hbase](/resources/onprem/database/hbase.png) **Hbase**

```
import { Hbase } from "diagrams-js/onprem/database"
```

![Influxdb](/resources/onprem/database/influxdb.png) **Influxdb**

```
import { Influxdb } from "diagrams-js/onprem/database"
```

![Janusgraph](/resources/onprem/database/janusgraph.png) **Janusgraph**

```
import { Janusgraph } from "diagrams-js/onprem/database"
```

![Mariadb](/resources/onprem/database/mariadb.png) **Mariadb**

```
import { Mariadb } from "diagrams-js/onprem/database"
```

![Mongodb](/resources/onprem/database/mongodb.png) **Mongodb**

```
import { Mongodb } from "diagrams-js/onprem/database"
```

![Mssql](/resources/onprem/database/mssql.png) **Mssql**

```
import { Mssql } from "diagrams-js/onprem/database"
```

![Mysql](/resources/onprem/database/mysql.png) **Mysql**

```
import { Mysql } from "diagrams-js/onprem/database"
```

![Neo4j](/resources/onprem/database/neo4j.png) **Neo4j**

```
import { Neo4j } from "diagrams-js/onprem/database"
```

![Oracle](/resources/onprem/database/oracle.png) **Oracle**

```
import { Oracle } from "diagrams-js/onprem/database"
```

![Postgresql](/resources/onprem/database/postgresql.png) **Postgresql**

```
import { Postgresql } from "diagrams-js/onprem/database"
```

![Qdrant](/resources/onprem/database/qdrant.png) **Qdrant**

```
import { Qdrant } from "diagrams-js/onprem/database"
```

![Scylla](/resources/onprem/database/scylla.png) **Scylla**

```
import { Scylla } from "diagrams-js/onprem/database"
```

### onprem/dns[​](#onpremdns "Direct link to onprem/dns")

![Coredns](/resources/onprem/dns/coredns.png) **Coredns**

```
import { Coredns } from "diagrams-js/onprem/dns"
```

![Powerdns](/resources/onprem/dns/powerdns.png) **Powerdns**

```
import { Powerdns } from "diagrams-js/onprem/dns"
```

### onprem/etl[​](#onpremetl "Direct link to onprem/etl")

![Embulk](/resources/onprem/etl/embulk.png) **Embulk**

```
import { Embulk } from "diagrams-js/onprem/etl"
```

### onprem/gitops[​](#onpremgitops "Direct link to onprem/gitops")

![Argocd](/resources/onprem/gitops/argocd.png) **Argocd**

```
import { Argocd } from "diagrams-js/onprem/gitops"
```

![Flagger](/resources/onprem/gitops/flagger.png) **Flagger**

```
import { Flagger } from "diagrams-js/onprem/gitops"
```

![Flux](/resources/onprem/gitops/flux.png) **Flux**

```
import { Flux } from "diagrams-js/onprem/gitops"
```

### onprem/groupware[​](#onpremgroupware "Direct link to onprem/groupware")

![Nextcloud](/resources/onprem/groupware/nextcloud.png) **Nextcloud**

```
import { Nextcloud } from "diagrams-js/onprem/groupware"
```

### onprem/iac[​](#onpremiac "Direct link to onprem/iac")

![Ansible](/resources/onprem/iac/ansible.png) **Ansible**

```
import { Ansible } from "diagrams-js/onprem/iac"
```

![Atlantis](/resources/onprem/iac/atlantis.png) **Atlantis**

```
import { Atlantis } from "diagrams-js/onprem/iac"
```

![Awx](/resources/onprem/iac/awx.png) **Awx**

```
import { Awx } from "diagrams-js/onprem/iac"
```

![Pulumi](/resources/onprem/iac/pulumi.png) **Pulumi**

```
import { Pulumi } from "diagrams-js/onprem/iac"
```

![Puppet](/resources/onprem/iac/puppet.png) **Puppet**

```
import { Puppet } from "diagrams-js/onprem/iac"
```

![Terraform](/resources/onprem/iac/terraform.png) **Terraform**

```
import { Terraform } from "diagrams-js/onprem/iac"
```

### onprem/identity[​](#onpremidentity "Direct link to onprem/identity")

![Dex](/resources/onprem/identity/dex.png) **Dex**

```
import { Dex } from "diagrams-js/onprem/identity"
```

### onprem/inmemory[​](#onpreminmemory "Direct link to onprem/inmemory")

![Aerospike](/resources/onprem/inmemory/aerospike.png) **Aerospike**

```
import { Aerospike } from "diagrams-js/onprem/inmemory"
```

![Hazelcast](/resources/onprem/inmemory/hazelcast.png) **Hazelcast**

```
import { Hazelcast } from "diagrams-js/onprem/inmemory"
```

![Memcached](/resources/onprem/inmemory/memcached.png) **Memcached**

```
import { Memcached } from "diagrams-js/onprem/inmemory"
```

![Redis](/resources/onprem/inmemory/redis.png) **Redis**

```
import { Redis } from "diagrams-js/onprem/inmemory"
```

### onprem/logging[​](#onpremlogging "Direct link to onprem/logging")

![Fluentbit](/resources/onprem/logging/fluentbit.png) **Fluentbit**

```
import { Fluentbit } from "diagrams-js/onprem/logging"
```

![Graylog](/resources/onprem/logging/graylog.png) **Graylog**

```
import { Graylog } from "diagrams-js/onprem/logging"
```

![Loki](/resources/onprem/logging/loki.png) **Loki**

```
import { Loki } from "diagrams-js/onprem/logging"
```

![Rsyslog](/resources/onprem/logging/rsyslog.png) **Rsyslog**

```
import { Rsyslog } from "diagrams-js/onprem/logging"
```

![SyslogNg](/resources/onprem/logging/syslog-ng.png) **SyslogNg**

```
import { SyslogNg } from "diagrams-js/onprem/logging"
```

### onprem/messaging[​](#onpremmessaging "Direct link to onprem/messaging")

![Centrifugo](/resources/onprem/messaging/centrifugo.png) **Centrifugo**

```
import { Centrifugo } from "diagrams-js/onprem/messaging"
```

### onprem/mlops[​](#onpremmlops "Direct link to onprem/mlops")

![Mlflow](/resources/onprem/mlops/mlflow.png) **Mlflow**

```
import { Mlflow } from "diagrams-js/onprem/mlops"
```

![Polyaxon](/resources/onprem/mlops/polyaxon.png) **Polyaxon**

```
import { Polyaxon } from "diagrams-js/onprem/mlops"
```

### onprem/monitoring[​](#onpremmonitoring "Direct link to onprem/monitoring")

![Cortex](/resources/onprem/monitoring/cortex.png) **Cortex**

```
import { Cortex } from "diagrams-js/onprem/monitoring"
```

![Datadog](/resources/onprem/monitoring/datadog.png) **Datadog**

```
import { Datadog } from "diagrams-js/onprem/monitoring"
```

![Dynatrace](/resources/onprem/monitoring/dynatrace.png) **Dynatrace**

```
import { Dynatrace } from "diagrams-js/onprem/monitoring"
```

![Grafana](/resources/onprem/monitoring/grafana.png) **Grafana**

```
import { Grafana } from "diagrams-js/onprem/monitoring"
```

![Humio](/resources/onprem/monitoring/humio.png) **Humio**

```
import { Humio } from "diagrams-js/onprem/monitoring"
```

![Mimir](/resources/onprem/monitoring/mimir.png) **Mimir**

```
import { Mimir } from "diagrams-js/onprem/monitoring"
```

![Nagios](/resources/onprem/monitoring/nagios.png) **Nagios**

```
import { Nagios } from "diagrams-js/onprem/monitoring"
```

![Newrelic](/resources/onprem/monitoring/newrelic.png) **Newrelic**

```
import { Newrelic } from "diagrams-js/onprem/monitoring"
```

![PrometheusOperator](/resources/onprem/monitoring/prometheus-operator.png) **PrometheusOperator**

```
import { PrometheusOperator } from "diagrams-js/onprem/monitoring"
```

![Prometheus](/resources/onprem/monitoring/prometheus.png) **Prometheus**

```
import { Prometheus } from "diagrams-js/onprem/monitoring"
```

![Sentry](/resources/onprem/monitoring/sentry.png) **Sentry**

```
import { Sentry } from "diagrams-js/onprem/monitoring"
```

![Splunk](/resources/onprem/monitoring/splunk.png) **Splunk**

```
import { Splunk } from "diagrams-js/onprem/monitoring"
```

![Thanos](/resources/onprem/monitoring/thanos.png) **Thanos**

```
import { Thanos } from "diagrams-js/onprem/monitoring"
```

![Zabbix](/resources/onprem/monitoring/zabbix.png) **Zabbix**

```
import { Zabbix } from "diagrams-js/onprem/monitoring"
```

### onprem/network[​](#onpremnetwork "Direct link to onprem/network")

![Ambassador](/resources/onprem/network/ambassador.png) **Ambassador**

```
import { Ambassador } from "diagrams-js/onprem/network"
```

![Apache](/resources/onprem/network/apache.png) **Apache**

```
import { Apache } from "diagrams-js/onprem/network"
```

**Bind9**

```
import { Bind9 } from "diagrams-js/onprem/network"
```

![Caddy](/resources/onprem/network/caddy.png) **Caddy**

```
import { Caddy } from "diagrams-js/onprem/network"
```

![CiscoRouter](/resources/onprem/network/cisco-router.png) **CiscoRouter**

```
import { CiscoRouter } from "diagrams-js/onprem/network"
```

![CiscoSwitchL2](/resources/onprem/network/cisco-switch-l2.png) **CiscoSwitchL2**

```
import { CiscoSwitchL2 } from "diagrams-js/onprem/network"
```

![CiscoSwitchL3](/resources/onprem/network/cisco-switch-l3.png) **CiscoSwitchL3**

```
import { CiscoSwitchL3 } from "diagrams-js/onprem/network"
```

![Consul](/resources/onprem/network/consul.png) **Consul**

```
import { Consul } from "diagrams-js/onprem/network"
```

![Envoy](/resources/onprem/network/envoy.png) **Envoy**

```
import { Envoy } from "diagrams-js/onprem/network"
```

![Etcd](/resources/onprem/network/etcd.png) **Etcd**

```
import { Etcd } from "diagrams-js/onprem/network"
```

![Glassfish](/resources/onprem/network/glassfish.png) **Glassfish**

```
import { Glassfish } from "diagrams-js/onprem/network"
```

![Gunicorn](/resources/onprem/network/gunicorn.png) **Gunicorn**

```
import { Gunicorn } from "diagrams-js/onprem/network"
```

![Haproxy](/resources/onprem/network/haproxy.png) **Haproxy**

```
import { Haproxy } from "diagrams-js/onprem/network"
```

![Internet](/resources/onprem/network/internet.png) **Internet**

```
import { Internet } from "diagrams-js/onprem/network"
```

![Istio](/resources/onprem/network/istio.png) **Istio**

```
import { Istio } from "diagrams-js/onprem/network"
```

![Jbossas](/resources/onprem/network/jbossas.png) **Jbossas**

```
import { Jbossas } from "diagrams-js/onprem/network"
```

![Jetty](/resources/onprem/network/jetty.png) **Jetty**

```
import { Jetty } from "diagrams-js/onprem/network"
```

![Kong](/resources/onprem/network/kong.png) **Kong**

```
import { Kong } from "diagrams-js/onprem/network"
```

![Linkerd](/resources/onprem/network/linkerd.png) **Linkerd**

```
import { Linkerd } from "diagrams-js/onprem/network"
```

![Mikrotik](/resources/onprem/network/mikrotik.png) **Mikrotik**

```
import { Mikrotik } from "diagrams-js/onprem/network"
```

![Nginx](/resources/onprem/network/nginx.png) **Nginx**

```
import { Nginx } from "diagrams-js/onprem/network"
```

![Ocelot](/resources/onprem/network/ocelot.png) **Ocelot**

```
import { Ocelot } from "diagrams-js/onprem/network"
```

![OpenServiceMesh](/resources/onprem/network/open-service-mesh.png) **OpenServiceMesh**

```
import { OpenServiceMesh } from "diagrams-js/onprem/network"
```

![Opnsense](/resources/onprem/network/opnsense.png) **Opnsense**

```
import { Opnsense } from "diagrams-js/onprem/network"
```

![Pfsense](/resources/onprem/network/pfsense.png) **Pfsense**

```
import { Pfsense } from "diagrams-js/onprem/network"
```

![Pomerium](/resources/onprem/network/pomerium.png) **Pomerium**

```
import { Pomerium } from "diagrams-js/onprem/network"
```

![Powerdns](/resources/onprem/network/powerdns.png) **Powerdns**

```
import { Powerdns } from "diagrams-js/onprem/network"
```

![Tomcat](/resources/onprem/network/tomcat.png) **Tomcat**

```
import { Tomcat } from "diagrams-js/onprem/network"
```

![Traefik](/resources/onprem/network/traefik.png) **Traefik**

```
import { Traefik } from "diagrams-js/onprem/network"
```

![Tyk](/resources/onprem/network/tyk.png) **Tyk**

```
import { Tyk } from "diagrams-js/onprem/network"
```

![Vyos](/resources/onprem/network/vyos.png) **Vyos**

```
import { Vyos } from "diagrams-js/onprem/network"
```

![Wildfly](/resources/onprem/network/wildfly.png) **Wildfly**

```
import { Wildfly } from "diagrams-js/onprem/network"
```

![Yarp](/resources/onprem/network/yarp.png) **Yarp**

```
import { Yarp } from "diagrams-js/onprem/network"
```

![Zookeeper](/resources/onprem/network/zookeeper.png) **Zookeeper**

```
import { Zookeeper } from "diagrams-js/onprem/network"
```

### onprem/proxmox[​](#onpremproxmox "Direct link to onprem/proxmox")

![Pve](/resources/onprem/proxmox/pve.png) **Pve**

```
import { Pve } from "diagrams-js/onprem/proxmox"
```

### onprem/queue[​](#onpremqueue "Direct link to onprem/queue")

![Activemq](/resources/onprem/queue/activemq.png) **Activemq**

```
import { Activemq } from "diagrams-js/onprem/queue"
```

![Celery](/resources/onprem/queue/celery.png) **Celery**

```
import { Celery } from "diagrams-js/onprem/queue"
```

![Emqx](/resources/onprem/queue/emqx.png) **Emqx**

```
import { Emqx } from "diagrams-js/onprem/queue"
```

![Kafka](/resources/onprem/queue/kafka.png) **Kafka**

```
import { Kafka } from "diagrams-js/onprem/queue"
```

![Nats](/resources/onprem/queue/nats.png) **Nats**

```
import { Nats } from "diagrams-js/onprem/queue"
```

![Rabbitmq](/resources/onprem/queue/rabbitmq.png) **Rabbitmq**

```
import { Rabbitmq } from "diagrams-js/onprem/queue"
```

![Zeromq](/resources/onprem/queue/zeromq.png) **Zeromq**

```
import { Zeromq } from "diagrams-js/onprem/queue"
```

### onprem/registry[​](#onpremregistry "Direct link to onprem/registry")

![Harbor](/resources/onprem/registry/harbor.png) **Harbor**

```
import { Harbor } from "diagrams-js/onprem/registry"
```

![Jfrog](/resources/onprem/registry/jfrog.png) **Jfrog**

```
import { Jfrog } from "diagrams-js/onprem/registry"
```

### onprem/search[​](#onpremsearch "Direct link to onprem/search")

![Solr](/resources/onprem/search/solr.png) **Solr**

```
import { Solr } from "diagrams-js/onprem/search"
```

### onprem/security[​](#onpremsecurity "Direct link to onprem/security")

![Bitwarden](/resources/onprem/security/bitwarden.png) **Bitwarden**

```
import { Bitwarden } from "diagrams-js/onprem/security"
```

![Trivy](/resources/onprem/security/trivy.png) **Trivy**

```
import { Trivy } from "diagrams-js/onprem/security"
```

![Vault](/resources/onprem/security/vault.png) **Vault**

```
import { Vault } from "diagrams-js/onprem/security"
```

### onprem/storage[​](#onpremstorage "Direct link to onprem/storage")

![CephOsd](/resources/onprem/storage/ceph-osd.png) **CephOsd**

```
import { CephOsd } from "diagrams-js/onprem/storage"
```

![Ceph](/resources/onprem/storage/ceph.png) **Ceph**

```
import { Ceph } from "diagrams-js/onprem/storage"
```

![Glusterfs](/resources/onprem/storage/glusterfs.png) **Glusterfs**

```
import { Glusterfs } from "diagrams-js/onprem/storage"
```

![Portworx](/resources/onprem/storage/portworx.png) **Portworx**

```
import { Portworx } from "diagrams-js/onprem/storage"
```

### onprem/tracing[​](#onpremtracing "Direct link to onprem/tracing")

![Jaeger](/resources/onprem/tracing/jaeger.png) **Jaeger**

```
import { Jaeger } from "diagrams-js/onprem/tracing"
```

![Tempo](/resources/onprem/tracing/tempo.png) **Tempo**

```
import { Tempo } from "diagrams-js/onprem/tracing"
```

### onprem/vcs[​](#onpremvcs "Direct link to onprem/vcs")

![Git](/resources/onprem/vcs/git.png) **Git**

```
import { Git } from "diagrams-js/onprem/vcs"
```

![Gitea](/resources/onprem/vcs/gitea.png) **Gitea**

```
import { Gitea } from "diagrams-js/onprem/vcs"
```

![Github](/resources/onprem/vcs/github.png) **Github**

```
import { Github } from "diagrams-js/onprem/vcs"
```

![Gitlab](/resources/onprem/vcs/gitlab.png) **Gitlab**

```
import { Gitlab } from "diagrams-js/onprem/vcs"
```

![Svn](/resources/onprem/vcs/svn.png) **Svn**

```
import { Svn } from "diagrams-js/onprem/vcs"
```

### onprem/workflow[​](#onpremworkflow "Direct link to onprem/workflow")

![Airflow](/resources/onprem/workflow/airflow.png) **Airflow**

```
import { Airflow } from "diagrams-js/onprem/workflow"
```

![Digdag](/resources/onprem/workflow/digdag.png) **Digdag**

```
import { Digdag } from "diagrams-js/onprem/workflow"
```

![Kubeflow](/resources/onprem/workflow/kubeflow.png) **Kubeflow**

```
import { Kubeflow } from "diagrams-js/onprem/workflow"
```

![Nifi](/resources/onprem/workflow/nifi.png) **Nifi**

```
import { Nifi } from "diagrams-js/onprem/workflow"
```


---

# OpenStack

Node types list for the OpenStack provider.

## Example Usage[​](#example-usage "Direct link to Example Usage")

```
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();
```

note

All node types available in the [Python diagrams library](https://diagrams.mingrammer.com/docs/nodes/openstack) are also available in diagrams-js with the same class names and structure.

## Node Reference[​](#node-reference "Direct link to Node Reference")

### openstack/apiproxies[​](#openstackapiproxies "Direct link to openstack/apiproxies")

![EC2API](/resources/openstack/apiproxies/ec2api.png) **EC2API**

```
import { EC2API } from "diagrams-js/openstack/apiproxies"
```

### openstack/applicationlifecycle[​](#openstackapplicationlifecycle "Direct link to openstack/applicationlifecycle")

![Freezer](/resources/openstack/applicationlifecycle/freezer.png) **Freezer**

```
import { Freezer } from "diagrams-js/openstack/applicationlifecycle"
```

![Masakari](/resources/openstack/applicationlifecycle/masakari.png) **Masakari**

```
import { Masakari } from "diagrams-js/openstack/applicationlifecycle"
```

![Murano](/resources/openstack/applicationlifecycle/murano.png) **Murano**

```
import { Murano } from "diagrams-js/openstack/applicationlifecycle"
```

![Solum](/resources/openstack/applicationlifecycle/solum.png) **Solum**

```
import { Solum } from "diagrams-js/openstack/applicationlifecycle"
```

### openstack/baremetal[​](#openstackbaremetal "Direct link to openstack/baremetal")

![Cyborg](/resources/openstack/baremetal/cyborg.png) **Cyborg**

```
import { Cyborg } from "diagrams-js/openstack/baremetal"
```

![Ironic](/resources/openstack/baremetal/ironic.png) **Ironic**

```
import { Ironic } from "diagrams-js/openstack/baremetal"
```

### openstack/billing[​](#openstackbilling "Direct link to openstack/billing")

![Cloudkitty](/resources/openstack/billing/cloudkitty.png) **Cloudkitty**

```
import { Cloudkitty } from "diagrams-js/openstack/billing"
```

### openstack/compute[​](#openstackcompute "Direct link to openstack/compute")

![Nova](/resources/openstack/compute/nova.png) **Nova**

```
import { Nova } from "diagrams-js/openstack/compute"
```

![Qinling](/resources/openstack/compute/qinling.png) **Qinling**

```
import { Qinling } from "diagrams-js/openstack/compute"
```

![Zun](/resources/openstack/compute/zun.png) **Zun**

```
import { Zun } from "diagrams-js/openstack/compute"
```

### openstack/containerservices[​](#openstackcontainerservices "Direct link to openstack/containerservices")

![Kuryr](/resources/openstack/containerservices/kuryr.png) **Kuryr**

```
import { Kuryr } from "diagrams-js/openstack/containerservices"
```

### openstack/deployment[​](#openstackdeployment "Direct link to openstack/deployment")

![Ansible](/resources/openstack/deployment/ansible.png) **Ansible**

```
import { Ansible } from "diagrams-js/openstack/deployment"
```

![Charms](/resources/openstack/deployment/charms.png) **Charms**

```
import { Charms } from "diagrams-js/openstack/deployment"
```

![Chef](/resources/openstack/deployment/chef.png) **Chef**

```
import { Chef } from "diagrams-js/openstack/deployment"
```

![Helm](/resources/openstack/deployment/helm.png) **Helm**

```
import { Helm } from "diagrams-js/openstack/deployment"
```

![Kolla](/resources/openstack/deployment/kolla.png) **Kolla**

```
import { Kolla } from "diagrams-js/openstack/deployment"
```

![Tripleo](/resources/openstack/deployment/tripleo.png) **Tripleo**

```
import { Tripleo } from "diagrams-js/openstack/deployment"
```

### openstack/frontend[​](#openstackfrontend "Direct link to openstack/frontend")

![Horizon](/resources/openstack/frontend/horizon.png) **Horizon**

```
import { Horizon } from "diagrams-js/openstack/frontend"
```

### openstack/monitoring[​](#openstackmonitoring "Direct link to openstack/monitoring")

![Monasca](/resources/openstack/monitoring/monasca.png) **Monasca**

```
import { Monasca } from "diagrams-js/openstack/monitoring"
```

![Telemetry](/resources/openstack/monitoring/telemetry.png) **Telemetry**

```
import { Telemetry } from "diagrams-js/openstack/monitoring"
```

### openstack/multiregion[​](#openstackmultiregion "Direct link to openstack/multiregion")

![Tricircle](/resources/openstack/multiregion/tricircle.png) **Tricircle**

```
import { Tricircle } from "diagrams-js/openstack/multiregion"
```

### openstack/networking[​](#openstacknetworking "Direct link to openstack/networking")

![Designate](/resources/openstack/networking/designate.png) **Designate**

```
import { Designate } from "diagrams-js/openstack/networking"
```

![Neutron](/resources/openstack/networking/neutron.png) **Neutron**

```
import { Neutron } from "diagrams-js/openstack/networking"
```

![Octavia](/resources/openstack/networking/octavia.png) **Octavia**

```
import { Octavia } from "diagrams-js/openstack/networking"
```

### openstack/nfv[​](#openstacknfv "Direct link to openstack/nfv")

![Tacker](/resources/openstack/nfv/tacker.png) **Tacker**

```
import { Tacker } from "diagrams-js/openstack/nfv"
```

### openstack/optimization[​](#openstackoptimization "Direct link to openstack/optimization")

![Congress](/resources/openstack/optimization/congress.png) **Congress**

```
import { Congress } from "diagrams-js/openstack/optimization"
```

![Rally](/resources/openstack/optimization/rally.png) **Rally**

```
import { Rally } from "diagrams-js/openstack/optimization"
```

![Vitrage](/resources/openstack/optimization/vitrage.png) **Vitrage**

```
import { Vitrage } from "diagrams-js/openstack/optimization"
```

![Watcher](/resources/openstack/optimization/watcher.png) **Watcher**

```
import { Watcher } from "diagrams-js/openstack/optimization"
```

### openstack/orchestration[​](#openstackorchestration "Direct link to openstack/orchestration")

![Blazar](/resources/openstack/orchestration/blazar.png) **Blazar**

```
import { Blazar } from "diagrams-js/openstack/orchestration"
```

![Heat](/resources/openstack/orchestration/heat.png) **Heat**

```
import { Heat } from "diagrams-js/openstack/orchestration"
```

![Mistral](/resources/openstack/orchestration/mistral.png) **Mistral**

```
import { Mistral } from "diagrams-js/openstack/orchestration"
```

![Senlin](/resources/openstack/orchestration/senlin.png) **Senlin**

```
import { Senlin } from "diagrams-js/openstack/orchestration"
```

![Zaqar](/resources/openstack/orchestration/zaqar.png) **Zaqar**

```
import { Zaqar } from "diagrams-js/openstack/orchestration"
```

### openstack/packaging[​](#openstackpackaging "Direct link to openstack/packaging")

![LOCI](/resources/openstack/packaging/loci.png) **LOCI**

```
import { LOCI } from "diagrams-js/openstack/packaging"
```

![Puppet](/resources/openstack/packaging/puppet.png) **Puppet**

```
import { Puppet } from "diagrams-js/openstack/packaging"
```

![RPM](/resources/openstack/packaging/rpm.png) **RPM**

```
import { RPM } from "diagrams-js/openstack/packaging"
```

### openstack/sharedservices[​](#openstacksharedservices "Direct link to openstack/sharedservices")

![Barbican](/resources/openstack/sharedservices/barbican.png) **Barbican**

```
import { Barbican } from "diagrams-js/openstack/sharedservices"
```

![Glance](/resources/openstack/sharedservices/glance.png) **Glance**

```
import { Glance } from "diagrams-js/openstack/sharedservices"
```

![Karbor](/resources/openstack/sharedservices/karbor.png) **Karbor**

```
import { Karbor } from "diagrams-js/openstack/sharedservices"
```

![Keystone](/resources/openstack/sharedservices/keystone.png) **Keystone**

```
import { Keystone } from "diagrams-js/openstack/sharedservices"
```

![Searchlight](/resources/openstack/sharedservices/searchlight.png) **Searchlight**

```
import { Searchlight } from "diagrams-js/openstack/sharedservices"
```

### openstack/storage[​](#openstackstorage "Direct link to openstack/storage")

![Cinder](/resources/openstack/storage/cinder.png) **Cinder**

```
import { Cinder } from "diagrams-js/openstack/storage"
```

![Manila](/resources/openstack/storage/manila.png) **Manila**

```
import { Manila } from "diagrams-js/openstack/storage"
```

![Swift](/resources/openstack/storage/swift.png) **Swift**

```
import { Swift } from "diagrams-js/openstack/storage"
```

### openstack/user[​](#openstackuser "Direct link to openstack/user")

![Openstackclient](/resources/openstack/user/openstackclient.png) **Openstackclient**

```
import { Openstackclient } from "diagrams-js/openstack/user"
```

### openstack/workloadprovisioning[​](#openstackworkloadprovisioning "Direct link to openstack/workloadprovisioning")

![Magnum](/resources/openstack/workloadprovisioning/magnum.png) **Magnum**

```
import { Magnum } from "diagrams-js/openstack/workloadprovisioning"
```

![Sahara](/resources/openstack/workloadprovisioning/sahara.png) **Sahara**

```
import { Sahara } from "diagrams-js/openstack/workloadprovisioning"
```

![Trove](/resources/openstack/workloadprovisioning/trove.png) **Trove**

```
import { Trove } from "diagrams-js/openstack/workloadprovisioning"
```


---

# Outscale

Node types list for the Outscale provider.

## Example Usage[​](#example-usage "Direct link to Example Usage")

```
import { Diagram } from "diagrams-js";
import { Compute, DirectConnect } from "diagrams-js/outscale/compute";
import { ClientVpn, InternetService, LoadBalancer } from "diagrams-js/outscale/network";

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

const node1 = diagram.add(Compute("Node 1"));
const node2 = diagram.add(ClientVpn("Node 2"));

node1.to(node2);

const svg = await diagram.render();
```

note

All node types available in the [Python diagrams library](https://diagrams.mingrammer.com/docs/nodes/outscale) are also available in diagrams-js with the same class names and structure.

## Node Reference[​](#node-reference "Direct link to Node Reference")

### outscale/compute[​](#outscalecompute "Direct link to outscale/compute")

![Compute](/resources/outscale/compute/compute.png) **Compute**

```
import { Compute } from "diagrams-js/outscale/compute"
```

![DirectConnect](/resources/outscale/compute/direct-connect.png) **DirectConnect**

```
import { DirectConnect } from "diagrams-js/outscale/compute"
```

### outscale/network[​](#outscalenetwork "Direct link to outscale/network")

![ClientVpn](/resources/outscale/network/client-vpn.png) **ClientVpn**

```
import { ClientVpn } from "diagrams-js/outscale/network"
```

![InternetService](/resources/outscale/network/internet-service.png) **InternetService**

```
import { InternetService } from "diagrams-js/outscale/network"
```

![LoadBalancer](/resources/outscale/network/load-balancer.png) **LoadBalancer**

```
import { LoadBalancer } from "diagrams-js/outscale/network"
```

![NatService](/resources/outscale/network/nat-service.png) **NatService**

```
import { NatService } from "diagrams-js/outscale/network"
```

![Net](/resources/outscale/network/net.png) **Net**

```
import { Net } from "diagrams-js/outscale/network"
```

![SiteToSiteVpng](/resources/outscale/network/site-to-site-vpng.png) **SiteToSiteVpng**

```
import { SiteToSiteVpng } from "diagrams-js/outscale/network"
```

### outscale/security[​](#outscalesecurity "Direct link to outscale/security")

![Firewall](/resources/outscale/security/firewall.png) **Firewall**

```
import { Firewall } from "diagrams-js/outscale/security"
```

![IdentityAndAccessManagement](/resources/outscale/security/identity-and-access-management.png) **IdentityAndAccessManagement**

```
import { IdentityAndAccessManagement } from "diagrams-js/outscale/security"
```

### outscale/storage[​](#outscalestorage "Direct link to outscale/storage")

![SimpleStorageService](/resources/outscale/storage/simple-storage-service.png) **SimpleStorageService**

```
import { SimpleStorageService } from "diagrams-js/outscale/storage"
```

![Storage](/resources/outscale/storage/storage.png) **Storage**

```
import { Storage } from "diagrams-js/outscale/storage"
```


---

# Programming

Node types list for the Programming provider.

## Example Usage[​](#example-usage "Direct link to Example Usage")

```
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();
```

note

All node types available in the [Python diagrams library](https://diagrams.mingrammer.com/docs/nodes/programming) are also available in diagrams-js with the same class names and structure.

## Node Reference[​](#node-reference "Direct link to Node Reference")

### programming/flowchart[​](#programmingflowchart "Direct link to programming/flowchart")

![Action](/resources/programming/flowchart/action.png) **Action**

```
import { Action } from "diagrams-js/programming/flowchart"
```

![Collate](/resources/programming/flowchart/collate.png) **Collate**

```
import { Collate } from "diagrams-js/programming/flowchart"
```

![Database](/resources/programming/flowchart/database.png) **Database**

```
import { Database } from "diagrams-js/programming/flowchart"
```

![Decision](/resources/programming/flowchart/decision.png) **Decision**

```
import { Decision } from "diagrams-js/programming/flowchart"
```

![Delay](/resources/programming/flowchart/delay.png) **Delay**

```
import { Delay } from "diagrams-js/programming/flowchart"
```

![Display](/resources/programming/flowchart/display.png) **Display**

```
import { Display } from "diagrams-js/programming/flowchart"
```

![Document](/resources/programming/flowchart/document.png) **Document**

```
import { Document } from "diagrams-js/programming/flowchart"
```

![InputOutput](/resources/programming/flowchart/input-output.png) **InputOutput**

```
import { InputOutput } from "diagrams-js/programming/flowchart"
```

![Inspection](/resources/programming/flowchart/inspection.png) **Inspection**

```
import { Inspection } from "diagrams-js/programming/flowchart"
```

![InternalStorage](/resources/programming/flowchart/internal-storage.png) **InternalStorage**

```
import { InternalStorage } from "diagrams-js/programming/flowchart"
```

![LoopLimit](/resources/programming/flowchart/loop-limit.png) **LoopLimit**

```
import { LoopLimit } from "diagrams-js/programming/flowchart"
```

![ManualInput](/resources/programming/flowchart/manual-input.png) **ManualInput**

```
import { ManualInput } from "diagrams-js/programming/flowchart"
```

![ManualLoop](/resources/programming/flowchart/manual-loop.png) **ManualLoop**

```
import { ManualLoop } from "diagrams-js/programming/flowchart"
```

![Merge](/resources/programming/flowchart/merge.png) **Merge**

```
import { Merge } from "diagrams-js/programming/flowchart"
```

![MultipleDocuments](/resources/programming/flowchart/multiple-documents.png) **MultipleDocuments**

```
import { MultipleDocuments } from "diagrams-js/programming/flowchart"
```

![OffPageConnectorLeft](/resources/programming/flowchart/off-page-connector-left.png) **OffPageConnectorLeft**

```
import { OffPageConnectorLeft } from "diagrams-js/programming/flowchart"
```

![OffPageConnectorRight](/resources/programming/flowchart/off-page-connector-right.png) **OffPageConnectorRight**

```
import { OffPageConnectorRight } from "diagrams-js/programming/flowchart"
```

![Or](/resources/programming/flowchart/or.png) **Or**

```
import { Or } from "diagrams-js/programming/flowchart"
```

![PredefinedProcess](/resources/programming/flowchart/predefined-process.png) **PredefinedProcess**

```
import { PredefinedProcess } from "diagrams-js/programming/flowchart"
```

![Preparation](/resources/programming/flowchart/preparation.png) **Preparation**

```
import { Preparation } from "diagrams-js/programming/flowchart"
```

![Sort](/resources/programming/flowchart/sort.png) **Sort**

```
import { Sort } from "diagrams-js/programming/flowchart"
```

![StartEnd](/resources/programming/flowchart/start-end.png) **StartEnd**

```
import { StartEnd } from "diagrams-js/programming/flowchart"
```

![StoredData](/resources/programming/flowchart/stored-data.png) **StoredData**

```
import { StoredData } from "diagrams-js/programming/flowchart"
```

![SummingJunction](/resources/programming/flowchart/summing-junction.png) **SummingJunction**

```
import { SummingJunction } from "diagrams-js/programming/flowchart"
```

### programming/framework[​](#programmingframework "Direct link to programming/framework")

![Angular](/resources/programming/framework/angular.png) **Angular**

```
import { Angular } from "diagrams-js/programming/framework"
```

![Backbone](/resources/programming/framework/backbone.png) **Backbone**

```
import { Backbone } from "diagrams-js/programming/framework"
```

![Camel](/resources/programming/framework/camel.png) **Camel**

```
import { Camel } from "diagrams-js/programming/framework"
```

![Django](/resources/programming/framework/django.png) **Django**

```
import { Django } from "diagrams-js/programming/framework"
```

![Dotnet](/resources/programming/framework/dotnet.png) **Dotnet**

```
import { Dotnet } from "diagrams-js/programming/framework"
```

![Ember](/resources/programming/framework/ember.png) **Ember**

```
import { Ember } from "diagrams-js/programming/framework"
```

![Fastapi](/resources/programming/framework/fastapi.png) **Fastapi**

```
import { Fastapi } from "diagrams-js/programming/framework"
```

![Flask](/resources/programming/framework/flask.png) **Flask**

```
import { Flask } from "diagrams-js/programming/framework"
```

![Flutter](/resources/programming/framework/flutter.png) **Flutter**

```
import { Flutter } from "diagrams-js/programming/framework"
```

![Graphql](/resources/programming/framework/graphql.png) **Graphql**

```
import { Graphql } from "diagrams-js/programming/framework"
```

![Hibernate](/resources/programming/framework/hibernate.png) **Hibernate**

```
import { Hibernate } from "diagrams-js/programming/framework"
```

![Jhipster](/resources/programming/framework/jhipster.png) **Jhipster**

```
import { Jhipster } from "diagrams-js/programming/framework"
```

![Laravel](/resources/programming/framework/laravel.png) **Laravel**

```
import { Laravel } from "diagrams-js/programming/framework"
```

![Micronaut](/resources/programming/framework/micronaut.png) **Micronaut**

```
import { Micronaut } from "diagrams-js/programming/framework"
```

![Nextjs](/resources/programming/framework/nextjs.png) **Nextjs**

```
import { Nextjs } from "diagrams-js/programming/framework"
```

![Phoenix](/resources/programming/framework/phoenix.png) **Phoenix**

```
import { Phoenix } from "diagrams-js/programming/framework"
```

![Quarkus](/resources/programming/framework/quarkus.png) **Quarkus**

```
import { Quarkus } from "diagrams-js/programming/framework"
```

![Rails](/resources/programming/framework/rails.png) **Rails**

```
import { Rails } from "diagrams-js/programming/framework"
```

![React](/resources/programming/framework/react.png) **React**

```
import { React } from "diagrams-js/programming/framework"
```

![Spring](/resources/programming/framework/spring.png) **Spring**

```
import { Spring } from "diagrams-js/programming/framework"
```

![Sqlpage](/resources/programming/framework/sqlpage.png) **Sqlpage**

```
import { Sqlpage } from "diagrams-js/programming/framework"
```

![Starlette](/resources/programming/framework/starlette.png) **Starlette**

```
import { Starlette } from "diagrams-js/programming/framework"
```

![Svelte](/resources/programming/framework/svelte.png) **Svelte**

```
import { Svelte } from "diagrams-js/programming/framework"
```

![Vercel](/resources/programming/framework/vercel.png) **Vercel**

```
import { Vercel } from "diagrams-js/programming/framework"
```

![Vue](/resources/programming/framework/vue.png) **Vue**

```
import { Vue } from "diagrams-js/programming/framework"
```

### programming/language[​](#programminglanguage "Direct link to programming/language")

![Bash](/resources/programming/language/bash.png) **Bash**

```
import { Bash } from "diagrams-js/programming/language"
```

![C](/resources/programming/language/c.png) **C**

```
import { C } from "diagrams-js/programming/language"
```

![Cpp](/resources/programming/language/cpp.png) **Cpp**

```
import { Cpp } from "diagrams-js/programming/language"
```

![Csharp](/resources/programming/language/csharp.png) **Csharp**

```
import { Csharp } from "diagrams-js/programming/language"
```

![Dart](/resources/programming/language/dart.png) **Dart**

```
import { Dart } from "diagrams-js/programming/language"
```

![Elixir](/resources/programming/language/elixir.png) **Elixir**

```
import { Elixir } from "diagrams-js/programming/language"
```

![Erlang](/resources/programming/language/erlang.png) **Erlang**

```
import { Erlang } from "diagrams-js/programming/language"
```

![Go](/resources/programming/language/go.png) **Go**

```
import { Go } from "diagrams-js/programming/language"
```

![Java](/resources/programming/language/java.png) **Java**

```
import { Java } from "diagrams-js/programming/language"
```

![Javascript](/resources/programming/language/javascript.png) **Javascript**

```
import { Javascript } from "diagrams-js/programming/language"
```

![Kotlin](/resources/programming/language/kotlin.png) **Kotlin**

```
import { Kotlin } from "diagrams-js/programming/language"
```

![Latex](/resources/programming/language/latex.png) **Latex**

```
import { Latex } from "diagrams-js/programming/language"
```

![Matlab](/resources/programming/language/matlab.png) **Matlab**

```
import { Matlab } from "diagrams-js/programming/language"
```

![Nodejs](/resources/programming/language/nodejs.png) **Nodejs**

```
import { Nodejs } from "diagrams-js/programming/language"
```

![Php](/resources/programming/language/php.png) **Php**

```
import { Php } from "diagrams-js/programming/language"
```

![Python](/resources/programming/language/python.png) **Python**

```
import { Python } from "diagrams-js/programming/language"
```

![R](/resources/programming/language/r.png) **R**

```
import { R } from "diagrams-js/programming/language"
```

![Ruby](/resources/programming/language/ruby.png) **Ruby**

```
import { Ruby } from "diagrams-js/programming/language"
```

![Rust](/resources/programming/language/rust.png) **Rust**

```
import { Rust } from "diagrams-js/programming/language"
```

![Scala](/resources/programming/language/scala.png) **Scala**

```
import { Scala } from "diagrams-js/programming/language"
```

![Sql](/resources/programming/language/sql.png) **Sql**

```
import { Sql } from "diagrams-js/programming/language"
```

![Swift](/resources/programming/language/swift.png) **Swift**

```
import { Swift } from "diagrams-js/programming/language"
```

![Typescript](/resources/programming/language/typescript.png) **Typescript**

```
import { Typescript } from "diagrams-js/programming/language"
```

### programming/runtime[​](#programmingruntime "Direct link to programming/runtime")

![Dapr](/resources/programming/runtime/dapr.png) **Dapr**

```
import { Dapr } from "diagrams-js/programming/runtime"
```


---

# SaaS

Node types list for the SaaS provider.

## Example Usage[​](#example-usage "Direct link to Example Usage")

```
import { Diagram } from "diagrams-js";
import { Newrelic, Opsgenie, Pagerduty } from "diagrams-js/saas/alerting";
import { Dataform, Snowflake, Stitch } from "diagrams-js/saas/analytics";

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

const node1 = diagram.add(Newrelic("Node 1"));
const node2 = diagram.add(Dataform("Node 2"));

node1.to(node2);

const svg = await diagram.render();
```

note

All node types available in the [Python diagrams library](https://diagrams.mingrammer.com/docs/nodes/saas) are also available in diagrams-js with the same class names and structure.

## Node Reference[​](#node-reference "Direct link to Node Reference")

### saas/alerting[​](#saasalerting "Direct link to saas/alerting")

![Newrelic](/resources/saas/alerting/newrelic.png) **Newrelic**

```
import { Newrelic } from "diagrams-js/saas/alerting"
```

![Opsgenie](/resources/saas/alerting/opsgenie.png) **Opsgenie**

```
import { Opsgenie } from "diagrams-js/saas/alerting"
```

![Pagerduty](/resources/saas/alerting/pagerduty.png) **Pagerduty**

```
import { Pagerduty } from "diagrams-js/saas/alerting"
```

![Pushover](/resources/saas/alerting/pushover.png) **Pushover**

```
import { Pushover } from "diagrams-js/saas/alerting"
```

![Xmatters](/resources/saas/alerting/xmatters.png) **Xmatters**

```
import { Xmatters } from "diagrams-js/saas/alerting"
```

### saas/analytics[​](#saasanalytics "Direct link to saas/analytics")

![Dataform](/resources/saas/analytics/dataform.png) **Dataform**

```
import { Dataform } from "diagrams-js/saas/analytics"
```

![Snowflake](/resources/saas/analytics/snowflake.png) **Snowflake**

```
import { Snowflake } from "diagrams-js/saas/analytics"
```

![Stitch](/resources/saas/analytics/stitch.png) **Stitch**

```
import { Stitch } from "diagrams-js/saas/analytics"
```

### saas/automation[​](#saasautomation "Direct link to saas/automation")

![N8n](/resources/saas/automation/n8n.png) **N8n**

```
import { N8n } from "diagrams-js/saas/automation"
```

### saas/cdn[​](#saascdn "Direct link to saas/cdn")

![Akamai](/resources/saas/cdn/akamai.png) **Akamai**

```
import { Akamai } from "diagrams-js/saas/cdn"
```

![Cloudflare](/resources/saas/cdn/cloudflare.png) **Cloudflare**

```
import { Cloudflare } from "diagrams-js/saas/cdn"
```

![Fastly](/resources/saas/cdn/fastly.png) **Fastly**

```
import { Fastly } from "diagrams-js/saas/cdn"
```

![Imperva](/resources/saas/cdn/imperva.png) **Imperva**

```
import { Imperva } from "diagrams-js/saas/cdn"
```

### saas/chat[​](#saaschat "Direct link to saas/chat")

![Discord](/resources/saas/chat/discord.png) **Discord**

```
import { Discord } from "diagrams-js/saas/chat"
```

![Line](/resources/saas/chat/line.png) **Line**

```
import { Line } from "diagrams-js/saas/chat"
```

![Mattermost](/resources/saas/chat/mattermost.png) **Mattermost**

```
import { Mattermost } from "diagrams-js/saas/chat"
```

![Messenger](/resources/saas/chat/messenger.png) **Messenger**

```
import { Messenger } from "diagrams-js/saas/chat"
```

![RocketChat](/resources/saas/chat/rocket-chat.png) **RocketChat**

```
import { RocketChat } from "diagrams-js/saas/chat"
```

![Slack](/resources/saas/chat/slack.png) **Slack**

```
import { Slack } from "diagrams-js/saas/chat"
```

![Teams](/resources/saas/chat/teams.png) **Teams**

```
import { Teams } from "diagrams-js/saas/chat"
```

![Telegram](/resources/saas/chat/telegram.png) **Telegram**

```
import { Telegram } from "diagrams-js/saas/chat"
```

### saas/communication[​](#saascommunication "Direct link to saas/communication")

![Twilio](/resources/saas/communication/twilio.png) **Twilio**

```
import { Twilio } from "diagrams-js/saas/communication"
```

### saas/crm[​](#saascrm "Direct link to saas/crm")

![Intercom](/resources/saas/crm/intercom.png) **Intercom**

```
import { Intercom } from "diagrams-js/saas/crm"
```

![Zendesk](/resources/saas/crm/zendesk.png) **Zendesk**

```
import { Zendesk } from "diagrams-js/saas/crm"
```

### saas/filesharing[​](#saasfilesharing "Direct link to saas/filesharing")

![Nextcloud](/resources/saas/filesharing/nextcloud.png) **Nextcloud**

```
import { Nextcloud } from "diagrams-js/saas/filesharing"
```

### saas/identity[​](#saasidentity "Direct link to saas/identity")

![Auth0](/resources/saas/identity/auth0.png) **Auth0**

```
import { Auth0 } from "diagrams-js/saas/identity"
```

![Okta](/resources/saas/identity/okta.png) **Okta**

```
import { Okta } from "diagrams-js/saas/identity"
```

### saas/logging[​](#saaslogging "Direct link to saas/logging")

![Datadog](/resources/saas/logging/datadog.png) **Datadog**

```
import { Datadog } from "diagrams-js/saas/logging"
```

![Newrelic](/resources/saas/logging/newrelic.png) **Newrelic**

```
import { Newrelic } from "diagrams-js/saas/logging"
```

![Papertrail](/resources/saas/logging/papertrail.png) **Papertrail**

```
import { Papertrail } from "diagrams-js/saas/logging"
```

### saas/media[​](#saasmedia "Direct link to saas/media")

![Cloudinary](/resources/saas/media/cloudinary.png) **Cloudinary**

```
import { Cloudinary } from "diagrams-js/saas/media"
```

### saas/payment[​](#saaspayment "Direct link to saas/payment")

![Adyen](/resources/saas/payment/adyen.png) **Adyen**

```
import { Adyen } from "diagrams-js/saas/payment"
```

![AmazonPay](/resources/saas/payment/amazon-pay.png) **AmazonPay**

```
import { AmazonPay } from "diagrams-js/saas/payment"
```

![Paypal](/resources/saas/payment/paypal.png) **Paypal**

```
import { Paypal } from "diagrams-js/saas/payment"
```

![Stripe](/resources/saas/payment/stripe.png) **Stripe**

```
import { Stripe } from "diagrams-js/saas/payment"
```

### saas/recommendation[​](#saasrecommendation "Direct link to saas/recommendation")

![Recombee](/resources/saas/recommendation/recombee.png) **Recombee**

```
import { Recombee } from "diagrams-js/saas/recommendation"
```

### saas/security[​](#saassecurity "Direct link to saas/security")

![Crowdstrike](/resources/saas/security/crowdstrike.png) **Crowdstrike**

```
import { Crowdstrike } from "diagrams-js/saas/security"
```

![Sonarqube](/resources/saas/security/sonarqube.png) **Sonarqube**

```
import { Sonarqube } from "diagrams-js/saas/security"
```

### saas/social[​](#saassocial "Direct link to saas/social")

![Facebook](/resources/saas/social/facebook.png) **Facebook**

```
import { Facebook } from "diagrams-js/saas/social"
```

![Twitter](/resources/saas/social/twitter.png) **Twitter**

```
import { Twitter } from "diagrams-js/saas/social"
```


---

# Docker Compose Plugin

**(Experimental!)**

The Docker Compose plugin enables bidirectional conversion between Docker Compose YAML files and architecture diagrams. Visualize your container orchestration setups or generate deployment configurations from diagrams.

## Installation[​](#installation "Direct link to Installation")

```
npm install @diagrams-js/plugin-docker-compose
```

## Quick Start[​](#quick-start "Direct link to Quick Start")

### Import from Docker Compose[​](#import-from-docker-compose "Direct link to Import from Docker Compose")

```
import { Diagram } from "diagrams-js";
import { dockerComposePlugin } from "@diagrams-js/plugin-docker-compose";

const diagram = Diagram("E-commerce Application");

// Register the plugin instance
await diagram.registerPlugins([dockerComposePlugin]);

// Import from Docker Compose YAML
const composeYaml = `
version: "3.8"
name: ecommerce-app
services:
  frontend:
    image: nginx:alpine
    ports:
      - "80:80"
    depends_on:
      - api

  api:
    image: node:18
    ports:
      - "3000:3000"
    depends_on:
      - db
      - cache

  db:
    image: postgres:15
    environment:
      POSTGRES_DB: ecommerce
    volumes:
      - pgdata:/var/lib/postgresql/data

  cache:
    image: redis:7-alpine

volumes:
  pgdata:
`;

await diagram.import(composeYaml, "docker-compose");

// Render the diagram
const svg = await diagram.render();
```

![Docker Compose Plugin Example](/examples/ecommerce-app.svg)

### Export to Docker Compose[​](#export-to-docker-compose "Direct link to Export to Docker Compose")

```
import { Diagram, Node } from "diagrams-js";
import { dockerComposePlugin } from "@diagrams-js/plugin-docker-compose";

const diagram = Diagram("My Application");

// Create nodes with Docker Compose metadata
const web = diagram.add(Node("web"));
web.metadata = {
  compose: {
    image: "nginx:latest",
    ports: ["80:80"],
  },
};

const db = diagram.add(Node("db"));
db.metadata = {
  compose: {
    image: "postgres:13",
    environment: { POSTGRES_DB: "mydb" },
  },
};

// Create dependency
web.from(db);

// Register plugin and export
await diagram.registerPlugins([dockerComposePlugin]);
const composeYaml = await diagram.export("docker-compose");

console.log(composeYaml);
```

## Features[​](#features "Direct link to Features")

### Import Capabilities[​](#import-capabilities "Direct link to Import Capabilities")

* **Parse Docker Compose YAML files** - Supports Docker Compose specification
* **Smart icon mapping** - Automatically maps Docker images to appropriate provider icons
* **Cluster organization** - Each compose project gets its own cluster
* **Dependency visualization** - Creates edges for `depends_on` relationships
* **Network and volume support** - Visualizes networks and volumes as separate nodes
* **Multi-file import** - Import multiple compose files into separate clusters

### Export Capabilities[​](#export-capabilities "Direct link to Export Capabilities")

* **Generate valid Docker Compose files** - Exports to standard Docker Compose YAML
* **Service configuration** - Includes image, ports, environment, volumes, etc.
* **Dependency reconstruction** - Rebuilds `depends_on` from diagram edges
* **Network and volume export** - Includes networks and volumes in output

## Image to Icon Mapping[​](#image-to-icon-mapping "Direct link to Image to Icon Mapping")

The plugin automatically recognizes common Docker images and maps them to appropriate provider icons.

Images that don't match any pattern use a generic container icon.

## Configuration[​](#configuration "Direct link to Configuration")

### Custom Image Mappings[​](#custom-image-mappings "Direct link to Custom Image Mappings")

You can customize which icons are used for specific Docker images. The plugin supports multiple mapping formats and checks them in this priority order:

1. **Service name** (e.g., `my-custom-api`) - takes precedence
2. **Image name** (e.g., `nginx`, `postgres`) - fallback

```
import { Diagram } from "diagrams-js";
import { createDockerComposePlugin } from "@diagrams-js/plugin-docker-compose";

const diagram = Diagram("My Application");

// Create plugin with custom image mappings
const plugin = createDockerComposePlugin({
  imageMappings: {
    // 1. Provider icon mapping - use built-in provider icons
    "my-custom-api": {
      provider: "onprem",
      type: "compute",
      resource: "Server",
    },
    "company-db": {
      provider: "onprem",
      type: "database",
      resource: "Postgresql",
    },

    // 2. Direct URL string - use a custom image URL
    "my-frontend": "https://example.com/react-icon.png",

    // 3. URL object - same as string but as object
    "my-backend": {
      url: "https://example.com/node-icon.svg",
    },

    // 4. Iconify icon - use icons from Iconify (https://iconify.design/)
    // Format: { iconify: "prefix:name" }
    "docker-service": {
      iconify: "logos:docker",
    },
    "aws-service": {
      iconify: "logos:aws",
    },
    kubernetes: {
      iconify: "logos:kubernetes",
    },
  },
});

await diagram.registerPlugins([plugin]);
```

#### Iconify Icons[​](#iconify-icons "Direct link to Iconify Icons")

The plugin supports [Iconify](https://iconify.design/) icons, which provides access to 200,000+ open source icons. Use the `{ iconify: "prefix:name" }` format:

* Browse icons at <https://icon-sets.iconify.design/>

* Common prefixes: `logos:` (technology logos), `mdi:` (Material Design), `fluent-emoji:` (emoji)

* Examples:

  <!-- -->

  * `{ iconify: "logos:docker" }` - Docker logo
  * `{ iconify: "logos:aws" }` - AWS logo
  * `{ iconify: "mdi:server" }` - Server icon
  * `{ iconify: "logos:kubernetes" }` - Kubernetes logo

Icons are automatically fetched from the Iconify API and embedded in the diagram.

#### Mapping Priority[​](#mapping-priority "Direct link to Mapping Priority")

The plugin first checks for a mapping by the **service name**, then falls back to the **image name**:

```
# docker-compose.yml
services:
  my-api:
    image: nginx:latest # Would normally show nginx icon
```

```
// This mapping by SERVICE NAME takes precedence
imageMappings: {
  "my-api": { iconify: "logos:aws" }  // Shows AWS icon instead of nginx
}

// This mapping by IMAGE NAME is the fallback
imageMappings: {
  "nginx": { iconify: "logos:nginx" }  // Used only if no "my-api" mapping
}
```

## Examples[​](#examples "Direct link to Examples")

### Visualize a Microservices Architecture[​](#visualize-a-microservices-architecture "Direct link to Visualize a Microservices Architecture")

```
import { Diagram } from "diagrams-js";
import { dockerComposePlugin } from "@diagrams-js/plugin-docker-compose";

const composeYaml = `
version: "3.8"
name: ecommerce-app
services:
  frontend:
    image: nginx:alpine
    ports:
      - "80:80"
    depends_on:
      - api

  api:
    image: node:18
    ports:
      - "3000:3000"
    depends_on:
      - db
      - cache

  db:
    image: postgres:15
    environment:
      POSTGRES_DB: ecommerce
    volumes:
      - pgdata:/var/lib/postgresql/data

  cache:
    image: redis:7-alpine

volumes:
  pgdata:
`;

const diagram = Diagram("E-commerce Application");
await diagram.registerPlugins([dockerComposePlugin]);
await diagram.import(composeYaml, "docker-compose");

const svg = await diagram.render();
```

### Import Multiple Compose Files[​](#import-multiple-compose-files "Direct link to Import Multiple Compose Files")

Compare staging and production configurations:

```
const stagingCompose = `
name: staging-environment
services:
  web:
    image: nginx:alpine
  api:
    image: myapp:staging
`;

const productionCompose = `
name: production-environment
services:
  web:
    image: nginx:latest
    ports:
      - "80:80"
      - "443:443"
  api:
    image: myapp:latest
    replicas: 3
`;

const diagram = Diagram("Environment Comparison");
await diagram.registerPlugins([dockerComposePlugin]);

// Each compose file gets its own cluster
await diagram.import([stagingCompose, productionCompose], "docker-compose");
```

### Export with Custom Metadata[​](#export-with-custom-metadata "Direct link to Export with Custom Metadata")

```
import { Diagram, Node } from "diagrams-js";
import { dockerComposePlugin } from "@diagrams-js/plugin-docker-compose";

const diagram = Diagram("Production Stack");

const web = diagram.add(Node("web"));
web.metadata = {
  compose: {
    image: "nginx:latest",
    ports: ["80:80", "443:443"],
    restart: "always",
    labels: {
      "app": "web",
      "env": "production"
    }
  },
};

const api = diagram.add(Node("api"));
api.metadata = {
  compose: {
    image: "myapp:latest",
    environment: {
      NODE_ENV: "production",
      LOG_LEVEL: "info"
    },
    deploy: {
      replicas: 3,
      resources: {
        limits: {
          cpus: '0.5',
          memory: 512M
        }
      }
    }
  },
};

await diagram.registerPlugins([dockerComposePlugin]);
const compose = await diagram.export("docker-compose");
```

### Round-trip Conversion[​](#round-trip-conversion "Direct link to Round-trip Conversion")

Import a compose file, modify it, then export back:

```
const diagram = Diagram("Modified Stack");
await diagram.registerPlugins([dockerComposePlugin]);

// Import existing compose file
await diagram.import(existingComposeYaml, "docker-compose");

// Add a new service
const monitoring = diagram.add(Node("monitoring"));
monitoring.metadata = {
  compose: {
    image: "prometheus:latest",
    ports: ["9090:9090"],
  },
};

// Connect to existing services
const json = diagram.toJSON();
const webNode = json.nodes.find((n) => n.label === "web");
if (webNode) {
  monitoring.to(webNode as Node);
}

// Export modified configuration
const updatedCompose = await diagram.export("docker-compose");
```

## API Reference[​](#api-reference "Direct link to API Reference")

### `dockerComposePlugin`[​](#dockercomposeplugin "Direct link to dockercomposeplugin")

A pre-created plugin instance without configuration. This is the recommended way to use the plugin when you don't need custom configuration.

```
import { dockerComposePlugin } from "@diagrams-js/plugin-docker-compose";

// ✅ Use the pre-created instance
await diagram.registerPlugins([dockerComposePlugin]);
```

### `createDockerComposePlugin(config?)`[​](#createdockercomposepluginconfig "Direct link to createdockercomposepluginconfig")

Factory function for creating a Docker Compose plugin with custom configuration. Use this when you need to customize the plugin behavior.

```
import { createDockerComposePlugin } from "@diagrams-js/plugin-docker-compose";

// ✅ Create plugin with custom configuration
const customPlugin = createDockerComposePlugin({
  defaultVersion: "3.9",
});

await diagram.registerPlugins([customPlugin]);
```

**Parameters:**

* `config` (optional): `DockerComposePluginConfig`

  * `defaultVersion`: Default Docker Compose version for exports (default: "3.8")
  * `imageMappings`: Custom image to icon mappings (see [Configuration](#configuration) section)

**Returns:** `DiagramsPlugin` - The plugin instance

**Complete Example with All Mapping Types:**

```
const plugin = createDockerComposePlugin({
  defaultVersion: "3.9",
  imageMappings: {
    // Provider icons - use built-in diagrams-js icons
    "my-api": { provider: "onprem", type: "compute", resource: "Server" },
    "my-db": { provider: "onprem", type: "database", resource: "Postgresql" },

    // Custom URL - use any image URL
    frontend: "https://example.com/react.png",
    backend: { url: "https://example.com/node.svg" },

    // Iconify icons - 200,000+ icons available
    docker: { iconify: "logos:docker" },
    k8s: { iconify: "logos:kubernetes" },
    github: { iconify: "logos:github" },
  },
});

await diagram.registerPlugins([plugin]);
```

### Plugin Capabilities[​](#plugin-capabilities "Direct link to Plugin Capabilities")

The plugin provides two capabilities:

#### Importer[​](#importer "Direct link to Importer")

* **Name:** `docker-compose`
* **Extensions:** `.yml`, `.yaml`
* **MIME Types:** `text/yaml`, `application/x-yaml`

#### Exporter[​](#exporter "Direct link to Exporter")

* **Name:** `docker-compose`
* **Extension:** `.yml`
* **MIME Type:** `text/yaml`

### Exported Types[​](#exported-types "Direct link to Exported Types")

The plugin exports the `ImageMappings` type for TypeScript users:

```
import { createDockerComposePlugin, type ImageMappings } from "@diagrams-js/plugin-docker-compose";

// Type your image mappings for better IDE support and type checking
const mappings: ImageMappings = {
  "my-api": { provider: "onprem", type: "compute", resource: "Server" },
  "my-app": { iconify: "logos:docker" },
  "custom-service": "https://example.com/icon.svg",
};

const plugin = createDockerComposePlugin({
  imageMappings: mappings,
});
```

## Best Practices[​](#best-practices "Direct link to Best Practices")

### 1. Use Descriptive Service Names[​](#1-use-descriptive-service-names "Direct link to 1. Use Descriptive Service Names")

Service names become node labels, so use clear, descriptive names:

```
# ✅ Good
services:
  user-service:
    image: myapp/users:latest

# ❌ Avoid
services:
  svc1:
    image: myapp/users:latest
```

### 2. Store Metadata for Round-trip[​](#2-store-metadata-for-round-trip "Direct link to 2. Store Metadata for Round-trip")

When creating nodes programmatically, store compose metadata to enable export:

```
const node = diagram.add(Node("my-service"));
node.metadata = {
  compose: {
    image: "my-image:latest",
    ports: ["8080:80"],
    environment: { NODE_ENV: "production" },
  },
};
```

### 3. Handle Dependencies[​](#3-handle-dependencies "Direct link to 3. Handle Dependencies")

Use `depends_on` in compose or `.from()` / `.to()` in diagrams-js to create edges:

```
# In Docker Compose
services:
  web:
    depends_on:
      - db
```

```
// In diagrams-js
web.to(db);
```

### 4. Version Your Compose Files[​](#4-version-your-compose-files "Direct link to 4. Version Your Compose Files")

Always include a version in your Docker Compose files for better compatibility:

```
version: "3.8"
services:
  # ...
```

### 5. Use Named Volumes[​](#5-use-named-volumes "Direct link to 5. Use Named Volumes")

Named volumes are easier to visualize and manage:

```
# ✅ Good
services:
  db:
    volumes:
      - pgdata:/var/lib/postgresql/data

volumes:
  pgdata:

# ❌ Avoid
services:
  db:
    volumes:
      - /host/path:/container/path
```

## Troubleshooting[​](#troubleshooting "Direct link to Troubleshooting")

### Plugin Not Found[​](#plugin-not-found "Direct link to Plugin Not Found")

Make sure to register the plugin before using import/export:

```
// ✅ Correct order
await diagram.registerPlugins([dockerComposePlugin]);
await diagram.import(composeYaml, "docker-compose");

// ❌ Wrong order
await diagram.import(composeYaml, "docker-compose"); // Will fail!
await diagram.registerPlugins([dockerComposePlugin]);
```

### Type Errors with Metadata[​](#type-errors-with-metadata "Direct link to Type Errors with Metadata")

The metadata property is now typed as `Record<string, any>`, so you can access it directly without type assertions:

```
node.metadata = {
  compose: { ... }
};
```

### Missing Icons[​](#missing-icons "Direct link to Missing Icons")

The plugin maps common images to provider icons. If your image isn't recognized:

1. Check if it matches one of the patterns in the mapping table
2. The plugin will use a generic container icon for unrecognized images
3. Use custom image mappings to specify icons:

```
const plugin = createDockerComposePlugin({
  imageMappings: {
    // Option 1: Use a provider icon
    "my-service": { provider: "onprem", type: "compute", resource: "Server" },

    // Option 2: Use a custom image URL
    "my-app": "https://example.com/icon.svg",

    // Option 3: Use Iconify (200,000+ icons!)
    "custom-app": { iconify: "logos:my-icon" },
  },
});
```

4. You can also manually set icons using provider nodes if needed

### Import Fails[​](#import-fails "Direct link to Import Fails")

Ensure your Docker Compose file is valid YAML:

```
// Validate before importing
try {
  await diagram.import(composeYaml, "docker-compose");
} catch (error) {
  console.error("Import failed:", error.message);
}
```

## Runtime Support[​](#runtime-support "Direct link to Runtime Support")

The Docker Compose plugin supports all diagrams-js runtimes:

* **Browser** ✅
* **Node.js** ✅
* **Deno** ✅
* **Bun** ✅

## Further Reading[​](#further-reading "Direct link to Further Reading")

* [Plugin System Overview](/docs/plugins/overview) - Learn about the diagrams-js plugin system
* [Docker Compose Documentation](https://docs.docker.com/compose/) - Official Docker Compose docs


---

# Kubernetes Plugin

**(Experimental!)**

The Kubernetes plugin enables bidirectional conversion between Kubernetes YAML manifests and architecture diagrams. Visualize your container orchestration setups or generate Kubernetes deployment configurations from diagrams.

## Installation[​](#installation "Direct link to Installation")

```
npm install @diagrams-js/plugin-kubernetes
```

## Quick Start[​](#quick-start "Direct link to Quick Start")

### Import from Kubernetes YAML[​](#import-from-kubernetes-yaml "Direct link to Import from Kubernetes YAML")

```
import { Diagram } from "diagrams-js";
import { kubernetesPlugin } from "@diagrams-js/plugin-kubernetes";

const diagram = Diagram("My K8s Application");

// Register the plugin instance
await diagram.registerPlugins([kubernetesPlugin]);

// Import from Kubernetes YAML
const k8sYaml = `
apiVersion: apps/v1
kind: Deployment
metadata:
  name: web-deployment
  namespace: default
spec:
  replicas: 3
  selector:
    matchLabels:
      app: web
  template:
    spec:
      containers:
      - name: web
        image: nginx:latest
        ports:
        - containerPort: 80
---
apiVersion: v1
kind: Service
metadata:
  name: web-service
  namespace: default
spec:
  selector:
    app: web
  ports:
  - port: 80
    targetPort: 80
`;

await diagram.import(k8sYaml, "kubernetes");

// Render the diagram
const svg = await diagram.render();
```

![Kubernetes Plugin Example](/examples/k8s-app.svg)

### Export to Kubernetes YAML[​](#export-to-kubernetes-yaml "Direct link to Export to Kubernetes YAML")

```
import { Diagram, Node } from "diagrams-js";
import { kubernetesPlugin } from "@diagrams-js/plugin-kubernetes";

const diagram = Diagram("My K8s Application");

// Create nodes with Kubernetes metadata
const deployment = diagram.add(Node("web-deployment"));
deployment.metadata = {
  kubernetes: {
    kind: "Deployment",
    namespace: "default",
    spec: {
      replicas: 3,
      selector: { matchLabels: { app: "web" } },
      template: {
        spec: {
          containers: [
            {
              name: "web",
              image: "nginx:latest",
              ports: [{ containerPort: 80 }],
            },
          ],
        },
      },
    },
  },
};

const service = diagram.add(Node("web-service"));
service.metadata = {
  kubernetes: {
    kind: "Service",
    namespace: "default",
    spec: {
      selector: { app: "web" },
      ports: [{ port: 80 }],
    },
  },
};

// Create relationship
service.to(deployment);

// Register plugin and export
await diagram.registerPlugins([kubernetesPlugin]);
const k8sYaml = await diagram.export("kubernetes");

console.log(k8sYaml);
```

## Features[​](#features "Direct link to Features")

### Import Capabilities[​](#import-capabilities "Direct link to Import Capabilities")

* **Parse Kubernetes YAML manifests** - Supports single and multi-document YAML
* **Smart icon mapping** - Automatically maps Kubernetes resources to appropriate provider icons
* **Cluster organization** - Groups resources by namespace into clusters
* **Service selector visualization** - Creates edges for service-to-deployment relationships
* **Container visualization** - Creates child nodes for containers within deployments
* **Multi-file import** - Import multiple manifest files into separate clusters

### Supported Resource Types[​](#supported-resource-types "Direct link to Supported Resource Types")

The plugin supports all major Kubernetes resource types:

**Workloads:**

* Deployment
* StatefulSet
* DaemonSet
* ReplicaSet
* Pod
* Job
* CronJob

**Services & Networking:**

* Service
* Ingress
* NetworkPolicy

**Storage:**

* ConfigMap
* Secret
* PersistentVolume
* PersistentVolumeClaim
* StorageClass

**RBAC:**

* Role
* RoleBinding
* ClusterRole
* ClusterRoleBinding
* ServiceAccount

**Cluster:**

* Namespace
* Node
* HorizontalPodAutoscaler

### Export Capabilities[​](#export-capabilities "Direct link to Export Capabilities")

* **Generate valid Kubernetes manifests** - Exports to standard Kubernetes YAML
* **Resource configuration** - Includes replicas, selectors, ports, environment, volumes, etc.
* **Service selector reconstruction** - Rebuilds service selectors from diagram relationships
* **Multi-document support** - Exports multiple resources in a single YAML file

## Resource to Icon Mapping[​](#resource-to-icon-mapping "Direct link to Resource to Icon Mapping")

The plugin automatically maps common Kubernetes resources to provider icons:

| Resource              | Icon                 |
| --------------------- | -------------------- |
| Deployment            | k8s compute Deploy   |
| StatefulSet           | k8s compute STS      |
| DaemonSet             | k8s compute DS       |
| ReplicaSet            | k8s compute RS       |
| Pod                   | k8s compute Pod      |
| Job                   | k8s compute Job      |
| CronJob               | k8s compute Cronjob  |
| Service               | k8s network SVC      |
| Ingress               | k8s network Ing      |
| NetworkPolicy         | k8s network Netpol   |
| Endpoint              | k8s network Ep       |
| ConfigMap             | k8s podconfig CM     |
| Secret                | k8s podconfig Secret |
| PersistentVolume      | k8s storage PV       |
| PersistentVolumeClaim | k8s storage PVC      |
| StorageClass          | k8s storage SC       |
| Volume                | k8s storage Vol      |
| Role                  | k8s rbac Role        |
| RoleBinding           | k8s rbac RB          |
| ClusterRole           | k8s rbac CRole       |
| ClusterRoleBinding    | k8s rbac CRB         |
| ServiceAccount        | k8s rbac SA          |
| Namespace             | k8s group NS         |

Images that don't match any pattern use a generic container icon for container nodes.

## Configuration[​](#configuration "Direct link to Configuration")

### Custom Resource Mappings[​](#custom-resource-mappings "Direct link to Custom Resource Mappings")

You can customize which icons are used for specific Kubernetes resources. The plugin supports multiple mapping formats and checks them in this priority order:

1. **Resource name** (e.g., `my-custom-app`) - takes precedence
2. **Resource kind** (e.g., `Deployment`, `Service`) - fallback

```
import { Diagram } from "diagrams-js";
import { createKubernetesPlugin } from "@diagrams-js/plugin-kubernetes";

const diagram = Diagram("My K8s Application");

// Create plugin with custom resource mappings
const plugin = createKubernetesPlugin({
  defaultNamespace: "production",
  imageMappings: {
    // 1. Provider icon mapping - use built-in provider icons
    "my-custom-deployment": {
      provider: "onprem",
      type: "compute",
      resource: "Server",
    },
    "company-db": {
      provider: "onprem",
      type: "database",
      resource: "Postgresql",
    },

    // 2. Direct URL string - use a custom image URL
    "my-frontend": "https://example.com/react-icon.png",

    // 3. URL object - same as string but as object
    "my-backend": {
      url: "https://example.com/node-icon.svg",
    },

    // 4. Iconify icon - use icons from Iconify (https://iconify.design/)
    // Format: { iconify: "prefix:name" }
    "custom-app": {
      iconify: "logos:kubernetes",
    },
    "redis-cache": {
      iconify: "logos:redis",
    },
    "docker-service": {
      iconify: "logos:docker",
    },
  },
});

await diagram.registerPlugins([plugin]);
```

#### Iconify Icons[​](#iconify-icons "Direct link to Iconify Icons")

The plugin supports [Iconify](https://iconify.design/) icons, which provides access to 200,000+ open source icons. Use the `{ iconify: "prefix:name" }` format:

* Browse icons at <https://icon-sets.iconify.design/>

* Common prefixes: `logos:` (technology logos), `mdi:` (Material Design), `fluent-emoji:` (emoji)

* Examples:

  <!-- -->

  * `{ iconify: "logos:kubernetes" }` - Kubernetes logo
  * `{ iconify: "logos:redis" }` - Redis logo
  * `{ iconify: "mdi:server" }` - Server icon
  * `{ iconify: "logos:docker" }` - Docker logo

Icons are automatically fetched from the Iconify API and embedded in the diagram.

#### Mapping Priority[​](#mapping-priority "Direct link to Mapping Priority")

The plugin first checks for a mapping by the **resource name**, then falls back to the **resource kind**:

```
# deployment.yaml
apiVersion: apps/v1
kind: Deployment
metadata:
  name: my-api
spec: ...
```

```
// This mapping by RESOURCE NAME takes precedence
imageMappings: {
  "my-api": { iconify: "logos:aws" }  // Shows AWS icon instead of Deployment
}

// This mapping by KIND is the fallback
imageMappings: {
  "Deployment": { iconify: "logos:kubernetes" }  // Used if no "my-api" mapping
}
```

## Examples[​](#examples "Direct link to Examples")

### Visualize a Microservices Architecture[​](#visualize-a-microservices-architecture "Direct link to Visualize a Microservices Architecture")

```
import { Diagram } from "diagrams-js";
import { kubernetesPlugin } from "@diagrams-js/plugin-kubernetes";

const k8sYaml = `
apiVersion: apps/v1
kind: Deployment
metadata:
  name: frontend
  namespace: production
spec:
  replicas: 3
  selector:
    matchLabels:
      app: frontend
  template:
    spec:
      containers:
      - name: frontend
        image: nginx:alpine
        ports:
        - containerPort: 80
---
apiVersion: v1
kind: Service
metadata:
  name: frontend-service
  namespace: production
spec:
  selector:
    app: frontend
  ports:
  - port: 80
---
apiVersion: apps/v1
kind: Deployment
metadata:
  name: api
  namespace: production
spec:
  replicas: 2
  selector:
    matchLabels:
      app: api
  template:
    spec:
      containers:
      - name: api
        image: node:18
        ports:
        - containerPort: 3000
---
apiVersion: v1
kind: Service
metadata:
  name: api-service
  namespace: production
spec:
  selector:
    app: api
  ports:
  - port: 3000
---
apiVersion: apps/v1
kind: StatefulSet
metadata:
  name: postgres
  namespace: production
spec:
  serviceName: postgres
  replicas: 1
  selector:
    matchLabels:
      app: postgres
  template:
    spec:
      containers:
      - name: postgres
        image: postgres:15
`;

const diagram = Diagram("Production Architecture");
await diagram.registerPlugins([kubernetesPlugin]);
await diagram.import(k8sYaml, "kubernetes");

const svg = await diagram.render();
```

### Import Multiple Manifest Files[​](#import-multiple-manifest-files "Direct link to Import Multiple Manifest Files")

Compare staging and production configurations:

```
const stagingManifest = `
apiVersion: apps/v1
kind: Deployment
metadata:
  name: web
  namespace: staging
spec:
  replicas: 1
  template:
    spec:
      containers:
      - name: web
        image: myapp:staging
`;

const productionManifest = `
apiVersion: apps/v1
kind: Deployment
metadata:
  name: web
  namespace: production
spec:
  replicas: 5
  template:
    spec:
      containers:
      - name: web
        image: myapp:latest
`;

const diagram = Diagram("Environment Comparison");
await diagram.registerPlugins([kubernetesPlugin]);

// Each manifest gets its own cluster
await diagram.import([stagingManifest, productionManifest], "kubernetes");
```

### Export with Custom Metadata[​](#export-with-custom-metadata "Direct link to Export with Custom Metadata")

```
import { Diagram, Node } from "diagrams-js";
import { kubernetesPlugin } from "@diagrams-js/plugin-kubernetes";

const diagram = Diagram("Production Stack");

const deployment = diagram.add(Node("api"));
deployment.metadata = {
  kubernetes: {
    kind: "Deployment",
    namespace: "production",
    labels: {
      app: "api",
      tier: "backend",
      env: "production",
    },
    spec: {
      replicas: 5,
      selector: {
        matchLabels: { app: "api" },
      },
      template: {
        spec: {
          containers: [
            {
              name: "api",
              image: "myapp:latest",
              resources: {
                limits: {
                  cpus: "1000m",
                  memory: "512Mi",
                },
                requests: {
                  cpus: "200m",
                  memory: "256Mi",
                },
              },
            },
          ],
        },
      },
    },
  },
};

await diagram.registerPlugins([kubernetesPlugin]);
const k8sYaml = await diagram.export("kubernetes");
```

### Round-trip Conversion[​](#round-trip-conversion "Direct link to Round-trip Conversion")

Import a manifest, modify it, then export back:

```
const diagram = Diagram("Modified Stack");
await diagram.registerPlugins([kubernetesPlugin]);

// Import existing manifest
await diagram.import(existingK8sYaml, "kubernetes");

// Add a new resource
const monitoring = diagram.add(Node("prometheus"));
monitoring.metadata = {
  kubernetes: {
    kind: "Deployment",
    namespace: "monitoring",
    spec: {
      replicas: 1,
      selector: { matchLabels: { app: "prometheus" } },
      template: {
        spec: {
          containers: [
            {
              name: "prometheus",
              image: "prom/prometheus:latest",
              ports: [{ containerPort: 9090 }],
            },
          ],
        },
      },
    },
  },
};

// Export modified configuration
const updatedYaml = await diagram.export("kubernetes");
```

## API Reference[​](#api-reference "Direct link to API Reference")

### `kubernetesPlugin`[​](#kubernetesplugin "Direct link to kubernetesplugin")

A pre-created plugin instance without configuration. This is the recommended way to use the plugin when you don't need custom configuration.

```
import { kubernetesPlugin } from "@diagrams-js/plugin-kubernetes";

// ✅ Use the pre-created instance
await diagram.registerPlugins([kubernetesPlugin]);
```

### `createKubernetesPlugin(config?)`[​](#createkubernetespluginconfig "Direct link to createkubernetespluginconfig")

Factory function for creating a Kubernetes plugin with custom configuration. Use this when you need to customize the plugin behavior.

```
import { createKubernetesPlugin } from "@diagrams-js/plugin-kubernetes";

// ✅ Create plugin with custom configuration
const customPlugin = createKubernetesPlugin({
  defaultNamespace: "production",
  imageMappings: {
    "custom-app": { iconify: "logos:kubernetes" },
  },
});

await diagram.registerPlugins([customPlugin]);
```

**Parameters:**

* `config` (optional): `KubernetesPluginConfig`

  * `defaultNamespace`: Default namespace for exports (default: "default")
  * `imageMappings`: Custom resource to icon mappings (see [Configuration](#configuration) section)

**Returns:** `DiagramsPlugin` - The plugin instance

**Complete Example with All Mapping Types:**

```
const plugin = createKubernetesPlugin({
  defaultNamespace: "production",
  imageMappings: {
    // Provider icons - use built-in diagrams-js icons
    "my-deployment": { provider: "k8s", type: "compute", resource: "Deploy" },
    "my-db": { provider: "k8s", type: "storage", resource: "Sts" },

    // Custom URL - use any image URL
    frontend: "https://example.com/react.png",
    backend: { url: "https://example.com/node.svg" },

    // Iconify icons - 200,000+ icons available
    kubernetes: { iconify: "logos:kubernetes" },
    redis: { iconify: "logos:redis" },
    docker: { iconify: "logos:docker" },
  },
});

await diagram.registerPlugins([plugin]);
```

### Plugin Capabilities[​](#plugin-capabilities "Direct link to Plugin Capabilities")

The plugin provides two capabilities:

#### Importer[​](#importer "Direct link to Importer")

* **Name:** `kubernetes`
* **Extensions:** `.yml`, `.yaml`
* **MIME Types:** `text/yaml`, `application/x-yaml`

#### Exporter[​](#exporter "Direct link to Exporter")

* **Name:** `kubernetes`
* **Extension:** `.yaml`
* **MIME Type:** `text/yaml`

### Exported Types[​](#exported-types "Direct link to Exported Types")

The plugin exports the `ImageMappings` type for TypeScript users:

```
import { createKubernetesPlugin, type ImageMappings } from "@diagrams-js/plugin-kubernetes";

// Type your image mappings for better IDE support and type checking
const mappings: ImageMappings = {
  "my-deployment": { provider: "k8s", type: "compute", resource: "Deploy" },
  "my-app": { iconify: "logos:kubernetes" },
  "custom-resource": "https://example.com/icon.svg",
};

const plugin = createKubernetesPlugin({ imageMappings: mappings });
```

## Best Practices[​](#best-practices "Direct link to Best Practices")

### 1. Use Descriptive Resource Names[​](#1-use-descriptive-resource-names "Direct link to 1. Use Descriptive Resource Names")

Resource names become node labels, so use clear, descriptive names:

```
# ✅ Good
apiVersion: apps/v1
kind: Deployment
metadata:
  name: user-service
spec:
  ...

# ❌ Avoid
apiVersion: apps/v1
kind: Deployment
metadata:
  name: svc1
spec:
  ...
```

### 2. Store Metadata for Round-trip[​](#2-store-metadata-for-round-trip "Direct link to 2. Store Metadata for Round-trip")

When creating nodes programmatically, store Kubernetes metadata to enable export:

```
const node = diagram.add(Node("my-deployment"));
node.metadata = {
  kubernetes: {
    kind: "Deployment",
    namespace: "default",
    spec: {
      replicas: 3,
      selector: { matchLabels: { app: "my-app" } },
      template: {
        spec: {
          containers: [
            {
              name: "app",
              image: "nginx:latest",
              ports: [{ containerPort: 80 }],
            },
          ],
        },
      },
    },
  },
};
```

### 3. Handle Service Selectors[​](#3-handle-service-selectors "Direct link to 3. Handle Service Selectors")

The plugin automatically creates edges when Service selectors match Deployment labels:

```
# Deployment labels
apiVersion: apps/v1
kind: Deployment
metadata:
  name: web
  labels:
    app: web
    tier: frontend

# Service selector matches
apiVersion: v1
kind: Service
metadata:
  name: web-service
spec:
  selector:
    app: web  # Creates edge from service to deployment
  ports:
  - port: 80
```

### 4. Use Namespaces[​](#4-use-namespaces "Direct link to 4. Use Namespaces")

Organize resources with namespaces for better visualization:

```
apiVersion: apps/v1
kind: Deployment
metadata:
  name: api
  namespace: production

apiVersion: apps/v1
kind: Deployment
metadata:
  name: api
  namespace: staging
```

### 5. Multi-document YAML[​](#5-multi-document-yaml "Direct link to 5. Multi-document YAML")

Use `---` separator for multiple resources in a single file:

```
apiVersion: apps/v1
kind: Deployment
metadata:
  name: web
---
apiVersion: v1
kind: Service
metadata:
  name: web-service
---
apiVersion: v1
kind: ConfigMap
metadata:
  name: web-config
```

## Troubleshooting[​](#troubleshooting "Direct link to Troubleshooting")

### Plugin Not Found[​](#plugin-not-found "Direct link to Plugin Not Found")

Make sure to register the plugin before using import/export:

```
// ✅ Correct order
await diagram.registerPlugins([kubernetesPlugin]);
await diagram.import(k8sYaml, "kubernetes");

// ❌ Wrong order
await diagram.import(k8sYaml, "kubernetes"); // Will fail!
await diagram.registerPlugins([kubernetesPlugin]);
```

### Type Errors with Metadata[​](#type-errors-with-metadata "Direct link to Type Errors with Metadata")

The metadata property is now typed as `Record<string, any>`, so you can access it directly without type assertions:

```
node.metadata = {
  kubernetes: { ... }
};
```

### Missing Icons[​](#missing-icons "Direct link to Missing Icons")

The plugin maps common Kubernetes resources to provider icons automatically. For custom resources or when you want specific icons:

1. Check if it matches one of the patterns in the mapping table
2. The plugin will use a generic k8s API icon for unrecognized resources
3. Use custom resource mappings to specify icons:

```
const plugin = createKubernetesPlugin({
  imageMappings: {
    // Option 1: Use a provider icon
    "my-deployment": { provider: "k8s", type: "compute", resource: "Deploy" },

    // Option 2: Use a custom image URL
    "my-app": "https://example.com/icon.svg",

    // Option 3: Use Iconify (200,000+ icons!)
    "custom-app": { iconify: "logos:kubernetes" },
  },
});
```

### Import Fails[​](#import-fails "Direct link to Import Fails")

Ensure your Kubernetes YAML is valid:

```
// Validate before importing
try {
  await diagram.import(k8sYaml, "kubernetes");
} catch (error) {
  console.error("Import failed:", error.message);
}
```

Required fields for a valid Kubernetes resource:

* `apiVersion`
* `kind`
* `metadata.name`

## Runtime Support[​](#runtime-support "Direct link to Runtime Support")

The Kubernetes plugin supports all diagrams-js runtimes:

* **Browser** ✅
* **Node.js** ✅
* **Deno** ✅
* **Bun** ✅

## Further Reading[​](#further-reading "Direct link to Further Reading")

* [Plugin System Overview](/docs/plugins/overview) - Learn about the diagrams-js plugin system
* [Docker Compose Plugin](/docs/plugins/docker-compose) - For Docker Compose import/export
* [Kubernetes Documentation](https://kubernetes.io/docs/) - Official Kubernetes docs


---

# Plugin System Overview

The diagrams-js plugin system allows you to extend the library with custom functionality including:

* **Importers**: Import from external formats ([Docker Compose](/docs/plugins/docker-compose), [Kubernetes](/docs/plugins/kubernetes), etc.)
* **Exporters**: Export to external formats
* **Metadata Providers**: Attach cloud provider metadata (pricing, specs) to nodes
* **Hooks**: Execute custom code at various lifecycle events

## Quick Start[​](#quick-start "Direct link to Quick Start")

### Creating a Simple Plugin[​](#creating-a-simple-plugin "Direct link to Creating a Simple Plugin")

```
// Create a custom exporter plugin
// Note: Use context.lib to access diagrams-js exports instead of importing
const myExporter = {
  name: "my-exporter",
  version: "1.0.0",
  apiVersion: "1.0",
  runtimeSupport: {
    browser: true,
    node: true,
    deno: true,
    bun: true,
  },
  capabilities: [
    {
      type: "exporter",
      name: "my-format",
      extension: ".my",
      mimeType: "text/plain",
      export: async (diagram, context) => {
        // Access library exports via context.lib
        const { Node, Edge } = context.lib;
        return `Diagram: ${diagram.name}`;
      },
    },
  ],
};

// Use the plugin (import only needed for Diagram creation)
import { Diagram } from "diagrams-js";

const diagram = Diagram("My Architecture");

// Register the plugin directly
await diagram.registerPlugins([myExporter]);

// Export to custom format
const result = await diagram.export("my-format");
console.log(result); // "Diagram: My Architecture"
```

### Built-in Plugins[​](#built-in-plugins "Direct link to Built-in Plugins")

Built-in plugins (JSON and SVG) are automatically registered:

```
const diagram = Diagram("My Architecture");

// JSON export/import
const json = await diagram.export("json"); // Works without explicit registration
const json2 = diagram.toJSON(); // Also works

// SVG export/import with embedded metadata
const svg = await diagram.export("svg"); // Works without explicit registration

// Re-import from SVG
const restored = await Diagram.fromSVG(svg);
```

### Using Library Exports in Plugins[​](#using-library-exports-in-plugins "Direct link to Using Library Exports in Plugins")

Plugins should use `context.lib` to access diagrams-js functions instead of importing them. This prevents multiple instances and circular dependencies. The `context.lib` object exports the entire diagrams-js library, so you can access any export including `Node`, `Edge`, `Cluster`, `Custom`, `Iconify`, etc.

```
const myPlugin = {
  name: "my-plugin",
  version: "1.0.0",
  apiVersion: "1.0",
  runtimeSupport: { browser: true, node: true, deno: true, bun: true },
  capabilities: [
    {
      type: "importer",
      name: "my-format",
      extensions: [".my"],
      import: async (source, diagram, context) => {
        // ✅ Good: Use context.lib to access any diagrams-js export
        const { Node, Edge, Cluster, Custom, Iconify } = context.lib;

        // Create nodes
        const node = diagram.add(Node("My Node"));
        const cluster = diagram.cluster("My Cluster");
        cluster.add(Node("Nested Node"));

        // Create Custom nodes with external icons
        const customNode = diagram.add(Custom("Custom Service", "https://example.com/icon.png"));

        // Create Iconify nodes
        const iconifyNode = diagram.add(Iconify("Docker", "logos:docker"));
      },
    },
  ],
};
```

## Plugin Structure[​](#plugin-structure "Direct link to Plugin Structure")

Every plugin must implement the `DiagramsPlugin` interface:

```
interface DiagramsPlugin {
  name: string; // Unique plugin name
  version: string; // Semver version
  apiVersion: "1.0"; // Plugin API version
  runtimeSupport: {
    browser: boolean; // Supports browsers
    node: boolean; // Supports Node.js
    deno: boolean; // Supports Deno
    bun: boolean; // Supports Bun
  };
  dependencies?: string[]; // Names of required plugins
  requiredConfig?: string[]; // Required configuration keys
  capabilities: PluginCapability[];
  initialize?: (config: unknown, context: PluginContext) => Promise<void>;
  destroy?: () => Promise<void>;
}
```

## Capabilities[​](#capabilities "Direct link to Capabilities")

### Importer[​](#importer "Direct link to Importer")

Import diagrams from external formats:

```
// For plugins that need configuration, use a factory function
const createDockerComposePlugin = (config?: { defaultVersion?: string }) => ({
  name: "docker-compose",
  version: "1.0.0",
  apiVersion: "1.0",
  runtimeSupport: { browser: true, node: true, deno: true, bun: true },
  capabilities: [
    {
      type: "importer",
      name: "docker-compose",
      extensions: [".yml", ".yaml"],
      mimeTypes: ["text/yaml"],
      canImport: async (source) => {
        return source.includes("services:");
      },
      import: async (source, diagram, context) => {
        // Use context.loadYaml() - no need to bundle your own parser
        const yaml = await context.loadYaml();
        const compose = yaml.load(source);

        for (const [name, service] of Object.entries(compose.services)) {
          const node = diagram.add(Node(name));
          node.metadata = { image: service.image };
        }
      },
    },
  ],
});

// Usage with factory - call it to get the plugin instance
const diagram = Diagram("My App");
await diagram.registerPlugins([createDockerComposePlugin()]);
// or with config: await diagram.registerPlugins([createDockerComposePlugin({ defaultVersion: "3.9" })]);
await diagram.import(yamlContent, "docker-compose");
```

**Importing Multiple Sources**

When importing an array of strings, each source is placed in its own cluster:

```
// Each compose file gets its own cluster
await diagram.import([compose1, compose2, compose3], "docker-compose");
```

### Exporter[​](#exporter "Direct link to Exporter")

Export diagrams to external formats:

```
// Simple plugin without configuration - use an object directly
const terraformPlugin = {
  name: "terraform",
  version: "1.0.0",
  apiVersion: "1.0",
  runtimeSupport: { browser: true, node: true, deno: true, bun: true },
  capabilities: [
    {
      type: "exporter",
      name: "terraform",
      extension: ".tf",
      mimeType: "text/plain",
      export: async (diagram, context) => {
        let tf = `# Terraform generated from ${diagram.name}\n\n`;

        for (const node of diagram.toJSON().nodes) {
          tf += `resource "aws_instance" "${node.id}" {\n`;
          tf += `  # Configuration...\n`;
          tf += `}\n\n`;
        }

        return tf;
      },
    },
  ],
};

// Usage - pass the plugin instance directly
const diagram = Diagram("My Infrastructure");
await diagram.registerPlugins([terraformPlugin]);
const terraform = await diagram.export("terraform");
```

For YAML export, use `context.loadYaml()`:

```
const kubernetesPlugin = {
  name: "kubernetes",
  version: "1.0.0",
  apiVersion: "1.0",
  runtimeSupport: { browser: true, node: true, deno: true, bun: true },
  capabilities: [
    {
      type: "exporter",
      name: "kubernetes",
      extension: ".yaml",
      mimeType: "text/yaml",
      export: async (diagram, context) => {
        // Use context-provided YAML module
        const yaml = await context.loadYaml();
        const json = diagram.toJSON();

        const manifests = json.nodes.map((node) => ({
          apiVersion: "apps/v1",
          kind: "Deployment",
          metadata: { name: node.label },
          spec: {
            replicas: node.metadata?.replicas || 1,
            template: {
              spec: {
                containers: [{ name: node.label, image: node.metadata?.image }],
              },
            },
          },
        }));

        return yaml.dump(manifests);
      },
    },
  ],
};
```

### Metadata Provider[​](#metadata-provider "Direct link to Metadata Provider")

Attach cloud provider metadata to nodes:

```
const awsMetadataPlugin = {
  name: "aws-metadata",
  version: "1.0.0",
  apiVersion: "1.0",
  runtimeSupport: { browser: true, node: true, deno: true, bun: true },
  capabilities: [
    {
      type: "metadata",
      provider: "aws",
      nodeTypes: ["EC2", "RDS", "Lambda"],
      getMetadata: async (nodeType, config, context) => {
        // Fetch pricing/specs from AWS API
        return {
          provider: "aws",
          specifications: {
            cpu: 4,
            memory: "16GB",
          },
          pricing: {
            hourly: 0.192,
            monthly: 140.16,
          },
        };
      },
    },
  ],
};

// Usage
const diagram = Diagram("My App");
await diagram.registerPlugins([awsMetadataPlugin]);
const ec2 = diagram.add(EC2("Web Server"));

// Attach metadata to all EC2 nodes
await diagram.attachMetadata("aws", "EC2");

// Access metadata
console.log(ec2.metadata.pricing.monthly); // 140.16
```

### Hooks[​](#hooks "Direct link to Hooks")

Execute code at lifecycle events:

```
const loggingPlugin = {
  name: "logging",
  version: "1.0.0",
  apiVersion: "1.0",
  runtimeSupport: { browser: true, node: true, deno: true, bun: true },
  capabilities: [
    {
      type: "hook",
      hooks: [
        {
          event: "before:export",
          handler: async (data, context) => {
            console.log(`Exporting to ${data.format}...`);
            return data;
          },
        },
        {
          event: "after:export",
          handler: async (data, context) => {
            console.log("Export complete!");
            return data;
          },
        },
      ],
    },
  ],
};

await diagram.registerPlugins([loggingPlugin]);
```

#### Available Hook Events[​](#available-hook-events "Direct link to Available Hook Events")

* `before:import` / `after:import` - Import operations
* `before:export` / `after:export` - Export operations
* `before:render` / `after:render` - Rendering
* `after:layout` - After Graphviz produces SVG, before PNG/JPG conversion
* `before:serialize` / `after:deserialize` - JSON serialization
* `node:create` - Node creation
* `edge:create` - Edge creation
* `cluster:create` - Cluster creation
* `metadata:attach` - Metadata attachment

The `after:layout` hook is especially useful for SVG post-processing that should also affect PNG/JPG output. It fires after Graphviz renders the SVG string but before rasterization:

```
{
  event: "after:layout",
  handler: async ({ svg, diagram, format }) => {
    // Modify SVG string before PNG/JPG conversion
    const modified = svg.replace(/stroke="#7b8894"/g, 'stroke="red"');
    return { svg: modified, diagram, format };
  },
}
```

## Plugin Dependencies[​](#plugin-dependencies "Direct link to Plugin Dependencies")

Plugins can declare dependencies on other plugins:

```
const basePlugin = {
  name: "base-plugin",
  version: "1.0.0",
  apiVersion: "1.0",
  runtimeSupport: { browser: true, node: true, deno: true, bun: true },
  capabilities: [
    {
      type: "exporter",
      name: "base-format",
      extension: ".base",
      mimeType: "text/plain",
      export: async () => "Base export",
    },
  ],
};

const advancedPlugin = {
  name: "advanced",
  version: "1.0.0",
  apiVersion: "1.0",
  runtimeSupport: { browser: true, node: true, deno: true, bun: true },
  dependencies: ["base-plugin"], // Depends on base-plugin
  capabilities: [
    {
      type: "exporter",
      name: "advanced-format",
      extension: ".adv",
      mimeType: "text/plain",
      export: async (diagram, context) => {
        // Can access base-plugin's capabilities
        const baseExporter = context.getExporter("base-format");
        const base = await baseExporter.export(diagram, context);
        return `Advanced: ${base}`;
      },
    },
  ],
};

// Register in correct order (dependencies first)
const diagram = Diagram("Test");
await diagram.registerPlugins([basePlugin, advancedPlugin]);
```

## Plugin Context Utilities[​](#plugin-context-utilities "Direct link to Plugin Context Utilities")

The plugin context provides several utility methods to help plugins function without bundling their own dependencies:

### Lazy-Loaded YAML Parser[​](#lazy-loaded-yaml-parser "Direct link to Lazy-Loaded YAML Parser")

Plugins can use `context.loadYaml()` to access a YAML parsing module (js-yaml) without bundling their own parser:

```
const myPlugin = {
  name: "my-yaml-plugin",
  version: "1.0.0",
  apiVersion: "1.0",
  runtimeSupport: { browser: true, node: true, deno: true, bun: true },
  initialize: async (config, context) => {
    // Load the YAML module during initialization
    const yaml = await context.loadYaml();
    // Store it for later use in import/export
    this.yamlModule = yaml;
  },
  capabilities: [
    {
      type: "importer",
      name: "my-format",
      extensions: [".yml", ".yaml"],
      import: async (source, diagram, context) => {
        // Use the pre-loaded YAML module
        const yaml = await context.loadYaml();
        const parsed = yaml.load(source);
        // ... process parsed data
      },
    },
    {
      type: "exporter",
      name: "my-format",
      extension: ".yml",
      mimeType: "text/yaml",
      export: async (diagram, context) => {
        const yaml = await context.loadYaml();
        const data = {
          /* ... */
        };
        return yaml.dump(data);
      },
    },
  ],
};
```

**Benefits:**

* No need to bundle a YAML parser in your plugin
* Consistent YAML parsing across all plugins
* Lazy-loaded only when needed
* Works across all runtimes (browser, Node.js, Deno, Bun)

### Resource Discovery[​](#resource-discovery "Direct link to Resource Discovery")

Plugins can access the resource discovery utility via `context.loadResourcesList()`:

```
const myPlugin = {
  name: "my-plugin",
  version: "1.0.0",
  apiVersion: "1.0",
  runtimeSupport: { browser: true, node: true, deno: true, bun: true },
  initialize: async (config, context) => {
    const resources = await context.loadResourcesList();
    if (resources?.findResource) {
      // Use findResource to dynamically discover provider icons
      const matches = resources.findResource("postgres");
      // matches = [{ provider: "onprem", type: "database", resource: "Postgresql" }, ...]
    }
  },
  // ...
};
```

## Plugin Registry[​](#plugin-registry "Direct link to Plugin Registry")

Access the plugin registry to query capabilities:

```
const diagram = Diagram("Test");

await diagram.registerPlugins([myPlugin]);

// List all capabilities
const caps = diagram.registry.listCapabilities();
console.log(caps.importers); // ["docker-compose", ...]
console.log(caps.exporters); // ["terraform", "json", ...]

// Get specific plugin
const importer = diagram.registry.getImporter("docker-compose");
const exporter = diagram.registry.getExporter("terraform");
const provider = diagram.registry.getMetadataProvider("aws");

// List all registered plugins
const plugins = diagram.registry.listPlugins();
```

## Sharing Plugin Registries[​](#sharing-plugin-registries "Direct link to Sharing Plugin Registries")

You can share a plugin registry across multiple diagrams:

```
import { createPluginRegistry } from "diagrams-js";

// Create a shared registry
const sharedRegistry = createPluginRegistry();

// Register plugins once
await sharedRegistry.register(dockerComposePlugin);
await sharedRegistry.register(terraformPlugin);

// Use in multiple diagrams
const diagram1 = Diagram("App 1", { pluginRegistry: sharedRegistry });
const diagram2 = Diagram("App 2", { pluginRegistry: sharedRegistry });

// Note: When using a shared registry, plugins are already registered
// so you don't need to call registerPlugins() again
```

## Best Practices[​](#best-practices "Direct link to Best Practices")

### 1. Name Your Plugin with the `diagrams-js-plugin-` Prefix[​](#1-name-your-plugin-with-the-diagrams-js-plugin--prefix "Direct link to 1-name-your-plugin-with-the-diagrams-js-plugin--prefix")

Use the `diagrams-js-plugin-` prefix (or `@scope/diagrams-js-plugin-` for scoped packages) so the CLI and users can find it:

```
{
  "name": "diagrams-js-plugin-terraform"
}
```

Or with a scope:

```
{
  "name": "@myorg/diagrams-js-plugin-terraform"
}
```

### 2. Add `diagrams-js` to package.json Keywords[​](#2-add-diagrams-js-to-packagejson-keywords "Direct link to 2-add-diagrams-js-to-packagejson-keywords")

Include `diagrams-js` in your `package.json` keywords to make your plugin discoverable on npm:

```
{
  "keywords": ["diagrams-js", "diagrams", "architecture", "plugin", "terraform"]
}
```

### 3. Use Objects for Simple Plugins, Factories for Configurable Ones[​](#3-use-objects-for-simple-plugins-factories-for-configurable-ones "Direct link to 3. Use Objects for Simple Plugins, Factories for Configurable Ones")

If your plugin doesn't need configuration, use a plain object. Use factory functions only when you need to accept configuration:

```
// ✅ Good: Simple plugin without config - use an object
const mySimplePlugin = {
  name: "my-simple-plugin",
  version: "1.0.0",
  apiVersion: "1.0",
  runtimeSupport: { browser: true, node: true, deno: true, bun: true },
  capabilities: [
    // ...
  ],
};

// ✅ Good: Plugin with config - use a factory function
const createMyPlugin = (config: { apiKey: string }) => ({
  name: "my-plugin",
  version: "1.0.0",
  apiVersion: "1.0",
  runtimeSupport: { browser: true, node: true, deno: true, bun: true },
  capabilities: [
    // ... use config.apiKey ...
  ],
});

// Usage: Objects are passed directly
await diagram.registerPlugins([mySimplePlugin]);

// Usage: Factories are called to get the instance
await diagram.registerPlugins([createMyPlugin({ apiKey: "xxx" })]);
```

### 4. Declare Runtime Support[​](#4-declare-runtime-support "Direct link to 4. Declare Runtime Support")

Always declare which runtimes your plugin supports:

```
runtimeSupport: {
  node: true,      // Works in Node.js
  browser: false,  // Doesn't work in browsers (uses fs)
  deno: false,     // Not tested in Deno
  bun: false,      // Not tested in Bun
}
```

### 5. Handle Errors Gracefully[​](#5-handle-errors-gracefully "Direct link to 5. Handle Errors Gracefully")

```
export: async (diagram, context) => {
  try {
    // Export logic
  } catch (error) {
    throw new Error(`Export failed: ${error.message}`);
  }
}
```

### 6. Use Context-Provided Utilities[​](#6-use-context-provided-utilities "Direct link to 6. Use Context-Provided Utilities")

For common needs like YAML parsing, use the utilities provided in the plugin context instead of bundling your own dependencies:

```
// ✅ Good: Use context.loadYaml() - no bundling needed
import: async (source, diagram, context) => {
  const yaml = await context.loadYaml();
  const parsed = yaml.load(source);
  // ...
}

// ❌ Avoid: Bundling your own YAML parser
import: async (source, diagram, context) => {
  const yaml = await import("yaml"); // Adds bundle size
  const parsed = yaml.parse(source);
  // ...
}
```

This approach:

* Reduces plugin bundle size
* Ensures consistent parsing across plugins
* Works across all runtimes automatically

### 7. Validate Configuration[​](#7-validate-configuration "Direct link to 7. Validate Configuration")

Use `requiredConfig` and `initialize` to validate plugin setup:

```
const apiPlugin = () => ({
  name: "api-plugin",
  version: "1.0.0",
  apiVersion: "1.0",
  requiredConfig: ["apiKey", "region"],
  async initialize(config, context) {
    if (!config.apiKey) {
      throw new Error("apiKey is required");
    }
    // Set up API client
  },
  // ...
});

// Usage with config - call factory with config
const diagram = Diagram("Test");
await diagram.registerPlugins([apiPlugin({ apiKey: "xxx", region: "us-west-2" })]);
```

## Examples[​](#examples "Direct link to Examples")

### Complete Docker Compose Plugin[​](#complete-docker-compose-plugin "Direct link to Complete Docker Compose Plugin")

This is a minimal example of a Docker Compose plugin. See the official [Docker Compose Plugin](/docs/plugins/docker-compose) for a complete ready-to-use plugin.

```
const createDockerComposePlugin = () => ({
  name: "docker-compose",
  version: "1.0.0",
  apiVersion: "1.0",
  runtimeSupport: { browser: true, node: true, deno: true, bun: true },
  capabilities: [
    {
      type: "importer",
      name: "docker-compose",
      extensions: [".yml", ".yaml"],
      mimeTypes: ["text/yaml", "application/x-yaml"],
      canImport: async (source) => {
        return source.includes("version:") || source.includes("services:");
      },
      import: async (source, diagram, context) => {
        // Use context.loadYaml() instead of bundling your own parser
        const yaml = await context.loadYaml();
        const compose = yaml.load(source);

        // Create nodes for each service
        for (const [name, service] of Object.entries(compose.services || {})) {
          const node = diagram.add(
            Node(name, {
              shape: "box",
              style: "rounded",
            }),
          );

          node.metadata = {
            compose: {
              image: service.image,
              ports: service.ports,
              environment: service.environment,
            },
          };
        }

        // Create edges for dependencies
        for (const [name, service] of Object.entries(compose.services || {})) {
          if (service.depends_on) {
            const deps = Array.isArray(service.depends_on)
              ? service.depends_on
              : Object.keys(service.depends_on);

            for (const dep of deps) {
              // Find nodes and connect them
              const json = diagram.toJSON();
              const sourceNode = json.nodes.find((n) => n.id === dep);
              const targetNode = json.nodes.find((n) => n.id === name);
              if (sourceNode && targetNode) {
                // Connection logic...
              }
            }
          }
        }
      },
    },
    {
      type: "exporter",
      name: "docker-compose",
      extension: ".yml",
      mimeType: "text/yaml",
      export: async (diagram, context) => {
        // Use context.loadYaml() for consistent YAML serialization
        const yaml = await context.loadYaml();
        const compose = { version: "3.8", services: {} };

        for (const node of diagram.toJSON().nodes) {
          compose.services[node.label] = {
            image: node.metadata?.compose?.image || "nginx:latest",
            // ...
          };
        }

        return yaml.dump(compose);
      },
    },
  ],
});
```

## Next Steps[​](#next-steps "Direct link to Next Steps")

* Try the [Docker Compose Plugin](/docs/plugins/docker-compose) for importing/exporting Docker Compose files
* See [complete examples](/docs/getting-started/examples)
* Check out the [API Reference](/docs/guides/diagram)


---