Sap Essentials Entities

3rd party identity provider / identity management

Preview

Usage

import { Component3rdPartyIdentityProviderIdentityManagement } from '@dinghy/diagrams/entitiesSapEssentials'

<Component3rdPartyIdentityProviderIdentityManagement/>

// or

import { extendStyle } from "@dinghy/base-components";
import { COMPONENT_3RD_PARTY_IDENTITY_PROVIDER_IDENTITY_MANAGEMENT } from '@dinghy/diagrams/entitiesSapEssentials'

<Shape 
  {...props}
  _style={extendStyle(props, COMPONENT_3RD_PARTY_IDENTITY_PROVIDER_IDENTITY_MANAGEMENT)}
  />

Definition

{
  _style: {
    entity: 'shape=image;editableCssRules=.*;verticalLabelPosition=bottom;labelBackgroundColor=default;verticalAlign=top;aspect=fixed;imageAspect=0;image=data:image/svg+xml,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0wLjUgLTAuNSAyOCAyOCIgaGVpZ2h0PSIyOCIgd2lkdGg9IjI4Ij4mI3hhOwkgIDxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+LnN0MCB7IHN0b3AtY29sb3I6IHJnYig5MSwgMTE1LCAxMzkpOyB9IC5zdDEgeyBzdG9wLWNvbG9yOiByZ2IoMzQsIDUzLCA3Mik7IH0gPC9zdHlsZT4mI3hhOwk8ZGVmcz4mI3hhOwkJPGxpbmVhckdyYWRpZW50IGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB5Mj0iMjUuMzA5IiB4Mj0iMjMuNDU0IiB5MT0iMy40NzQiIHgxPSIyLjAzOSIgaWQ9IkEiPiYjeGE7CQkJPHN0b3AgY2xhc3M9InN0MCIvPiYjeGE7CQkJPHN0b3AgY2xhc3M9InN0MSIgb2Zmc2V0PSIxIi8+JiN4YTsJCTwvbGluZWFyR3JhZGllbnQ+JiN4YTsJPC9kZWZzPiYjeGE7CTxwYXRoIGZpbGw9InVybCgjQSkiIGQ9Ik0yMS43NDcgMTMuMmExMS4zNSAxMS4zNSAwIDAgMSA0LjE2NCAzLjk0NWMxLjA1OSAxLjY4IDEuNTg5IDMuNTc5IDEuNTg5IDUuNjk5djMuMTIzYzAgMS4wMjItLjUzIDEuNTM0LTEuNTg5IDEuNTM0SDcuMjgyYy0uNDc1IDAtLjg1OS0uMTQ2LTEuMTUyLS40MzgtLjI5MS0uMjU2LS40MzgtLjYyMS0uNDM4LTEuMDk2di0xLjU4OUgxLjAzNGMtMS4wMjIgMC0xLjUzNC0uNTEyLTEuNTM0LTEuNTM0VjE5LjcyYTcuMjcgNy4yNyAwIDAgMSAxLjI2MS00LjE2NmMuODAzLTEuMjA5IDEuOTIxLTIuMTc1IDMuMjMzLTIuNzkzLS40NjQtLjUyOC0uODE4LTEuMTQzLTEuMDQyLTEuODA5YTYuODggNi44OCAwIDAgMS0uMzMtMi4wODFjMC0uODc3LjE2NS0xLjY4LjQ5NC0yLjQxMWE2LjE3IDYuMTcgMCAwIDEgMS4zMTUtMS45NzNjLjU2OC0uNTczIDEuMjM3LTEuMDM3IDEuOTczLTEuMzY5YTYuMDYgNi4wNiAwIDAgMSAyLjQxMS0uNDkzYy4yNTYgMCAuNDkzLjAxOC43MTIuMDUzYTIuNjUgMi42NSAwIDAgMSAuNzEyLjExQTcuNDEgNy40MSAwIDAgMSAxMi45MjYuMzc3YzEuMTM0LS41ODUgMi4zOTQtLjg4NiAzLjY3LS44NzcgMS4wOTYgMCAyLjEyLjIwMiAzLjA2OC42MDNzMS43NzEuOTY4IDIuNDY1IDEuNjk5Yy42OTQuNjk0IDEuMjQzIDEuNTE1IDEuNjQ1IDIuNDY1LjQwMy45MTIuNjAzIDEuOTE4LjYwMyAzLjAxNC4wMDMgMS4xNTItLjIzOSAyLjI5MS0uNzEyIDMuMzQyLS40MjIgMS4wMDEtMS4wOCAxLjg4NS0xLjkxOCAyLjU3NnpNMTYuNTk0IDIuNjIzYy0xLjMxNSAwLTIuNDI4LjQ1Ni0zLjM0MiAxLjM3MS0uODc3Ljg3Ny0xLjMxNSAxLjk3My0xLjMxNSAzLjI4OHMuNDM4IDIuNDI4IDEuMzE1IDMuMzQyYy45MTIuODc3IDIuMDI3IDEuMzE1IDMuMzQyIDEuMzE1czIuNDExLS40MzggMy4yODgtMS4zMTVhNC41NCA0LjU0IDAgMCAwIDEuMzY5LTMuMzQyYzAtMS4zMTUtLjQ1Ni0yLjQxMS0xLjM2OC0zLjI4OC0uODc3LS45MTQtMS45NzQtMS4zNzEtMy4yODktMS4zNzF6TTguNjUxIDUuNzQ5Yy0uODQyIDAtMS41NzEuMzEtMi4xOTIuOTMxLS41ODQuNTg0LS44NzcgMS4zMTUtLjg3NyAyLjE5MmEzLjA5IDMuMDkgMCAwIDAgLjg3NyAyLjE5MiAzLjA5IDMuMDkgMCAwIDAgMi4xOTIuODc3aDEuNzUzYTcuOTggNy45OCAwIDAgMS0xLjE1LTIuMTM3IDcuNjMgNy42MyAwIDAgMS0uNDM4LTIuNTJ2LS43NzFhNC4wMSA0LjAxIDAgMCAxIC4xNjMtLjc2NmgtLjMyOHpNMi42MjMgMjEuMzExaDMuMjMzYy4zMy0yLjUyMSAxLjM2OS00LjYwMyAzLjEyMy02LjI0N0g3LjI4M2MtMS4zMTUgMC0yLjQzLjQ1Ni0zLjM0NCAxLjM2OS0uODc3Ljg3Ny0xLjMxNSAxLjk3NC0xLjMxNSAzLjI4OXptMjEuNzU0IDEuNTM0YTcuNCA3LjQgMCAwIDAtLjYwMy0zLjAxNGMtLjM4My0uOTIxLS45NDItMS43NTgtMS42NDUtMi40NjVhNy4yNiA3LjI2IDAgMCAwLTIuNDY1LTEuNjk5Yy0uOTcxLS40MDYtMi4wMTUtLjYxMS0zLjA2OC0uNjAzLTEuMDk2IDAtMi4xMTguMjAyLTMuMDY4LjYwMy0uOTEyLjQwMy0xLjczNi45NjgtMi40NjUgMS42OTlhNy42NyA3LjY3IDAgMCAwLTEuNjQ1IDIuNDY1IDcuNCA3LjQgMCAwIDAtLjYwMSAzLjAxNHYxLjUzNGgxNS41NjF6Ii8+JiN4YTs8L3N2Zz4=;strokeColor=none;',
  },
  _original_width: 50,
  _original_height: 50,

}

