@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:

# 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:

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:

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 file for details.

🌐 Community & Support

• Website: nexr.cloud
• GitHub: nexr-cloud/open-modeler

© 2026 NEXr Cloud. All rights reserved.