open-index/open-npm huggingface dataset:
npm package: @nexr-cloud/modeler
Description: Open NEXr Modeler Core Engine - A React component library for cloud architecture diagrams.
Author: NEXr Cloud
Latest version: 0.1.1

# @nexr-cloud/modeler

**The Definitive Engine for Enterprise Cloud Architecture Diagrams.**

`@nexr-cloud/modeler` is a high-fidelity React component library designed specifically for generating and rendering complex, production-ready cloud architecture diagrams. Built with a focus on SAP BTP reference architectures, it provides a structured, JSON-driven way to visualize enterprise ecosystems with 100% consistency.

---

## 🚀 Key Features

- **Enterprise-Grade Rendering**: High-fidelity SVG-based diagrams with support for complex service meshes.
- **Provider-Centric Design**: Native support for SAP BTP architectural patterns, including multi-zone layouts.
- **JSON-Driven**: Entirely state-driven architecture. Define your nodes and connections in JSON, and the modeler handles the rest.
- **Interactive Canvas**: Built-in support for zooming, panning, and high-quality image exports.
- **Dynamic Icons**: Intelligent icon mapping for hundreds of cloud services (SAP, AWS, Azure, GCP).
- **Responsive & Modern**: Optimized for React 18/19 and built with performance in mind.

---

## 📦 Installation

Install the package via your preferred package manager:

```bash
# Using bun (recommended)
bun add @nexr-cloud/modeler

# Using npm
npm install @nexr-cloud/modeler

# Using yarn
yarn add @nexr-cloud/modeler
```

---

## 🛠️ Usage

### 1. Import Styles and Component
Import the core component and its accompanying CSS in your application:

```tsx
import { NexrModeler } from '@nexr-cloud/modeler';
import '@nexr-cloud/modeler/style.css';
```

### 2. Implementation Example
Render a structured SAP BTP architecture by providing a simple JSON definition:

```tsx
import { NexrModeler } from '@nexr-cloud/modeler';

const ArchitecturePreview = () => {
  const architecture = {
    title: "SAP BTP Extension Suite",
    sapLayer: {
      subAccount: {
        leftTop: [
          {
            id: "integration-hub",
            title: "Integration Services",
            nodes: [
              { id: "is-1", text: "Integration Suite", icon: "sap-integration-suite_sd" },
              { id: "am-1", text: "API Management", icon: "sap-api-management_sd" }
            ]
          }
        ]
      }
    },
    connections: [
      { from: "is-1", to: "am-1", label: "OData Integration", type: "thick", semanticType: "positive" }
    ]
  };

  return (
    <div style={{ width: '100%', height: '600px' }}>
      <NexrModeler 
        provider="sap"
        architectureJson={architecture}
      />
    </div>
  );
};
```

---

## 📜 License

Licensed under the **Apache License, Version 2.0**. See the [LICENSE](LICENSE) file for details.

---

## 🌐 Community & Support

<a href="https://nexr.cloud/"><img src="./src/assets/logo.png" width="100" alt="NEXr Cloud" /></a>

- **Website**: [nexr.cloud](https://nexr.cloud)
- **GitHub**: [nexr-cloud/open-modeler](https://github.com/nexr-cloud/open-modeler)

---

&copy; 2026 NEXr Cloud. All rights reserved.