3rd Party IdP and Protocols

Preview

Usage

import { Component3rdPartyIdpAndProtocols } from '@dinghy/diagrams/entitiesSapEssentials'

<Component3rdPartyIdpAndProtocols/>

// or

import { extendStyle } from "@dinghy/base-components";
import { COMPONENT_3RD_PARTY_IDP_AND_PROTOCOLS } from '@dinghy/diagrams/entitiesSapEssentials'

<Shape 
  {...props}
  _style={extendStyle(props, COMPONENT_3RD_PARTY_IDP_AND_PROTOCOLS)}
  />

Definition

{
  _style: {
    entity: 'rounded=1;whiteSpace=wrap;html=1;arcSize=50;strokeColor=#470BED;fillColor=#f1ecff;fontColor=#470bed;strokeWidth=1.5;fontSize=10;fontStyle=1',
  },
  _width: 1,
  _height: 100,
}

3rd Party IdP and Protocols 2

Preview

Usage

import { Component3rdPartyIdpAndProtocols2 } from '@dinghy/diagrams/entitiesSapEssentials'

<Component3rdPartyIdpAndProtocols2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { COMPONENT_3RD_PARTY_IDP_AND_PROTOCOLS_2 } from '@dinghy/diagrams/entitiesSapEssentials'

<Shape 
  {...props}
  _style={extendStyle(props, COMPONENT_3RD_PARTY_IDP_AND_PROTOCOLS_2)}
  />

Definition

{
  _style: {
    entity: 'text;html=1;align=left;verticalAlign=middle;resizable=1;points=[];autosize=1;strokeColor=none;fillColor=none;fontSize=10;fontColor=#556B82;fontFamily=Helvetica;',
  },
  _width: 3,
  _height: 100,
}

3rd Party IdP and Protocols 3

Preview

Usage

import { Component3rdPartyIdpAndProtocols3 } from '@dinghy/diagrams/entitiesSapEssentials'

<Component3rdPartyIdpAndProtocols3/>

// or

import { extendStyle } from "@dinghy/base-components";
import { COMPONENT_3RD_PARTY_IDP_AND_PROTOCOLS_3 } from '@dinghy/diagrams/entitiesSapEssentials'

