# 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