diagrams-js 0.3.0 → 0.3.1

package/README.md

@@ -27,7 +27,7 @@
 
 [![Web Architecture](./docs/static/examples/example3-event-processing.svg)](./docs/static/examples/example3-event-processing.svg)
 
-Check the [examples page](https://diagrams-js.hatemhosny.dev/getting-started/examples) for a full list of examples.
+Check the [examples page](https://diagrams-js.hatemhosny.dev/docs/getting-started/examples) for a full list of examples.
 
 ## Interactive Playground
 
@@ -92,33 +92,32 @@ const svg = await diagram.render();
 📚 **Full documentation**: [https://diagrams-js.hatemhosny.dev](https://diagrams-js.hatemhosny.dev)
 
 - [Getting Started](https://diagrams-js.hatemhosny.dev/docs/getting-started/installation)
-- [API Reference](https://diagrams-js.hatemhosny.dev/docs/api)
-- [Examples](https://diagrams-js.hatemhosny.dev/getting-started/examples)
+- [Examples](https://diagrams-js.hatemhosny.dev/docs/getting-started/examples)
 - [Guides](https://diagrams-js.hatemhosny.dev/docs/guides/diagram)
 - [Providers](https://diagrams-js.hatemhosny.dev/docs/guides/providers)
 - [Playground](https://diagrams-js.hatemhosny.dev/playground)
 
 ## Supported Providers
 
-| Provider                                                                  | Description                              |
-| ------------------------------------------------------------------------- | ---------------------------------------- |
-| [AWS](https://diagrams-js.hatemhosny.dev/doc/nodes/aws)                   | Amazon Web Services nodes                |
-| [Azure](https://diagrams-js.hatemhosny.dev/doc/nodes/azure)               | Microsoft Azure nodes                    |
-| [GCP](https://diagrams-js.hatemhosny.dev/doc/nodes/gcp)                   | Google Cloud Platform nodes              |
-| [Kubernetes](https://diagrams-js.hatemhosny.dev/doc/nodes/k8s)            | Kubernetes nodes                         |
-| [OnPrem](https://diagrams-js.hatemhosny.dev/doc/nodes/onprem)             | On-premises infrastructure nodes         |
-| [AlibabaCloud](https://diagrams-js.hatemhosny.dev/doc/nodes/alibabacloud) | Alibaba Cloud nodes                      |
-| [DigitalOcean](https://diagrams-js.hatemhosny.dev/doc/nodes/digitalocean) | DigitalOcean nodes                       |
-| [Elastic](https://diagrams-js.hatemhosny.dev/doc/nodes/elastic)           | Elastic Stack nodes                      |
-| [Firebase](https://diagrams-js.hatemhosny.dev/doc/nodes/firebase)         | Firebase nodes                           |
-| [Generic](https://diagrams-js.hatemhosny.dev/doc/nodes/generic)           | Generic computing nodes                  |
-| [GIS](https://diagrams-js.hatemhosny.dev/doc/nodes/gis)                   | GIS nodes                                |
-| [IBM](https://diagrams-js.hatemhosny.dev/doc/nodes/ibm)                   | IBM Cloud nodes                          |
-| [OCI](https://diagrams-js.hatemhosny.dev/doc/nodes/oci)                   | Oracle Cloud Infrastructure nodes        |
-| [OpenStack](https://diagrams-js.hatemhosny.dev/doc/nodes/openstack)       | OpenStack nodes                          |
-| [Outscale](https://diagrams-js.hatemhosny.dev/doc/nodes/outscale)         | Outscale nodes                           |
-| [Programming](https://diagrams-js.hatemhosny.dev/doc/nodes/programming)   | Programming language and framework nodes |
-| [SaaS](https://diagrams-js.hatemhosny.dev/doc/nodes/saas)                 | SaaS application nodes                   |
+| Provider                                                                   | Description                              |
+| -------------------------------------------------------------------------- | ---------------------------------------- |
+| [AWS](https://diagrams-js.hatemhosny.dev/docs/nodes/aws)                   | Amazon Web Services nodes                |
+| [Azure](https://diagrams-js.hatemhosny.dev/docs/nodes/azure)               | Microsoft Azure nodes                    |
+| [GCP](https://diagrams-js.hatemhosny.dev/docs/nodes/gcp)                   | Google Cloud Platform nodes              |
+| [Kubernetes](https://diagrams-js.hatemhosny.dev/docs/nodes/k8s)            | Kubernetes nodes                         |
+| [OnPrem](https://diagrams-js.hatemhosny.dev/docs/nodes/onprem)             | On-premises infrastructure nodes         |
+| [AlibabaCloud](https://diagrams-js.hatemhosny.dev/docs/nodes/alibabacloud) | Alibaba Cloud nodes                      |
+| [DigitalOcean](https://diagrams-js.hatemhosny.dev/docs/nodes/digitalocean) | DigitalOcean nodes                       |
+| [Elastic](https://diagrams-js.hatemhosny.dev/docs/nodes/elastic)           | Elastic Stack nodes                      |
+| [Firebase](https://diagrams-js.hatemhosny.dev/docs/nodes/firebase)         | Firebase nodes                           |
+| [Generic](https://diagrams-js.hatemhosny.dev/docs/nodes/generic)           | Generic computing nodes                  |
+| [GIS](https://diagrams-js.hatemhosny.dev/docs/nodes/gis)                   | GIS nodes                                |
+| [IBM](https://diagrams-js.hatemhosny.dev/docs/nodes/ibm)                   | IBM Cloud nodes                          |
+| [OCI](https://diagrams-js.hatemhosny.dev/docs/nodes/oci)                   | Oracle Cloud Infrastructure nodes        |
+| [OpenStack](https://diagrams-js.hatemhosny.dev/docs/nodes/openstack)       | OpenStack nodes                          |
+| [Outscale](https://diagrams-js.hatemhosny.dev/docs/nodes/outscale)         | Outscale nodes                           |
+| [Programming](https://diagrams-js.hatemhosny.dev/docs/nodes/programming)   | Programming language and framework nodes |
+| [SaaS](https://diagrams-js.hatemhosny.dev/docs/nodes/saas)                 | SaaS application nodes                   |
 
 View the [full list](https://diagrams-js.hatemhosny.dev/docs/guides/providers)
 
@@ -150,23 +149,6 @@ vp check
 vp run build
 ```
 
-### Project Structure
-
-```
-diagrams-js/
-├── src/              # Source code
-│   ├── index.ts      # Main exports
-│   ├── Diagram.ts    # Core diagram class
-│   ├── Node.ts       # Base node class
-│   ├── Edge.ts       # Edge/connection class
-│   ├── Cluster.ts    # Cluster/grouping class
-│   └── providers/    # Auto-generated provider classes
-├── resources/        # Icon resources (PNG files)
-├── scripts/          # Build and generation scripts
-├── tests/            # Test files
-└── docs/             # Documentation site
-```
-
 ## Contributing
 
 We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { dump, load } from "js-yaml";
+import { dump, load, loadAll } from "js-yaml";
 
 //#region src/providers/resources-list.d.ts
 declare namespace resources_list_d_exports {
@@ -12,7 +12,7 @@ interface ResourceInfo {
 declare const allResources: ResourceInfo[];
 declare function findResource(query: string): ResourceInfo[];
 declare namespace yaml_d_exports {
-  export { dump, load };
+  export { dump, load, loadAll };
 }
 //#endregion
 //#region src/Cluster.d.ts

package/dist/index.js

@@ -1,4 +1,4 @@
-import{t as e}from"./chunk-WfQuXRBF.js";
+import{t as e}from"data:application/javascript;base64,dmFyIGU9T2JqZWN0LmRlZmluZVByb3BlcnR5LHQ9KHQsbik9PntsZXQgcj17fTtmb3IodmFyIGkgaW4gdCllKHIsaSx7Z2V0OnRbaV0sZW51bWVyYWJsZTohMH0pO3JldHVybiBufHxlKHIsU3ltYm9sLnRvU3RyaW5nVGFnLHt2YWx1ZTpgTW9kdWxlYH0pLHJ9O2V4cG9ydHt0fTs=";
 /*!
 Viz.js 3.25.0
 Copyright (c) Michael Daines

package/dist/providers/yaml.js

@@ -29,7 +29,7 @@ function Ce(e){return typeof e>"u"||e===null}function $e(e){return typeof e=="ob
 `+e.slice(r,u),r=u+1),o=f;return c+=`
 `,e.length-r>n&&o>r?c+=e.slice(r,o)+`
 `+e.slice(o+1):c+=e.slice(r),c.slice(1)}function cr(e){for(var n="",i=0,l,r=0;r<e.length;i>=65536?r+=2:r++)i=M(e,r),l=_[i],!l&&H(i)?(n+=e[r],i>=65536&&(n+=e[r+1])):n+=l||Ji(i);return n}function ar(e,n,i){var l="",r=e.tag,u,o,f;for(u=0,o=i.length;u<o;u+=1)f=i[u],e.replacer&&(f=e.replacer.call(i,String(u),f)),(b(e,n,f,!1,!1)||typeof f>"u"&&b(e,n,null,!1,!1))&&(l!==""&&(l+=","+(e.condenseFlow?"":" ")),l+=e.dump);e.tag=r,e.dump="["+l+"]"}function ve(e,n,i,l){var r="",u=e.tag,o,f,c;for(o=0,f=i.length;o<f;o+=1)c=i[o],e.replacer&&(c=e.replacer.call(i,String(o),c)),(b(e,n+1,c,!0,!0,!1,!0)||typeof c>"u"&&b(e,n+1,null,!0,!0,!1,!0))&&((!l||r!=="")&&(r+=z(e,n)),e.dump&&B===e.dump.charCodeAt(0)?r+="-":r+="- ",r+=e.dump);e.tag=u,e.dump=r||"[]"}function pr(e,n,i){var l="",r=e.tag,u=Object.keys(i),o,f,c,a,t;for(o=0,f=u.length;o<f;o+=1)t="",l!==""&&(t+=", "),e.condenseFlow&&(t+='"'),c=u[o],a=i[c],e.replacer&&(a=e.replacer.call(i,c,a)),b(e,n,c,!1,!1)&&(e.dump.length>1024&&(t+="? "),t+=e.dump+(e.condenseFlow?'"':"")+":"+(e.condenseFlow?"":" "),b(e,n,a,!1,!1)&&(t+=e.dump,l+=t));e.tag=r,e.dump="{"+l+"}"}function tr(e,n,i,l){var r="",u=e.tag,o=Object.keys(i),f,c,a,t,p,d;if(e.sortKeys===!0)o.sort();else if(typeof e.sortKeys=="function")o.sort(e.sortKeys);else if(e.sortKeys)throw new w("sortKeys must be a boolean or a function");for(f=0,c=o.length;f<c;f+=1)d="",(!l||r!=="")&&(d+=z(e,n)),a=o[f],t=i[a],e.replacer&&(t=e.replacer.call(i,a,t)),b(e,n+1,a,!0,!0,!0)&&(p=e.tag!==null&&e.tag!=="?"||e.dump&&e.dump.length>1024,p&&(e.dump&&B===e.dump.charCodeAt(0)?d+="?":d+="? "),d+=e.dump,p&&(d+=z(e,n)),b(e,n+1,t,!0,p)&&(e.dump&&B===e.dump.charCodeAt(0)?d+=":":d+=": ",d+=e.dump,r+=d));e.tag=u,e.dump=r||"{}"}function ye(e,n,i){var l,r,u,o,f,c;for(r=i?e.explicitTypes:e.implicitTypes,u=0,o=r.length;u<o;u+=1)if(f=r[u],(f.instanceOf||f.predicate)&&(!f.instanceOf||typeof n=="object"&&n instanceof f.instanceOf)&&(!f.predicate||f.predicate(n))){if(i?f.multi&&f.representName?e.tag=f.representName(n):e.tag=f.tag:e.tag="?",f.represent){if(c=e.styleMap[f.tag]||f.defaultStyle,Me.call(f.represent)==="[object Function]")l=f.represent(n,c);else if(Ye.call(f.represent,c))l=f.represent[c](n,c);else throw new w("!<"+f.tag+'> tag resolver accepts not "'+c+'" style');e.dump=l}return!0}return!1}function b(e,n,i,l,r,u,o){e.tag=null,e.dump=i,ye(e,i,!1)||ye(e,i,!0);var f=Me.call(e.dump),c=l,a;l&&(l=e.flowLevel<0||e.flowLevel>n);var t=f==="[object Object]"||f==="[object Array]",p,d;if(t&&(p=e.duplicates.indexOf(i),d=p!==-1),(e.tag!==null&&e.tag!=="?"||d||e.indent!==2&&n>0)&&(r=!1),d&&e.usedDuplicates[p])e.dump="*ref_"+p;else{if(t&&d&&!e.usedDuplicates[p]&&(e.usedDuplicates[p]=!0),f==="[object Object]")l&&Object.keys(e.dump).length!==0?(tr(e,n,e.dump,r),d&&(e.dump="&ref_"+p+e.dump)):(pr(e,n,e.dump),d&&(e.dump="&ref_"+p+" "+e.dump));else if(f==="[object Array]")l&&e.dump.length!==0?(e.noArrayIndent&&!o&&n>0?ve(e,n-1,e.dump,r):ve(e,n,e.dump,r),d&&(e.dump="&ref_"+p+e.dump)):(ar(e,n,e.dump),d&&(e.dump="&ref_"+p+" "+e.dump));else if(f==="[object String]")e.tag!=="?"&&ur(e,e.dump,n,u,c);else{if(f==="[object Undefined]")return!1;if(e.skipInvalid)return!1;throw new w("unacceptable kind of an object to dump "+f)}e.tag!==null&&e.tag!=="?"&&(a=encodeURI(e.tag[0]==="!"?e.tag.slice(1):e.tag).replace(/!/g,"%21"),e.tag[0]==="!"?a="!"+a:a.slice(0,18)==="tag:yaml.org,2002:"?a="!!"+a.slice(18):a="!<"+a+">",e.dump=a+" "+e.dump)}return!0}function hr(e,n){var i=[],l=[],r,u;for(ee(e,i,l),r=0,u=l.length;r<u;r+=1)n.duplicates.push(i[l[r]]);n.usedDuplicates=new Array(u)}function ee(e,n,i){var l,r,u;if(e!==null&&typeof e=="object")if(r=n.indexOf(e),r!==-1)i.indexOf(r)===-1&&i.push(r);else if(n.push(e),Array.isArray(e))for(r=0,u=e.length;r<u;r+=1)ee(e[r],n,i);else for(l=Object.keys(e),r=0,u=l.length;r<u;r+=1)ee(e[l[r]],n,i)}function dr(e,n){n=n||{};var i=new nr(n);i.noRefs||hr(e,i);var l=e;return i.replacer&&(l=i.replacer.call({"":l},"",l)),b(i,0,l,!0,!0)?i.dump+`
-`:""}var sr=dr,mr={dump:sr};function oe(e,n){return function(){throw new Error("Function yaml."+e+" is removed in js-yaml 4. Use yaml."+n+" instead, which is now safe by default.")}}var xr=De.load,Ar=De.loadAll,gr=mr.dump;var vr=oe("safeLoad","load"),yr=oe("safeLoadAll","loadAll"),Cr=oe("safeDump","dump");export{gr as dump,xr as load};
+`:""}var sr=dr,mr={dump:sr};function oe(e,n){return function(){throw new Error("Function yaml."+e+" is removed in js-yaml 4. Use yaml."+n+" instead, which is now safe by default.")}}var xr=De.load,gr=De.loadAll,Ar=mr.dump;var vr=oe("safeLoad","load"),yr=oe("safeLoadAll","loadAll"),Cr=oe("safeDump","dump");export{Ar as dump,xr as load,gr as loadAll};
 /*! Bundled license information:
 
 js-yaml/dist/js-yaml.mjs:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "diagrams-js",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "A TypeScript port of the diagrams Python library for drawing cloud system architecture diagrams as code",
   "keywords": [
     "architecture",
@@ -976,7 +976,7 @@
   },
   "scripts": {
     "build": "vp run build:core && vp run build:providers && vp run build:fix",
-    "build:core": "vp pack src/index.ts",
+    "build:core": "vp pack src/index.ts && node scripts/inline-chunks.mjs",
     "build:providers": "node scripts/build-providers.mjs",
     "build:fix": "vp check --fix",
     "dev": "vp build --watch",

package/skills/plugin-kubernetes/SKILL.md

@@ -0,0 +1,673 @@
+---
+name: plugin-kubernetes
+description: >-
+  Import and export Kubernetes YAML manifests with diagrams-js.
+  Convert Kubernetes manifests to architecture diagrams and vice versa.
+type: feature
+library: diagrams-js
+---
+
+# Kubernetes Plugin for diagrams-js
+
+The Kubernetes plugin enables bidirectional conversion between Kubernetes YAML manifests and architecture diagrams.
+
+## When to Use This Skill
+
+Use this skill when you need to:
+
+- Visualize Kubernetes configurations as architecture diagrams
+- Generate Kubernetes manifests from existing diagrams
+- Import multi-resource Kubernetes applications into diagrams
+- Export diagrams to Kubernetes deployment configurations
+- Document container orchestration setups
+
+## Quick Start
+
+### Installation
+
+```bash
+npm install @diagrams-js/plugin-kubernetes
+```
+
+### Import from Kubernetes YAML
+
+```typescript
+import { Diagram } from "diagrams-js";
+import { kubernetesPlugin } from "@diagrams-js/plugin-kubernetes";
+
+const diagram = Diagram("My K8s Application");
+
+// Register the plugin
+await diagram.registerPlugins([kubernetesPlugin]);
+
+// Import from Kubernetes YAML
+const k8sYaml = `
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: web-deployment
+spec:
+  replicas: 3
+  selector:
+    matchLabels:
+      app: web
+  template:
+    spec:
+      containers:
+      - name: web
+        image: nginx:latest
+        ports:
+        - containerPort: 80
+`;
+
+await diagram.import(k8sYaml, "kubernetes");
+
+// Render the diagram
+const svg = await diagram.render();
+```
+
+### Export to Kubernetes YAML
+
+```typescript
+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 }] }],
+        },
+      },
+    },
+  },
+};
+
+// Register plugin and export
+await diagram.registerPlugins([kubernetesPlugin]);
+const k8sYaml = await diagram.export("kubernetes");
+```
+
+## Features
+
+### Import Capabilities
+
+- Parse Kubernetes YAML manifests (single or multi-document)
+- Create nodes for each resource with appropriate Kubernetes icons
+- Support for all common Kubernetes resource types
+- Create edges for service-to-deployment relationships
+- Create clusters for namespaces
+- Store Kubernetes-specific metadata on nodes
+
+### Supported 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 diagrams to Kubernetes YAML format
+- Generate valid Kubernetes manifests
+- Preserve resource configuration (replicas, selectors, ports, etc.)
+- Support for multi-document YAML output
+
+## Configuration
+
+### Custom Resource Mappings
+
+You can customize which icons are used for specific Kubernetes resources:
+
+```typescript
+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",
+    },
+    "my-custom-service": {
+      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",
+    },
+  },
+});
+
+await diagram.registerPlugins([plugin]);
+```
+
+#### Iconify Icons
+
+The plugin supports [Iconify](https://iconify.design/) icons, which provides access to 200,000+ open source icons:
+
+```typescript
+{
+  iconify: "logos:kubernetes"; // Kubernetes logo
+  iconify: "logos:redis"; // Redis logo
+  iconify: "mdi:server"; // Material Design server icon
+}
+```
+
+#### Mapping Priority
+
+The plugin checks mappings by **resource name** first, then falls back to **resource kind**:
+
+```yaml
+# deployment.yaml
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: my-api # Would normally show Deployment icon
+```
+
+```typescript
+// 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
+
+### Visualize a Microservices Architecture
+
+```typescript
+import { Diagram } from "diagrams-js";
+import { kubernetesPlugin } from "@diagrams-js/plugin-kubernetes";
+
+const k8sYaml = `
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: frontend
+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
+spec:
+  selector:
+    app: frontend
+  ports:
+  - port: 80
+---
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: api
+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
+spec:
+  selector:
+    app: api
+  ports:
+  - port: 3000
+---
+apiVersion: apps/v1
+kind: StatefulSet
+metadata:
+  name: postgres
+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
+
+```typescript
+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
+
+```typescript
+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: { cpu: "1000m", memory: "512Mi" },
+                requests: { cpu: "200m", memory: "256Mi" },
+              },
+            },
+          ],
+        },
+      },
+    },
+  },
+};
+
+await diagram.registerPlugins([kubernetesPlugin]);
+const k8sYaml = await diagram.export("kubernetes");
+```
+
+### Round-trip Conversion
+
+```typescript
+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
+
+### `kubernetesPlugin`
+
+Pre-created Kubernetes plugin instance (no configuration needed).
+
+```typescript
+import { kubernetesPlugin } from "@diagrams-js/plugin-kubernetes";
+
+// ✅ Use the pre-created instance
+await diagram.registerPlugins([kubernetesPlugin]);
+```
+
+The plugin provides:
+
+- **Importer**: `name: "kubernetes"`, supports `.yml` and `.yaml` files
+- **Exporter**: `name: "kubernetes"`, exports to `.yaml` format
+
+### `createKubernetesPlugin(config?)`
+
+Factory function for creating a Kubernetes plugin with custom configuration.
+
+```typescript
+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
+
+**Returns:** `DiagramsPlugin` - The plugin instance
+
+### Exported Types
+
+The plugin exports the `ImageMappings` type for TypeScript users:
+
+```typescript
+import { createKubernetesPlugin, type ImageMappings } from "@diagrams-js/plugin-kubernetes";
+
+// Type your image mappings for better IDE support
+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 });
+```
+
+## Runtime Support
+
+- Node.js ✅
+- Browser ✅
+- Deno ✅
+- Bun ✅
+
+## Best Practices
+
+### 1. Use Descriptive Resource Names
+
+Resource names become node labels:
+
+```yaml
+# ✅ Good
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: user-service
+
+# ❌ Avoid
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: svc1
+```
+
+### 2. Store Metadata for Round-trip
+
+When creating nodes programmatically, store Kubernetes metadata:
+
+```typescript
+const node = diagram.add(Node("my-deployment"));
+node.metadata = {
+  kubernetes: {
+    kind: "Deployment",
+    namespace: "default",
+    spec: {
+      replicas: 3,
+      selector: { matchLabels: { app: "my-app" } },
+    },
+  },
+};
+```
+
+### 3. Handle Service Selectors
+
+The plugin automatically creates edges when Service selectors match Deployment labels:
+
+```yaml
+# Deployment labels
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: web
+  labels:
+    app: web
+
+# Service selector matches
+apiVersion: v1
+kind: Service
+metadata:
+  name: web-service
+spec:
+  selector:
+    app: web  # Creates edge from service to deployment
+```
+
+### 4. Use Namespaces
+
+Organize resources with namespaces for better visualization:
+
+```yaml
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: api
+  namespace: production
+
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: api
+  namespace: staging
+```
+
+### 5. Multi-document YAML
+
+Use `---` separator for multiple resources:
+
+```yaml
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: web
+---
+apiVersion: v1
+kind: Service
+metadata:
+  name: web-service
+```
+
+## Troubleshooting
+
+### Plugin Not Found
+
+```typescript
+// Make sure to register the plugin before using import/export
+import { kubernetesPlugin } from "@diagrams-js/plugin-kubernetes";
+
+await diagram.registerPlugins([kubernetesPlugin]);
+```
+
+### Type Errors
+
+The metadata property is typed as `Record<string, any>`:
+
+```typescript
+node.metadata = {
+  kubernetes: { ... }
+};
+```
+
+### Missing Icons
+
+For custom resources or specific icons:
+
+```typescript
+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
+    "custom-app": { iconify: "logos:kubernetes" },
+  },
+});
+```
+
+### Import Fails
+
+Ensure your Kubernetes YAML is valid:
+
+```typescript
+try {
+  await diagram.import(k8sYaml, "kubernetes");
+} catch (error) {
+  console.error("Import failed:", error.message);
+}
+```
+
+Required fields: `apiVersion`, `kind`, `metadata.name`
+
+## Further Reading
+
+- diagrams-js Plugin System: See plugin system documentation
+- diagrams-js Documentation: https://diagrams-js.hatemhosny.dev
+- Kubernetes Documentation: https://kubernetes.io/docs/
+- Iconify Icons: https://iconify.design/

package/dist/chunk-WfQuXRBF.js

@@ -1 +0,0 @@
-var e=Object.defineProperty,t=(t,n)=>{let r={};for(var i in t)e(r,i,{get:t[i],enumerable:!0});return n||e(r,Symbol.toStringTag,{value:`Module`}),r};export{t};