<Shape 
  {...props}
  _style={extendStyle(props, COMPONENT_3RD_PARTY_IDP_AND_PROTOCOLS_3)}
  />

Definition

{
  _style: {
    entity: 'endArrow=none;html=1;strokeColor=#188918;bendable=1;rounded=0;endFill=0;endSize=3;strokeWidth=1.5;entryX=0.5;entryY=0;entryDx=0;entryDy=0;dashed=1;',
  },
  _width: 4,
  _height: 100,
}

3rd Party IdP and Protocols 4

Preview

Usage

import { Component3rdPartyIdpAndProtocols4 } from '@dinghy/diagrams/entitiesSapEssentials'

<Component3rdPartyIdpAndProtocols4/>

// or

import { extendStyle } from "@dinghy/base-components";
import { COMPONENT_3RD_PARTY_IDP_AND_PROTOCOLS_4 } from '@dinghy/diagrams/entitiesSapEssentials'

<Shape 
  {...props}
  _style={extendStyle(props, COMPONENT_3RD_PARTY_IDP_AND_PROTOCOLS_4)}
  />

Definition

{
  _style: {
    entity: 'endArrow=none;html=1;strokeColor=#188918;bendable=1;rounded=0;endFill=0;endSize=3;strokeWidth=1.5;dashed=1;sourcePerimeterSpacing=0;targetPerimeterSpacing=10;',
  },
  _width: 5,
  _height: 100,
}

3rd Party IdP and Protocols 5

Preview

Usage

import { Component3rdPartyIdpAndProtocols5 } from '@dinghy/diagrams/entitiesSapEssentials'

<Component3rdPartyIdpAndProtocols5/>

// or

import { extendStyle } from "@dinghy/base-components";
import { COMPONENT_3RD_PARTY_IDP_AND_PROTOCOLS_5 } from '@dinghy/diagrams/entitiesSapEssentials'

<Shape 
  {...props}
  _style={extendStyle(props, COMPONENT_3RD_PARTY_IDP_AND_PROTOCOLS_5)}
  />

Definition

{
  _style: {
    entity: 'endArrow=none;html=1;strokeColor=#470BED;bendable=1;rounded=0;endFill=0;endSize=3;strokeWidth=1.5;entryX=0.5;entryY=0;entryDx=0;entryDy=0;dashed=1;',
  },
  _width: 6,
  _height: 100,
}

3rd Party IdP and Protocols 6

Preview

Usage

import { Component3rdPartyIdpAndProtocols6 } from '@dinghy/diagrams/entitiesSapEssentials'

<Component3rdPartyIdpAndProtocols6/>

// or

import { extendStyle } from "@dinghy/base-components";
import { COMPONENT_3RD_PARTY_IDP_AND_PROTOCOLS_6 } from '@dinghy/diagrams/entitiesSapEssentials'

<Shape 
  {...props}
  _style={extendStyle(props, COMPONENT_3RD_PARTY_IDP_AND_PROTOCOLS_6)}
  />

Definition

{
  _style: {
    entity: 'endArrow=none;html=1;strokeColor=#470BED;bendable=1;rounded=0;endFill=0;endSize=3;strokeWidth=1.5;dashed=1;edgeStyle=elbowEdgeStyle;exitX=0.5;exitY=1;exitDx=0;exitDy=0;',
  },
  _width: 7,
  _height: 100,
}

3rd Party Layer

Preview

Usage

import { Component3rdPartyLayer } from '@dinghy/diagrams/entitiesSapEssentials'

<Component3rdPartyLayer/>

// or

import { extendStyle } from "@dinghy/base-components";
import { COMPONENT_3RD_PARTY_LAYER } from '@dinghy/diagrams/entitiesSapEssentials'

<Shape 
  {...props}
  _style={extendStyle(props, COMPONENT_3RD_PARTY_LAYER)}
  />

Definition

{
  _style: {
    entity: 'rounded=1;whiteSpace=wrap;html=1;strokeColor=#475E75;fillColor=#F5F6F7;arcSize=24;absoluteArcSize=1;imageWidth=64;imageHeight=64;strokeWidth=1.5;verticalAlign=top;align=left;fontSize=16;fontStyle=1;spacingTop=10;spacingLeft=20;',
  },
  _width: 0,
  _height: 440,
}

BTP Base Layer

Preview

Usage

import { BtpBaseLayer } from '@dinghy/diagrams/entitiesSapEssentials'

<BtpBaseLayer/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BTP_BASE_LAYER } from '@dinghy/diagrams/entitiesSapEssentials'

<Shape 
  {...props}
  _style={extendStyle(props, BTP_BASE_LAYER)}
  />

Definition

