FIWARE & SMARTSDK Architecture Diagrams

This repository include a collection of architecture diagrams in PUML and DOT to support the documentation of FIWARE Architecture and SmartSDK Deployment Architecture Pattern patterns.

Type of Diagrams

We basically defined two type of diagrams:

• UML component diagrams to define FIWARE Reference Architecture Patterns, i.e. the logical architecture that depicts the interaction among components through their interfaces/APIs. Such diagrams are encoded using PlantUML Syntax.
• Directed Graphs to describe the Reference Deployment Architecture Pattern as result of the combination of FIWARE Architecture Patterns and Cloud Architecture Patterns. Such diagrams shift the focus from a logical architecture to a physical one (i.e. also covering deployment aspects of the components) and are encoded using DOT Language.

Architecture Patterns are meant to be modular. At such, you can build large patterns by composing smaller ones. See Examples.

Such graphs can be easily rendered online with gravizo or on a linux computer with graphviz. If you use gravizo online rendering, you may need to transcode your DOT or PlantUML and end each line with ;. To avoid doing it manually, you can use the online converter.

Examples

The repository includes several examples, here we discus few ones as guidelines for the for the development of additional examples.

Example of Reference Architecture Pattern

Suppose that you have a pattern that include a FIWARE GE (e.g. ContextBroker) and a SmartSDK GE (e.g. NGSI Timeseries) that are interfaced through a NGSI API.

To specify that a component is FIWARE developed, you can use the following stereotype:

SMARTSDK(timeseries,"NGSI TimeSeries",component)

To specify that a component is SmartSDK developed, you can use the following stereotype:

FIWARE(timeseries,"NGSI TimeSeries",component)

Accordingly:

@startuml;
skinparam componentStyle uml2

!define ICONURL https://raw.githubusercontent.com/smartsdk/architecture-diagrams/smartsdk-template/dist
!includeurl ICONURL/common.puml
!includeurl ICONURL/fiware.puml
!includeurl ICONURL/smartsdk.puml

package "Example of Reference Architecture Pattern" {
	interface NGSI
	FIWARE(ctx,"Context Broker \n - Orion",component)
	SMARTSDK(timeseries,"NGSI TimeSeries",component)
	NGSI -left- ctx
  NGSI -right- timeseries
}
@enduml

Here is an example of resulting graph:

Specific components that are not part of a pattern can be define using the standard PlantUML syntax:

[External Component] -up- NGSI

Here is the complete example:

@startuml;
skinparam componentStyle uml2

!define ICONURL https://raw.githubusercontent.com/smartsdk/architecture-diagrams/smartsdk-template/dist
!includeurl ICONURL/common.puml
!includeurl ICONURL/fiware.puml
!includeurl ICONURL/smartsdk.puml

package "Example of Reference Architecture Pattern" {
	interface NGSI
	FIWARE(ctx,"Context Broker \n - Orion",component)
	SMARTSDK(timeseries,"NGSI TimeSeries",component)
	NGSI -left- ctx
  NGSI -right- timeseries
}

[External Component] -up- NGSI

@enduml

Here is an example of resulting graph:

FIWARE Reference Architecture Pattern for Data Management

This example present the FIWARE Reference Architecture Pattern for Data Management (cf. github code).

@startuml;
skinparam componentStyle uml2

!define ICONURL https://raw.githubusercontent.com/smartsdk/architecture-diagrams/smartsdk-template/dist
!includeurl ICONURL/common.puml
!includeurl ICONURL/fiware.puml
!includeurl ICONURL/smartsdk.puml

package "Data/Context Management Core" {
	interface NGSI
	FIWARE(ctx,"Context Broker \n - Orion",component)
	FIWARE(cep,"CEP \n - Proton",component)
	FIWARE(ckan,"CKAN",component)
	FIWARE(kurento,"Stream Oriented \n- Kurento",component)
	NGSI -left- ctx
	NGSI -up- cep
	NGSI -up- ckan
	NGSI -up- kurento
	package "Cosmos" {
		FIWARE(cygnus,"Cygnus",component)
		FIWARE(bda,"Big Data Analysis",component)
		FIWARE(sth,"STH Comet",component)
		NGSI -up- cygnus
		cygnus -up- bda
		cygnus -up- sth
	}
}
@enduml

Here is an example of resulting graph:

Combining different Architecture Patterns

Combining different PlantUML files representing different Architecture Patterns, its quite easy.

For example the typical Northbound / Southbound FIWARE Reference Architecture, can be obtained by combining the FIWARE Reference Architecture Pattern for Data Management and FIWARE Reference Architecture Pattern for IoT Enablement (cf. github code).

@startuml;
skinparam componentStyle uml2

!define BASEURL https://raw.githubusercontent.com/smartsdk/architecture-diagrams/master
!includeurl BASEURL/data-management/Data-ContextManagement.puml
!includeurl BASEURL/iot-management/IoT-Service-Enablement.puml

@enduml

Here is an example of resulting graph:

Example of SmartSDK Reference Deployment Architecture Pattern: HA Orion

This diagrams need still to be customized.

digraph G {
    rankdir=LR;
    compound=true;
    node [shape="record" style="filled"];
    splines=line;
    Client [fillcolor="aliceblue"];
    subgraph cluster {
      label="Docker Swarm Cluster";
      "Load Balancer" [fillcolor="aliceblue"];
      subgraph cluster_0 {
          label="Orion Context Broker stack";
          Orion1 [fillcolor="aliceblue"];
          Orion2 [fillcolor="aliceblue"];
          Orion3 [fillcolor="aliceblue"];
      }
      subgraph cluster_1 {
          label="MongoDB Replica Set stack";
          Mongo1 [fillcolor="aliceblue"];
          Mongo2 [fillcolor="aliceblue"];
          Mongo3 [fillcolor="aliceblue"];
      }
    }
    Client -> "Load Balancer" [lhead=cluster_0];
    "Load Balancer" -> {Orion1,Orion2,Orion3};
    Orion1 -> Mongo1 [lhead=cluster_1];
    Orion2 -> Mongo1 [lhead=cluster_1];
    Orion3 -> Mongo1 [lhead=cluster_1];
    Mongo1 -> {Mongo2, Mongo3} [dir="both"];
}

To render them using gravizo, it is simple as embedding the code in gravizo path:

https://g.gravizo.com/svg?
digraph G {
    rankdir=LR;
    compound=true;
    node [shape="record" style="filled"];
    splines=line;
    Client [fillcolor="aliceblue"];
    subgraph cluster {
      label="Docker Swarm Cluster";
      "Load Balancer" [fillcolor="aliceblue"];
      subgraph cluster_0 {
          label="Orion Context Broker stack";
          Orion1 [fillcolor="aliceblue"];
          Orion2 [fillcolor="aliceblue"];
          Orion3 [fillcolor="aliceblue"];
      }
      subgraph cluster_1 {
          label="MongoDB Replica Set stack";
          Mongo1 [fillcolor="aliceblue"];
          Mongo2 [fillcolor="aliceblue"];
          Mongo3 [fillcolor="aliceblue"];
      }
    }
    Client -> "Load Balancer" [lhead=cluster_0];
    "Load Balancer" -> {Orion1,Orion2,Orion3};
    Orion1 -> Mongo1 [lhead=cluster_1];
    Orion2 -> Mongo1 [lhead=cluster_1];
    Orion3 -> Mongo1 [lhead=cluster_1];
    Mongo1 -> {Mongo2, Mongo3} [dir="both"];
}

Here is an example of resulting graph: