Add onlineshop example

c4/architecture_examples/onlineshop

@@ -0,0 +1,76 @@
+digraph {
+	graph [fontsize=6]
+	node [fontcolor=white fontsize=6 shape=box style=filled]
+	edge [fontsize=6 labelfontsize=6]
+	compound=true dpi=400
+	"External users
+[Person]
+
+Visitors of the online shop." [fillcolor="#08427B"]
+	"External users
+[Person]
+
+Visitors of the online shop." -> "Shop backend
+[Software System]
+
+The php backend system of the online shop." [label="Makes requests
+[HTTPS]"]
+	"Shop backend
+[Software System]
+
+The php backend system of the online shop." [fillcolor="#1168BD"]
+	"Shop backend
+[Software System]
+
+The php backend system of the online shop." -> "External system
+[Software System]
+
+A example external system" [label="Uses
+[API]"]
+	"Shop backend
+[Software System]
+
+The php backend system of the online shop." -> "Customer management
+[Container]
+
+Management of clients." [lhead="cluster_Shop backend"]
+	subgraph "cluster_Customer management" {
+		label="Customer management [Container]" style=dotted
+	}
+	"Product management
+[Container]
+
+Management of products and catalogs." -> "Product content
+[Component]
+
+Management of product content, e.g. image, price." [lhead="cluster_Product management"]
+	subgraph "cluster_Product management" {
+		label="Product management [Container]" style=dotted
+		"Product content
+[Component]
+
+Management of product content, e.g. image, price." [fillcolor="#85BBF0" style=filled]
+		"Product inventory
+[Component]
+
+Management of stocks and logistic of products." [fillcolor="#85BBF0" style=filled]
+	}
+	subgraph "cluster_Backend database" {
+		label="Backend database [Container]" style=dotted
+	}
+	subgraph "cluster_Shop backend" {
+		label="Shop backend [Software System]" style=dotted
+		"Customer management
+[Container]
+
+Management of clients." [fillcolor="#438DD5" style=filled]
+		"Product management
+[Container]
+
+Management of products and catalogs." [fillcolor="#438DD5" style=filled]
+		"Backend database
+[Container]
+
+Postgres database storing products and customer data." [fillcolor="#438DD5" style=filled]
+	}
+}

c4/architecture_examples/onlineshop.py

@@ -0,0 +1,58 @@
+from c4.architecture import Context, Person, System, Container, Component
+
+online_shop = Context(
+    name='Online shop',
+    description='E commerce online shop.')
+
+external_user = Person(
+    name='External users',
+    description='Visitors of the online shop.')
+
+online_shop.add_person(external_user)
+
+backend = System(
+    name='Shop backend',
+    description='The php backend system of the online shop.'
+)
+
+external_system = System(
+    name='External system',
+    description='A example external system',
+    internal=False
+)
+
+online_shop.add_system(backend)
+
+product_management = Container(
+    name='Product management',
+    description='Management of products and catalogs.')
+
+customer_management = Container(
+    name='Customer management',
+    description='Management of clients.')
+
+db = Container(
+    name='Backend database',
+    description='Postgres database storing products and customer data.')
+
+backend.add_container(customer_management)
+backend.add_container(product_management)
+backend.add_container(db)
+
+product_content = Component(
+    name='Product content',
+    description='Management of product content, e.g. image, price.')
+
+product_inventory = Component(
+    name='Product inventory',
+    description='Management of stocks and logistic of products.')
+
+product_management.add_component(product_content)
+product_management.add_component(product_inventory)
+
+external_user.add_relationship(backend, 'Makes requests', 'HTTPS')
+backend.add_relationship(external_system, 'Uses', 'API')
+
+from c4.graph import c4_graph
+
+c4_graph(online_shop, filename='onlineshop')