{
  _style: {
    entity: 'rounded=1;whiteSpace=wrap;html=1;strokeColor=#0070F2;fillColor=#EBF8FF;arcSize=32;absoluteArcSize=1;strokeWidth=1.5;',
  },
  _width: 0,
  _height: 250,
}

Cloud Connector

Preview

Usage

import { CloudConnector } from '@dinghy/diagrams/entitiesSapEssentials'

<CloudConnector/>

// or

import { extendStyle } from "@dinghy/base-components";
import { CLOUD_CONNECTOR } from '@dinghy/diagrams/entitiesSapEssentials'

<Shape 
  {...props}
  _style={extendStyle(props, CLOUD_CONNECTOR)}
  />

Definition

{
  _style: {
    entity: 'rounded=1;whiteSpace=wrap;html=1;strokeColor=#0070F2;strokeWidth=1.5;arcSize=16;fillColor=#FFFFFF;perimeterSpacing=0;absoluteArcSize=1;',
  },
  _width: 0,
  _height: 160,
}

Diagram Title

Preview

Usage

import { DiagramTitle } from '@dinghy/diagrams/entitiesSapEssentials'

<DiagramTitle/>

// or

import { extendStyle } from "@dinghy/base-components";
import { DIAGRAM_TITLE } from '@dinghy/diagrams/entitiesSapEssentials'

<Shape 
  {...props}
  _style={extendStyle(props, DIAGRAM_TITLE)}
  />

Definition

{
  _style: {
    entity: 'text;html=1;align=left;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;fontSize=16;fontColor=#0070F2;fontFamily=Helvetica;fontStyle=1',
  },
  _width: 120,
  _height: 30,
}

Diagram Title 2

Preview

Usage

import { DiagramTitle2 } from '@dinghy/diagrams/entitiesSapEssentials'

<DiagramTitle2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { DIAGRAM_TITLE_2 } from '@dinghy/diagrams/entitiesSapEssentials'

<Shape 
  {...props}
  _style={extendStyle(props, DIAGRAM_TITLE_2)}
  />

Definition

{
  _style: {
    entity: 'text;html=1;align=left;verticalAlign=middle;whiteSpace=wrap;rounded=0;',
  },
  _width: 500,
  _height: 50,
}

HTTPS Protocol

Preview

Usage

import { HttpsProtocol } from '@dinghy/diagrams/entitiesSapEssentials'

<HttpsProtocol/>

// or

import { extendStyle } from "@dinghy/base-components";
import { HTTPS_PROTOCOL } from '@dinghy/diagrams/entitiesSapEssentials'

<Shape 
  {...props}
  _style={extendStyle(props, HTTPS_PROTOCOL)}
  />

Definition

{
  _style: {
    entity: 'rounded=1;whiteSpace=wrap;html=1;arcSize=50;strokeColor=#475E75;fillColor=#F5F6F7;strokeWidth=1.5;fontColor=#475E75;fontStyle=1;fontSize=10;',
  },
  _width: 214,
  _height: 50,
}

HTTPS Protocol 2

Preview

Usage

import { HttpsProtocol2 } from '@dinghy/diagrams/entitiesSapEssentials'

<HttpsProtocol2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { HTTPS_PROTOCOL_2 } from '@dinghy/diagrams/entitiesSapEssentials'

<Shape 
  {...props}
  _style={extendStyle(props, HTTPS_PROTOCOL_2)}
  />

Definition

{
  _style: {
    entity: 'endArrow=none;html=1;strokeColor=#475E75;bendable=1;rounded=0;endFill=0;endSize=4;strokeWidth=1.5;startSize=4;startArrow=none;startFill=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;exitX=0.472;exitY=-0.059;exitDx=0;exitDy=0;exitPerimeter=0;elbow=vertical;edgeStyle=orthogonalEdgeStyle;',
  },
  _width: 1,
  _height: 50,
}

HTTPS Protocol 3

Preview

Usage

import { HttpsProtocol3 } from '@dinghy/diagrams/entitiesSapEssentials'

<HttpsProtocol3/>

// or

import { extendStyle } from "@dinghy/base-components";
import { HTTPS_PROTOCOL_3 } from '@dinghy/diagrams/entitiesSapEssentials'

<Shape 
  {...props}
  _style={extendStyle(props, HTTPS_PROTOCOL_3)}
  />

Definition

{
  _style: {
    entity: 'endArrow=blockThin;html=1;strokeColor=#475E75;bendable=1;rounded=0;endFill=1;endSize=4;strokeWidth=1.5;startSize=4;startArrow=none;startFill=0;exitX=1;exitY=0.5;exitDx=0;exitDy=0;',
  },
  _width: 2,
  _height: 50,
}

Legend

Preview

Usage

import { Legend } from '@dinghy/diagrams/entitiesSapEssentials'

<Legend/>

// or

import { extendStyle } from "@dinghy/base-components";
import { LEGEND } from '@dinghy/diagrams/entitiesSapEssentials'

