A complete Mingrammer-style cloud architecture diagramming library for JavaScript/TypeScript with D3.js integration
Create professional cloud architecture diagrams with 1,100+ official cloud service icons from AWS, Azure, and GCP. Built with D3.js for interactive, scalable, and beautiful visualizations.
- 🎨 1,100+ Official Icons - AWS, Azure, GCP service icons
- 🔧 Mingrammer-Style API - Familiar Python diagrams syntax for JavaScript
- ⚡ D3.js Powered - Interactive, scalable, and performant
- 📱 Framework Agnostic - Works with React, Vue, Angular, Next.js
- 🎯 TypeScript Ready - Full type definitions included
- 📦 Multiple Formats - UMD, ES Modules, CommonJS
- 🎨 SVG Export - High-quality diagram exports
- 🔄 Real-time Updates - Dynamic diagram modifications
npm install @cloud-diagrams/coreimport {
Diagram,
EC2,
RDS,
Lambda,
CloudDiagramsD3Renderer
} from '@cloud-diagrams/core';
// Create a new diagram
const diagram = new Diagram('My Cloud Architecture');
// Add cloud services
const web = new EC2('Web Server');
const api = new Lambda('API Gateway');
const db = new RDS('Database');
// Build the architecture
diagram
.addNode(web)
.addNode(api)
.addNode(db)
.addEdge(web, api)
.addEdge(api, db);
// Render with D3.js
const renderer = new CloudDiagramsD3Renderer();
renderer.render(diagram, '#diagram-container');<!DOCTYPE html>
<html>
<head>
<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="https://unpkg.com/@cloud-diagrams/core/dist/index.umd.js"></script>
</head>
<body>
<div id="diagram"></div>
<script>
const { Diagram, EC2, S3, CloudDiagramsD3Renderer } = CloudDiagrams;
const diagram = new Diagram('Simple Architecture');
diagram.addNode(new EC2('Web')).addNode(new S3('Storage'));
const renderer = new CloudDiagramsD3Renderer();
renderer.render(diagram, '#diagram');
</script>
</body>
</html>import {
Diagram,
Cluster,
// AWS Services
EC2, S3, Lambda, RDS, VPC,
// Azure Services
VirtualMachine, BlobStorage, FunctionApps,
// GCP Services
ComputeEngine, CloudStorage, CloudFunctions,
CloudDiagramsD3Renderer
} from '@cloud-diagrams/core';
const diagram = new Diagram('Multi-Cloud Architecture');
// AWS Infrastructure
const awsCluster = new Cluster('AWS Region');
const ec2 = new EC2('Web Servers');
const s3 = new S3('Static Assets');
const lambda = new Lambda('API Functions');
const rds = new RDS('Primary DB');
awsCluster.addNode(ec2).addNode(s3).addNode(lambda).addNode(rds);
// Azure Backup
const azureCluster = new Cluster('Azure Backup');
const vm = new VirtualMachine('Backup Server');
const blob = new BlobStorage('Backup Storage');
azureCluster.addNode(vm).addNode(blob);
// GCP Analytics
const gcpCluster = new Cluster('GCP Analytics');
const gce = new ComputeEngine('Analytics Engine');
const gcs = new CloudStorage('Data Lake');
gcpCluster.addNode(gce).addNode(gcs);
// Build the complete architecture
diagram
.addCluster(awsCluster)
.addCluster(azureCluster)
.addCluster(gcpCluster)
.addEdge(ec2, lambda)
.addEdge(lambda, rds)
.addEdge(rds, vm) // Cross-cloud backup
.addEdge(lambda, gce); // Cross-cloud analytics
// Render with custom styling
const renderer = new CloudDiagramsD3Renderer({
width: 1200,
height: 800,
theme: 'professional'
});
renderer.render(diagram, '#architecture-diagram');import React, { useEffect, useRef } from 'react';
import {
Diagram,
EC2,
RDS,
CloudDiagramsD3Renderer
} from '@cloud-diagrams/core';
const ArchitectureDiagram: React.FC = () => {
const containerRef = useRef<HTMLDivElement>(null);
useEffect(() => {
if (!containerRef.current) return;
const diagram = new Diagram('React Architecture');
const web = new EC2('Web Server');
const db = new RDS('Database');
diagram.addNode(web).addNode(db).addEdge(web, db);
const renderer = new CloudDiagramsD3Renderer();
renderer.render(diagram, containerRef.current);
return () => {
// Cleanup on unmount
if (containerRef.current) {
containerRef.current.innerHTML = '';
}
};
}, []);
return (
<div>
<h2>My Cloud Architecture</h2>
<div
ref={containerRef}
style={{ width: '100%', height: '600px', border: '1px solid #ccc' }}
/>
</div>
);
};
export default ArchitectureDiagram;- Compute: EC2, Lambda
- Storage: S3
- Database: RDS, DynamoDB
- Network: VPC, ELB, CloudFront, API Gateway
- Monitoring: CloudWatch
- Messaging: SNS, SQS
- Compute: Virtual Machine, Function Apps, Container Instances, App Service
- Storage: Blob Storage
- Database: SQL Database, Cosmos DB
- Network: Virtual Network, Application Gateway
- Security: Key Vault
- Monitoring: Monitor
- Messaging: Service Bus
- Compute: Compute Engine, Cloud Functions, App Engine, GKE, Cloud Run
- Storage: Cloud Storage
- Database: Cloud SQL, Firestore
- Network: VPC, Load Balancing
- Monitoring: Cloud Monitoring
- Messaging: Pub/Sub
import { SVGExporter } from '@cloud-diagrams/core';
const exporter = new SVGExporter();
const svgString = exporter.export(diagram, {
width: 1200,
height: 800,
format: 'svg'
});
// Download or save the SVG
const blob = new Blob([svgString], { type: 'image/svg+xml' });
const url = URL.createObjectURL(blob);const renderer = new CloudDiagramsD3Renderer({
theme: {
background: '#f8f9fa',
nodeColor: '#ffffff',
edgeColor: '#6c757d',
textColor: '#212529',
clusterColor: '#e9ecef'
},
layout: {
algorithm: 'hierarchical',
spacing: 100,
direction: 'top-to-bottom'
},
animation: {
enabled: true,
duration: 1000,
easing: 'ease-in-out'
}
});Diagram- Main diagram containerNode- Individual service nodesEdge- Connections between nodesCluster- Grouping container for nodesGroup- Logical grouping of elements
CloudDiagramsD3Renderer- D3.js-based interactive renderer
loadAwsIcons()- Load AWS service iconsloadAzureIcons()- Load Azure service iconsloadGcpIcons()- Load GCP service icons
- Size: 253 KB unpacked
- Files: 41 total files
- Dependencies: D3.js v7+
- Node.js: >=16.0.0
- TypeScript: Full support included
We welcome contributions! Please see our Contributing Guide for details.
MIT License - see LICENSE file for details.
- NPM Package: https://www.npmjs.com/package/@cloud-diagrams/core
- GitHub Repository: https://github.com/amaboh/kloud_diagramming
- Documentation: https://github.com/amaboh/kloud_diagramming#readme
- Issues: https://github.com/amaboh/kloud_diagramming/issues
amaboh
- GitHub: @amaboh
- Email: amaboh@github.com
⭐ Star this project if you find it useful!