<Shape 
  {...props}
  _style={extendStyle(props, LEGEND)}
  />

Definition

{
  _style: {
    entity: 'rounded=0;whiteSpace=wrap;html=1;strokeColor=none;strokeWidth=1.5;arcSize=16;fillColor=#F5F6F7;perimeterSpacing=0;imageHeight=24;absoluteArcSize=1;points=[];connectable=0;container=0;align=left;verticalAlign=top;fontSize=12;fontStyle=1;spacingTop=5;spacingLeft=8;',
  },
  _width: 0,
  _height: 125,
}

SAML/OIDC

Preview

Usage

import { SamlOidc } from '@dinghy/diagrams/entitiesSapEssentials'

<SamlOidc/>

// or

import { extendStyle } from "@dinghy/base-components";
import { SAML_OIDC } from '@dinghy/diagrams/entitiesSapEssentials'

<Shape 
  {...props}
  _style={extendStyle(props, SAML_OIDC)}
  />

Definition

{
  _style: {
    entity: 'rounded=1;whiteSpace=wrap;html=1;arcSize=50;strokeColor=#188918;fillColor=#f5fae5;fontColor=#266f3a;strokeWidth=1.5;fontSize=10;fontStyle=1',
  },
  _width: 0,
  _height: 100,
}

SAML/OIDC 2

Preview

Usage

import { SamlOidc2 } from '@dinghy/diagrams/entitiesSapEssentials'

<SamlOidc2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { SAML_OIDC_2 } from '@dinghy/diagrams/entitiesSapEssentials'

<Shape 
  {...props}
  _style={extendStyle(props, SAML_OIDC_2)}
  />

Definition

{
  _style: {
    entity: 'rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fontSize=18;strokeColor=#188918;fontFamily=Helvetica;fontColor=default;targetPerimeterSpacing=15;endSize=4;startSize=4;endArrow=none;endFill=0;strokeWidth=1.5;startArrow=none;startFill=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;',
  },
  _width: 1,
  _height: 100,
}

SAML/OIDC 3

Preview

Usage

import { SamlOidc3 } from '@dinghy/diagrams/entitiesSapEssentials'

<SamlOidc3/>

// or

import { extendStyle } from "@dinghy/base-components";
import { SAML_OIDC_3 } from '@dinghy/diagrams/entitiesSapEssentials'

<Shape 
  {...props}
  _style={extendStyle(props, SAML_OIDC_3)}
  />

Definition

{
  _style: {
    entity: 'edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fontSize=18;strokeColor=#188918;fontFamily=Helvetica;fontColor=default;targetPerimeterSpacing=15;endSize=4;startSize=4;endArrow=blockThin;endFill=1;strokeWidth=1.5;startArrow=none;startFill=0;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;',
  },
  _width: 2,
  _height: 100,
}

SAP On-Premise Solution Box

Preview

Usage

import { SapOnPremiseSolutionBox } from '@dinghy/diagrams/entitiesSapEssentials'

<SapOnPremiseSolutionBox/>

// or

import { extendStyle } from "@dinghy/base-components";
import { SAP_ON_PREMISE_SOLUTION_BOX } from '@dinghy/diagrams/entitiesSapEssentials'

<Shape 
  {...props}
  _style={extendStyle(props, SAP_ON_PREMISE_SOLUTION_BOX)}
  />

Definition

{
  _style: {
    entity: 'strokeColor=#0070F2;shadow=0;strokeWidth=2;rounded=1;absoluteArcSize=1;arcSize=20;',
  },
  _width: 0,
  _height: 70,
}

User and Client

Preview

Usage

import { UserAndClient } from '@dinghy/diagrams/entitiesSapEssentials'

<UserAndClient/>

// or

import { extendStyle } from "@dinghy/base-components";
import { USER_AND_CLIENT } from '@dinghy/diagrams/entitiesSapEssentials'

<Shape 
  {...props}
  _style={extendStyle(props, USER_AND_CLIENT)}
  />

Definition

{
  _style: {
    entity: 'shape=image;editableCssRules=.*;verticalLabelPosition=bottom;labelBackgroundColor=none;verticalAlign=top;aspect=fixed;imageAspect=0;image=data:image/svg+xml,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0wLjUgLTAuNSAyOCAyOCIgaGVpZ2h0PSIyOCIgd2lkdGg9IjI4Ij4mI3hhOwkgIDxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+LnN0MCB7IHN0b3AtY29sb3I6IHJnYig5MSwgMTE1LCAxMzkpOyB9IC5zdDEgeyBzdG9wLWNvbG9yOiByZ2IoMzQsIDUzLCA3Mik7IH0gPC9zdHlsZT4mI3hhOwk8ZGVmcz4mI3hhOwkJPGxpbmVhckdyYWRpZW50IGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB5Mj0iMjUuMzA5IiB4Mj0iMjMuNDU0IiB5MT0iMy40NzQiIHgxPSIyLjAzOSIgaWQ9IkEiPiYjeGE7CQkJPHN0b3AgY2xhc3M9InN0MCIvPiYjeGE7CQkJPHN0b3AgY2xhc3M9InN0MSIgb2Zmc2V0PSIxIi8+JiN4YTsJCTwvbGluZWFyR3JhZGllbnQ+JiN4YTsJPC9kZWZzPiYjeGE7CTxwYXRoIGZpbGw9InVybCgjQSkiIGQ9Ik0tLjUgMTMuNDcyYzAtMS45My4zNzEtMy43MyAxLjExMy01LjQuNzQyLTEuNzA3IDEuNzQ0LTMuMTkyIDMuMDA2LTQuNDUzUzYuMzY1IDEuMzU2IDguMDczLjYxMyAxMS41OTgtLjUgMTMuNTI4LS41czMuNzMuMzcxIDUuNCAxLjExM2MxLjcwNy43NDIgMy4xOTIgMS43NDQgNC40NTMgMy4wMDZzMi4yNjQgMi43NDYgMy4wMDYgNC40NTNjLjc0MiAxLjY3IDEuMTEzIDMuNDcgMS4xMTMgNS40cy0uMzcxIDMuNzQ4LTEuMTEzIDUuNDU1LTEuNzQ0IDMuMTkyLTMuMDA2IDQuNDUzYTE0LjI4IDE0LjI4IDAgMCAxLTQuNDUzIDMuMDA2Yy0xLjY3Ljc0Mi0zLjQ3IDEuMTEzLTUuNCAxLjExM3MtMy43NDgtLjM3MS01LjQ1NS0xLjExM2ExNC4yOCAxNC4yOCAwIDAgMS00LjQ1My0zLjAwNiAxNC4yOCAxNC4yOCAwIDAgMS0zLjAwNi00LjQ1M0MtLjEyOSAxNy4yMi0uNSAxNS40MDItLjUgMTMuNDcyem0xNi44MTEgNC4yMzFhNi42NSA2LjY1IDAgMCAxIDMuMjg0LjgzNWMxLjAwMi41MiAxLjgxOCAxLjI0MyAyLjQ0OSAyLjE3MWExMC4xNCAxMC4xNCAwIDAgMCAxLjk0OC0zLjI4NGMuNDgyLTEuMjI1LjcyNC0yLjU0Mi43MjQtMy45NTIgMC0xLjU1OS0uMjk3LTMuMDA2LS44OTEtNC4zNDItLjU5NC0xLjM3My0xLjM5Mi0yLjU2MS0yLjM5NC0zLjU2M3MtMi4xOS0xLjgtMy41NjMtMi4zOTRjLTEuMzM2LS41OTQtMi43ODMtLjg5MS00LjM0Mi0uODkxcy0zLjAyNC4yOTctNC4zOTguODkxYy0xLjMzNi41OTQtMi41MjQgMS4zOTItMy41NjMgMi4zOTRBMTEuMzUgMTEuMzUgMCAwIDAgMy4xNzQgOS4xM2MtLjU5NCAxLjMzNi0uODkxIDIuNzgzLS44OTEgNC4zNDIgMCAxLjQxLjIyMyAyLjcyOC42NjggMy45NTIuNDgyIDEuMjI1IDEuMTUgMi4zMTkgMi4wMDQgMy4yODQuNjMxLS45MjggMS40NDctMS42NTEgMi40NDktMi4xNzFhNi42NSA2LjY1IDAgMCAxIDMuMjg0LS44MzV6bTIuNzgzLTcuMDE0YTUuNjggNS42OCAwIDAgMS0uNDQ1IDIuMjI3IDUuODcgNS44NyAwIDAgMS0xLjIyNSAxLjc4MWMtLjQ4Mi40ODItMS4wNTguODcyLTEuNzI2IDEuMTY5cy0xLjM5Mi40NDUtMi4xNzEuNDQ1YTUuNjggNS42OCAwIDAgMS0yLjIyNy0uNDQ1IDYuNDQgNi40NCAwIDAgMS0xLjc4MS0xLjE2OSA2LjQ0IDYuNDQgMCAwIDEtMS4xNjktMS43ODEgNS42OCA1LjY4IDAgMCAxLS40NDUtMi4yMjdjMC0uNzc5LjE0OC0xLjUwMy40NDUtMi4xNzFBNi40NCA2LjQ0IDAgMCAxIDkuNTIgNi43MzdhNS44NyA1Ljg3IDAgMCAxIDEuNzgxLTEuMjI1IDUuNjggNS42OCAwIDAgMSAyLjIyNy0uNDQ1Yy43NzkgMCAxLjUwMy4xNDggMi4xNzEuNDQ1czEuMjQzLjcwNSAxLjcyNiAxLjIyNWE1Ljg3IDUuODcgMCAwIDEgMS4yMjUgMS43ODFjLjI5Ny42NjguNDQ1IDEuMzkyLjQ0NSAyLjE3MXptLTIuNzgzIDBjMC0uNzc5LS4yNzgtMS40MjktLjgzNS0xLjk0OC0uNTU3LS41NTctMS4yMDYtLjgzNS0xLjk0OC0uODM1YTIuNzMgMi43MyAwIDAgMC0yLjAwNC44MzVjLS41NTcuNTItLjgzNSAxLjE2OS0uODM1IDEuOTQ4YTIuNzMgMi43MyAwIDAgMCAuODM1IDIuMDA0Yy41NTcuNTIgMS4yMjUuNzc5IDIuMDA0Ljc3OS43NDIgMCAxLjM5Mi0uMjYgMS45NDgtLjc3OWEyLjczIDIuNzMgMCAwIDAgLjgzNS0yLjAwNHpNNy4wNzEgMjIuNjU3Yy44OTEuNjMxIDEuODc0IDEuMTMyIDIuOTUgMS41MDMgMS4xMTMuMzcxIDIuMjgyLjU1NyAzLjUwNy41NTcgMS4xODggMCAyLjMxOS0uMTg2IDMuMzk2LS41NTcgMS4xMTMtLjM3MSAyLjExNS0uODcyIDMuMDA2LTEuNTAzLS4zNzEtLjY2OC0uODkxLTEuMTg4LTEuNTU5LTEuNTU5LS42MzEtLjQwOC0xLjMxNy0uNjEyLTIuMDYtLjYxMmgtNS42MjJjLS43NDIgMC0xLjQ0Ny4yMDQtMi4xMTUuNjEyLS42MzEuMzcxLTEuMTMyLjg5MS0xLjUwMyAxLjU1OXoiLz4mI3hhOzwvc3ZnPg==;fontStyle=0strokeColor=none;',
  },
  _width: 0,
  _height: 115,
}

User and Client 2

Preview

Usage

import { UserAndClient2 } from '@dinghy/diagrams/entitiesSapEssentials'

<UserAndClient2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { USER_AND_CLIENT_2 } from '@dinghy/diagrams/entitiesSapEssentials'

<Shape 
  {...props}
  _style={extendStyle(props, USER_AND_CLIENT_2)}
  />

Definition

{
  _style: {
    entity: 'shape=image;editableCssRules=.*;verticalLabelPosition=bottom;labelBackgroundColor=none;verticalAlign=top;aspect=fixed;imageAspect=0;html=1;image=data:image/svg+xml,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0wLjUgLTAuNSAyOCAyMy4zNDMiIGhlaWdodD0iMjMuMzQzIiB3aWR0aD0iMjgiPiYjeGE7CSAgPHN0eWxlIHR5cGU9InRleHQvY3NzIj4uc3QwIHsgc3RvcC1jb2xvcjogcmdiKDkxLCAxMTUsIDEzOSk7IH0gLnN0MSB7IHN0b3AtY29sb3I6IHJnYigzNCwgNTMsIDcyKTsgfSA8L3N0eWxlPiYjeGE7CTxkZWZzPiYjeGE7CQk8bGluZWFyR3JhZGllbnQgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHkyPSIyNC4yMTciIHgyPSIxOS41NCIgeTE9IjIuODEzIiB4MT0iMi4wMzkiIGlkPSJBIj4mI3hhOwkJCTxzdG9wIGNsYXNzPSJzdDAiLz4mI3hhOwkJCTxzdG9wIGNsYXNzPSJzdDEiIG9mZnNldD0iMSIvPiYjeGE7CQk8L2xpbmVhckdyYWRpZW50PiYjeGE7CTwvZGVmcz4mI3hhOwk8cGF0aCBmaWxsPSJ1cmwoI0EpIiBkPSJNMTMuNTI3IDE4LjE4NnYyLjNoMS4xNWMuNzY4IDAgMS4xNS40MDMgMS4xNSAxLjIwNi4wMDQuMTUyLS4wMjIuMzA0LS4wNzkuNDQ1cy0uMTQxLjI3LS4yNDkuMzc3Yy0uMTgyLjIxNy0uNDU2LjMyOC0uODIyLjMyOEg3LjY2NGMtLjE1Mi4wMDQtLjMwMy0uMDIzLS40NDQtLjA4cy0uMjY5LS4xNDItLjM3Ni0uMjUtLjE5My0uMjM1LS4yNS0uMzc2LS4wODQtLjI5Mi0uMDgtLjQ0NGMwLS4zNjYuMTEtLjY1Ny4zMy0uODc3LjEwNy0uMTA4LjIzNS0uMTkzLjM3Ni0uMjVzLjI5Mi0uMDg0LjQ0NC0uMDhoMy41MDd2LTIuM0gzLjAwN2EzLjUzIDMuNTMgMCAwIDEtMi41MjEtLjk4NyAzLjUzIDMuNTMgMCAwIDEtLjk4NS0yLjUxOVYzLjAwOWMwLS45ODcuMzMtMS44MDkuOTg3LTIuNDY3LjMyNy0uMzM2LjcxOS0uNjAyIDEuMTUyLS43ODJzLjg5OS0uMjY4IDEuMzY4LS4yNmgxOC42ODNBMy4yNSAzLjI1IDAgMCAxIDI0LjE1Ni41NDJjLjY5NC42NTggMS4wNDEgMS40OCAxLjA0MSAyLjQ2NXYyLjM1NmMuMDA0LjE1Mi0uMDIyLjMwNC0uMDc5LjQ0NXMtLjE0MS4yNy0uMjQ5LjM3N2MtLjExNi4xMTItLjI1NC4xOTgtLjQwNC4yNTVzLS4zMTEuMDgyLS40NzIuMDc1Yy0uMTUyLjAwNC0uMzA0LS4wMjMtLjQ0NS0uMDhzLS4yNy0uMTQyLS4zNzctLjI1LS4xOTMtLjIzNi0uMjUtLjM3Ny0uMDg0LS4yOTMtLjA4LS40NDVWMy4wMDljMC0uNzY4LS4zODItMS4xNTItMS4xNS0xLjE1MkgzLjAwN2MtLjc2OCAwLTEuMTUuMzg0LTEuMTUgMS4xNXYxMS42NzJjMCAuNzY2LjM4MiAxLjE1IDEuMTUgMS4xNWgxMS42N2MuNzY4IDAgMS4xNS40MDMgMS4xNSAxLjIwNi4wMDQuMTUyLS4wMjMuMzAzLS4wNzkuNDQ0cy0uMTQxLjI2OS0uMjQ5LjM3NmMtLjE4Mi4yMTktLjQ1Ni4zMy0uODIyLjMzem0xMi44MjItOS4zN2MuNzY2IDAgMS4xNS40MDMgMS4xNSAxLjIwNnYxMS42N2MuMDA0LjE1Mi0uMDIzLjMwNC0uMDguNDQ1cy0uMTQyLjI3LS4yNS4zNzdjLS4xODIuMjE3LS40NTYuMzI4LS44MjIuMzI4aC03LjAxM2MtLjE1Mi4wMDQtLjMwMy0uMDIzLS40NDQtLjA4cy0uMjY5LS4xNDItLjM3Ni0uMjUtLjE5My0uMjM1LS4yNS0uMzc2LS4wODQtLjI5Mi0uMDgtLjQ0NHYtMTEuNjdjMC0uMzY2LjExLS42NTcuMzMtLjg3Ny4xMDctLjEwOC4yMzYtLjE5My4zNzctLjI1cy4yOTMtLjA4NC40NDUtLjA4em0tNS44MDkgMi4zNTZ2OC4xNjNoNC42NTd2LTguMTY0eiIvPiYjeGE7PC9zdmc+;strokeColor=none;',
  },
  _width: 1,
  _height: 115,
}

User and Client 3

Preview

Usage

import { UserAndClient3 } from '@dinghy/diagrams/entitiesSapEssentials'

<UserAndClient3/>

// or

import { extendStyle } from "@dinghy/base-components";
import { USER_AND_CLIENT_3 } from '@dinghy/diagrams/entitiesSapEssentials'

<Shape 
  {...props}
  _style={extendStyle(props, USER_AND_CLIENT_3)}
  />

Definition

{
  _style: {
    entity: 'edgeStyle=none;endArrow=blockThin;verticalAlign=top;labelBackgroundColor=none;endSize=6;html=1;rounded=0;targetPerimeterSpacing=10;sourcePerimeterSpacing=30;endFill=1;strokeColor=#475E75;',
  },
  _width: 2,
  _height: 115,
}

User and Client 4

Preview

Usage

import { UserAndClient4 } from '@dinghy/diagrams/entitiesSapEssentials'

<UserAndClient4/>

// or

import { extendStyle } from "@dinghy/base-components";
import { USER_AND_CLIENT_4 } from '@dinghy/diagrams/entitiesSapEssentials'

<Shape 
  {...props}
  _style={extendStyle(props, USER_AND_CLIENT_4)}
  />

Definition

{
  _style: {
    entity: 'edgeStyle=none;endArrow=blockThin;verticalAlign=top;labelBackgroundColor=none;endSize=6;html=1;rounded=0;targetPerimeterSpacing=10;sourcePerimeterSpacing=10;endFill=1;strokeColor=#475E75;',
  },
  _width: 3,
  _height: 115,
}